/* =========================================================================
   CoLateral website - the one top bar
   -------------------------------------------------------------------------
   site-navigation.mjs bakes the same header into every full page and links
   this sheet after the page's own styles, so it has the final say on the
   bar's geometry and palette. Colours are local --hdr-* tokens: a page's own
   --ink or --blue must not be able to repaint the bar.

   The glass lives on ::before, not on the header itself. A backdrop-filter
   on the header would make it the containing block for its fixed children,
   and the phone-menu scrim (::after, position: fixed) would shrink to the
   size of the bar instead of dimming the page.
   ========================================================================= */
body[data-site-header="spaced"] { padding-top: 68px; }

body[data-site-header] .site-header.public-nav {
  --hdr-ink: #121c2b;
  --hdr-muted: #45597a;
  --hdr-line: rgba(15, 23, 42, 0.08);
  --hdr-glass: rgba(255, 255, 255, 0.74);
  --hdr-glass-solid: rgba(255, 255, 255, 0.9);
  --hdr-hover: rgba(15, 23, 42, 0.05);
  --hdr-current: rgba(15, 23, 42, 0.06);
  --hdr-current-line: rgba(15, 23, 42, 0.07);
  /* The one primary blue from site-chrome.css, so the bar's accent, its buy
     pill and every page's filled button are the same colour. */
  --hdr-accent: var(--site-primary, #0067c0);
  --hdr-accent-soft: rgba(0, 103, 192, 0.08);
  --hdr-accent-line: rgba(0, 103, 192, 0.28);
  --hdr-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 32px -18px rgba(15, 23, 42, 0.22);
  --hdr-panel: rgba(255, 255, 255, 0.9);
  --hdr-panel-line: rgba(15, 23, 42, 0.09);
  --hdr-panel-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.32), 0 2px 6px rgba(15, 23, 42, 0.05);
  --hdr-scrim: rgba(15, 23, 42, 0.26);
  --hdr-cta-fill: var(--site-primary, #0067c0);
  --hdr-cta-ink: var(--site-primary-ink, #ffffff);
  /* Kept for mobile-nav.css and older rules that read the page vocabulary. */
  --ink: var(--hdr-ink);
  --muted: var(--hdr-muted);
  --line: var(--hdr-line);
  --line-strong: var(--hdr-accent-line);
  --blue: var(--hdr-accent);
  --r: 10px;
  --nav-panel-bg: var(--hdr-panel);
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  isolation: isolate;
  /* At rest the bar is glass with no rule under it; the hairline arrives with
     the shadow once content scrolls beneath (.is-scrolled, below). */
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--hdr-ink);
  box-shadow: none;
  font-family: var(--site-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  line-height: 1.5;
  transition: border-color 0.25s ease;
}

/* Held still across page-to-page cross-fades (site-chrome.css): captured as
   its own layer, the bar does not fade out and back in with the page. Named
   only while a transition is running, because a view-transition-name makes
   the bar a backdrop root, and its glass (::before) would then blur nothing
   and let headlines show through the links at full sharpness. */
@media (prefers-reduced-motion: no-preference) {
  html:active-view-transition body[data-site-header] .site-header.public-nav {
    view-transition-name: site-header;
  }
}

body[data-site-header] .site-header.public-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hdr-glass);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: none;
  pointer-events: none;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* mobile-nav.js stamps .is-scrolled once the page moves: the bar firms up,
   gains its hairline, lifts off the content with a soft shadow and tightens
   from 68px to 60px. The bar is fixed and the page keeps its own 68px
   offset, so the tightening never moves content. Without JS it simply stays
   in its resting state. */
body[data-site-header] .site-header.public-nav.is-scrolled::before,
body[data-site-header] .site-header.public-nav.nav-open::before {
  background: var(--hdr-glass-solid);
  box-shadow: var(--hdr-shadow);
}

html body[data-site-header] .site-header.public-nav.is-scrolled,
html body[data-site-header] .site-header.public-nav.nav-open {
  border-bottom-color: var(--hdr-line);
}

body[data-site-header] .site-header.is-scrolled .public-nav-inner {
  min-height: 60px;
}

html[data-site-theme="dark"] body[data-site-header] .site-header.public-nav {
  --hdr-ink: #e6edf5;
  --hdr-muted: #a1b1c4;
  --hdr-line: rgba(148, 178, 220, 0.1);
  --hdr-glass: var(--nav-bg, rgba(7, 11, 21, 0.9));
  --hdr-glass-solid: rgba(7, 11, 21, 0.94);
  --hdr-hover: rgba(148, 178, 220, 0.08);
  --hdr-current: rgba(148, 178, 220, 0.11);
  --hdr-current-line: rgba(148, 178, 220, 0.12);
  --hdr-accent: #9fd0ff;
  --hdr-accent-soft: rgba(77, 166, 255, 0.12);
  --hdr-accent-line: rgba(77, 166, 255, 0.4);
  --hdr-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 36px -16px rgba(0, 0, 0, 0.7);
  --hdr-panel: rgba(12, 18, 31, 0.94);
  --hdr-panel-line: rgba(148, 178, 220, 0.14);
  --hdr-panel-shadow: 0 30px 80px -16px rgba(0, 0, 0, 0.8), 0 0 90px -30px rgba(77, 166, 255, 0.35);
  --hdr-scrim: rgba(2, 4, 10, 0.6);
  --hdr-cta-fill: var(--site-primary, #4da6ff);
  --hdr-cta-ink: var(--site-primary-ink, #041018);
  /* site-prefs.css paints the dark bar directly on .public-nav; the glass
     moves to ::before here, so the element itself stays clear. */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.site-header .public-nav-inner {
  position: relative;
  width: min(1160px, calc(100% - 36px));
  min-height: 68px;
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  transition: min-height 0.25s var(--site-ease, ease);
}

.site-header .public-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--hdr-ink);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
.site-header .public-brand-logo { width: 26px; height: 26px; flex: none; }
.site-header .public-brand-word span { color: var(--hdr-accent); }

.site-header .public-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}

.site-header .public-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--hdr-muted);
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.site-header .public-links a:hover {
  color: var(--hdr-ink);
  background: var(--hdr-hover);
}

/* Where you are: full ink on a neutral pill with a hairline. Neutral on
   purpose, so the blue stays reserved for the buy link beside it. */
.site-header .public-links a[aria-current="page"] {
  color: var(--hdr-ink);
  background: var(--hdr-current);
  border-color: var(--hdr-current-line);
}

/* The buy link is the action, but a quiet one: an outlined pill with an
   arrow, not a second filled button competing with the page's own CTA. */
.site-header .public-links a.nav-cta {
  margin-left: 8px;
  padding: 0 12px 0 14px;
  gap: 6px;
  color: var(--hdr-accent);
  border-color: var(--hdr-accent-line);
  background: var(--hdr-accent-soft);
  font-weight: 700;
  text-decoration: none;
}

.site-header .public-links a.nav-cta::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

/* Hovered, the quiet pill commits: it fills with the primary blue. */
.site-header .public-links a.nav-cta:hover {
  color: var(--hdr-cta-ink);
  border-color: var(--hdr-cta-fill);
  background: var(--hdr-cta-fill);
}

.site-header .public-links a.nav-cta:hover::after { transform: translateX(2px); }

/* A hairline between the destinations and the preferences cluster. */
.site-header .public-links + .site-prefs,
.site-header .public-links ~ .site-prefs {
  position: relative;
  margin-left: 10px;
  padding-left: 16px;
}

.site-header .public-links ~ .site-prefs::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 20px;
  margin-top: -10px;
  border-left: 1px solid var(--hdr-line);
}

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 2px solid var(--hdr-accent);
  outline-offset: 2px;
}

