/* Nav-pil (brief §2.6)
   Mobiel (< 900px): bol + uitklapkaart onder de bol. Vanaf 900px (alle drie
   de modellen in beeld): pil die vanuit de bol naar links openschuift. */

.nav {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
}

/* ---------- Bol + morphend icoon ---------- */

.nav__toggle {
  position: relative;
  flex: none;
  width: var(--nav-ball);
  height: var(--nav-ball);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dj-blue);
  color: var(--dj-white);
  cursor: pointer;
  box-shadow: var(--shadow-pill);
  transition: background-color var(--dur-fast) ease;
}
.nav__toggle:hover  { background: var(--dj-blue-hover); }
.nav__toggle:active { background: var(--dj-blue-pressed); }

.nav__bars {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 12px;
}
.nav__bars span {
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--dur-med) var(--ease-out),
    opacity var(--dur-fast) ease;
}
.nav__bars span:nth-child(1) { transform: translateY(-5px); }
.nav__bars span:nth-child(3) { transform: translateY(5px); }

.nav[data-state="open"] .nav__bars span:nth-child(1) { transform: rotate(45deg); }
.nav[data-state="open"] .nav__bars span:nth-child(2) { transform: scaleX(0); opacity: 0; }
.nav[data-state="open"] .nav__bars span:nth-child(3) { transform: rotate(-45deg); }

/* ---------- Items ---------- */

.nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  color: var(--dj-text);
  font-size: var(--fs-nav);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) ease;
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--dj-blue); }
.nav__link:focus-visible { outline-offset: -3px; }

.nav__item {
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.nav[data-state="open"] .nav__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--i) * 30ms);
}

/* ---------- Mobiel / tablet: kaart onder de bol ---------- */

.nav__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 10;
  min-width: 180px;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--dj-surface-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-pill);
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  visibility: hidden;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s linear var(--dur-med);
}
.nav[data-state="open"] .nav__menu {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.nav__menu .nav__link { padding: 10px 14px; }

/* ---------- Desktop: pil die naar links openschuift ---------- */

@media (min-width: 900px) {
  .nav { padding: 4px; }

  /* Glazen pil achter items + bol; alleen zichtbaar wanneer open */
  .nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-pill);
    background: var(--dj-surface-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-pill);
    opacity: 0;
    transition: opacity var(--dur-med) var(--ease-out);
  }
  .nav[data-state="open"]::before { opacity: 1; }
  .nav[data-state="open"] .nav__toggle { box-shadow: none; }

  /* Breedte animeert via grid 0fr → 1fr (vloeiend, geen vaste px-breedte) */
  .nav__menu {
    position: static;
    display: grid;
    grid-template-columns: 0fr;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    transition:
      grid-template-columns var(--dur-med) var(--ease-out),
      visibility 0s linear var(--dur-med);
  }
  .nav[data-state="open"] .nav__menu { grid-template-columns: 1fr; }

  .nav__list {
    display: flex;
    min-width: 0;
    overflow: hidden;
    padding-inline: var(--space-2) var(--space-1);
    gap: 2px;
  }
  .nav__menu .nav__link { padding: 6px 10px; }
}

/* Geen animatie bij de eerste render (standaardstand zetten zonder flits) */
.nav:not(.is-ready),
.nav:not(.is-ready) *,
.nav:not(.is-ready)::before { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .nav__item { transform: none; }
  .nav__menu { transform: none; }
}

/* ---------- Zonder JavaScript: menu gewoon zichtbaar ---------- */

.no-js .nav__toggle { display: none; }
.no-js .nav__menu {
  position: static;
  opacity: 1;
  transform: none;
  visibility: visible;
  grid-template-columns: 1fr;
}
.no-js .nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.no-js .nav__item { opacity: 1; transform: none; }