/* top navbar, shared across every page — inspired by visitleonida.online's
   destinations nav: centered pill links, active state as a solid pill,
   hamburger for mobile, in our own near-black/magenta/cyan register */
.navbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.75rem var(--space-2);
  background: rgba(8, 8, 11, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* icon-only (2026-09-02) — the $S4S wordmark that used to sit next to
   this was dropped as redundant with the mark right next to it. As of
   2026-09-03 the mark is assets/navbar-logo.png, a tight crop of
   assets/lo11go.png's diamond-pendant "S4S" (see DESIGN.md) — a separate
   asset from assets/logo-mark.png, which is the flat gold wordmark now
   used in css/footer.css instead; the two marks diverged on 2026-09-03,
   navbar keeping the pendant and the footer keeping the wordmark. Sized
   down from an earlier 2.6rem (a same-day size-up of the wordmark this
   replaced) to 2.3rem, with .navbar's own vertical padding trimmed to
   match (0.9rem → 0.75rem) rather than left oversized around a smaller
   mark. Shrinking is safe the same way growing was: .navbar centers
   everything on the cross axis and sizes itself to its tallest child, so
   the mark can move independently of the nav links or CTA next to it
   without ever overlapping them. The GTA VI badge that used to follow
   the old mark moved to the hero (see hero.css `.hero__gta-badge`) — a
   persistent tiny navbar icon wasn't earning its keep next to a much
   bigger, one-time placement. */
.navbar__logo-mark {
  height: 2.3rem;
  width: auto;
  display: block;
  transition: transform 0.2s var(--ease), filter 0.2s ease;
}
.navbar__logo:hover .navbar__logo-mark {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255,32,121,0.45));
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 0.3rem;
  margin-inline: auto;
}

.navbar__link {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.5em 1.1em;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.navbar__link:hover { color: var(--fg); }
.navbar__link.is-active {
  background: var(--magenta);
  color: #12040a;
}
.navbar__link.is-active:hover { color: #12040a; }

.navbar__cta {
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bg-deep);
  background: var(--cyan);
  padding: 0.55em 1.1em;
  border-radius: 999px;
  transition: transform 0.2s;
}
.navbar__cta:hover { transform: translateY(-1px); }

.navbar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.navbar__burger span {
  display: block;
  height: 2px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.2s;
}
.navbar__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  .navbar__burger { display: flex; }
  .navbar__cta { display: none; }
  .navbar__links {
    position: fixed;
    inset: 3.6rem var(--space-2) auto;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-deep);
    border-radius: 8px;
    padding: 0.6rem;
    margin: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }
  .navbar__links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .navbar__link { text-align: center; }
  .navbar__link.is-active { order: -1; }
}