/* ─────────────────────────────────────────────────────────────
   nav.css — masthead
   ───────────────────────────────────────────────────────────── */

/* The full-bleed sticky rail. The masthead carries the position and the
   surface; .nav inside it carries the measure, so the paper band spans the
   viewport while the links stay on the page's grid. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background-color 260ms var(--ease),
              border-color 260ms var(--ease);
  border-bottom: 1px solid transparent;
}

/* Transparent over the hero, so the signal field runs uninterrupted to the
   top of the page. It only becomes a surface once content is passing under
   it and the links would otherwise sit on live text. */
.masthead.is-stuck {
  /* Literal rgba, not color-mix. `color-mix(in srgb, <c> 86%, transparent)`
     computes to oklab(0 0 0 / 0) in Chromium — the bar had no surface at all,
     which only became visible once a section under it went dark. */
  background: rgba(247, 243, 236, 0.88);
  border-bottom-color: var(--rule);
}

@supports (backdrop-filter: blur(1px)) {
  .masthead.is-stuck { backdrop-filter: blur(16px) saturate(1.1); }
}

/* The masthead stops being translucent when more contrast is asked for. A
   blurred paper over a moving ground is precisely the surface that made the
   active link fail — the ground darkens as you scroll into the problem band,
   so no ink colour fixes it, only an opaque bar does.

   This lives in nav.css, not with the other prefers-contrast token overrides
   in base.css, because both rules are (0,2,0) and base.css loads first — the
   override there lost on source order and silently did nothing. Component
   overrides belong next to the component. */
@media (prefers-contrast: more) {
  .masthead.is-stuck {
    background: var(--paper);
    backdrop-filter: none;
  }
}

.nav {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;

  /* Inline padding comes from .wrap. Block padding is a token because the
     hero sizes itself against it — see --nav-h in base.css. */
  padding-block: var(--nav-pad);
}

.nav__logo {
  display: block;
  flex: none;
}

/* Sized by HEIGHT, not width: a horizontal lockup has to sit on the same
   optical line as the nav links whatever the viewport does, and the intrinsic
   width/height on the img reserves the right box before it loads.

   max-width: none overrides the global img reset. In the grid the logo sits
   in an `auto` track that the 184px pill and the 44px toggle can squeeze to
   nothing; with max-width: 100% the mark did not overflow, it DISTORTED —
   held at 27px tall and compressed to 61px wide at 390px, and to zero at
   320px, where the brand mark simply was not on the page. */
.nav__logo img {
  height: var(--nav-logo);
  width: auto;
  max-width: none;
}

.nav__logo__mark { display: none; }

/* Left, beside the logo — not centred in the bar. The links already sit in
   the flexible middle track, so this is the justification rather than a
   different grid. margin-inline-start buys separation from the wordmark: the
   grid's own 24px gap put "About" hard against the "l" of "signal", and a nav
   reads as part of the lockup at that distance rather than as a list beside
   it. */
.nav__links {
  display: flex;
  justify-content: flex-start;
  margin-inline-start: clamp(16px, 2.4vw, 40px);
  gap: clamp(18px, 2.6vw, 44px);
}

/* Padding, not type size, buys the hit area: WCAG 2.2 AA wants 24x24 CSS px
   and the bare text box was 23px tall. The underline still measures the text,
   because ::after is pinned to the padding box's bottom edge. */
.nav__links a {
  position: relative;
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  padding: 7px 0 5px;
}

/* Underline grows from the left rather than fading in — reads as
   a deliberate mark being drawn, not a hover state flickering. */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.nav__links a:hover::after { transform: scaleX(1); }

/* The section currently under the reader. Green rather than ink, and always
   drawn: it reports position, it is not a hover state.

   --signal-ink, not --signal. Eucalyptus at this size measured 4.75:1 on paper
   and 3.77:1 once the masthead sticks — the bar is a translucent paper over
   whatever is beneath it, so the ground darkens as you scroll into the problem
   band. That is a 1.4.3 failure on the one link whose job is to tell you where
   you are. Traced across nine scroll positions: ink runs 11.26-14.34, this
   runs 6.1-8.0, Eucalyptus was the only value that dipped. */
/* [aria-current], not [aria-current="true"]. Two different things set this:
   the scrollspy in main.js writes "true" for a section, and the masthead
   writes "page" for the route you are on — which is the correct ARIA value
   and which the "true" selector silently did not match. */
