/* ========= STELLAR SYSTEMS — NAV.CSS (Shared Navbar) ========= */
/* Uses page tokens if present; falls back safely. No page-specific styling. */

html { overflow-x: clip; }                 /* prevent off-canvas slivers */
body { scroll-padding-top: 120px; }        /* anchor offset under fixed nav */

/* ===== Navbar ===== */
.navbar{
  position:fixed; top:24px; left:50%; transform:translateX(-50%);
  width:calc(100% - var(--gutter,24px)*2);
  max-width:calc(var(--container,1200px) + var(--gutter,24px)*2);
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:18px 24px; border-radius:16px;
  background:rgba(15,15,25,.58); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.06); box-shadow:0 8px 18px rgba(0,0,0,.16);
  z-index:100;
}
.navbar.nav-compact{ padding:12px 18px; background:rgba(15,15,25,.42); }

.logo{ font-size:1.75rem; font-weight:700; white-space:nowrap; }
.logo .dot{ color:var(--purple, #8f5fff); }

.nav-links{ display:flex; gap:24px; align-items:center; }
.nav-links a{
  color:var(--ink-2, #e2e2f0); font-weight:500; font-size:.95rem; text-decoration:none; opacity:.9;
  padding:10px 14px; border-radius:8px; transition:.2s ease;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"]{
  background:rgba(143,95,255,.10); color:var(--purple-2, #b68aff);
  outline:1px solid rgba(255,255,255,.06);
}
.nav-links a.cta-button{
  background:linear-gradient(90deg,var(--purple,#8f5fff),var(--blue,#3b82f6));
  color:#fff!important; font-weight:600; border-radius:8px; padding:8px 18px;
  box-shadow:0 0 10px rgba(139,92,246,.25);
}

/* Focus states */
.navbar a:focus-visible,
.hamburger:focus-visible,
.mobile-menu a:focus-visible{
  outline:2px solid rgba(143,95,255,.75);
  outline-offset:2px; border-radius:10px;
}

/* ===== Mobile Drawer ===== */
.hamburger{
  display:none; position:relative; z-index:110; width:44px; height:44px;
  border:1px solid rgba(255,255,255,.10); border-radius:10px;
  background:rgba(15,15,25,.5); backdrop-filter:blur(8px);
}
.hamburger span{
  display:block; height:2px; margin:8px 10px; background:#fff; opacity:.9;
  transition:transform .25s ease, opacity .25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }

/* fully off-canvas by default (no sliver) */
.mobile-menu{
  position:fixed; top:0; right:-1px; height:100dvh; width:min(86vw,360px);
  padding:80px 20px 20px; display:flex; flex-direction:column; gap:10px;
  background:rgba(15,15,25,.86); backdrop-filter:blur(14px);
  border-left:none; /* add border only when open */
  transform:translate3d(110%,0,0); will-change:transform;
  transition:transform .28s ease, border-left .2s ease;
  z-index:105;
}
.mobile-menu a{
  display:block; padding:14px 12px; border-radius:10px; text-decoration:none;
  color:var(--ink-2, #e2e2f0); font-weight:600; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.mobile-menu a[aria-current="page"]{ background:rgba(143,95,255,.12); border-color:rgba(143,95,255,.35); color:#fff; }
.mobile-menu a:hover{ background:rgba(143,95,255,.12); border-color:rgba(143,95,255,.35); color:#fff; }
.mobile-menu .mobile-cta{
  background:linear-gradient(90deg,var(--purple,#8f5fff),var(--blue,#3b82f6)); color:#fff; border:none;
  box-shadow:0 10px 24px rgba(139,92,246,.35);
}

.nav-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px);
  z-index:100; opacity:0; display:none; transition:opacity .25s ease;
}

/* Open state — MOBILE ONLY */
@media (max-width: 900px){
  body.nav-open .mobile-menu{
    transform:translate3d(0,0,0);
    border-left:1px solid rgba(255,255,255,.08);
  }
  body.nav-open .nav-scrim{ display:block; opacity:1; }
}

/* Force-hide drawer UI on desktop */
@media (min-width: 901px){
  #mobile-menu, .nav-scrim { display:none !important; }
}

/* Show hamburger on mobile; hide desktop links */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .hamburger{ display:block; }
}

/* Minor compact tweak at tablet sizes */
@media (max-width:820px){
  .navbar{ padding:14px 16px; }
}