/* Critical Point Vision Site: nav.css
 * Header bar (wordmark, five links, theme toggle, one button), backdrop and
 * the mobile drawer. Tokens only (css/tokens.css). Owns --nav-h and the nav
 * z-index ladder: bar 50, backdrop 30, drawer 60.
 */

:root {
  --nav-h: 4.5rem;
}

/* ------------------------------------------------------------------ */
/* Root + bar                                                          */
/* ------------------------------------------------------------------ */

[data-nav-root] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
}

[data-nav-root] noscript {
  display: block;
}

.nav__bar {
  position: relative;
  z-index: 50;
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-enter),
    border-color var(--duration-base) var(--ease-enter),
    backdrop-filter var(--duration-base) var(--ease-enter);
}

[data-nav-root].is-frosted .nav__bar,
html[data-hero="video"] [data-nav-root] .nav__bar,
html[data-hero="still"] [data-nav-root] .nav__bar {
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(0.875rem) saturate(130%);
  -webkit-backdrop-filter: blur(0.875rem) saturate(130%);
  border-bottom-color: var(--border);
}

/* The bar's own size unit. The fluid root grows from 16px at 1024 wide while
   the grid stays 1200px until about 1707 wide, so a bar sized in rem outgrew
   its grid: at 1440 the CTA ran 118px past the content edge, at 1707 219px,
   to within 11px of the viewport edge at 1300. This unit grows with the grid
   instead (0.9375vw is 16px per 1200px of grid at 70.3125vw), so the bar keeps
   the proportions it was designed at 1024 and reaches the same 24px at 2560.
   Only the bar is rescaled; the drawer and the page keep the fluid root. */
.nav__bar {
  --nav-unit: clamp(16px, 0.9375vw, 24px);
  --space-050: calc(var(--nav-unit) * 0.25);
  --space-100: calc(var(--nav-unit) * 0.5);
  --space-150: calc(var(--nav-unit) * 0.75);
  --space-200: var(--nav-unit);
  --space-250: calc(var(--nav-unit) * 1.25);
  --space-300: calc(var(--nav-unit) * 1.5);
  --space-400: calc(var(--nav-unit) * 2);
  --text-ui: calc(var(--nav-unit) * 0.875);
  --touch-target-min: calc(var(--nav-unit) * 2.75);
}

.nav__bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-400);
}

/* The wordmark is always the brand rust, never ink or white (Eric,
   2026-09-21). #B7410E on light grounds, #E8683A on dark ones. The SVG draws
   in currentColor, so the color is set here and inherited. */
:root { --wordmark: #B7410E; }
html[data-theme="dark"] { --wordmark: #E8683A; }

.nav__brand {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--wordmark);
  flex: 0 0 auto;
}

.nav__brand:focus-visible {
  outline: none;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.nav__brand-mark {
  display: block;
  line-height: 0;
}

.nav__brand-mark svg {
  height: calc(var(--nav-unit) * 1.875);
  width: auto;
  display: block;
}

.nav__triggers {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  flex: 1 1 auto;
}

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-050);
  height: var(--touch-target-min);
  padding: 0 var(--space-150);
  border: none;
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-enter),
    color var(--duration-fast) var(--ease-enter);
}

.nav__trigger:hover {
  background: var(--secondary);
}

.nav__trigger:focus-visible,
.nav__trigger--link:focus-visible {
  outline: none;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.nav__trigger--link {
  text-decoration: none;
}

/* theme toggle and CTA (desktop), theme toggle and hamburger (drawer widths)
   on one row; the rule lost its own selector in the mega-menu removal and the
   CTA wrapped under the toggle, hanging below the bar */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  flex: 0 0 auto;
}

.nav__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: none;
  background: transparent;
  color: var(--foreground);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-enter);
}

.nav__theme:hover {
  background: var(--secondary);
}

.nav__theme:focus-visible {
  outline: none;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.nav__cta.btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: none;
  background: transparent;
  color: var(--foreground);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.nav__hamburger:hover {
  background: var(--secondary);
}

.nav__hamburger:focus-visible {
  outline: none;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ------------------------------------------------------------------ */
/* Backdrop                                                             */
/* ------------------------------------------------------------------ */

.nav-backdrop {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: rgb(var(--ink-rgb) / 0.32);
}

/* ------------------------------------------------------------------ */
/* Mobile drawer                                                       */
/* ------------------------------------------------------------------ */

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(26.25rem, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--popover);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-enter);
}

.nav-drawer.is-open {
  transform: translateX(0);
}

/* display:flex above outranks the UA [hidden] rule, which left the closed
   drawer parked off screen with its links still in the tab order */
.nav-drawer[hidden] {
  display: none;
}

.nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--space-300);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.nav-drawer__brand {
  color: var(--wordmark);
  line-height: 0;
}

.nav-drawer__brand svg {
  height: 1.25rem;
  width: auto;
  display: block;
}