/* ---- Phone and tablet menu (the panel markup comes from mobile-nav.js) ---- */
body[data-site-header] .site-header .nav-toggle {
  width: 42px;
  height: 42px;
  border: 1px solid var(--hdr-line);
  border-radius: 12px;
  background: var(--hdr-hover);
  color: var(--hdr-ink);
}

body[data-site-header] .site-header .nav-toggle:hover { border-color: var(--hdr-accent-line); }

/* The panel floats under the bar as its own glass sheet, inset from the
   edges, rather than a full-bleed slab. */
body[data-site-header] .site-header .nav-panel {
  top: calc(100% + 8px);
  left: 12px;
  right: 12px;
  padding: 8px;
  border: 1px solid var(--hdr-panel-line);
  border-radius: 20px;
  background: var(--hdr-panel);
  box-shadow: var(--hdr-panel-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  max-height: calc(100vh - 92px);
  max-height: calc(100dvh - 92px);
  /* Clipping would cut the sheet's own shadow; it fades and settles instead. */
  clip-path: none;
  transform: translate3d(0, -8px, 0) scale(0.98);
}

body[data-site-header] .site-header.nav-open .nav-panel {
  transform: translate3d(0, 0, 0) scale(1);
}

body[data-site-header] .site-header .nav-panel a {
  justify-content: space-between;
  min-height: 50px;
  margin: 0;
  padding: 0 14px 0 16px;
  border: 0;
  border-radius: 13px;
  color: var(--hdr-ink);
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body[data-site-header] .site-header .nav-panel a + a { margin-top: 2px; }

body[data-site-header] .site-header .nav-panel a:not(.nav-cta)::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-site-header] .site-header .nav-panel a:hover { background: var(--hdr-hover); }

body[data-site-header] .site-header .nav-panel a[aria-current="page"] {
  color: var(--hdr-accent);
  background: var(--hdr-accent-soft);
}

body[data-site-header] .site-header .nav-panel a[aria-current="page"]::after { opacity: 0.8; }

body[data-site-header] .site-header .nav-panel a.nav-cta {
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--hdr-cta-ink);
  background: var(--hdr-cta-fill);
  font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(0, 103, 192, 0.6);
}

