/* ============================================================================
   SpinUp Forge — shared masthead (single source of truth)
   ----------------------------------------------------------------------------
   Linked by EVERY page as the canonical sticky header. Do NOT inline
   `header.site …` rules in a page's <style> — `tools/check-header.sh` fails
   the build if any page re-inlines header CSS (that drift is what broke the
   mobile header + nav once before).

   Depends on each page's inline :root for the colour tokens
   (--ink / --ember / --bone). The mobile dropdown gutter is hardcoded (24px)
   on purpose: --gutter is not defined on every page.

   All selectors are scoped under `header.site` so they never touch the
   footer brand/wordmark, which intentionally keep their own page-inline rules.
   ============================================================================ */

/* masthead shell — sticky at every width (no mobile override) */
header.site{
  position:sticky; top:0; z-index:100;
  padding:16px 0 14px;
  background:var(--ink); color:var(--bone);
  border-bottom:1px solid rgba(244,241,234,0.12);
}
header.site .wrap{ max-width:1120px; }            /* header is wider than the article body */

/* row: brand left, nav right */
header.site .nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; position:relative;                     /* containing block for the mobile dropdown */
}

/* brand lockup */
header.site .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
header.site .brand svg.mark{ width:32px; height:32px; flex:0 0 auto; }
header.site .brand svg g{ fill:var(--bone); }      /* bone-recoloured compression mark */
header.site .brand .wordmark{
  font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:600;
  font-size:20px; color:var(--bone); letter-spacing:-0.01em;
  border-bottom:1.5px solid var(--ember); padding-bottom:2px; line-height:1;
}

/* primary nav — desktop */
header.site .nav-links{ display:flex; gap:24px; align-items:center; }
header.site .nav-links a{
  text-decoration:none; font-family:'Inter',sans-serif;
  font-size:13.5px; font-weight:500; color:var(--bone);
  padding:10px 2px; border-bottom:1.5px solid transparent;
  min-height:44px; display:inline-flex; align-items:center;
}
header.site .nav-links a:hover{ border-bottom-color:var(--ember); }

/* mobile toggle — CSS checkbox-hack. The inline <script> only CLOSES the menu
   on link-tap and reflects aria-expanded; OPENING is pure CSS below. */
header.site #nav-toggle{ position:absolute; left:-9999px; }
header.site .hamburger-btn{
  display:none; width:44px; height:44px;
  align-items:center; justify-content:center; cursor:pointer;
  background:transparent; border:none; color:var(--bone);
}
header.site .hamburger-btn svg{ width:24px; height:24px; }

@media (max-width:760px){
  header.site .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink);
    padding:8px 24px 20px;
    border-bottom:1px solid rgba(244,241,234,0.12);
    max-height:0; overflow:hidden;
    transition:max-height 220ms ease;
    z-index:50;
  }
  header.site .nav-links a{ padding:14px 0; border-bottom:1px solid rgba(244,241,234,0.12); min-height:48px; }
  header.site .nav-links a:last-child{ border-bottom:none; }
  header.site .hamburger-btn{ display:inline-flex; }
  /* `.nav-links` is nested in `.nav`, so the combinator must be `+ .nav .nav-links`,
     NOT `~ .nav-links` (the bug that left the homepage menu unable to open). */
  header.site #nav-toggle:checked + .nav .nav-links{ max-height:480px; }
}

@media (prefers-reduced-motion: reduce){
  header.site .nav-links{ transition:none; }
}