/* ==========================================================================
   Fixed nav — logo tile left, Sign up / Log in / menu right.

   Colours follow body[data-nav-theme], which the scroll engine sets from the
   active section:
     hero  — black tile, green glyph, WHITE Sign up pill
     light — green tile, white glyph, GREEN Sign up pill
     dark  — green tile, white glyph, GREEN Sign up pill
   ========================================================================== */

#site-nav {
  position: fixed;
  top: var(--nav-margin);
  left: var(--nav-margin);
  right: var(--nav-margin);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
  /* the strip between the logo and the pills must not swallow clicks */
  pointer-events: none;
}
#site-nav > * { pointer-events: auto; }

/* --------------------------------------------------------------------------
   logo tile — rounded square, planet-ring glyph
   -------------------------------------------------------------------------- */

.nav-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--logo-radius);
  display: grid;
  place-items: center;
  background: var(--black);
  color: var(--green);
  transition:
    background-color 500ms var(--ease-out),
    color 500ms var(--ease-out),
    transform 400ms var(--ease-out);
}
.nav-logo svg {
  width: 58%;
  height: 58%;
  display: block;
}
.nav-logo:hover { transform: scale(1.05); }

body[data-nav-theme="light"] .nav-logo,
body[data-nav-theme="dark"] .nav-logo {
  background: var(--green);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   pills
   -------------------------------------------------------------------------- */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.63vw;
}

.nav-actions .pill {
  min-height: 40px;
  transition:
    background-color 500ms var(--ease-out),
    color 500ms var(--ease-out),
    border-color 500ms var(--ease-out),
    transform 300ms var(--ease-out);
}
.nav-actions .pill:hover { transform: translateY(-1px); }

.pill-signup {
  background: var(--white);
  color: var(--black);
}
body[data-nav-theme="light"] .pill-signup,
body[data-nav-theme="dark"] .pill-signup {
  background: var(--green);
  color: var(--black);
}
.pill-signup .arrow {
  display: inline-block;
  transition: transform 320ms var(--ease-out);
}
.pill-signup:hover .arrow { transform: translateX(3px); }

.pill-login {
  background: var(--black);
  color: var(--white);
  border: 1px solid transparent;
}
/* keep the black pill readable once the grid and footer go black */
body[data-nav-theme="dark"] .pill-login {
  border-color: var(--white-30);
}

/* --------------------------------------------------------------------------
   green-on-green guard

   `light` and `dark` both paint the Sign up pill and the logo tile BRAND GREEN,
   which only works over white or black. Two things put green behind the nav
   band while one of those themes is active: the shared stage panel (full bleed
   at the top of the hero -> plus morph, edge to edge for the whole of tags) and
   the grid's "Sign up now" card scrolling up under the fixed nav. js/main.js
   tests each control against both and adds `.on-green` to the ones affected —
   per control, because the two are far apart and the green rarely reaches both.

   The replacement is the hero pairing, which is the one the reference already
   uses over green. Written with a `body[data-nav-theme]` prefix so it outranks
   the theme rules above at any theme.
   -------------------------------------------------------------------------- */

body[data-nav-theme] .pill-signup.on-green {
  background: var(--white);
  color: var(--black);
}
body[data-nav-theme] .nav-logo.on-green {
  background: var(--black);
  color: var(--green);
}

/* --------------------------------------------------------------------------
   hamburger — black circle, two white bars
   -------------------------------------------------------------------------- */

.nav-burger {
  width: var(--pill-h);
  height: var(--pill-h);
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: var(--black);
  display: grid;
  place-content: center;
  gap: 5px;
  transition: transform 300ms var(--ease-out), background-color 500ms var(--ease-out);
}
.nav-burger span {
  display: block;
  width: 1.25vw;
  min-width: 15px;
  max-width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform 300ms var(--ease-out);
}
.nav-burger:hover { transform: scale(1.05); }
.nav-burger:hover span:first-child { transform: translateY(-1px); }
.nav-burger:hover span:last-child { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   focus
   -------------------------------------------------------------------------- */

#site-nav a:focus-visible,
#site-nav button:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}
body[data-nav-theme="dark"] #site-nav a:focus-visible,
body[data-nav-theme="dark"] #site-nav button:focus-visible {
  outline-color: var(--white);
}

/* --------------------------------------------------------------------------
   mobile — drop Log in, tighten the margins
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --nav-margin: 5vw;
    --logo-size: 44px;
    --logo-radius: 12px;
    --pill-h: 40px;
    --fs-nav: 13px;
  }
  .pill-login { display: none; }
  .nav-actions { gap: 8px; }
  .nav-actions .pill { padding: 0 16px; }
  .nav-burger span { width: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-logo,
  .nav-actions .pill,
  .nav-burger,
  .nav-burger span,
  .pill-signup .arrow {
    transition-duration: 200ms;
  }
  .nav-logo:hover,
  .nav-actions .pill:hover,
  .nav-burger:hover { transform: none; }
}