/* nav-unify.css — canonical full site header + mobile menu + premium footer for
   the static marketing/legal pages. Injected by applyFullSiteHeader() in
   src/server/app.ts so every non-homepage marketing/legal page ships the SAME
   navigation as landing.html (Solutions dropdown, Pricing, Compare, Demo, theme
   toggle, Sign in, CTA, mobile hamburger) plus the full premium footer.

   The homepage header lives in landing.html and is styled by the landing-*.css
   bundle scoped to `body.qf-wft.landing-v2`. Those pages don't carry that body
   class, so this file re-expresses the SAME design token-first (theme-aware via
   style.css :root / html[data-theme="light"]) and unscoped by body — the
   .site-header / .nav-dd / .site-mobile-menu / .premium-footer classes are
   unique to this injected chrome, so unscoped rules are safe. */

/* ───────────────────────── Header shell ───────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  padding: 12px 20px 0;
  background: transparent;
}
.site-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 52px;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .site-header-inner {
  box-shadow: 0 1px 0 var(--border), 0 6px 20px rgba(10, 37, 64, 0.06);
}

/* Brand */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 19px;
  text-decoration: none;
  white-space: nowrap;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-logo .qf-brand-mark {
  display: block;
  width: auto;
  height: 30px;
  transform-origin: center;
  transition: transform 0.18s ease;
}
.site-brand:hover .qf-brand-mark,
.site-brand:focus-visible .qf-brand-mark {
  transform: scale(1.08);
}

/* Primary nav */
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav a,
.site-actions .signin {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-actions .signin:hover,
.site-actions .signin:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Solutions dropdown */
.nav-dd { position: relative; }
.nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s ease;
}
.nav-dd-trigger:hover,
.nav-dd-trigger:focus-visible,
.nav-dd.is-open .nav-dd-trigger {
  color: var(--accent);
}
.nav-dd-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}
.nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 16px 32px;
  margin: 0;
  padding: 16px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  z-index: 80;
}
html[data-theme="light"] .nav-dd-panel {
  box-shadow: 0 18px 42px rgba(10, 37, 64, 0.14);
}
.nav-dd-panel[hidden] { display: none; }
.nav-dd-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-dd-head {
  margin: 0 0 8px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.nav-dd-panel a {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
}
.nav-dd-panel a:hover,
.nav-dd-panel a:focus-visible {
  color: var(--ink);
  background: var(--surface-2);
}
/* One-line descriptor inside a panel group (e.g. For Importers → what it does) */
.nav-dd-sub {
  display: block;
  padding: 4px 12px 0;
  max-width: 230px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  white-space: normal;
}
/* The rightmost dropdown (For Importers) anchors to the right edge of its
   trigger so a menu near the end of the bar never overflows the viewport. */
.nav-dd-panel--end { left: auto; right: 0; }

/* Actions cluster */
.site-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.site-actions .btn-secondary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}
.site-actions .btn-secondary .arr { color: currentColor; }
.site-actions .btn-secondary:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

/* Burger — hidden on desktop */
.site-burger { display: none; }
.site-mobile-menu { display: none; }

/* ────────────── Collapsed nav (≤ 1023px) — see EOF note ────────────── */
@media (max-width: 1023px) {
  .site-header {
    padding: 0;
  }
  .site-header-inner {
    max-width: none;
    margin: 0;
    padding: 12px 16px;
    gap: 12px;
    justify-content: space-between;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    background: var(--surface-2);
  }
  html[data-theme="light"] .site-header-inner {
    background: var(--surface);
  }
  .site-nav,
  .site-actions .signin,
  .site-actions .btn-secondary {
    display: none;
  }
  .site-actions { gap: 8px; }
  .site-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    flex: none;
  }
  .site-burger svg { width: 20px; height: 20px; display: block; }
  .site-burger .ico-close { display: none; }
  .site-burger[aria-expanded="true"] .ico-open { display: none; }
  .site-burger[aria-expanded="true"] .ico-close { display: block; }

  .site-mobile-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 12px 0;
    padding: 8px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  }
  html[data-theme="light"] .site-mobile-menu:not([hidden]) {
    box-shadow: 0 12px 28px rgba(10, 37, 64, 0.14);
  }
  .site-mobile-menu a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 10px;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .site-mobile-menu a:hover,
  .site-mobile-menu a:focus-visible {
    color: var(--accent);
    background: var(--surface-2);
  }
  /* Collapsible audience group: <details class="mm-group"><summary class="mm-head"> */
  .site-mobile-menu .mm-group { border-top: 1px solid var(--border); }
  .site-mobile-menu .mm-group:first-child { border-top: 0; }
  .site-mobile-menu .mm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 12px 16px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
  }
  .site-mobile-menu .mm-head::-webkit-details-marker { display: none; }
  .site-mobile-menu summary.mm-head::after {
    content: '▾';
    font-size: 11px;
    color: var(--muted);
    transition: transform 0.18s ease;
  }
  .site-mobile-menu .mm-group[open] > summary.mm-head::after { transform: rotate(180deg); }
  .site-mobile-menu summary.mm-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
  .site-mobile-menu .mm-group > a { display: block; padding-left: 24px; }
  .site-mobile-menu .mm-account {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    font-weight: 600;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-mobile-menu summary.mm-head::after { transition: none; }
  }
}

