/* landing_2/css/navbar.css */
/* ===== Navbar layout (matches your palette vars) ===== */
.site-header{
  /* add `.is-sticky` if you want it to stick: position: sticky; top: 0; */
  background: #000;               /* solid black bar, matching the index site nav */
  color: #fff;
  border-bottom: 0;
}
.nav{
  display:flex; align-items:center; gap:16px;
  padding:10px 16px;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand img.logo{ max-height:40px; object-fit:contain; }
.brandname{ display:flex; flex-direction:column; }
.brandline{ font-size:18px; line-height:1; font-weight:600; letter-spacing:.2px; }
.brandline b{ font-weight:900; }
.tagline{ font-size:12px; line-height:1.2; color:rgba(255,255,255,.7); }
.spacer{ flex:1 1 auto; }

/* Desktop menu */
.menu{ display:flex; align-items:center; gap:12px; list-style:none; margin:0; padding:0; }
.menu a{
  display:block; padding:8px 12px; border-radius:10px; font-weight:700;
}
.menu a:hover{ background:var(--brand); color:#fff; }
.menu a.is-active{ box-shadow:inset 0 0 0 1px var(--brand); }

/* Login button / account avatar (slot is hidden until /auth/status returns) */
.nav-auth-slot{ display:flex; align-items:center; min-height:38px; }
.nav-login-link{
  display:block; padding:8px 14px; border-radius:999px; font-weight:700;
  background:var(--brand); color:#fff;
}
.nav-login-link:hover{ background:var(--panel); color:#111; }
.nav-account-link{ display:inline-flex; align-items:center; }
.nav-profile-img{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--border);
  object-fit:cover; display:block;
}
.nav-profile-fallback{ align-items:center; color:#fff; }

/* ===== Light/dark theme toggle ===== */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto;
  border:0; cursor:pointer; border-radius:999px; color:#fff;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:16px; line-height:1;
  transition:background .2s ease, transform .2s ease;
}
.theme-toggle:hover{ background:rgba(255,255,255,.10); transform:translateY(-1px); }
.theme-toggle:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* Show the icon for the theme you'd switch TO (moon while light, sun while dark). */
.theme-toggle__icon{ display:none; }
:root[data-theme="light"] .theme-toggle__icon--dark{ display:inline; }
:root[data-theme="dark"]  .theme-toggle__icon--light{ display:inline; }

/* Mobile drawer */
.drawer{ display:none; }
.drawer-inner{
  display:grid; gap:8px; padding:10px 16px; border-top:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.drawer-inner a{ padding:10px 12px; border-radius:10px; font-weight:700; }
.drawer-inner a.is-active{ box-shadow:inset 0 0 0 1px var(--brand); }

/* ===== Pill burger ===== */
.nav-burger{
  --size: 42px;
  --ink: #fff;                 /* burger sits on the dark header, so keep it white in both themes */
  display:flex; align-items:center; gap:8px;
  width:auto; height:38px; padding:8px 12px;
  border:0; cursor:pointer; border-radius:999px; color:var(--ink);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nav-burger:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px) }
.nav-burger:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.nav-burger .burger-label{ font-weight:700; font-size:13px; color:var(--ink); opacity:.9; transition:opacity .2s ease; }

.nav-burger .burger-lines,
.nav-burger .burger-lines::before,
.nav-burger .burger-lines::after{
  content:""; display:block; width:18px; height:2px; background:currentColor;
  border-radius:2px; transition:transform .22s ease, opacity .22s ease;
}
.nav-burger .burger-lines{ position:relative }
.nav-burger .burger-lines::before{ position:absolute; top:-6px }
.nav-burger .burger-lines::after { position:absolute; top: 6px }

/* Open state */
.nav-burger.is-open .burger-lines{ transform:rotate(45deg) }
.nav-burger.is-open .burger-lines::before{ transform:translateY(6px) rotate(90deg) }
.nav-burger.is-open .burger-lines::after { transform:translateY(-6px) rotate(90deg) }
.nav-burger.is-open .burger-label{ opacity:0 }

.nav-burger{ display:none; }                 /* default: hidden on desktop */

/* Drawer animation */
.drawer.animating{ transition: height .22s ease; }
/* Header and drawer stay above tiles */
.site-header{ position:relative; z-index: 100; }

/* Drawer styles */
.drawer{
  position:relative; z-index: 100;          /* above page content */
  background: rgba(17,19,26,.92);           /* solid-enough backdrop so nothing shows through */
  backdrop-filter: saturate(1.05) blur(4px);
  /* Clip the links during the height animation - and if the animation ever fails mid-state
     (iOS Safari can skip it, see navbar.js), a stuck partial height must not spill the links
     over the page content */
  overflow:hidden;
}

/* Smooth height animation only when JS toggles it */
.drawer.animating{ transition: height .22s ease; }

.drawer{ display:none; }
.drawer[hidden]{ display:none !important; }      /* force hidden to win */

/* Mobile-only presence */
@media (max-width:960px){
  .drawer{ display:block; }
  .menu.desktop-only{ display:none; }
  .drawer{ display:block; }
  .drawer:not([hidden]){ display:block; }        /* only show when NOT hidden */
  .nav-burger{ display:flex; }               /* show only on mobile */
}