/**
 * Megamenu en dropdowns.
 *
 * Per hoofdmenu-item een van vier soorten (keuze in Thema-opties › Menu):
 *   .mega--mega  megamenu: groepen, kolommen met links en het promoblok;
 *   .mega--een   1 kolom: alleen de groepen, als smalle lijst;
 *   .mega--twee  2 kolommen: groepen + één kolom met subitems en links;
 *   .mega--drie  3 kolommen: groepen + twee kolommen met subitems en links.
 *
 * De dropdown staat steeds gecentreerd onder het menu-item: assets/js/megamenu.js
 * meet dat en zet --mega-x (begin), --mega-w (breedte) en --mega-midden
 * (het midden van het menu-item, voor het driehoekje). Het mobiele menu staat
 * in assets/css/mobielmenu.css.
 *
 * Alle maten en kleuren staan hieronder in :root, dus je past ze op één plek aan.
 */

:root {
	--mega-max: 1240px;
	--mega-links: 232px;
	--mega-bg: var(--kleur-wit, #fff);
	--mega-rand: rgba(0, 0, 0, 0.08);
	--mega-actief: #f4f4f4;
	--mega-radius: 14px;
	--mega-schaduw: 0 20px 45px rgba(0, 0, 0, 0.14);
	--mega-duur: 0.18s;
	--mega-kop: var(--kleur-grijs, #4b5158);
	--mega-hoogte: 340px;
	--mega-tussenruimte: 0.35rem;
	--mega-brug: 26px;
	--mega-waas: rgba(0, 0, 0, 0.45);
	--mega-paneel-ruimte: 1.5rem;
	--mega-promo-breedte: 260px;
	--mega-promo-radius: 10px;
	--mega-knop-hover-tekst: var(--btn-tekst, #fff);
	--mega-knop-hover-bg: var(--btn-bg-hover, #00457f);

	/* Breedtes per soort dropdown. */
	--mega-breedte-mega: 1000px;            /* megamenu */
	--mega-een-min: 220px;                  /* 1 kolom: smalste */
	--mega-een-max: 340px;                  /* 1 kolom: breedste */
	--mega-kolom-twee: 260px;               /* 2 kolommen: de kolom met links */
	--mega-kolom-drie: 240px;               /* 3 kolommen: elk van de twee kolommen */
	--mega-kolom-gat: 2rem;                 /* ruimte tussen kolommen */
	--mega-blok-gat: 1.25rem;               /* ruimte tussen blokken onder elkaar */

	/* Het driehoekje boven de dropdown. */
	--mega-pijltje: 16px;
}

/* -------------------------------------------------------------------------
 * Gedeeld
 * ---------------------------------------------------------------------- */

.mega__groepen,
.mega__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega__groep {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* Het pijltje staat alleen bij een groep die rechts ook echt iets laat zien.
   Groepen die gewoon een link zijn krijgen er in de opmaak geen. */
.mega__pijl {
	flex: 0 0 auto;
	opacity: 0;
	transition: opacity var(--mega-duur), transform var(--mega-duur);
}

.mega__groep.is-actief,
.mega__groep:hover,
.mega__groep:focus-visible {
	background: var(--mega-actief);
	font-weight: 600;
}

.mega__groep:hover .mega__pijl,
.mega__groep:focus-visible .mega__pijl {
	opacity: 1;
	transform: translateX(3px);
}

/* De actieve groep laat het pijltje rustig heen en weer wippen. */
.mega__groep.is-actief .mega__pijl {
	opacity: 1;
	animation: kwdv-mega-pijl 1.4s ease-in-out infinite;
}

@keyframes kwdv-mega-pijl {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(5px);
	}
}

.mega__groep--tekst {
	cursor: default;
}

/* De grijze vlakken van de groepen staan los van elkaar. */
.mega__groep-rij + .mega__groep-rij {
	margin-top: var(--mega-tussenruimte);
}

/* Knoppen en links in de linkerkolom precies gelijk. Nodig omdat het thema
   eigen regels op menu-links heeft staan: die halen de padding weg en zetten
   display terug op block, waardoor het pijltje onder de titel zou vallen. */
.header__nav .mega .mega__groep {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.65rem 0.6rem;
	font-weight: 500;
}

.header__nav .mega .mega__groep.is-actief,
.header__nav .mega .mega__groep:hover,
.header__nav .mega .mega__groep:focus-visible {
	font-weight: 700;
}

/* De kop van een kolom: gewoon lettertype, geen hoofdletters, wel dikker
   dan de links eronder. Zo leest hij als het eerste item van de kolom. */
.mega__kop {
	margin: 0 0 0.35rem;
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

.mega__links li + li {
	margin-top: 0.35rem;
}

.mega__links a {
	display: inline-block;
	padding: 0.15rem 0;
	text-decoration: none;
}

.mega__links a:hover,
.mega__links a:focus-visible {
	text-decoration: underline;
}

.mega__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid var(--mega-rand);
}

/* De knoppen gebruiken gewoon .btn/.btn--primair/.btn--outline van het thema.
   Alleen de padding moeten we terugzetten: het thema haalt de padding weg bij
   links binnen de navigatie, waardoor de tekst tegen de rand kwam te staan. */
.header__nav .mega .mega__knop {
	padding: var(--btn-padding, 0.85rem 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

/* Het thema geeft links in de navigatie een eigen kleur; hier willen we de
   kleuren van de knop zelf. De omlijning van .btn--outline is currentColor,
   dus die loopt mee. */
.header__nav .mega .mega__knop.btn--primair {
	color: var(--kleur-wit, #fff);
}

.header__nav .mega .mega__knop.btn--outline {
	color: var(--kleur-primair, #005ca9);
}

/* Bij hover krijgt de outline-knop de donkerblauwe vulling van .btn:hover.
   De regel hierboven hield de tekst dan blauw (blauw op donkerblauw), dus
   hier zetten we de tekst terug op wit en laten we de rand meekleuren met
   de vulling. */
.header__nav .mega .mega__knop.btn--outline:hover,
.header__nav .mega .mega__knop.btn--outline:focus-visible {
	background: var(--mega-knop-hover-bg);
	color: var(--mega-knop-hover-tekst);
	box-shadow: inset 0 0 0 2px var(--mega-knop-hover-bg);
}

.mega__promo-link {
	display: block;
	text-decoration: none;
}

/* De foto wordt altijd in zijn eigen verhouding getoond: geschaald naar de
   breedte van het promoblok, nooit bijgesneden of ingezoomd. De width- en
   height-attributen van de img houden de ruimte vrij (geen layout shift). */
.mega__promo-beeld {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--mega-promo-radius);
}

.mega__promo-titel {
	display: block;
	margin-top: 0.7rem;
	font-weight: 600;
}

.mega__promo-meer {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.85rem;
}

.mega__promo-meer svg {
	vertical-align: -2px;
	margin-left: 0.25rem;
}

/* -------------------------------------------------------------------------
 * De donkere waas achter een open megamenu
 * ---------------------------------------------------------------------- */

.mega-waas {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: var(--mega-waas);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mega-duur);
}

.mega-waas.is-zichtbaar {
	opacity: 1;
}

@media (max-width: 1024px) {

	.mega-waas {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Desktop
 * ---------------------------------------------------------------------- */

@media (min-width: 1025px) {

	/* Sterker dan de themaregel op .menu-item, zodat de dropdown over de hele
	   breedte van de header kan schuiven in plaats van binnen het item. */
	.header__nav .menu--primair > li.menu-item--mega {
		position: static;
	}

	/* De houder loopt over de volle breedte van de header; de dropdown zelf
	   (.mega__binnen) staat daarin op --mega-x, gecentreerd onder het item. */
	.mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		margin-top: calc(var(--mega-brug) * -1);
		padding: var(--mega-brug) 1rem 1.5rem;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity var(--mega-duur), transform var(--mega-duur), visibility var(--mega-duur);
	}

	/* Open: via het script (is-open) of met het toetsenbord. Zonder script
	   (mega-js ontbreekt) gewoon met de muis erover. */
	.menu-item--mega.is-open > .mega,
	.menu-item--mega:has(:focus-visible) > .mega,
	html:not(.mega-js) .menu-item--mega:hover > .mega {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* De brug: een doorzichtige strook van de onderkant van het menu-item tot
	   aan de dropdown, precies zo breed als de dropdown. Daardoor blijft het
	   menu open als je er met de muis naartoe beweegt. */
	.mega::before {
		content: '';
		position: absolute;
		top: calc(var(--mega-brug) - var(--mega-brug-hoog, var(--mega-brug)));
		left: var(--mega-brug-x, 1rem);
		width: var(--mega-w, calc(100% - 2rem));
		height: var(--mega-brug-hoog, var(--mega-brug));
		pointer-events: auto;
	}

	/* Het driehoekje: altijd onder het midden van het menu-item. */
	.mega::after {
		content: '';
		position: absolute;
		z-index: 2;
		top: calc(var(--mega-brug) - var(--mega-pijltje) / 2);
		left: calc(var(--mega-midden, 50%) - var(--mega-pijltje) / 2);
		width: var(--mega-pijltje);
		height: var(--mega-pijltje);
		border-radius: 3px 0 0 0;
		background: var(--mega-bg);
		box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.04);
		transform: rotate(45deg);
		pointer-events: none;
	}

	.mega__binnen {
		position: relative;
		pointer-events: auto;
		display: grid;
		grid-template-columns: var(--mega-links) minmax(0, 1fr);
		box-sizing: border-box;
		max-width: 100%;
		margin-left: var(--mega-x, auto);
		margin-right: auto;
		overflow: hidden;
		border-radius: var(--mega-radius);
		background: var(--mega-bg);
		box-shadow: var(--mega-schaduw);
	}

	.mega__groepen {
		padding: 1.25rem 0.5rem 1.25rem 0.75rem;
		border-right: 1px solid var(--mega-rand);
	}

	/* De breedte ligt per soort vast, dus de dropdown verspringt niet opzij als
	   je van groep wisselt; alleen de hoogte past zich aan de inhoud aan. */
	.mega__panelen {
		position: relative;
		display: grid;
	}

	.mega__paneel {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		padding: var(--mega-paneel-ruimte);
	}

	.mega__paneel[hidden] {
		display: none;
	}

	.mega__inhoud {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.mega__stapel {
		display: flex;
		flex-direction: column;
		gap: var(--mega-blok-gat);
		min-width: 0;
	}

	/* ---------- Megamenu ---------- */

	.mega--mega .mega__binnen {
		width: var(--mega-breedte-mega);
	}

	.mega--mega .mega__panelen {
		min-height: var(--mega-hoogte);
	}

	.mega--mega .mega__paneel {
		grid-template-columns: minmax(0, 1fr) var(--mega-promo-breedte);
	}

	/* Geen promoblok? Dan mag de inhoud de volle breedte hebben. */
	.mega--mega .mega__paneel:not(:has(.mega__promo)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.mega--mega .mega__kolommen {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		gap: 1.5rem var(--mega-kolom-gat);
	}

	/* Het promoblok staat bovenaan in zijn kolom en is zo hoog als de foto in
	   zijn eigen verhouding. */
	.mega--mega .mega__promo {
		align-self: start;
	}

	/* ---------- 1 kolom ---------- */

	.mega--een .mega__binnen {
		display: block;
		width: max-content;
		min-width: var(--mega-een-min);
		max-width: var(--mega-een-max);
	}

	.mega--een .mega__groepen {
		border-right: 0;
	}

	/* ---------- 2 kolommen ---------- */

	.mega--twee .mega__binnen {
		width: calc(var(--mega-links) + var(--mega-kolom-twee) + var(--mega-paneel-ruimte) * 2);
	}

	.mega--twee .mega__kolommen {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	/* ---------- 3 kolommen ---------- */

	.mega--drie .mega__binnen {
		width: calc(var(--mega-links) + var(--mega-kolom-drie) * 2 + var(--mega-kolom-gat) + var(--mega-paneel-ruimte) * 2);
	}

	.mega--drie .mega__kolommen {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem var(--mega-kolom-gat);
	}
}

@media (prefers-reduced-motion: reduce) {

	.mega,
	.mega__paneel,
	.mega__pijl {
		transition: none;
	}

	.mega__groep.is-actief .mega__pijl {
		animation: none;
	}
}