/* ═══════════════════════════════════════════════════════════════════
   MOOTLY — THE PUBLIC HEADER, ONE COMPONENT
   2026-09-24. Silas: "We just need the banner to be largely the same from
   one page to the next ... make all the headers with the button style and
   placement as the home page ... [the home banner] can be slightly
   translucent but not completely see through".

   Used by the home page and every marketing page, with identical markup:

     <header class="nav-shell site-header"><nav class="nav">
       <a class="nav-logo">Mootly</a>
       <div class="nav-links"> Judges · How it works · Request a demo · Security </div>
       <div class="nav-actions"> Sign in · Argue a matter </div>
     </nav></header>

   Loaded LAST on those pages, and every rule is scoped under .site-header,
   so it outranks both the home page's inline ".nav" rules and styles.css's
   ".nav-shell"/".nav" rules. It carries its own colours for light and dark
   instead of the page tokens, because the home page defines only a light
   palette and a different set of names. The phone menu (mobile-nav.js)
   already folds ".nav-shell .nav .nav-links"; the actions stay in the bar.
   ═══════════════════════════════════════════════════════════════════ */

.site-header {
  --sh-bg: rgba(255, 255, 255, 0.96);
  --sh-rule: #DEEDF9;
  --sh-ink: #20303F;
  --sh-soft: #33465A;
  --sh-accent: #3D77AE;
  --sh-on-accent: #FFFFFF;
  --sh-pill: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--sh-bg);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--sh-rule);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Nothing inherited from the page: the home page's body sets a different
     line height, which made its bar 2px shorter than every other page's. */
  line-height: 1.5;
  letter-spacing: 0;
}
:root[data-theme="dark"] .site-header {
  --sh-bg: rgba(11, 19, 28, 0.96); --sh-rule: #1F2F3F; --sh-ink: #E8EEF4;
  --sh-soft: #B7C3CE; --sh-accent: #6FA5D6; --sh-on-accent: #0B131C; --sh-pill: #121C26;
}
/* Dark only when the page is dark. The theme script stamps data-theme
   ="dark" when the user chose dark (or "system" on a dark machine); light,
   the default, carries no stamp, so an operating-system media query here
   would darken the header over a light page (Silas, 2026-09-18: "It
   should stay as light mode normally"). */

/* styles.css draws a 6px blue stripe above its pages' header; the home
   page has none. One look everywhere: no stripe. */
body:has(.site-header)::before { display: none; }

.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  /* The marketing pages' .container width, so the wordmark sits on their
     text's left edge. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
  position: static;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header .nav-logo {
  color: var(--sh-ink);
  text-decoration: none;
  font-size: 26px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  margin-right: 4px;
}
.site-header .nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-header .nav-links a {
  color: var(--sh-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.site-header .nav-links a:hover,
.site-header .nav-links a.active { color: var(--sh-accent); }
.site-header .nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-header .nav-signin,
.site-header .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--sh-rule);
}
.site-header .nav-signin { background: var(--sh-pill); color: var(--sh-ink); }
.site-header .nav-cta { background: var(--sh-accent); color: var(--sh-on-accent); border-color: var(--sh-accent); }
.site-header .nav-signin:hover { border-color: var(--sh-accent); }
.site-header .nav-cta:hover { filter: brightness(1.06); }

/* ── phones: wordmark, Sign in, Menu. The links fold into the menu; the
   "Argue a matter" pill is left to the page body. Sign in is the Menu
   pill's size. ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .site-header .nav { padding: 10px 16px; gap: 12px; position: relative; }
  .site-header .nav-logo { font-size: 22px; }
  /* Folded into the Menu; mobile.css opens it (".nav-open .nav-links",
     display:flex !important), which still wins over this. */
  .site-header .nav-links { display: none; }
  .site-header .nav-cta { display: none; }
  .site-header .nav-actions { gap: 8px; }
  .site-header .nav-signin { min-height: 44px; padding: 0 14px; }
  .site-header .mobile-menu-btn { margin-left: 0; }
}

/* ═══ THE PAGE GROUND ═══════════════════════════════════════════════════
   One fade behind every public page: sky at the top to ground at 720px,
   painted on the page itself, not on its first band. Tied to the first
   band, the fade stretched over ~700px on the home, Judges and Request a
   demo pages but finished within ~300px on Security and How it works,
   whose first band is short, so those looked white while the others
   looked blue (Silas, 2026-09-24). On <html>, so the home page's zoom
   does not stretch it. Light here; styles.css darkens it for the pages
   that have a dark palette (the home page has none). */
html:has(.site-header) {
  background: linear-gradient(180deg, #DEEDF9 0px, #F6FAFD 720px) no-repeat, #F6FAFD;
}
body:has(.site-header) { background: transparent; }