/* ══════════════════════════════════════════════════════════════════════════
   recode-v3-shell.css — the site header and footer. ONE copy, every page.

   Loaded by the v3 routes directly and by the ~200 legacy pages through the
   theme block, so /firehouse and /intelligence render the same header rather
   than swapping navigation models mid-click. That split was the bug: the
   legacy pages were correctly re-coloured but kept a different nav, which
   reads as "still the old theme" even when every token is right.

   Markup: assets/_v3-header.html (mirrored to assets/_nav.html for the legacy
   pipeline) and assets/_v3-footer.html.

   Depends only on the --v3-* tokens, which recode-v3.css and
   recode-v3-theme.css both define.
   ══════════════════════════════════════════════════════════════════════ */

/* The legacy pages never reset the UA underline on <a>, so header and footer
   links arrived underlined there. Scoped deliberately: links inside article
   prose SHOULD stay underlined, so this must not be a blanket `a` rule. */
.v3-header a, .v3-footer a, .v3-navcta { text-decoration: none; }

/* ── Header ──────────────────────────────────────────────────────────── */
/* STICKY, not fixed. The handoff specifies fixed + `padding-top:72px` on
   <main>, which works when every page is yours. This header is now on 208
   pages, most of which have no <main> at all — a fixed header would slide
   their content underneath it. Sticky stays in flow, so every page clears it
   for free, and it still pins on scroll. The hero's calc(100vh - 72px) gives
   the same first screen either way. */
.v3-header {
  position: sticky; top: 0; z-index: 200;
  background: oklch(0.145 0.006 255 / 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--v3-line, oklch(1 0 0 / 0.07));
}
.v3-header-in {
  max-width: 1500px; margin: 0 auto;
  padding: 0 var(--v3-gutter, 40px); min-height: 72px;
  display: flex; align-items: center; gap: 40px;
}

.brand, .v3-brand {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--v3-sans); font-size: 17px; font-weight: 500;
  letter-spacing: -0.02em; text-transform: uppercase;
  white-space: nowrap; color: var(--v3-text); flex: none;
}
.v3-brand:hover { color: var(--v3-text); }
.v3-brand em { font-style: normal; color: var(--v3-accent); }

/* recodeai.css styles the BARE `nav` element as a whole fixed page header
   (position:fixed; height:64px; padding:0 2rem; light background). .v3-nav is
   a <nav>, so on the ~200 legacy pages it inherits all of that unless each
   property is reset here. This bit once already, when the same rule captured
   the old .rnav. */
