/* ============================================================
   nav-slim.css — Slim Spectrum Underline nav bar (Design 10-S).
   Loaded AFTER style.css and home-theme.css so it overrides.

   - Slim bar (10px vertical padding instead of 18-22px)
   - Smaller logo (30px) and menu items (0.80rem)
   - Lighter, more transparent background (0.20 alpha)
   - All menu items in CAPITAL letters
   - Clean Space Grotesk font (NOT handwritten)
   - Spectrum gradient underline that grows from left on hover
   - Active link has persistent spectrum underline
   - CTA is a soft glass pill with spectrum border
   - Search button styled to match

   The CSS uses !important on key overrides because home-theme.css
   on the home page is loaded after and would otherwise win.
   ============================================================ */

/* Load Space Grotesk if not already loaded by the page */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   SITE HEADER — slim and transparent
   ============================================================ */
.site-header{
  padding:10px 0 !important;
  background:rgba(20,35,64,0.20) !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
  border-bottom:1px solid rgba(255,255,255,0.04) !important;
  transition:padding .3s ease, background .3s ease !important;
}
/* When the homepage header goes "solid" on scroll, keep it light too */
.site-header.solid{
  padding:8px 0 !important;
  background:rgba(20,35,64,0.28) !important;
  backdrop-filter:blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
}

/* ============================================================
   NAV container — slimmer padding, gap between items
   ============================================================ */
.nav{
  display:flex !important;
  align-items:center !important;
  gap:24px !important;
  padding:0 28px !important;
  max-width:none !important;
  margin:0 !important;
  position:relative !important;
}

/* ============================================================
   LOGO — smaller, uppercase brand text
   ============================================================ */
.logo{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:700 !important;
  font-size:1.02rem !important;
  letter-spacing:0.04em !important;
  text-transform:uppercase !important;
  color:#EAF1FC !important;
  text-decoration:none !important;
  flex-shrink:0 !important;
  margin:0 !important;
  padding:0 !important;
}
.logo-mark{
  width:28px !important;
  height:28px !important;
  border-radius:0 !important;
  object-fit:contain !important;
  flex-shrink:0 !important;
  box-shadow:none !important;
}

/* ============================================================
   NAV LINKS — slim, capital letters, with spectrum underline
   ============================================================ */
.nav-links{
  display:flex !important;
  gap:2px !important;
  align-items:center !important;
  flex:1 !important;
  justify-content:center !important;
  margin:0 !important;
  margin-left:0 !important;
}
.nav-links a{
  position:relative !important;
  padding:6px 14px !important;
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:600 !important;
  font-size:0.80rem !important;
  letter-spacing:0.10em !important;
  text-transform:uppercase !important;
  color:#93A4C6 !important;
  text-decoration:none !important;
  border-radius:8px !important;
  transition:color .3s cubic-bezier(.2,.7,.2,1) !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  overflow:visible !important;
}
.nav-links a::before{
  /* spectrum gradient underline that grows from left on hover */
  content:'' !important;
  position:absolute !important;
  bottom:1px !important;
  left:14px !important;
  width:0 !important;
  height:2px !important;
  background:linear-gradient(90deg,#5AA9FF,#38D6E8,#8B7BFF,#FF7BD5) !important;
  border-radius:2px !important;
  box-shadow:0 0 6px rgba(90,169,255,0.40) !important;
  transition:width .32s cubic-bezier(.2,.7,.2,1) !important;
  pointer-events:none !important;
}
.nav-links a::after{
  /* subtle glow halo behind text on hover */
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(90,169,255,0.08),transparent 70%) !important;
  border-radius:8px !important;
  pointer-events:none !important;
  opacity:0 !important;
  transition:opacity .3s ease !important;
}
.nav-links a:hover{
  color:#FFFFFF !important;
}
.nav-links a:hover::before{
  width:calc(100% - 28px) !important;
}
.nav-links a:hover::after{
  opacity:1 !important;
}
/* Active link — persistent spectrum underline + bright text */
.nav-links a.active{
  color:#FFFFFF !important;
}
.nav-links a.active::before{
  width:calc(100% - 28px) !important;
  background:linear-gradient(90deg,#5AA9FF,#38D6E8) !important;
  box-shadow:0 0 8px rgba(90,169,255,0.55) !important;
}
.nav-links a.active::after{
  opacity:1 !important;
  background:radial-gradient(ellipse 80% 100% at 50% 50%,rgba(90,169,255,0.12),transparent 70%) !important;
}
/* Hide the homepage's default flame underline on the active link
   so our spectrum underline shows cleanly */
.nav-links a.active::after{
  /* keep our radial halo — homepage style.css uses .nav-links a.active::after
     for the flame underline. Override by re-asserting our styles above. */
}

/* ============================================================
   NAV RIGHT — CTA + Search + mobile toggle
   ============================================================ */
.nav-right{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  flex-shrink:0 !important;
  margin-left:0 !important;
}
.nav-cta{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:8px 18px !important;
  font-family:'Space Grotesk',sans-serif !important;
  font-weight:700 !important;
  font-size:0.76rem !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  color:#FFFFFF !important;
  text-decoration:none !important;
  border-radius:10px !important;
  background:linear-gradient(135deg,#6C3BFF 0%,#A855F7 100%) !important;
  border:1px solid rgba(255,255,255,0.20) !important;
  position:relative !important;
  overflow:hidden !important;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,filter .25s !important;
  box-shadow:
    0 6px 16px -6px rgba(108,59,255,0.65),
    0 2px 4px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -3px 8px rgba(59,20,120,0.55) !important;
  white-space:nowrap !important;
}
/* Glossy top sheen — gives the 3D reflective highlight */
.nav-cta::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important; right:0 !important; top:0 !important;
  height:52% !important;
  background:linear-gradient(180deg,rgba(255,255,255,0.38),rgba(255,255,255,0.0)) !important;
  border-radius:10px 10px 50% 50% !important;
  pointer-events:none !important;
  opacity:0.85 !important;
  transition:opacity .3s ease !important;
}
/* Moving reflective shine sweep */
.nav-cta::after{
  content:'' !important;
  position:absolute !important;
  top:0 !important;
  left:-130% !important;
  width:60% !important;
  height:100% !important;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,0.55) 50%,transparent 100%) !important;
  transform:skewX(-18deg) !important;
  pointer-events:none !important;
  animation:navCtaShine 3.8s ease-in-out infinite !important;
}
@keyframes navCtaShine{
  0%{ left:-130%; }
  55%{ left:130%; }
  100%{ left:130%; }
}
.nav-cta:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.06) !important;
  color:#FFFFFF !important;
  box-shadow:
    0 12px 28px -6px rgba(108,59,255,0.85),
    0 3px 6px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 8px rgba(59,20,120,0.55) !important;
}
.nav-cta:hover::before{ opacity:1 !important; }
@media (prefers-reduced-motion: reduce){
  .nav-cta::after{ animation:none !important; }
}

