/* ============================================================================
   BendiRip - global site header.
   ONE definition for every page. Edit the nav here and it changes everywhere;
   do not copy header CSS back into a page's own <style> block.

   Pages differ in which CSS variables they define (index.html uses
   --apple-blue/--text-dim, the newer pages use --blue/--muted), so every colour
   below falls back through both names to a literal. This file is linked LAST in
   <head> so it wins over a page's own legacy `header {}` rule on equal
   specificity.

   Markup contract (keep identical on every page):
     <header>
       <a href="./" class="logo-container"> ... </a>
       <button class="nav-toggle" id="navToggle" ...>
       <nav class="nav-links" id="navLinks"> ... </nav>
     </header>
   Mark the current page's link with class="on".
   ========================================================================= */

/* Colours are pinned to literals, NOT chained to page variables. The pages define different
   names (--text-dim on index, --muted on the newer pages, neither in the blog), so the same
   nav was rendering in slightly different greys from one page to the next. */
:root {
  --nav-fg: #a1a1a6;
  --nav-accent: #2997ff;
  --nav-line: rgba(255, 255, 255, .08);
}

/* A sticky header would otherwise sit on top of whatever an in-page #anchor jumps to. */
html { scroll-padding-top: 86px; }

/* index.html sets `overflow-x: hidden` on html/body to stop a stray horizontal scrollbar.
   That forces overflow-y to `auto`, which makes body its own scroll container - and a
   position:sticky child then sticks to THAT container instead of the viewport, so the header
   silently stopped sticking on the homepage. `clip` hides the same overflow WITHOUT creating a
   scroll container, so sticky keeps working. Browsers too old for `clip` just drop this line and
   keep the page's own `hidden`. */
html, body { overflow-x: clip; }

/* No backdrop-filter (older Firefox, some embedded browsers) -> solid bar, not see-through text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header { background: #000 !important; }
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(20px, 3.5vw, 40px);
  border-bottom: 1px solid var(--nav-line);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky;
  top: 0;
  z-index: 1000;              /* keeps the Compare dropdown above hero content */
  width: 100%;
  box-sizing: border-box;
  /* The blog articles set `header { max-width: 960px; margin: 0 auto }`, so their header sat
     inside the article column instead of spanning the window - the reason article pages looked
     different from the rest of the site. Force full bleed; nav.css loads last so this wins. */
  max-width: none;
  margin: 0;
  /* Several older pages set `header { flex-wrap: wrap }` for their old 3-link nav. The shared
     nav is much wider, so inheriting that dropped it onto a second row. Force one row here; the
     mobile query below turns wrapping back on deliberately. */
  flex-wrap: nowrap;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