.v3-nav {
  position: static; height: auto; padding: 0;
  background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; align-items: center; gap: 26px;
  font-family: var(--v3-sans); font-size: 13px; color: var(--v3-dim);
}
.v3-nav > a, .v3-navtop {
  color: inherit; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.v3-nav > a:hover, .v3-navtop:hover,
.v3-nav > a[aria-current="page"] { color: var(--v3-text); }

/* ── Library dropdown ────────────────────────────────────────────────
   Opens on hover AND :focus-within, so it works by keyboard with no JS. */
.v3-navgroup { position: relative; }
.v3-navtop span { font-size: 13px; transition: transform 140ms ease; display: inline-block; }
.v3-navgroup:hover .v3-navtop span,
.v3-navgroup:focus-within .v3-navtop span { transform: rotate(90deg); }
.v3-drop {
  position: absolute; top: 100%; left: -16px; min-width: 320px;
  display: none; flex-direction: column;
  background: var(--v3-tint); border: 1px solid var(--v3-line-4);
}
.v3-navgroup:hover .v3-drop,
.v3-navgroup:focus-within .v3-drop { display: flex; }
.v3-drop a {
  display: block; padding: 13px 18px; color: var(--v3-body);
  border-bottom: 1px solid var(--v3-line);
}
.v3-drop a:last-child { border-bottom: 0; }
.v3-drop a:hover, .v3-drop a:focus-visible { background: var(--v3-hover); color: var(--v3-text); }
.v3-drop strong {
  display: block; font-weight: 500; font-size: 14px;
  letter-spacing: -0.01em; color: var(--v3-text);
}
.v3-drop span {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.4; color: var(--v3-faint);
}

/* ── Header CTA — its own class so it never collides with .btn/.v3-btn ── */
.v3-navcta {
  margin-left: auto; flex: none;
  font-family: var(--v3-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  padding: 11px 18px;
  border: 1px solid var(--v3-accent-55); color: var(--v3-accent);
  background: none; cursor: pointer; border-radius: 0;
  transition: background .25s ease, color .25s ease;
}
.v3-navcta:hover { background: var(--v3-accent); color: var(--v3-base); }

.v3-burger {
  display: none; width: 44px; height: 44px; padding: 0; flex: none;
  background: none; border: 1px solid var(--v3-border);
  color: var(--v3-text); cursor: pointer;
  align-items: center; justify-content: center; border-radius: 0;
}
.v3-burger span { display: block; width: 18px; height: 1px; background: currentColor; position: relative; }
.v3-burger span::before, .v3-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: currentColor;
}
.v3-burger span::before { top: -5px; }
.v3-burger span::after { top: 5px; }

/* No clearance rule needed: a sticky header occupies its own space. The
   .v3-main padding the handoff called for would now be a 72px gap. */
.v3-main { padding-top: 0; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.v3-footer {
  border-top: 1px solid var(--v3-line-4);
  padding: 90px var(--v3-gutter, 40px) 48px;
  background: var(--v3-tint);
}
.v3-footer .v3-shell { max-width: 1500px; margin: 0 auto; }
.v3-footer-grid {
  display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  gap: 56px;
}
.v3-footer-blurb { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--v3-muted); max-width: 260px; }
.v3-footer-col { display: flex; flex-direction: column; gap: 14px; }
.v3-footer-h {
  font-family: var(--v3-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-faint); margin-bottom: 6px;
}
.v3-footer-col a { font-size: 14px; color: oklch(0.80 0.008 255); }
.v3-footer-col a:hover { color: var(--v3-accent); }

.v3-signup { margin-top: 36px; max-width: 300px; }
.v3-signup-row { display: flex; align-items: stretch; border: 1px solid oklch(1 0 0 / 0.16); }
.v3-signup-row:hover { border-color: var(--v3-accent-55); }
.v3-signup-row span {
  flex: 1; min-width: 0; padding: 14px;
  font-family: var(--v3-mono); font-size: 12px; color: var(--v3-body);
  display: flex; align-items: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-signup-row b {
  background: var(--v3-text); color: var(--v3-base);
  padding: 0 18px; font-family: var(--v3-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center;
}
.v3-signup-row:hover b { background: var(--v3-accent); }

.v3-footer-bar {
  margin-top: 72px; padding-top: 26px;
  border-top: 1px solid var(--v3-line-2);
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
  font-family: var(--v3-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.50 0.01 255);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .v3-header-in { gap: 20px; }
  .v3-nav { gap: 18px; font-size: 12px; }
}

@media (max-width: 960px) {
  .v3-header-in { gap: 14px; position: relative; }
  .v3-burger { display: flex; order: 3; }
  .v3-navcta { order: 2; margin-left: auto; font-size: 10px; padding: 11px 12px; letter-spacing: 0.1em; }

  .v3-nav {
    order: 4; display: none; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--v3-tint);
    border-bottom: 1px solid var(--v3-line-4);
    padding: 8px var(--v3-gutter, 40px) 20px;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .v3-header.is-open .v3-nav { display: flex; }
  .v3-nav > a, .v3-navtop {
    padding: 14px 0; font-size: 15px; min-height: 44px;
    border-bottom: 1px solid var(--v3-line);
    justify-content: space-between; width: 100%;
  }
  /* The dropdown becomes an inline list — no hover on touch. */
  .v3-navgroup { position: static; }
  .v3-drop {
    position: static; display: flex; min-width: 0;
    background: none; border: 0; padding: 0 0 8px 14px;
  }
  .v3-drop a { padding: 12px 0; min-height: 44px; }
  .v3-drop span { display: none; }
  .v3-navtop span { display: none; }
}

@media (max-width: 720px) {
  .v3-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px; }
}
@media (max-width: 560px) {
  .v3-header-in { gap: 10px; }
  .v3-brand { font-size: 15px; }
  .v3-navcta { font-size: 9px; padding: 10px 9px; letter-spacing: 0.06em; }
  .v3-footer-grid { grid-template-columns: minmax(0,1fr); }
}