/* ============================================================================
   nav.css — the shared site navbar. Source of truth: _partials/nav.html
   ============================================================================

   Self-contained by design. This file is loaded by pages whose own stylesheets
   disagree with the homepage, so it must not depend on anything they define:

   - Tokens are declared locally on #hdr, not read from :root. Page tokens drift
     (briefing.css sets --arc:#5B6CF2, the homepage sets #5B5BF5), so var(--arc)
     would render a different navbar per page.
   - Class names dodge the ones already in use elsewhere: .btn is taken by
     contact.css / quiz.css / results.css, and .mobile-menu by briefing.css and
     accounting.css (where it styles a <details> menu, not an overlay). Hence
     .nav-cta and .nav-mobile.
   - Everything is scoped under #hdr / .nav-mobile. Never a bare `header`
     selector: article mastheads are <header> too, and a bare rule makes them
     sticky over the prose.
*/

#hdr{
  --nv-paper:#FFFFFF;
  --nv-paper-2:#F7F7FA;
  --nv-ink:#07080F;
  --nv-ink-2:#1B1D26;
  --nv-ink-mute:#5A5C66;
  --nv-line:#E5E5EC;
  --nv-bone:#FAF7F2;
  --nv-cta:#5B6CF2;
  --nv-cta-hover:#6E7DF5;
  --nv-cta-active:#4A5BE8;
  --nv-focus:#5B6CF2;

  position:sticky;top:0;z-index:60;background:transparent;
  transition:background .3s,box-shadow .3s;
}
#hdr.stuck{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--nv-line)}
#hdr .nav-in{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1280px;margin:0 auto;padding:24px 40px;transition:padding .3s}
#hdr.stuck .nav-in{padding:15px 40px}

/* Brand wordmark image. Intrinsic 324x77 is set on the <img> so the row reserves
   its box before the asset lands; height drives the size and width:auto holds
   the 4.208 ratio. */
#hdr .nav-logo{display:inline-flex;align-items:center;transition:opacity 180ms cubic-bezier(.2,.7,.2,1)}
#hdr .nav-logo:hover{opacity:.85}
#hdr .nav-logo:focus-visible{outline:2px solid var(--nv-focus);outline-offset:4px;border-radius:2px}
#hdr .nav-logo img{height:22px;width:auto;display:block}

#hdr .nav-links{display:flex;align-items:center;gap:28px;font-size:15px}
#hdr .nav-links a{text-decoration:none}
/* :not(.nav-cta) so the CTA keeps its transform/opacity transition rather than a colour one */
#hdr .nav-links a:not(.nav-cta){color:var(--nv-ink-2);transition:color .2s}
#hdr .nav-links a:not(.nav-cta):hover{color:var(--nv-ink)}

/* ---- CTA (mirrors the homepage .btn/.btn-primary system, renamed to dodge .btn) ---- */
#hdr .nav-cta,.nav-mobile .nav-cta{font-family:"Geist",ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:500;line-height:1;letter-spacing:-.005em;display:inline-flex;align-items:center;gap:.6rem;padding:14px 22px;border-radius:6px;border:1px solid transparent;cursor:pointer;text-decoration:none;background:var(--nv-cta,#5B6CF2);color:var(--nv-bone,#FAF7F2);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 24px -10px rgba(91,108,242,.55);transition:transform 200ms cubic-bezier(.2,.7,.2,1),opacity 200ms cubic-bezier(.2,.7,.2,1),background 200ms}
#hdr .nav-cta:hover,.nav-mobile .nav-cta:hover{transform:translateY(-1px);opacity:.94;background:var(--nv-cta-hover,#6E7DF5)}
#hdr .nav-cta:active,.nav-mobile .nav-cta:active{transform:translateY(0);opacity:1;background:var(--nv-cta-active,#4A5BE8)}
#hdr .nav-cta:focus-visible,.nav-mobile .nav-cta:focus-visible{outline:2px solid var(--nv-focus,#5B6CF2);outline-offset:3px}

