/* ============================================================
   Nav / Header Theme Override — Aniimo-inspired look
   Poppins font, pipe dividers, glass scroll background.
   Loaded AFTER core/pages CSS so these rules win.
   UI-only: does not touch layout structure, pages, or content.
   ============================================================ */

:root {
  --font-nav: 'Poppins', 'Nunito', sans-serif;
}

/* ── Bigger, more prominent nav bar ── */
.nav {
  height: 92px !important;
  padding: 0 60px !important;
  gap: 40px !important;
}

.nav-logo-img {
  width: 42px !important;
  height: 42px !important;
  margin-bottom: 0 !important;
}

.nav-logo-text {
  font-size: 20px !important;
}

.nav-logo {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

.nav-logo-underline {
  display: none !important;
}

.nav-logo,
.nav-link,
.footer-logo,
.nav-discord-btn,
.nav-mobile-overlay a {
  font-family: var(--font-nav) !important;
  text-transform: none !important;
}

.nav-logo {
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.nav-logo-text {
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.nav-link {
  font-weight: 600 !important;
  font-size: 17px !important;
  letter-spacing: 0.1px !important;
  padding: 10px 20px !important;
  border-radius: 30px !important;
}

.nav-link:hover,
.nav-link.active {
  letter-spacing: 0.3px !important;
}

.nav-link.active {
  color: var(--cyan) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 18px rgba(0,229,255,0.5) !important;
}

.nav-mobile-overlay a {
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.nav-mobile-overlay a:hover {
  letter-spacing: 0.9px !important;
}

/* ── Pipe dividers between nav items (hide the old bullet-dot look) ── */
.nav-link-gem {
  display: none !important;
}
.nav-link-ornament {
  display: none !important;
}

.nav-links .nav-item {
  position: relative;
}
.nav-links .nav-item + .nav-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5px;
  height: 20px;
  background: rgba(238, 242, 255, 0.35);
  pointer-events: none;
}
.nav.nav-scrolled .nav-links .nav-item + .nav-item::before {
  background: rgba(20, 15, 35, 0.22);
}

/* ── Scroll-triggered glass pill nav (toggled by js/nav-scroll.js) ── */
/* Transition only on .nav-scrolled so scrolling down fades in
   smoothly, but scrolling back up snaps instantly — no white flash. */
.nav.nav-scrolled {
  transition: background 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
}
.nav.nav-scrolled {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 10px 34px rgba(6, 4, 14, 0.22), 0 0 0 1px rgba(0, 229, 255, 0.06);
}
.nav.nav-scrolled .nav-link {
  color: #1c1730 !important;
  text-shadow: none !important;
}
.nav.nav-scrolled .nav-link:hover {
  color: #0b0a15 !important;
}
.nav.nav-scrolled .nav-link.active {
  color: #0a84ff !important;
}
.nav.nav-scrolled .nav-logo-text {
  filter: none !important;
}
.nav.nav-scrolled .nav-discord-btn {
  color: #4a55c9 !important;
}


/* ── Discord button scaled to match bigger nav ── */
.nav-discord-btn {
  font-family: var(--font-nav) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 26px 12px 18px !important;
  gap: 8px !important;
}
.nav-discord-icon {
  width: 17px !important;
  height: 17px !important;
}

/* ── Glossy "pop" buttons — glowing pill CTAs like Aniimo's ── */
.hero-btn,
.hero-btn-ghost,
.support-btn {
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.35) inset,
    0 8px 24px rgba(0,229,255,0.35),
    0 0 40px rgba(123,47,255,0.22) !important;
  transform: translateZ(0);
}

.hero-btn:hover,
.hero-btn-ghost:hover,
.support-btn:hover {
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.5) inset,
    0 10px 34px rgba(0,229,255,0.55),
    0 0 60px rgba(123,47,255,0.32) !important;
  transform: translateY(-3px) scale(1.02);
}

/* ── Settings button scaled to match ── */
.nav-settings-btn {
  width: 40px !important;
  height: 40px !important;
  font-size: 18px !important;
}

/* ── Hero offset corrected for taller 92px nav ── */
.hero {
  margin-top: -92px !important;
}

/* ── Fix: hero title guaranteed centering ──
   Earlier attempts: transform:translateX() nudges (fragile, only
   right for one viewport), then display:table + margin:auto.
   display:table turned out to have its own risk here: this wrap
   contains .hero-title-paint, an absolutely-positioned child sized
   at width:120%. Table-display boxes have a known history of
   miscalculating auto-width when they contain percentage-sized
   abspos descendants, which can silently skew the "centered" box
   itself depending on browser/engine. Switching to a plain block
   box sized with width:fit-content avoids table layout entirely —
   fit-content sizes to the actual rendered content, same as table
   did, but without invoking the table sizing algorithm at all. */
.hero-title-wrap {
  display: block !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* ── Performance: lighter blur (backdrop-filter is expensive,
   especially unaccelerated on Linux). Visually near-identical,
   much cheaper to composite every frame while scrolling. ── */
.nav {
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
}
.nav.nav-scrolled {
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
}

/* Promote the nav to its own compositor layer so blur/shadow
   recalculation doesn't repaint the rest of the page on scroll. */
.nav {
  will-change: background, box-shadow;
  contain: layout style paint;
}