/* Header / navigation — docs/design-system.md §10 */
.nac-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
}
.nac-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nac-space-6) var(--nac-space-8);
}
.nac-logo { color: var(--nac-white); text-decoration: none; }
/* PHASE 2.2 FIX (docs/phase-2-2-visual-parity-report.md §A): was a single
   1.1rem line — the approved mockup shows a large, bold, stacked two-line
   wordmark. Sized to sit comfortably alongside the nav without overpowering
   it, uppercase per the mockup's block-letter treatment. */
.nac-logo__line { display: block; font: var(--nac-fw-black) 1.35rem var(--nac-font-display); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; }

.nac-nav__list {
  display: flex;
  gap: var(--nac-space-8);
  list-style: none;
  margin: 0; padding: 0;
}
/* V2 (approved-homepage parity): nav links get breathing room and an
 * accent underline on hover/current, per Reference/approved-homepage.png
 * (the reference marks the active item with a short warm underline). */
/* H-D2V-R2 §2: nav labels rendered too heavy — they were set to
   --nac-fw-bold (500), contradicting the documented "Archivo 200 → nav"
   intent (functions.php). Dropped to --nac-fw-regular (200), a real
   self-hosted Archivo face (no synthetic bold), matching the lighter nav
   weight in Reference/approved-homepage.png. */
.nac-nav__list a {
  position: relative;
  color: var(--nac-white);
  text-decoration: none;
  font: var(--nac-fw-regular) var(--nac-fs-body) var(--nac-font-display);
  padding-bottom: var(--nac-space-1);
}
.nac-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: auto; bottom: -2px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--nac-pink);
  transition: width var(--nac-duration-fast) var(--nac-ease-standard);
}
.nac-nav__list a:hover::after,
.nac-nav__list .current-menu-item a::after { width: 100%; }
.nac-header__actions { display: flex; gap: var(--nac-space-3); }
.nac-nav__icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  display: grid; place-items: center;
  color: var(--nac-white);
  transition: background var(--nac-duration-fast) var(--nac-ease-standard);
}
.nac-nav__icon-btn:hover { background: rgba(255,255,255,0.16); }

/* PHASE 2.2 FIX (live-verification pass): no base rule ever hid this button
   on desktop -- only the max-width:1023px query below set it to
   display:grid, and with no opposing default it rendered on EVERY width,
   so the hamburger icon sat next to the full desktop nav at 1024px+.
   Confirmed live via a same-origin iframe breakpoint probe (real window
   resize isn't available in this sandbox) at 1050px width. */
/* H-D2V: the reference shows the menu button alongside the desktop nav;
 * it opens the same (real) mobile menu — a functional control, not a fake. */
.nac-nav__mobile-toggle { display: grid; }

/* H-D2V-R2 §3: right-side drawer replaces the old full-width top bar
   (.nac-mobile-menu[data-open] absolute top:100% left/right:0). The drawer is
   a fixed off-canvas panel anchored to the right; navigation.js toggles the
   [hidden] attribute, injects a backdrop, traps focus, locks body scroll, and
   restores focus to the toggle on close. No duplicate nav IDs are introduced
   (the same single #nac-mobile-menu is restyled). */
.nac-mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  /* H-D2V-R3 §1: 320–360px drawer, capped to the viewport on small screens. */
  width: min(340px, 90vw);
  height: 100dvh;
  background: rgba(12, 16, 26, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.5);
  padding: calc(var(--nac-space-8) + 12px) var(--nac-space-6) var(--nac-space-8);
  z-index: 210;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@supports not (backdrop-filter: blur(1px)) {
  .nac-mobile-menu { background: #0c101a; }
}
.nac-mobile-menu[hidden] { display: none; }
/* H-D2V-R3 §1: hard-scope + reset ALL list/menu/item/anchor styling INSIDE the
   drawer so the desktop primary-nav flex rules (.nac-nav__list{display:flex})
   and any WordPress .menu/.menu-item defaults cannot leak in — the Safari
   defect was links staying in a horizontal row, "Plan a Crawl" wrapping one
   word per line, and links spilling past the right edge. Force a plain
   vertical block stack; each anchor is a full-width row that never wraps
   word-by-word. Whichever container wp_nav_menu emits (.nac-mobile-menu__list,
   a bare <ul>, or a .menu) is covered. */
.nac-mobile-menu ul,
.nac-mobile-menu .menu,
.nac-mobile-menu__list {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nac-mobile-menu li,
.nac-mobile-menu__list > li {
  display: block;
  width: 100%;
  float: none;
  margin: 0 0 var(--nac-space-4);
}
.nac-mobile-menu li:last-child { margin-bottom: 0; }
.nac-mobile-menu a,
.nac-mobile-menu__list a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--nac-white);
  text-decoration: none;
  font: var(--nac-fw-regular) 1.15rem var(--nac-font-display);
  padding: var(--nac-space-2) 0;
}
.nac-mobile-menu__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--nac-white);
  display: grid; place-items: center;
  cursor: pointer;
}
.nac-mobile-menu__close:hover { background: rgba(255, 255, 255, 0.16); }
/* Backdrop element created by navigation.js when the drawer opens. */
.nac-menu-backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 9, 18, 0.62);
  border: 0; padding: 0; margin: 0;
  z-index: 200;
  cursor: pointer;
}
/* Body scroll lock while the drawer is open (navigation.js toggles). */
body.nac-menu-open { overflow: hidden; }

@media (max-width: 1023px) {
  .nac-nav { display: none; }
  .nac-nav__mobile-toggle { display: grid; }
}