/* Tablet: tighten nav item padding so it never overflows */
@media (min-width: 641px) and (max-width: 900px) {
  .site-nav a,
  .nav-dd-trigger { padding-left: 8px; padding-right: 8px; }
  .site-actions .signin { white-space: nowrap; }
}

/* ───────────────────────── Premium footer ───────────────────────── */
.premium-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: 54px 24px 34px;
}
.premium-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
}
.premium-footer .footer-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.premium-footer .qf-footer-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0;
  text-decoration: none;
}
.premium-footer .footer-brand .qf-footer-logo {
  width: auto;
  height: 60px;
  max-width: 100%;
}
.premium-footer .qf-footer-brandtext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.premium-footer .qf-footer-wordmark {
  font-size: 19px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.premium-footer .footer-brand .qf-footer-tagline {
  margin: 0;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.footer-col h4 {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.footer-col a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0;
  font-size: 14px;
}
.footer-col a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qf-footer-trustbar {
  max-width: 1120px;
  margin: 32px auto 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.qf-footer-trustbar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.qf-footer-trustbar svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: 0.85;
}
.premium-footer .footer-bottom {
  max-width: 1120px;
  margin: 34px auto 0;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
}
.premium-footer .footer-bottom .qf-foot-operator,
.premium-footer .footer-bottom strong {
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 980px) {
  .premium-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .premium-footer .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .premium-footer { padding: 42px 18px 28px; }
  .premium-footer-inner { gap: 24px 16px; }
  .premium-footer .footer-brand { gap: 12px; }
  .premium-footer .footer-brand .qf-footer-logo { height: 52px; }
  .qf-footer-trustbar { gap: 8px 16px; }
  .premium-footer .footer-bottom { display: grid; font-size: 11.5px; }
}

/* ── Auth-gated nav items (hydrated by /nav-auth.js) ────────────────────────
   Personal-workspace links (data-nav-auth="user") ship `hidden` from the
   server and are revealed client-side once /api/directory/auth/me confirms a
   session. The server HTML stays byte-identical for anonymous and signed-in
   visitors, which is what keeps the CDN-cached directory pages safe to share.

   `[hidden]`'s UA rule is only `display:none` at element specificity, so an
   author rule like `.nav-dd-panel a{display:block}` or
   `.site-mobile-menu a{display:block}` silently beats it and the link stays on
   screen for logged-out visitors. Make the attribute authoritative. */
.site-nav [hidden],
.site-actions [hidden],
.nav-dd-panel a[hidden],
.site-mobile-menu a[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAV / IA REBUILD — appended at EOF on purpose.

   The spacing + color guards baseline by FILE:LINE, so an edit in the middle of
   this file renumbers 14 tolerated entries and turns a green run red. Everything
   below is therefore additive and appended; the only in-place edit was widening
   one existing media query's max-width (same line count, no renumbering).

   ── THE BREAKPOINT BUG ──────────────────────────────────────────────────────
   The header used to collapse to the burger only at ≤640px, but the full bar
   (brand + three mega-menus + Pricing + theme + Sign in + CTA) needs ~1000px.
   Between 641 and ~960px `.site-actions` therefore ran off the end of
   `.site-header-inner` — measured at +288px on /directory@660 and +170px on
   /pricing@660, still +2px at 960. There is now ONE collapse point: the bar is
   inline at ≥1024px and a burger below it, so the overflow band cannot exist.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet (641–1023px): the nav is a burger here, but there is still plenty of
   room for the floating card header and the primary CTA — only the phone
   layout goes full-bleed. Restores what the ≤1023px block turns off. */
@media (min-width: 641px) and (max-width: 1023px) {
  .site-header { padding: 12px 24px 0; }
  .site-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    gap: 16px;
    justify-content: flex-start;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
  html[data-theme="light"] .site-header-inner {
    background: var(--surface-2);
    box-shadow: 0 1px 0 var(--border), 0 6px 20px rgba(10, 37, 64, 0.06);
  }
  /* Push the action cluster to the trailing edge now that .site-nav (which
     carried `margin-left:auto`) is hidden. */
  .site-actions { margin-left: auto; }
  .site-actions .btn-secondary { display: inline-flex; }
  .site-mobile-menu:not([hidden]) { margin: 8px 24px 0; }
}

/* ── Mega-menu panel: column count is declared by the panel, not guessed ──
   The base rule hard-codes two `max-content` tracks, so a panel with three
   groups silently wrapped its third column onto a second row. Each panel now
   states how many columns it has. */
.nav-dd-panel--cols1 { grid-template-columns: max-content; }
.nav-dd-panel--cols3 { grid-template-columns: repeat(3, max-content); }

/* ── Mobile drawer sub-headings ──────────────────────────────────────────
   The drawer used to be a flat 11-link list under one heading. Each desktop
   panel column is now a `.mm-sub` inside its <details>, so the phone menu has
   the same structure as the desktop one. */
.site-mobile-menu .mm-sub {
  margin: 8px 0 0;
  padding: 8px 16px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.site-mobile-menu .mm-group > .mm-sub:first-of-type { margin-top: 0; }
.site-mobile-menu .mm-flat {
  border-top: 1px solid var(--border);
  font-weight: 600;
}

/* ── Footer: five columns that mirror the three header menus + Company/Legal.
   The brand block takes its own full-width row so each link column keeps a
   readable measure instead of being squeezed into a sixth track.

   ── THE TRACK LADDER IS ARITHMETIC, NOT TASTE ───────────────────────────────
   Standing rule: a group never wraps so that ONE item sits alone on a line
   (DESIGN-SYSTEM.md §8). For a footer that means: with N link columns laid out
   in T tracks, the last row holds `N mod T` columns, so any T where
   `N mod T === 1` strands a column on a row of its own. N is 5 here, so:

       T=5 → 5            ✓ one full row
       T=4 → 4 + 1        ✗ orphan
       T=3 → 3 + 2        ✓ (a 5-group wrapping 3+2 is explicitly allowed)
       T=2 → 2 + 2 + 1    ✗ orphan  ← what shipped: LEGAL alone at ≤760px,
                                       stranded next to ~620px of dead space
       T=1 → 1 + 1 + …    ✓ a deliberate full stack, not a wrap remainder

   So the ladder steps 5 → 3 → 1 and SKIPS 4 and 2 entirely. Three tracks is
   held all the way down to 641px (≈165px per column at the low end — the links
   wrap a word, nothing overflows) rather than dropping to two, because two is
   the arithmetic that produces the orphan. Below 641px every column goes
   full-bleed, which is a stack rather than a wrap and leaves no dead track.

   Deriving T from N is why this is stated once, here, instead of being
   re-guessed per breakpoint: change the column count and the only question to
   re-answer is which T values still satisfy `N mod T !== 1`.

   These rules sit AFTER the older `@media (max-width: 980px)` block above, so
   at equal specificity they win for every width — that block's `1fr 1fr` is
   the two-track layout this ladder deliberately replaces.
   navInformationArchitecture.test.ts measures the rendered result at every
   width from 320 to 1600 and fails on any row holding exactly one column. */
.premium-footer-inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.premium-footer .footer-brand { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .premium-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .premium-footer-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ── Wide mega-panels anchor to the HEADER CARD, not to their trigger ─────
   A three-column panel hung off its own trigger ran past the right edge of the
   viewport — measured +100px at 1024px and +70px at 1280px on the For Shippers
   menu. Making the wrapper `static` promotes `.site-header-inner` to the
   containing block, so `left:0` / `right:0` pin the panel inside the header card
   at every desktop width (card ≥982px at the 1024px collapse point; the widest
   panel is ~745px). The panel stays a DOM child of `[data-nav-dd]`, so the
   hover/focus/Escape handlers in HEADER_SCRIPTS are untouched. */
.site-header-inner { position: relative; }
.nav-dd--wide { position: static; }
.nav-dd--wide > .nav-dd-panel { top: calc(100% + 8px); }

/* ═══════════════════════════════════════════════════════════════════════════
   NAV POLISH — appended at EOF for the same reason as the block above: the
   spacing + colour guards baseline by FILE:LINE, so an in-place edit here
   renumbers 14 tolerated entries and turns a green run red. Everything below
   is additive.

   ── 1. A BUTTON NEVER WRAPS ITS OWN LABEL ───────────────────────────────────
   Between 1024 and 1100px the four nav controls broke their own labels across
   two lines — "For Carriers &/Brokers", "For/Shippers", "Free/Tools",
   "Sign/in" — on /directory, /carrier/*, /city/* and /compliance (77 widths),
   and 1024–1032px on the homepage. It is a flex-shrink artefact, not a copy
   problem: `.site-nav` is a flex item that shrinks, and each control shrinks
   with it until the label has to wrap.

   `white-space: nowrap` alone would only trade one defect for a worse one. A
   nowrap flex item's automatic minimum size is its FULL label width, so the
   controls stop shrinking and the header card overflows instead — which is
   exactly the defect the 1024px collapse point was introduced to remove. So
   nowrap ships WITH the compaction below, and both halves are measured
   together: zero header overflow at every width 1024–1600, anonymous and
   signed in, or neither ships.

   ── 2. THE COMPACTION IS SIZED FROM THE ARITHMETIC ──────────────────────────
   At the 1024px collapse point the header card's content box is 938px, and it
   has to hold brand (132) + nav + actions. The nav's natural width is 491px
   and the directory's action cluster is 337px — 960px of demand against 938,
   which is the 22px shortfall the labels were absorbing by wrapping. Stepping
   the inter-item gaps to 8/16px, the control padding to 8px and the label to
   13px takes the nav to ~420px and the cluster to ~312px, i.e. ~884px against
   938 — the labels fit on one line with room to spare, and nothing overflows.
   The band ends at 1140px, above which the natural sizes fit unaided.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-nav .nav-dd-trigger,
.site-nav > a,
.site-actions .signin { white-space: nowrap; }

@media (min-width: 1024px) and (max-width: 1140px) {
  .site-header-inner { gap: 16px; }
  .site-nav { gap: 0; }
  .site-nav > a,
  .site-nav .nav-dd-trigger { padding-left: 8px; padding-right: 8px; font-size: 13px; }
  .site-actions { gap: 8px; }
  .site-actions .btn-secondary { padding-left: 12px; padding-right: 12px; }
}

/* ── 3. THE FOUR-ITEM TRUST BAR GOES 2×2, NEVER 3+1 ────────────────────────
   `.qf-footer-trustbar` holds exactly FOUR claims in a wrapping flex row, so
   between 459 and 673px (homepage) / 495 and 697px (every PREMIUM_FOOTER page)
   the fourth wrapped onto a line of its own — the orphan the standing rule
   forbids (DESIGN-SYSTEM.md §8: an even count wraps 2×2, never 3+1).

   Four items in T tracks strand `4 mod T` on the last row, so T=3 is the one
   forbidden count; the ladder is 4 → 2, skipping 3. Above 720px all four fit
   on one line on both surfaces (they need ≤650px of the ≥673px available), so
   flex-wrap can only ever produce the single full row it already does. At and
   below 720px an explicit two-track grid makes the wrap 2×2 by construction
   instead of by luck — including at 375px, where the flex row happened to land
   on 2+2 already.

   NOT TOUCHED, deliberately: `.qf-payrow-trust`, whose one-per-line stack at
   ≤720px is documented as intentional at style.css:1638. Three items stacking
   fully is a stack, not a wrap remainder. */
@media (max-width: 720px) {
  .qf-footer-trustbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE OOG CTA — appended at EOF, like everything else here, because the
   spacing and colour guards baseline by FILE:LINE and a mid-file insert
   renumbers every tolerated entry below it.

   ONE AFFORDANCE, TWO BARS. `.site-oog` is a quiet text link in the header's
   action cluster; `.qf-foot-oog` is the same claim as a muted line in the
   footer bar. Neither is a coloured banner and neither is a second primary
   button — the header already carries exactly one of those per surface.

   THE HEADER COPY HIDES AT ≤1023px, alongside `.signin` and the primary
   button, because 1024px is the single collapse point and below it the bar is
   brand + theme + burger. Between 1024 and 1140px the bar is measured tight
   (nav ~420px + cluster ~312px against a 938px content box), so the CTA joins
   the existing compaction step rather than adding width the band has not got.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-actions .site-oog {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease;
}
.site-actions .site-oog:hover,
.site-actions .site-oog:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}
/* HIDDEN BELOW 1141px, AND THAT IS MEASURED RATHER THAN CAUTIOUS.
   #476/#477 removed a 641-960px band where the action cluster ran off the end
   of the header card, and left the 1024-1140px band running with about 50px of
   slack. This link is ~70px. Measured at 1024px it put the homepage header
   39px over its content box and the directory header 25px over -- exactly the
   defect those PRs fixed -- so it does not ship into that band. Below 1024px
   the bar is brand + theme + burger and `.signin` and the primary button are
   already gone, so nothing changes there either. The FOOTER copy carries every
   width, phones included. */
@media (max-width: 1140px) {
  .site-actions .site-oog { display: none; }
}

/* The footer bar copy. Always present, phones included — it is the only copy a
   phone gets, and the row it sits in already wraps to its own line there. */
.premium-footer .footer-bottom .qf-foot-oog,
.dirfoot-oog .qf-foot-oog {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.premium-footer .footer-bottom .qf-foot-oog:hover,
.premium-footer .footer-bottom .qf-foot-oog:focus-visible,
.dirfoot-oog .qf-foot-oog:hover,
.dirfoot-oog .qf-foot-oog:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}
.premium-footer .footer-bottom .qf-foot-oog .arr,
.dirfoot-oog .qf-foot-oog .arr { color: currentColor; }
.dirfoot-oog {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}

/* THE COMPACTION STEP, EXTENDED TO COVER THE WIDTH THE CTA FIRST APPEARS AT.
   #476/#477 sized a 1024-1140px step from the arithmetic of the widest header
   (brand 132 + nav 491 + cluster 337 against a 938px content box). The
   directory's cluster is the widest on the site — "Claim your listing — free"
   — and at 1141px, the first width the OOG link renders at, it ran 18px past
   its content box. The same declarations that fixed the band below it fix
   this: they return about 76px, which is four times the shortfall. Above
   1199px the natural sizes fit unaided and nothing here applies. */
@media (min-width: 1141px) and (max-width: 1199px) {
  .site-header-inner { gap: 16px; }
  .site-nav { gap: 0; }
  .site-nav > a,
  .site-nav .nav-dd-trigger { padding-left: 8px; padding-right: 8px; font-size: 13px; }
  .site-actions { gap: 8px; }
  .site-actions .btn-secondary { padding-left: 12px; padding-right: 12px; }
}

/* ── PHONE FOOTER — TWO COLUMNS, NOT ONE TALL STACK ────────────────────────
   Alex, 2026-09: "I don't like that footer it is 1 long stacked column in a
   mobile view. optimize it. make 2 columns."

   THE ARITHMETIC IS THE WHOLE PROBLEM. PREMIUM_FOOTER has N=5 link columns and
   the standing rule (DESIGN-SYSTEM.md §8, measured by
   navInformationArchitecture.test.ts at every width 320→1600) is that no row
   may hold exactly one column: with N columns in T tracks the last row holds
   `N mod T`, so every T where `N mod T === 1` is forbidden. 5 mod 2 === 1, so a
   plain two-track phone grid strands LEGAL alone — which is exactly why the
   phone step shipped as a single full-bleed stack in the first place.

   THE FIX IS TO TAKE ONE COLUMN OUT OF THE WRAP. The last link column spans
   both tracks and lays its own links out in two CSS columns, so it is a
   deliberate full-bleed row (the same case the rule already blesses at T=1),
   not a wrap remainder. That leaves 4 columns wrapping into 2 tracks —
   4 mod 2 === 0 — and every row of the footer holds two things.

   Appended at EOF on purpose: the spacing guard's baseline is line-numbered,
   so an in-place edit above would renumber ~6 tolerated entries in this file.
   Later + equal specificity beats the `minmax(0, 1fr)` step above at ≤640px;
   that older rule stays legal on its own terms (T=1 is always allowed). */
@media (max-width: 640px) {
  .premium-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 24px;
  }
  .premium-footer .footer-brand { grid-column: 1 / -1; }
  .premium-footer-inner > .footer-col:last-child {
    grid-column: 1 / -1;
    display: block;
    columns: 2;
    column-gap: 16px;
  }
  .premium-footer-inner > .footer-col:last-child h4 { column-span: all; }
  .premium-footer-inner > .footer-col:last-child a { break-inside: avoid; }
}