/**
 * brand-header.css — the ONE definition of the Top Townie marketing header.
 *
 * Every page under apps/web/public/ links this file and MUST NOT re-declare
 * `.wm`, `.top-nav`, or `.nav-inner` in its own <style> block. A page's inline
 * styles come later in document order and would silently win, which is exactly
 * how the header drifted before this file existed: ten pages at a 40px mark,
 * three preview pages at 36px, and index.html at a third value.
 * `scripts/pipeline/lint-web-brand-header.ts` fails the build if a page
 * re-declares any of them or forgets the link.
 *
 * THE FALLBACKS ARE PERMANENT, and that is a correction. This block used to
 * say they were temporary and that RESTYLE-1 would remove them "as its final
 * step, once no page declares its own :root". That step is unreachable:
 * terms-archive/ and privacy-archive/ are dated copies of the legal documents,
 * kept so a consent receipt links to exactly what a person was shown that day,
 * and they NEVER migrate. Three pages therefore resolve these fallbacks
 * forever (press/index.html joins them until PRESS-1).
 *
 * The consequence is that a fallback VALUE is a live rendering decision, not a
 * transitional placeholder. `.top-nav a:hover` used to fall back to #E8562F,
 * which measures 3.16:1 against the legacy page background #F5EFE2 and fails
 * WCAG SC 1.4.3 for 14px/500 text (#6702). It now falls back to #1D4A82 —
 * 7.79:1 — because changing the value was the ONLY edit that reaches the three
 * pages the migration cannot. A hover colour on shared site chrome is not part
 * of the consent record an archive preserves: the record is the legal document
 * body, and these files' own history shows the chrome was already extracted
 * into this shared, still-evolving stylesheet three times after their date.
 *
 * The original warning still stands where it applies — a fallback on a page
 * that was SUPPOSED to migrate would mask the failure. That is now caught
 * directly instead of by comment: lint-web-brand-tokens.ts fails any page
 * that is unmigrated without being named in the unmigrated baseline.
 *
 * Canonical markup — identical on every page:
 *
 *   <nav><div class="container nav-inner">
 *     <a href="/" class="wm">
 *       <img src="/logo.svg" alt="" />
 *       <span class="mark">Top Townie</span>
 *     </a>
 *     <ul class="top-nav">…</ul>
 *   </div></nav>
 *
 * Depends on these custom properties, supplied by
 * /assets/brand-tokens.css — --color-foreground, --color-muted-fg,
 * --color-primary, --font-sans. Before STYLE-1 they were declared in each
 * page's own :root; that is no longer true, and a page that links this file
 * without brand-tokens.css will render the header uncoloured.
 *
 * Locked decisions (docs/explore/brand-lockup-unification/):
 *   - 24px mark, matching admin and operator exactly.
 *   - No border-radius. The artwork carries its own corner (rx=20 on a 100
 *     viewBox); a CSS radius clips tighter than the drawing and desyncs www
 *     from the consoles.
 *   - Wordmark in mono ink. "Townie" used to be set in --warm, but that orange
 *     was retired as an accent in the 2026-07-14 re-accent and now means
 *     destructive/error on the product surfaces.
 *   - Nav links at 14px, down from 16px. They were sized against a 40px mark;
 *     against a 24px one they out-shouted the wordmark. The consoles run 13px
 *     secondary text against a 17px wordmark (0.76) — against this 19px
 *     wordmark that ratio lands at 14px, so every surface holds one
 *     relationship rather than one absolute size.
 */

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Brand lockup ── */
.wm {
  display: flex;
  align-items: center;
  gap: 8px; /* = --spacing-md on both consoles; kept identical across surfaces */
  text-decoration: none;
  color: var(--color-foreground, #0A1628);
}

.wm img {
  width: 24px;
  height: 24px;
}

.wm .mark {
  /* DELIBERATELY UNTOKENIZED — do not "finish the migration" here. This is the
     literal pre-STYLE-1 stack, and it is the ONE line in this file with no
     var(), so RESTYLE-1's fallback sweep must skip it rather than "fix" it.

     It briefly read var(--font-sans, 'DM Serif Display', Georgia, serif) — a
     SERIF fallback behind a SANS token, so unmigrated pages rendered serif and
     any page that migrated flipped silently to Inter. Reverted, not repaired,
     because there is nothing correct to point it at yet:

       - There is no --font-serif token, and inventing a value here would
         pre-empt a decision that is not this slice's to make. Which serif the
         wordmark uses is still open in
         docs/explore/brand-lockup-unification/decision-sheet.html — all three
         of its options set the wordmark in a serif, and the one it recommends
         (Option 1) keeps DM Serif Display. It is a DIFFERENT record that drops
         DM Serif Display, DM Sans and Caveat as a template tell:
         docs/explore/marketing-site-ia/selected/decisions.md, "Type is Inter
         throughout", speaking for the marketing site. Two live documents
         pointing opposite ways is exactly why this line is not the place to
         settle it.
       - Pointing it at --font-sans is not a no-op either. The STYLE-1 spec
         (docs/superpowers/specs/2026-08-12-style-1-web-token-foundation-design.md
         § 5.1) does say --font-sans collapses --sans and --serif, "Inter
         throughout" — but that is exactly the open question, and resolving it
         by way of a fallback list nobody would read as a decision is the wrong
         place to settle it.

     Whoever closes the lockup decision owns this line: either add the serif
     token and use it, or confirm Inter and set var(--font-sans) with no
     fallback. Until then it stays literal.

     This comment is NOT the guard — a comment protects whoever reads it, not
     whoever edits the line. The guard is
     scripts/pipeline/__tests__/contracts/brand-lockup-parity.test.ts, which
     pins this declaration and fails naming the decision sheet. It is blocking
     at pre-push (run-full-contract-suite.sh stage 1). */
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.1875rem; /* 19px */
  letter-spacing: -.005em;
}

/* ── Nav links ── */
.top-nav {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-nav a {
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  font-size: .875rem; /* 14px */
  color: var(--color-muted-fg, #1C2E44);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
  transition: color .15s;
}

.top-nav a:hover { color: var(--color-primary, #1D4A82); }

.top-nav a.current { color: var(--color-foreground, #0A1628); }

.top-nav a.current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-primary, #1D4A82);
  border-radius: 1px;
}

/* ── Nav CTAs (the `home` variant only) ──
   The two business actions from the selected homepage design. They live in this
   sheet rather than in each page's <style> for the same reason .top-nav does:
   three pages render them, and a per-page copy is exactly how the header
   drifted before this file existed.

   BOTH ARE OUTLINED, and that is deliberate. The homepage already spends its
   one filled navy on "Find it" in the claim box — decisions.md allows exactly
   one filled primary per page. A filled nav CTA would make two, and the nav one
   would win by position while the claim search is the conversion path that
   matters. `.cta-emphasis` separates them by weight instead. */
/* Links and CTAs as one right-hand group, so .nav-inner's space-between puts
   the wordmark left and everything else right — rather than centring the links
   between them, which is what three direct children produce. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cta-outline {
  font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif);
  font-size: .813rem;
  font-weight: 600;
  color: var(--color-primary, #1D4A82);
  border: 1.5px solid var(--color-primary, #1D4A82);
  padding: 7px 15px;
  border-radius: 0; /* square, matching every other action on these pages */
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}

.cta-outline:hover {
  color: var(--color-primary-hover, #123661);
  border-color: var(--color-primary-hover, #123661);
}

.cta-emphasis { font-weight: 700; }

/* A CTA pointing at the page you are already on.
   `.top-nav a.current` has said "you are here" since the header existed, but
   nothing said it for a CTA — so /contact rendered a "Get a demo" button that
   looked live and only reloaded the page. The marker was set correctly and
   styled by nothing, which is a promise of action with no action behind it.
   Muted, no hover shift, default cursor: present so the nav stays complete,
   visibly not the thing to click. */
.nav-ctas a.current {
  color: var(--color-subtle-fg, #6B5E4A);
  /* --color-subtle-fg, NOT --color-border. The first draft used the hairline
     token and dropped this outline from 8.92:1 to 1.23:1. SC 1.4.11 wants 3:1
     for what identifies a control, and its inactive-component exception does
     not apply: this is a real link with a real href that Enter still follows —
     `cursor: default` is styling, not inactivity. At 6.32:1 the button is still
     unmistakably a button, just visibly not the one to press. Text is the same
     token at 6.32:1, which passes AA at 13px/700 (bold under 18.66px is not
     large text). */
  border-color: var(--color-subtle-fg, #6B5E4A);
  cursor: default;
}
.nav-ctas a.current:hover {
  color: var(--color-subtle-fg, #6B5E4A);
  border-color: var(--color-subtle-fg, #6B5E4A);
}

@media (max-width: 540px) {
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .top-nav { gap: 18px; }
  .nav-ctas { flex-wrap: wrap; }
}

/* The `home` nav restacks at 760px, not the shared 540px above.
   WHY IT EXISTS: when this nav carried three links plus the two CTAs its
   .nav-right measured ~487px against marketing's ~165px, and between 541 and
   665px the wordmark wrapped to two lines and butted against the first nav item
   with zero gap, while between 541 and 604px "Get a demo" was clipped up to
   64px past the viewport with `overflow-x: hidden` suppressing the scrollbar.
   Silent, and invisible to a desktop-width review.

   760 rather than 700 because 665px was the wrap point with INTER loaded, and
   Inter arrives via font-display: swap — first paint measures wider, so the
   threshold is picked above the widest fallback rather than the steady state.
   The homepage's own grid breakpoint is chosen the same way.

   NOW CONSERVATIVE BY ABOUT 100px, deliberately left so. The cutover dropped
   Playbook from the nav and .nav-right measures ~401px, so the pressure this
   threshold was tuned against is gone. Lowering it would buy a horizontal nav
   at a few more widths and re-open a defect that took two rounds to find; the
   headroom is worth more than the band. Re-measure before moving it — these
   numbers are from a two-link nav, not the three-link one they describe. */
@media (max-width: 760px) {
  .home-nav .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .home-nav .nav-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .home-nav .nav-ctas { flex-wrap: wrap; }
}

/* The wordmark is two words and must never be two lines — belt to the
   breakpoint's braces, and it costs nothing on any variant. */
.wm .mark { white-space: nowrap; }