header.header-scrolled {
  background: rgba(0, 0, 0, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* ---------- logo ---------- */
/* Heights are pinned rather than left to inherit: the pages use different base font stacks and
   line-heights, so the same logo block came out 34px on one page and 41px on another, giving the
   header a different height per page. */
header { min-height: 64px; }
.logo-container { display: flex; align-items: center; gap: 12px; text-decoration: none; height: 36px; }
.logo-app-svg { width: 36px; height: 36px; display: block; flex: none; }
.logo-text-box { display: flex; flex-direction: column; justify-content: center; text-align: left; height: 36px; }
.logo-text { font-size: 21px; font-weight: 800; letter-spacing: -.4px; line-height: 22px; color: #fff; }
.logo-text span { color: var(--nav-accent); }
.logo-sub { font-size: 9.5px; font-weight: 600; letter-spacing: .4px; line-height: 12px; text-transform: uppercase; white-space: nowrap; color: var(--nav-fg); }
.logo-container, .nav-toggle { flex: none; }   /* logo must not be squeezed by a long nav */

/* ---------- links ---------- */
/* Older pages style their nav with `nav a { margin-left: 18px }`. That selector still matches the
   shared markup and stacked 18px on top of the gap below, pushing the nav wider than the header.
   Reset spacing here and let `gap` be the only thing that spaces these. */
.nav-links, .nav-links a, .nav-links button { margin: 0; }
/* line-height is INHERITED, and the pages set very different body values (index leaves it
   `normal`, the article pages use 1.7). That flowed into the nav and made the same header render
   65px on one page and 72px on another. Pin it here so every page's bar is the same height. */
.nav-links, .nav-links * { line-height: 1.2; }
.nav-links { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; min-width: 0; }
.nav-link-item {
  color: var(--nav-fg);
  text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; transition: color .2s ease;
}
.nav-link-item:hover, .nav-link-item.on { color: #fff; }

/* ---------- Compare dropdown ---------- */
.nav-dd { position: relative; }
.nav-dd-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-dd-btn svg { transition: transform .2s ease; }
.nav-dd:hover .nav-dd-btn, .nav-dd.open .nav-dd-btn { color: #fff; }
.nav-dd:hover .nav-dd-btn svg, .nav-dd.open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 250px; padding: 8px;
  background: rgba(22, 22, 24, .96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 30;
}
/* invisible bridge so the menu survives the gap between button and panel */
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-dd-menu a {
  display: block; padding: 10px 12px; border-radius: 9px;
  color: #e2e8f0; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.nav-dd-menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* ---------- download button ---------- */
.nav-cta {
  display: inline-flex; align-items: center;
  background: var(--nav-accent); color: #000;
  font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, filter .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* The Download button and the shop pages' Cart button are the tallest things in the bar, so they
   set the header's height. The cart has a 1px border and the CTA doesn't, which left shop pages
   a pixel taller than everywhere else - pin both to the same box. */
.nav-cta, .nav-links .btn-cart {
  height: 36px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- hamburger (hidden on desktop) ---------- */
.nav-toggle {
  display: none; background: transparent; color: #f5f5f7;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px;
  padding: 8px 10px; cursor: pointer; line-height: 0;
}

/* ---------- laptop / small desktop: tighten before the mobile breakpoint ---------- */
/* Nine links plus the Download button is a wide nav. Between 901px and 1200px we shrink the
   spacing and type rather than let anything overflow or wrap. */
@media (min-width: 901px) and (max-width: 1200px) {
  header { padding: 14px 20px; gap: 12px; }
  .nav-links { gap: 17px; }
  .nav-link-item { font-size: 13px; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
  .logo-app-svg { width: 32px; height: 32px; }
  .logo-text { font-size: 19px; }
}

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  header { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 13px/1 Inter, system-ui, sans-serif; margin-left: auto;
  }
  .nav-links {
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; padding: 8px 0 4px; margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .nav-links.open { display: flex; max-height: calc(100vh - 75px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav-links .nav-link-item {
    padding: 13px 6px; font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .nav-dd { position: static; }
  .nav-links .nav-dd-btn {
    width: 100%; justify-content: space-between; padding: 13px 6px;
    font-size: 16px; text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .nav-dd-menu {
    position: static; transform: none; min-width: 0; padding: 0 0 0 14px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    display: none; opacity: 1; visibility: visible; transition: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav-dd-menu::before { display: none; }
  .nav-dd.open .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: block; transform: none; left: auto; }
  .nav-dd:hover:not(.open) .nav-dd-menu { display: none; }   /* no hover-open on touch */
  .nav-dd-menu a {
    padding: 12px 6px; font-size: 15px; border-radius: 0; color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  /* in the stacked mobile menu these are full-width rows, so drop the fixed desktop height */
  .nav-links .nav-cta, .nav-links .btn-cart { height: auto; }
  .nav-links .nav-cta { margin: 14px 6px 8px; justify-content: center; font-size: 15px; padding: 12px 18px; }
}

@media (max-width: 480px) {
  .logo-app-svg { width: 34px; height: 34px; }
  .logo-text { font-size: 20px; }
  .logo-sub { font-size: 10px; }
}
