/* Intake.now - "Voor wie"-menu in de hoofdnavigatie.
   Apart bestand zodat alle pagina's hetzelfde menu delen en er maar
   op een plaats onderhoud nodig is. Gebruikt <details>/<summary>, dus
   toetsenbordbediening werkt zonder extra ARIA-constructies.
   De selectors staan bewust binnen nav en .nav-dropdown, zodat de rest
   van de bestaande stijlen ongemoeid blijft. */

nav .nav-dropdown {
  position: relative;
  display: inline-block;
}

nav .nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #000;
  font-size: 1rem;
  white-space: nowrap;
  user-select: none;
}

nav .nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

nav .nav-dropdown > summary::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 0.2s ease;
}

nav .nav-dropdown[open] > summary::after {
  transform: translateY(0.08em) rotate(-135deg);
}

nav .nav-dropdown > summary:hover {
  opacity: 0.7;
}

nav .nav-dropdown > summary:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px;
  border-radius: 4px;
}

nav .nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
  display: grid;
  gap: 0.15rem;
  z-index: 1010;
}

/* Hogere specificiteit dan de bestaande regel die nav-links op mobiel
   verbergt, zodat de items in het uitklapmenu wel zichtbaar blijven. */
nav .nav-dropdown-panel a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  color: #000;
  font-size: 0.98rem;
  white-space: nowrap;
  text-decoration: none;
}

nav .nav-dropdown-panel a:hover {
  background: #f5f5f5;
  opacity: 1;
}

nav .nav-dropdown-panel a:focus-visible {
  outline: 3px solid #000;
  outline-offset: -3px;
}

/* De ruimte tussen de knop en het paneel hoort bij het menu. Zonder deze
   onzichtbare brug verlaat de muis het menu onderweg naar beneden en klapt
   het paneel dicht voor je een item kunt aanwijzen. Alleen nodig op
   toestellen met een muisaanwijzer. */
@media (hover: hover) and (pointer: fine) {
  nav .nav-dropdown-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.7rem;
    height: 0.7rem;
  }

  /* Ook de ruimte onder de knop zelf telt mee. */
  nav .nav-dropdown[open] > summary::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.7rem;
  }

  nav .nav-dropdown > summary {
    position: relative;
  }
}

nav .nav-dropdown-panel a[aria-current="page"] {
  font-weight: 600;
  background: #f5f5f5;
}

@media (max-width: 820px) {
  /* Met het extra menu-item valt de navigatie op smalle schermen onder het
     logo. De header wordt daardoor hoger, dus krijgt de inhoud eronder wat
     meer ruimte. Geldt enkel op pagina's die dit menu tonen. */
  main {
    padding-top: 7rem;
  }

  nav {
    gap: 1rem;
  }

  nav .nav-dropdown > summary {
    font-size: 0.95rem;
  }

  /* Op smalle schermen hangt het paneel onder de volledige header in plaats
     van onder de knop. De positie van de knop varieert per pagina (met of
     zonder taalkiezer), dus zo valt het paneel nooit buiten beeld.
     De bovenkant wordt door nav-dropdown.js op de headerhoogte gezet. */
  nav .nav-dropdown-panel {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 4.75rem;
    transform: none;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 400px) {
  nav {
    gap: 0.75rem;
  }
}