/* Shared nav + footer styling — the ONE definition used by every page
   on the site, loaded via <link rel="stylesheet" href="/nav.css">
   instead of being duplicated in each page's own <style> block. Every
   nav-positioning bug chased in
   this project turned out to be a CSS difference between five
   hand-copied blocks that looked identical but weren't quite (brand
   sizing, nav width tracking each page's own main, a bold-vs-color
   rendering quirk, a footer in a narrower container than nav). A shared
   file makes that whole category of bug structurally impossible: there
   is only one nav, one footer, used everywhere, so there is nothing
   left for them to drift apart from.

   Relies on each page's own :root custom properties (--bg, --text,
   --meta, --good, --divider, --surface-alt, --surface, --shadow, --on-
   accent) already being defined before this loads, since those are the
   actual color system (transcribed from ios/Cadence/Theme.swift) and
   belong with each page's light/dark tokens, not here. Everything about
   nav itself — including the gap below it, now 32px on every page — is
   fixed here with no per-page override left at all, by request: the
   homepage used to get 44px (its hero felt like it wanted more room)
   and the other four got 22px, and that was still a visible difference
   between pages even after nav's own position/width were proven
   identical. */

.brand { display: flex; align-items: center; gap: 9px; }
.brand svg { width: 29px; height: 29px; flex-shrink: 0; }
.brand-word { font-family: "Sora", sans-serif; font-weight: 500; font-size: 19px; letter-spacing: -0.035em; color: var(--text); }

nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; margin-bottom: 32px;
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  /* Same name on every page (paired with the <meta name="view-transition">
     tag in each page's own <head>) tells the browser nav is one
     continuous element across a page navigation, not old-page-content
     replaced by new-page-content — so a Support -> FAQ click can stop
     looking like the nav itself got swapped out and back in. */
  view-transition-name: site-nav;
}
.nav-brand-link { text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 20px; }
/* Fixed width (desktop only — overridden back to auto in the mobile
   media query below, where nav-links becomes a dropdown and this
   doesn't apply).
   On macOS, a link rendering in --good green vs the default grey
   measurably changes that glyph's own antialiased width by a couple
   pixels — more for a long word ("Release Notes") than a short one
   ("FAQ"). Since nav-right (nav-links + the toggle) is pinned to nav's
   right edge, that width change shifted the whole Features/Pricing/FAQ
   block, not just the word that changed color. A fixed width means
   nav-links' own box can't grow or shrink no matter how any word
   renders. Natural content width with all six links (Features, Pricing,
   FAQ, How It Works, Release Notes, Support) measures ~458px in this
   sandbox's Linux Chromium — but a too-tight buffer on that exact
   measurement (465px) shipped broken: real browsers (confirmed via a
   user screenshot) render the system-font stack wider than Linux's
   substitute font, overflowing the box and visually colliding "Release
   Notes"/"How It Works" into the theme toggle. 540px leaves real slack
   above any single-environment measurement instead of chasing another
   exact number this sandbox can't verify cross-platform. */
.nav-links { display: flex; gap: 22px; width: 540px; flex-shrink: 0; }
/* font-family pinned explicitly, not inherited from each page's own body
   font: the homepage loads "Inter" as a webfont while every other page
   uses the plain system-font stack, and since these links sit left-to-
   right in a fixed-gap flex row, a different typeface renders each word
   at a different width — shifting every link after the first one. That
   mismatch was the real cause of nav "shifting" specifically between the
   homepage and any other page (never between two non-homepage pages,
   which already shared the same font). Pinning it here means nav text
   renders identically everywhere regardless of what font a page's own
   body text uses. */
.nav-links a { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; color: var(--meta); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
/* Color only — never font-weight. Bold text is physically wider, and a
   width change in .nav-links shifts the whole block beside it (see
   above) — this is what was reported as nav "moving". */
.nav-links a.current { color: var(--good); }

/* System/Light/Dark — same three choices, same order, as the app's own
   Settings -> Appearance picker (Theme.swift's Appearance enum). Icons
   only (sun/moon/half-circle), no new colors beyond the existing
   --surface-alt/--divider/--text/--meta tokens. */
.theme-toggle { display: flex; gap: 2px; background: var(--surface-alt); border: 1px solid var(--divider); border-radius: 999px; padding: 3px; flex: none; }
.theme-toggle button {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; background: transparent; border-radius: 999px;
  color: var(--meta); cursor: pointer; padding: 0;
}
.theme-toggle button svg { width: 14px; height: 14px; }
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

footer {
  margin-top: 24px; padding-top: 28px; border-top: 1px solid var(--divider);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12.5px; color: var(--meta);
}
footer a { color: var(--meta); text-decoration: none; }
footer a:hover { color: var(--text); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* Mobile menu button and its dim backdrop: hidden on desktop, where the
   six links sit inline. theme-toggle.js wires the button and creates the
   backdrop element, so no page needs extra markup beyond the button. */
.menu-btn {
  display: none; width: 36px; height: 36px; padding: 0; flex: none;
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--divider); border-radius: 10px;
  background: var(--surface); color: var(--text);
}
.menu-btn:focus-visible { outline: 2px solid var(--good); outline-offset: 2px; }
.menu-btn .x { display: none; }
.menu-btn[aria-expanded="true"] .bars { display: none; }
.menu-btn[aria-expanded="true"] .x { display: block; }
.nav-scrim { display: none; }

/* Phone and small tablet: one compact row (logo, theme toggle, menu
   button). The six links move into a dropdown of 48px rows below the
   bar, so the page starts near the top of the screen instead of under a
   330px stack of wrapped links. Breakpoint stays 900px so the row layout
   never gets tight enough to collide with the toggle. */
@media (max-width: 900px) {
  nav { gap: 10px; }
  .nav-right { gap: 8px; }
  .menu-btn { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: -20px; right: -20px;
    width: auto; flex-shrink: 1; flex-direction: column; gap: 0;
    padding: 6px 20px 12px; background: var(--bg);
    border-bottom: 1px solid var(--divider); box-shadow: var(--shadow);
  }
  nav.open .nav-links { display: flex; }
  /* The bar only spans the page's content width, so while the backdrop is
     up its 20px side margins would show grey beside the logo and button.
     Paint the bar's background out to the screen edges while open. */
  nav.open::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -20px; right: -20px;
    background: var(--bg); z-index: -1;
  }
  .nav-links a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 48px; font-size: 15px; color: var(--text);
    border-bottom: 1px solid var(--divider);
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a::after { content: "\203A"; color: var(--meta); }
  .nav-links a.current { color: var(--good); }
  .nav-scrim.show { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, 0.35); }
}