/* =============================================================
   NAV.CSS — Floating glass pill navigation
   ============================================================= */

.site-header {
  position: fixed;
  top: clamp(0.75rem, 0.5rem + 0.8vw, 1.5rem);
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: var(--container-pad);
}

/* NOTE: backdrop-filter is applied via ::before, not directly on
   .nav-inner. A filter/backdrop-filter on an element makes it a
   containing block for fixed-position descendants — which would trap
   the mobile fullscreen menu (position:fixed) inside this pill
   instead of the viewport. Keeping .nav-inner filter-free avoids that. */
.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  width: 100%;
  max-width: 1180px;
  padding: 0.55rem 0.7rem 0.55rem 1.15rem;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-elevated);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

.nav-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.site-header.scrolled .nav-inner {
  box-shadow: var(--shadow-elevated), 0 0 0 1px color-mix(in srgb, var(--accent-cyan) 18%, transparent);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.nav-logo__mark { width: 26px; height: 26px; color: var(--accent-cyan); flex-shrink: 0; }
.nav-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.nav-logo__name { font-size: 0.95rem; color: var(--text); }
.nav-logo__title {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
}
@media (min-width: 640px) { .nav-logo__title { display: block; } }

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline: auto;
}
.nav-links a {
  position: relative;
  display: block;
  padding: 0.55rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-dim);
  border-radius: var(--r-full);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.32rem;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--gradient-brand);
}
.nav-cta-mobile { display: none; }

.nav-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.nav-theme-toggle,
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--text-dim);
  border: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.nav-theme-toggle:hover, .nav-toggle:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}
.nav-theme-toggle svg { transition: transform 0.4s var(--ease-spring); }
.nav-theme-toggle:hover svg { transform: rotate(24deg) scale(1.08); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--bg);
  background: var(--gradient-brand);
  background-size: 180% 180%;
  transition: background-position var(--dur-slow) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.nav-cta:hover { background-position: 100% 50%; transform: translateY(-1px); }
.hidden-mobile { display: none; }
@media (min-width: 860px) { .hidden-mobile { display: inline-flex; } }

.nav-toggle { display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 860px) { .nav-toggle { display: none; } }
.nav-toggle__bar {
  width: 17px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast);
}
.site-header.nav--open .nav-toggle__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-header.nav--open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-header.nav--open .nav-toggle__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ─── Mobile fullscreen menu ─────────────────────────────── */
@media (max-width: 859px) {
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: -1;
    margin: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 7rem 2rem 2rem;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(26px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .site-header.nav--open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links a {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    padding: 0.5rem 0;
    color: var(--text);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .site-header.nav--open .nav-links a { opacity: 1; transform: translateY(0); }
  .nav-links a.active::after { display: none; }
  .nav-cta-mobile { display: block; margin-top: 1.25rem; }
  .nav-cta-mobile a {
    display: inline-flex;
    padding: 0.7rem 1.4rem;
    border-radius: var(--r-full);
    background: var(--gradient-brand);
    color: var(--bg);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 600;
  }
}