/* ---- "Who We Help" dropdown ---- */
#hdr .nav-group{position:relative;display:inline-flex;align-items:center}
#hdr .nav-trig{font-family:"Geist",ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:400;line-height:inherit;color:var(--nv-ink-2);background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
#hdr .nav-trig:hover{color:var(--nv-ink)}
#hdr .nav-trig:focus-visible{outline:2px solid var(--nv-focus);outline-offset:3px;border-radius:2px}
/* Stroked chevron rather than the ▾ glyph: matches the site's arrow weight and round caps, and a
   glyph renders at the mercy of the font. */
#hdr .nav-caret{width:14px;height:14px;flex:0 0 auto;display:block;transition:transform .2s}
#hdr .nav-trig[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}
#hdr .nav-panel{position:absolute;top:100%;left:0;margin-top:10px;min-width:200px;background:var(--nv-paper);border:1px solid var(--nv-line);border-radius:8px;box-shadow:0 12px 30px -12px rgba(7,8,15,.18);padding:8px;z-index:80;display:none;flex-direction:column}
#hdr .nav-group.open .nav-panel{display:flex}
/* Bridges the 10px gap under the trigger: without it the pointer leaves .nav-group on the way
   to the panel and mouseleave shuts the menu before it can be reached. */
#hdr .nav-panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
#hdr .nav-panel a{font-size:14.5px;padding:10px 12px;border-radius:6px;white-space:nowrap;color:var(--nv-ink-2);transition:background .15s}
#hdr .nav-panel a:hover{background:var(--nv-paper-2);color:var(--nv-ink)}
#hdr .nav-panel a:focus-visible{outline:2px solid var(--nv-focus);outline-offset:-2px}

/* ---- burger + mobile overlay ---- */
#hdr .nav-burger{display:none;background:none;border:none;font-size:22px;line-height:1;color:var(--nv-ink);cursor:pointer;padding:0}
#hdr .nav-burger:focus-visible,.nav-mobile .nav-close:focus-visible{outline:2px solid var(--nv-focus,#5B6CF2);outline-offset:3px}
.nav-mobile{display:none}

@media(max-width:960px){
  #hdr .nav-in{padding:20px 24px}
  #hdr.stuck .nav-in{padding:14px 24px}
  #hdr .nav-links{display:none}
  #hdr .nav-burger{display:block}
  .nav-mobile{display:none;position:fixed;inset:0;z-index:70;background:#FFFFFF;padding:90px 32px 40px;flex-direction:column;gap:6px;overflow-y:auto}
  .nav-mobile.open{display:flex}
  .nav-mobile a{font-size:20px;padding:14px 0;border-bottom:1px solid #E5E5EC;color:#07080F;text-decoration:none}
  .nav-mobile .nav-cta{margin-bottom:18px;justify-content:center;color:#FAF7F2;border-bottom:none}
  /* The dropdown stays desktop-only: on mobile the links sit flat under a plain subheading. */
  .nav-mobile .mm-label{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5A5C66;padding:14px 0 2px}
  .nav-mobile a.mm-sub{padding-left:16px}
  /* Centred on mobile: it is the sole closing action under the link list, so a centred
     placement reads as a deliberate footer to the menu rather than a stray left-aligned link. */
  .nav-mobile .nav-speak{border-bottom:none;margin-top:18px;font-size:14px;font-weight:500;color:#5B5BF5;display:inline-flex;align-self:center;align-items:center;gap:8px;transition:gap .2s}
  .nav-mobile .nav-speak:hover{gap:12px}
  .nav-mobile .nav-close{position:absolute;top:24px;right:28px;background:none;border:none;font-size:30px;line-height:1;color:#07080F;cursor:pointer}
}

/* briefing.css offsets `body.briefing-page main` by 68px to clear its OLD position:fixed header.
   The shared nav is position:sticky and sits in normal flow, so that offset is now a dead gap.
   This file is loaded only by pages carrying the shared nav (and after briefing.css), so zeroing
   it here is scoped to exactly those pages; the quiz screens keep briefing.css's offset untouched. */
body.briefing-page main{padding-top:0}

@media(prefers-reduced-motion:reduce){
  #hdr,#hdr .nav-in,#hdr .nav-logo,#hdr .nav-caret,#hdr .nav-panel a,#hdr .nav-cta,.nav-mobile .nav-cta,.nav-mobile .nav-speak{transition:none}
  #hdr .nav-cta:hover,.nav-mobile .nav-cta:hover,#hdr .nav-cta:active,.nav-mobile .nav-cta:active{transform:none}
}