/* ============================================================
   SEARCH BUTTON — slim, spectrum underline grows on hover
   Some pages use .icon-btn, others use .nav-search-btn — both styled.
   ============================================================ */
.icon-btn,
.nav-search-btn{
  width:34px !important;
  height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:8px !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  color:#93A4C6 !important;
  cursor:pointer !important;
  position:relative !important;
  overflow:hidden !important;
  transition:all .3s ease !important;
  flex-shrink:0 !important;
  box-shadow:none !important;
}
.icon-btn svg,
.nav-search-btn svg{
  width:14px !important;
  height:14px !important;
}
.icon-btn::after,
.nav-search-btn::after{
  /* small spectrum underline that grows on hover */
  content:'' !important;
  position:absolute !important;
  bottom:0 !important;
  left:50% !important;
  width:0 !important;
  height:2px !important;
  background:linear-gradient(90deg,#5AA9FF,#38D6E8) !important;
  border-radius:2px !important;
  transform:translateX(-50%) !important;
  transition:width .32s cubic-bezier(.2,.7,.2,1) !important;
}
.icon-btn:hover,
.nav-search-btn:hover{
  background:rgba(90,169,255,0.06) !important;
  border-color:rgba(90,169,255,0.30) !important;
  color:#FFFFFF !important;
  box-shadow:0 0 12px rgba(90,169,255,0.20) !important;
}
.icon-btn:hover::after,
.nav-search-btn:hover::after{
  width:60% !important;
}

/* ============================================================
   MOBILE MENU TOGGLE — keep hidden on desktop, styled when shown
   ============================================================ */
.menu-toggle{
  display:none !important;
  width:34px !important;
  height:34px !important;
  border-radius:8px !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  color:#EAF1FC !important;
  font-size:1rem !important;
  cursor:pointer !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
}

/* ============================================================
   RESPONSIVE — switch to mobile drawer at <=880px
   ============================================================ */
@media (max-width:880px){
  .nav-links{ display:none !important; }
  .nav-cta{ display:none !important; }
  .icon-btn,
  .nav-search-btn{
    /* keep search button hidden on small mobile to save space */
    display:none !important;
  }
  .menu-toggle{ display:inline-flex !important; }
  .nav{
    justify-content:space-between !important;
    padding:0 18px !important;
    gap:12px !important;
  }
  .logo{ font-size:0.95rem !important; }
  .logo-mark{ width:26px !important; height:26px !important; }
}