/* ============================================================
   Shared site header — marketing + legal pages
   ============================================================
   Used by index.html, privacy-policy.html, and terms-and-conditions.html.
   The header bar (.nav) and its flex .wrap are styled in each page's own
   stylesheet; this file owns the nav links so the three pages share one
   definition. Values are literal (not design tokens) because the legal
   pages don't load tokens.css. The docs pages have their own header and do
   not use this file.
   ============================================================ */
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  padding: 8px 14px;
  border-radius: 8px;
  /* Pin the nav font and smoothing so it reads identically regardless of each
     page's body styles (landing antialiases its body, the legal pages don't —
     which made the same text render heavier there). Literal stack because the
     legal pages don't load tokens.css. */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  /* Pin line-height too: the download button's height is driven by its text
     line box, and the legal pages' body defaults to `normal` (~1.2) while the
     landing page uses 1.5 — which made the button shorter there. */
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #D9D9D9;
  text-decoration: none;
  transition: color 120ms cubic-bezier(0.2, 0, 0, 1),
              background 120ms cubic-bezier(0.2, 0, 0, 1);
}
.nav-links a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.05); }
/* Download CTA — orange button with download glyph. Selectors are scoped to
   .nav-links a so they outrank the plain .nav-links a / :hover rules above;
   otherwise the link's gray text and the translucent hover background would
   win. Literal values because the legal pages don't load tokens.css. */
.nav-links a.nav-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.011em;
  color: #FFFFFF;
  background: #F97316;
}
.nav-links a.nav-download:hover { color: #FFFFFF; background: #EA580C; }
.nav-links a.nav-download svg { flex-shrink: 0; }
/* Theme toggle — a switch in the footer's legal row. The knob holds
   the icon of the theme a tap switches to: sun in dark mode, moon in
   light mode, and slides right when light is active. theme.js wires
   the click to window.fnrbTheme.toggle(). Literal values because the
   legal pages don't load tokens.css. */
.theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.2, 0, 0, 1),
              border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.theme-toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D9D9D9;
  color: #12161D;
  transition: left 200ms cubic-bezier(0.2, 0, 0, 1),
              background 200ms cubic-bezier(0.2, 0, 0, 1);
}
.theme-toggle svg { display: block; }
.theme-toggle .ic-moon { display: none; }
:root[data-theme="light"] .theme-toggle {
  border-color: #D0D9E1;
  background: #E2E8EE;
}
:root[data-theme="light"] .theme-toggle:hover { background: #D8E0E8; }
:root[data-theme="light"] .theme-toggle .knob {
  left: 20px;
  background: #FFFFFF;
  color: #3A4552;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.18);
}
:root[data-theme="light"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: block; }

/* Theme-matched logo: every brandmark carries both wordmarks — the
   white-text one for dark, the ink-text one for light — and the
   inactive one is hidden here. The :root prefixes keep both hide
   rules more specific than the pages' `.brandmark .brand-logo
   { display: block }` sizing rules, which would otherwise force
   both wordmarks visible. */
:root:not([data-theme="light"]) .brand-logo-light { display: none; }
:root[data-theme="light"] .brand-logo-dark { display: none; }

/* ---------- light theme ---------- */
:root[data-theme="light"] .nav-links a { color: #2A333E; }
:root[data-theme="light"] .nav-links a:hover { color: #12161D; background: rgba(18, 22, 29, 0.05); }
:root[data-theme="light"] .nav-links a.nav-download { color: #FFFFFF; background: #F97316; }
:root[data-theme="light"] .nav-links a.nav-download:hover { color: #FFFFFF; background: #EA580C; }