/* The site header. Sticky + solid by default; over a full-viewport hero
   (body.has-full-hero) it is fixed + transparent, white text, until the hero
   scrolls away and scripts/components/header.js adds .scrolled. */

.site-header {
  view-transition-name: site-header;   /* holds still across pages (styles/transitions.css) */
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--hair);
  color: var(--text);
  transition: background var(--normal), border-color var(--normal), color var(--normal);
}

.header-inner {
  max-width: var(--full);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--page-inset);
  display: flex;
  align-items: center;
  gap: var(--md);
}

/* The lockup: mark + the wordmark in light tracked caps */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
  font-weight: var(--light);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-right: auto;
}

.lockup:hover { text-decoration: none; color: inherit; }
.lockup-text { white-space: nowrap; }
.lockup-mark { display: inline-flex; }
.lockup-mark svg { width: 30px; height: 30px; }

/* The nav: tiny tracked caps */
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: var(--tiny);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}

.site-nav a { color: inherit; opacity: 0.75; font-weight: var(--regular); white-space: nowrap; }
.site-nav a:hover { opacity: 1; color: var(--accent); text-decoration: none; }
.site-nav a.on { opacity: 1; color: var(--accent); text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }
.site-nav .nav-phone { opacity: 1; }
.site-nav .nav-long { display: none; }   /* a short label in the desktop row, the full one in the sheet */

/* Coral links (the tool pages): the snorkel's coral, full strength, in the
   row and the sheet; hover and the active page keep the coral */
.site-nav a.coral, .site-nav a.coral:hover, .site-nav a.coral.on { color: var(--accent-2); opacity: 1; }

/* The theme toggle: a bare circle of an icon */
.theme-toggle {
  view-transition-name: theme-toggle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: var(--hair);
  border-radius: var(--pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--fast), color var(--fast);
}

.theme-toggle:hover { border-color: currentColor; color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-flex; }
:root.dark .theme-toggle .icon-sun { display: inline-flex; }
:root.dark .theme-toggle .icon-moon { display: none; }
.theme-toggle span { display: inline-flex; }

/* Mobile: the burger + a panel under the bar (CSS-only checkbox) */
.nav-check { position: absolute; opacity: 0; pointer-events: none; visibility: hidden; }
.nav-burger { display: none; }

@media (max-width: 1040px) {
  .header-inner { gap: var(--sm); }
  .nav-check { visibility: visible; }   /* a tab stop only where the burger shows */
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    cursor: pointer;
    color: inherit;
    order: 3;
  }
  .nav-burger span { display: inline-flex; }
  .nav-burger .burger-close { display: none; }
  .nav-check:checked ~ .nav-burger .burger-open { display: none; }
  .nav-check:checked ~ .nav-burger .burger-close { display: inline-flex; }
  /* Keyboard focus lives on the hidden checkbox and shows on the burger */
  .nav-check:focus-visible ~ .nav-burger { outline: 2px solid var(--accent); outline-offset: 2px; }
  .theme-toggle { order: 2; }   /* the lockup's auto margin pushes the rest right (the toggle hides when signed in) */

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--xs) var(--page-inset);   /* the same breath above the first link and under the last */
    color: var(--text);
    border-bottom: var(--hair);
    display: none;
  }
  /* Hairlines above every row but the first, so a hidden last link (Sign In,
     the phone when signed in) leaves no stray line under the one before it */
  .site-nav a { display: block; padding: 0.85rem 0; border-top: var(--hair); width: 100%; opacity: 1; font-size: var(--small); }
  .site-nav a:first-child { border-top: none; }
  .site-nav .nav-long { display: inline; }
  .site-nav .nav-short { display: none; }
  /* Open: the panel is one sheet with the header's own glass (the page color
     at 88% over a blur), grown up to the top of the header and layered behind
     the bar's content. The bar gives up its fill and blur while the panel is
     open: a backdrop blur on the bar would make the bar the panel's backdrop
     and leave the page under the panel unblurred. The bar also gives up its
     view-transition-name: Chrome makes a named element its own backdrop root,
     so the panel's blur would sample the bar's contents instead of the page. */
  .nav-check:checked ~ .site-nav {
    display: flex;
    top: 0;
    z-index: -1;
    padding-top: calc(var(--header-h) + var(--xs));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-down);
  }
  .site-header:has(.nav-check:checked) {
    view-transition-name: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* A light ink scrim over the rest of the page while the panel is open,
     layered under the sheet. Fixed to the viewport: the bar has no
     backdrop-filter while open, so nothing traps it. */
  .site-header:has(.nav-check:checked)::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
    pointer-events: none;
  }
}

/* Over a full-viewport hero: fixed, transparent, white, until scrolled */
.has-full-hero .site-header {
  position: fixed;
  inset-inline: max(0px, calc((100vw - var(--site-max)) / 2));
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  color: var(--white);
}

/* The gradient that keeps the header legible on any photograph: it starts
   dark at the very top and fades out well below the bar, so there is no edge */
.has-full-hero .site-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14rem;
  background: linear-gradient(to bottom, rgba(13, 23, 32, 0.78) 0%, rgba(13, 23, 32, 0.45) 35%, rgba(13, 23, 32, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--normal);
}

.has-full-hero .site-header.scrolled::before { opacity: 0; }
.has-full-hero .site-header.scrolled { border-bottom: var(--hair); }

.has-full-hero .site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
  color: var(--text);
}

/* The open panel over the hero: the same sheet in the header's hero glass,
   ink-tinted, white text, faint white hairlines, the gradient switched off so
   there is no seam. Once scrolled it is the page-color glass above. */
@media (max-width: 1040px) {
  .has-full-hero .site-header:not(.scrolled) .nav-check:checked ~ .site-nav {
    background: color-mix(in srgb, var(--ink) 72%, transparent);
    color: var(--white);
    border-bottom-color: color-mix(in srgb, var(--white) 18%, transparent);
  }
  .has-full-hero .site-header:not(.scrolled) .nav-check:checked ~ .site-nav a { border-top-color: color-mix(in srgb, var(--white) 18%, transparent); }
  .has-full-hero .site-header:has(.nav-check:checked) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .has-full-hero .site-header:not(.scrolled):has(.nav-check:checked)::before { opacity: 0; }
}

/* Down to 320px: the lockup shrinks (smaller type, tighter tracking, a smaller
   mark) rather than wrapping beside the toggle and the burger */
@media (max-width: 420px) {
  .header-inner { gap: var(--xs); }
  .lockup { font-size: 0.66rem; letter-spacing: 0.12em; gap: 0.4rem; min-width: 0; }
  .lockup-mark svg { width: 24px; height: 24px; }
}