/**
 * ZONE primary-menu — het hoofdmenu.
 * Template: templates/layout/regions/_primary-menu.html.twig
 *           templates/navigation/menu--main.html.twig
 * JS:       js/regions/primary-menu.js
 *
 *   < 900px   menuknop; het menu klapt uit als paneel over de volle breedte
 *   ≥ 900px   menu horizontaal; submenu's als uitklapper onder het item
 *
 * Het JavaScript zet de class .is-mobiel op .zone-primary-menu zolang het
 * scherm smaller is dan 900px. Zonder JavaScript is het menu altijd open.
 */

/* ── Algemeen ─────────────────────────────────────────── */
.zone-primary-menu {
  position: relative;
}

.hoofdmenu,
.hoofdmenu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hoofdmenu__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.hoofdmenu__link {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: var(--touch);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-menu);
  color: var(--c-inkt);
  text-decoration: none;
  border: 1px solid transparent;
}

.hoofdmenu__link:hover,
.hoofdmenu__link:focus-visible {
  border-color: var(--c-groen);
  color: var(--c-inkt);
  text-decoration: none;
}

/* Huidige pagina: bruine tekst zoals het oude verhuurthema (iets donkerder,
   zodat het leesbaar blijft: 5,3:1). Schermlezers horen "huidige pagina" via
   aria-current, dat Drupal zelf toevoegt. */
.hoofdmenu__link.is-active,
.hoofdmenu__item--actief > .hoofdmenu__link {
  color: var(--c-bruin);
}

/* Laatste hoofditem ("Lid worden") als groene knop. */
.hoofdmenu > .hoofdmenu__item:last-child > .hoofdmenu__link {
  background: var(--c-groen);
  color: var(--c-inkt);
}

.hoofdmenu > .hoofdmenu__item:last-child > .hoofdmenu__link:hover,
.hoofdmenu > .hoofdmenu__item:last-child > .hoofdmenu__link:focus-visible {
  background: var(--c-groen-licht);
  border-color: var(--c-groen-licht);
}

/* Knop naast een item met een submenu (pijltje). */
.hoofdmenu__sub-knop {
  flex: 0 0 var(--touch);
  min-height: var(--touch);
  padding: 0;
  background: transparent;
  color: var(--c-inkt);
}

.hoofdmenu__sub-knop::before {
  content: "";
  display: block;
  width: 0.55em;
  height: 0.55em;
  margin: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--overgang);
}

.hoofdmenu__sub-knop[aria-expanded="true"]::before {
  transform: translateY(25%) rotate(-135deg);
}

.hoofdmenu__sub-knop:hover {
  background: var(--c-groen);
}

.hoofdmenu__sub[hidden] {
  display: none;
}

/* ── Menuknop (alleen op kleine schermen) ─────────────── */
.zone-primary-menu__knop {
  gap: var(--s-2);
  font-family: var(--f-kop);
  color: var(--c-inkt);
  background: transparent;
  padding-inline: var(--s-2);
}

.zone-primary-menu__knop:hover {
  background: var(--c-groen);
}

/* Drie streepjes, die bij openen een kruis worden. */
.zone-primary-menu__knop-icoon,
.zone-primary-menu__knop-icoon::before,
.zone-primary-menu__knop-icoon::after {
  display: block;
  width: 1.5rem;
  height: 3px;
  background: currentColor;
  transition: transform var(--overgang), background-color var(--overgang);
}

.zone-primary-menu__knop-icoon {
  position: relative;
}

.zone-primary-menu__knop-icoon::before,
.zone-primary-menu__knop-icoon::after {
  content: "";
  position: absolute;
  left: 0;
}

.zone-primary-menu__knop-icoon::before { top: -7px; }
.zone-primary-menu__knop-icoon::after { top: 7px; }

.zone-primary-menu__knop[aria-expanded="true"] .zone-primary-menu__knop-icoon {
  background: transparent;
}

.zone-primary-menu__knop[aria-expanded="true"] .zone-primary-menu__knop-icoon::before {
  transform: translateY(7px) rotate(45deg);
}

.zone-primary-menu__knop[aria-expanded="true"] .zone-primary-menu__knop-icoon::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Kleine schermen (< 900px): uitklappaneel ─────────── */
.zone-primary-menu.is-mobiel {
  position: static; /* paneel wordt t.o.v. de headerbalk geplaatst */
}

.zone-primary-menu.is-mobiel .zone-primary-menu__paneel {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  margin-top: var(--s-2);
  padding: var(--s-2) var(--gutter) var(--s-4);
  background: var(--c-wit);
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.15);
}

.zone-primary-menu.is-mobiel .zone-primary-menu__paneel[hidden] {
  display: none;
}

.zone-primary-menu.is-mobiel .hoofdmenu__item {
  border-bottom: 1px solid var(--c-lijn);
}

.zone-primary-menu.is-mobiel .hoofdmenu__sub {
  flex-basis: 100%;
  padding-inline-start: var(--s-4);
}

.zone-primary-menu.is-mobiel .hoofdmenu > .hoofdmenu__item:last-child {
  border-bottom: 0;
  margin-top: var(--s-2);
}

/* De headerbalk moet het referentiepunt zijn voor het uitklappaneel. */
.zone-header__balk:has(.is-mobiel) {
  position: relative;
}

/* ── Grote schermen (≥ 900px): horizontaal menu ───────── */
@media (min-width: 56.25em) {
  .zone-primary-menu:not(.is-mobiel) .hoofdmenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
  }

  .zone-primary-menu:not(.is-mobiel) .hoofdmenu__item {
    flex-wrap: nowrap;
  }

  /* Maat van de menu-items gelijk aan het origineel (65px hoog). */
  .zone-primary-menu:not(.is-mobiel) .hoofdmenu > .hoofdmenu__item > .hoofdmenu__link {
    padding: 1.25rem 1.0625rem;
    line-height: 1.4375rem; /* 23px: 20 + 23 + 20 + 2px rand = 65px */
  }

  .zone-primary-menu:not(.is-mobiel) .hoofdmenu__sub-knop {
    flex-basis: 1.75rem;
    margin-inline-start: calc(-1 * var(--s-2));
  }

  /* Submenu als uitklapper onder het item. */
  .zone-primary-menu:not(.is-mobiel) .hoofdmenu__sub {
    position: absolute;
    z-index: 20;
    top: 100%;
    inset-inline-start: 0;
    min-width: 14rem;
    padding: var(--s-1);
    background: var(--c-wit);
    border: 1px solid var(--c-groen);
    box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.15);
  }

  .zone-primary-menu:not(.is-mobiel) .hoofdmenu__sub .hoofdmenu__sub {
    top: 0;
    inset-inline-start: 100%;
  }
}