body[data-site-header] .site-header .nav-panel a.nav-cta::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The scrim sits under the glass, so the bar itself is never dimmed. */
body[data-site-header] .site-header.public-nav::after {
  z-index: -2;
  background: var(--hdr-scrim);
}

/* Once the links fold into the menu, the buy link would go with them, so
   mobile-nav.js puts a compact copy in the bar itself: the same element
   (data-stripe-plan="current", the same href), filled in the primary blue,
   between the preferences and the menu button. Hidden until the menu takes
   over at 980px, and below 360px, where the bar has no room left and the
   menu's own full-width Buy button is the way in. */
.site-header .nav-buy {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--site-pill-radius, 999px);
  background: var(--hdr-cta-fill);
  color: var(--hdr-cta-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(0, 103, 192, 0.7);
  transition: transform 0.2s var(--site-ease, ease), filter 0.2s ease, box-shadow 0.2s ease;
}

.site-header .nav-buy-note {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  opacity: 0.82;
}

html[data-site-theme="dark"] .site-header .nav-buy {
  box-shadow: 0 8px 22px -10px rgba(77, 166, 255, 0.6);
}

/* Switch before links and preferences collide on tablet widths. */
@media (max-width: 980px) {
  .site-header .public-links { display: none; }
  .site-header .site-prefs { margin-left: auto; }
  .site-header .public-links ~ .site-prefs { margin-left: auto; padding-left: 0; }
  .site-header .public-links ~ .site-prefs::before { display: none; }
  .site-header .nav-toggle { display: inline-flex; margin-left: 0; }
  .site-header .nav-buy { display: inline-flex; }
}

/* On a tablet the sheet drops from the toggle as a menu, not a slab. */
@media (min-width: 600px) and (max-width: 980px) {
  body[data-site-header] .site-header .nav-panel {
    left: auto;
    right: 18px;
    width: 360px;
    transform-origin: 100% 0;
  }
}

@media (max-width: 480px) {
  .site-header .public-nav-inner { gap: 8px; }
  .site-header .site-currency { display: none; }
  /* Room for the buy pill: the theme switch keeps its track and the moon
     that names it, and drops the sun. */
  .site-header .site-theme-toggle { width: auto; height: 38px; padding: 0 9px; }
  .site-header .site-theme-toggle .site-theme-light { display: none; }
  body[data-site-header] .site-header .nav-toggle { width: 40px; height: 40px; }
}

@media (max-width: 359px) {
  .site-header .nav-buy { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-site-header] .site-header.public-nav,
  body[data-site-header] .site-header.public-nav::before,
  .site-header .public-nav-inner,
  .site-header .nav-buy,
  .site-header .public-links a,
  .site-header .public-links a.nav-cta::after {
    transition: none;
  }
}