.nav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: none;
  background: transparent;
  color: var(--foreground);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.nav-drawer__close:hover {
  background: var(--secondary);
}

.nav-drawer__close:focus-visible {
  outline: none;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.nav-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-200) var(--space-200) var(--space-400);
}

.nav-drawer__link {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-150) var(--space-100);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lead);
  color: var(--foreground);
  text-decoration: none;
}

.nav-drawer__link[aria-current="page"] {
  color: var(--primary-900);
}

html[data-theme="dark"] .nav-drawer__link[aria-current="page"] {
  color: var(--primary-400);
}

.nav-drawer__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.nav-drawer__footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-150);
  padding: var(--space-200);
  border-top: 1px solid var(--border);
}

.nav-drawer__cta.btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                       */
/* ------------------------------------------------------------------ */

html[data-motion="none"] [data-nav-root] * {
  transition: none !important;
}

/* ------------------------------------------------------------------ */
/* Breakpoint: under 1120px, hamburger + drawer replace the desktop nav.    */
/* Five bar items since 2026-09-21: the wordmark, five labels and the CTA  */
/* need about 1150px of room, so the drawer takes over earlier than it did */
/* (it used to change at 900).                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 1119px) {
  /* Qualified with the header root so these hide-rules out-specify a
     same-class utility (e.g. .btn) coming from another stylesheet,
     regardless of stylesheet load order. */
  [data-nav-root] .nav__triggers,
  [data-nav-root] .nav__cta {
    display: none;
  }

  .nav__hamburger {
    display: inline-flex;
  }

  /* With .nav__triggers gone, its flex:1 spacer is gone too, so brand and
     actions would sit side by side with only the row's fixed gap between
     them. At the wordmark's natural size that overflows a 390px viewport
     and pushes the hamburger past the right edge (confirmed: hamburger at
     x=449 on a 390-wide page). Shrink the wordmark and let space-between
     place brand/hamburger at the two edges instead of a fixed gap. */
  [data-nav-root] .nav__bar-inner {
    gap: 0;
    justify-content: space-between;
  }
}

/* At phone widths the wordmark at its natural size still pushes the
   hamburger past the right edge, so it shrinks the rest of the way. */
@media (max-width: 560px) {
  [data-nav-root] .nav__brand-mark svg {
    height: 1.25rem;
  }
}

@media (min-width: 1120px) {
  .nav-drawer,
  .nav-drawer.is-open {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Six pages (2026-09-21): the current-page mark.                       */
/* ------------------------------------------------------------------ */

.nav__trigger {
  position: relative;
  /* five items in the bar: without this the two-word labels break onto a
     second line inside their own 44px button */
  white-space: nowrap;
}

.nav__trigger[aria-current="page"] {
  color: var(--primary-900);
}

html[data-theme="dark"] .nav__trigger[aria-current="page"] {
  color: var(--primary-400);
}

.nav__trigger[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-150);
  right: var(--space-150);
  bottom: 0.4375rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: currentColor;
}

/* Between the drawer breakpoint and roughly 1260px the five labels, the
   wordmark and the CTA need every pixel, so the bar tightens its own gaps
   rather than letting the CTA run past the gutter. */
@media (min-width: 1120px) and (max-width: 1260px) {
  .nav__bar-inner {
    gap: var(--space-250);
  }

  .nav__triggers {
    gap: var(--space-050);
  }

  .nav__trigger {
    padding: 0 var(--space-100);
  }

  .nav__trigger[aria-current="page"]::after {
    left: var(--space-100);
    right: var(--space-100);
  }

  .nav__actions {
    gap: var(--space-150);
  }
}

/* ------------------------------------------------------------------ */
/* Icon pairs built into the markup: one shows at a time               */
/* ------------------------------------------------------------------ */

.nav__theme .icon-moon,
.nav__hamburger .icon-close {
  display: none;
}

html[data-theme="dark"] .nav__theme .icon-sun {
  display: none;
}

html[data-theme="dark"] .nav__theme .icon-moon {
  display: block;
}

.nav__hamburger[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav__hamburger[aria-expanded="true"] .icon-close {
  display: block;
}

/* ---------- back to top (2026-10-02 evening) ---------- */

/* A round button at the bottom right, the theme toggle's size and dress,
   shown once the reader is a screen and a half down (js/nav.js sets
   data-visible). On the dev builds the Tweaks pill owns that corner, so the
   button sits above it there. */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 2px rgb(27 20 18 / 0.08), 0 4px 12px rgb(27 20 18 / 0.08);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}

.to-top[hidden] { display: none; }

.to-top[data-visible="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top svg { width: 1.25rem; height: 1.25rem; }

.to-top:hover { color: var(--foreground); }

.to-top:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

html[data-theme="dark"] .to-top { color: var(--hl-on-ink); }

html:has(#tweaks-root:not(:empty)) .to-top { bottom: 5.25rem; }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}