/* ─────────────────────────────────────────────────────────────
   Willoe AI — Sidebar nav (Metalab stijl)
   Floating vertical pill stack, fixed left side.
   Zichtbaar vanaf 1024px; smaller = verborgen, top nav actief.
   ───────────────────────────────────────────────────────────── */

/* ── Pill stack ── */
.sidenav {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;           /* hidden by default; flex at 1440px+ */
  flex-direction: column;
  gap: 7px;
}

.sidenav__pill {
  display: block;
  padding: 9px 17px;
  border-radius: 999px;
  background: rgba(21, 21, 25, .88);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .07);
  color: rgba(248, 247, 243, .52);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.sidenav__pill:hover {
  background: rgba(36, 36, 44, .96);
  color: rgba(248, 247, 243, .88);
  border-color: rgba(255, 255, 255, .11);
}

.sidenav__pill.is-active {
  background: rgba(46, 46, 56, 1);
  color: rgba(248, 247, 243, 1);
  border-color: rgba(255, 255, 255, .14);
}

.sidenav__sep {
  height: 1px;
  background: rgba(255, 255, 255, .07);
  margin: 3px 10px;
}

/* ── Show sidebar + adjust layout at 1024px+ ── */
@media (min-width: 1024px) {

  /* Reveal sidebar */
  .sidenav { display: flex; }

  /* Hide top-nav links (sidebar takes over navigation) */
  .nav__links { display: none !important; }

  /*
   * Push content left-edges clear of de sidebar's right edge (~200px nodig).
   * Formula: clamp(40px, 200px − (viewport − 1280px) ÷ 2, 200px)
   *   @ 1024px → 200px (volledige clearance)
   *   @ 1280px → 200px (geen natuurlijke centreer-marge nog)
   *   @ 1440px → 120px
   *   @ 1600px → 40px (container-marge alleen volstaat)
   */
  .nav__inner,
  .stats-bar__inner,
  .quad,
  .container,
  .page-hero__inner,
  .toc__inner,
  .numbers__inner,
  .cta-ed__inner,
  .chapter-header,
  .feat,
  .pull-quote {
    padding-left: clamp(40px, calc(200px - (100vw - 1280px) * 0.5), 200px) !important;
  }

  /* index.html hero — headline lives in .hero__bottom */
  .hero__bottom {
    padding-left: clamp(40px, calc(200px - (100vw - 1280px) * 0.5), 200px) !important;
  }
}