.nav__links a[aria-current] { color: var(--signal-ink); }
.nav__links a[aria-current]::after {
  background: var(--signal-ink);
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 40px);
}

/* ── Mobile ───────────────────────────────────────────────── */
/* place-CONTENT as well as place-items. place-items centres each bar inside
   its row; without place-content the two auto rows STRETCH to fill the 44px
   target, so the declared 6px gap rendered as 19px and the ±3.75px close
   transform could not bring the bars together — the open state drew a ">"
   chevron rather than an "×", which reads as "forward", not "close". */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -11px;      /* keep the glyph optically on the gutter */
  place-items: center;
  place-content: center;
  gap: 9px;
  grid-auto-flow: row;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

@media (max-width: 1180px) {
  .nav__links { gap: 20px; }
  .nav__links a { letter-spacing: 0.1em; }
}

@media (max-width: 900px) {
  /* The demo pill stays in the bar. Hiding it behind the hamburger left the
     mobile fold of a Persuade page with no route to its one conversion — the
     only two visible controls both pointed at an explainer section. */
  /* Four items, three columns, and the links span all of them — so without
     explicit placement the toggle got auto-flowed onto a later row the moment
     the menu opened. Measured: it moved 109px left and 162px down between the
     press that opens it and the press that closes it, which is the one control
     that must not move, because the second press is aimed at where the first
     one was. Every item is placed. */
  .nav { grid-template-columns: auto 1fr auto auto; }

  .nav__logo    { grid-row: 1; grid-column: 1; }
  .nav__actions { grid-row: 1; grid-column: 3; display: flex; }
  .nav__toggle  { grid-row: 1; grid-column: 4; display: grid; }

  .nav__links {
    grid-row: 2;
    grid-column: 1 / -1;
    display: none;
  }

  .nav__actions .btn--pill {
    padding: 11px 16px 11px 20px;
    font-size: 11px;
    letter-spacing: 0.09em;
  }

  .nav__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: 8px;
    /* The desktop bar sets a left margin to hold the links off the wordmark.
       In the dropdown there is no wordmark beside them — they are a stacked
       panel, and they belong on the same gutter as everything else on the
       page. */
    margin-inline-start: 0;
  }

  .nav__links a { letter-spacing: 0.13em; }

  /* Below the width that seats the wordmark, the symbol stands in. The cut is
     at 520 because that is where the 172px lockup, the pill and the toggle
     stop fitting between the gutters. Measured at the tightest supported
     viewport: at 320px the bar ends at 313, with the 27px mark, the 180px
     pill and the 44px toggle all at full size. */
  @media (max-width: 520px) {
    .nav { gap: 14px; }
    .nav__logo__lockup { display: none; }
    .nav__logo__mark   { display: block; }

    .nav__actions .btn--pill { padding: 11px 14px 11px 18px; }
  }

  /* The comment above ("the demo pill stays in the bar") no longer applies
     to the HOMEPAGE at this width: the hero's own actions row now puts an
     identical pill directly in the fold's body below (see hero.css's
     max-width:560px block), so the bar's copy stopped being the only route
     to conversion there and started being a redundant second one sitting
     right above it. Scoped to .nav--home (set in masthead.html) rather
     than every page — About, the blog, etc. have no such replacement in
     their own fold, so the bar's pill is still their only mobile route to
     the demo form. */
  @media (max-width: 560px) {
    .nav--home .nav__actions { display: none; }
    .nav--home { grid-template-columns: auto 1fr auto; }
    .nav--home .nav__toggle { grid-column: 3; }

    /* The 520px rule above swaps the wordmark for the bare symbol because
       the full lockup, the pill and the toggle stop fitting together below
       that width. With the pill gone on the homepage (immediately above),
       that pressure is gone too — the lockup fits the same bar comfortably
       down to 320px, so the home page keeps its full name in the nav where
       every other page still falls back to the mark alone. */
    .nav--home .nav__logo__lockup { display: block; }
    .nav--home .nav__logo__mark { display: none; }
  }

  /* An open panel always needs its own surface — it is over page content by
     definition, whether or not the masthead has stuck yet. */
  .masthead.is-open {
    background: var(--paper);
    border-bottom-color: var(--rule);
  }

  .nav.is-open .nav__links { display: flex; }

  /* Half the distance between the bar centres: (gap 9 + height 1.5) / 2. */
  .nav.is-open .nav__toggle span:first-child { transform: translateY(5.25px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child  { transform: translateY(-5.25px) rotate(-45deg); }
}