/* The site header, shared by every page.
 *
 * Lives in its own file because the header is the one thing that must be
 * identical everywhere: a visitor who finds "Account" on the pricing page and
 * not on the terms page assumes the site is broken, not that the pages were
 * built at different times.
 *
 * Uses the same token names as index.html and legal.css, with fallbacks so a
 * page that defines only the smaller token set still renders correctly. */

.nav {
  border-bottom: 1px solid var(--line);
  background: var(--nav-bg, var(--bg));
  backdrop-filter: saturate(1.2) blur(10px);
  position: sticky; top: 0; z-index: 30;
}
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px;
}
.nav .brand {
  display: flex; align-items: center; gap: 11px;
  font: 600 15px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
}
.nav .mark {
  background: var(--accent); color: var(--accent-ink);
  width: 26px; height: 26px; display: inline-grid; place-items: center;
  font-weight: 700; border-radius: 8px; letter-spacing: 0; text-decoration: none;
}
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-links { display: flex; align-items: center; gap: 22px; font: 500 13px var(--mono); }
.nav-links a:not(.btn) { color: var(--muted); text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--fg); }
.nav-links a[aria-current="page"] { color: var(--fg); }

/* The download call to action. Styled here rather than borrowing a page's own
   .btn class — that was how the homepage ended up with a filled button in its
   header and every other page with nothing. */
.nav-get {
  background: var(--btn-ink-bg, var(--fg)); color: var(--btn-ink-fg, var(--bg)) !important;
  padding: 9px 15px; border-radius: 9px; font-weight: 600; white-space: nowrap;
}
.nav-get:hover { background: var(--btn-ink-bg-hover, #000); }

/* Account link. Text swaps between "sign in" and "account" once we know
 * whether there's a session; it starts hidden so a signed-out visitor never
 * sees "account" flash before the script corrects it. */
.nav-account { color: var(--fg) !important; }
.nav-account[hidden] { display: none; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--line-strong, var(--line));
  border-radius: 9px; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 15px; transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--fg); }
.theme-toggle .moon { display: inline; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: inline; }

/* ——— Mobile ——— */

.menu-btn {
  display: none; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 9px;
  background: transparent; color: var(--fg); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-btn span {
  display: block; width: 15px; height: 1.5px; background: currentColor;
  position: relative; transition: background .15s;
}
.menu-btn span::before, .menu-btn span::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.5px;
  background: currentColor; transition: transform .18s ease;
}
.menu-btn span::before { top: -5px; }
.menu-btn span::after { top: 5px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.drawer { display: none; }

@media (max-width: 860px) {
  .nav .wrap { height: 58px; }
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }

  /* Positioned below the header rather than over it, so the brand and the
   * close button stay put — a full-screen overlay that hides its own toggle
   * is how people end up trapped in a menu. */
  .drawer {
    display: block; position: fixed; left: 0; right: 0; top: 58px; bottom: 0;
    background: var(--bg); z-index: 29; overflow-y: auto;
    padding: 12px 0 40px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .drawer.open { transform: none; opacity: 1; visibility: visible; }
  .drawer .wrap { display: flex; flex-direction: column; }
  .drawer a {
    font: 500 16px var(--mono); color: var(--fg); text-decoration: none;
    padding: 15px 0; border-bottom: 1px solid var(--line);
  }
  .drawer a.cta {
    margin-top: 20px; border: 0; text-align: center; border-radius: 10px;
    background: var(--accent); color: var(--accent-ink); font-weight: 600;
  }
  body.menu-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { transition: none; }
}