/* ==========================================================================
   Het megamenu.

   Links de items, rechts de kaartjes van het item waar je overheen gaat.

   De opmaak is bewust ingetogen: het paneel is geborsteld staal in plaats van
   teal of blauw, de scheidingen zijn haarlijnen, en het item dat openstaat
   krijgt een streepje van twee pixels in plaats van een gekleurde vulling. De
   kaartjes komen alleen met een korte fade binnen, zonder sprong.

   Het staaleffect zit volledig in de achtergrond bij "li.submenu.mega > ul" en
   bestaat uit vier lagen: fijne verticale strepen (de borsteling), een verloop
   van lichter bovenin naar donkerder onderin, een lichte lijn langs de
   bovenrand, en de vervaging van wat er achter het paneel ligt. Het paneel is
   bewust niet dicht (ongeveer 65% dekkend) zodat de pagina eronder doorschemert;
   vind je het te doorzichtig, zet de drie waarden 0.62/0.66/0.72 in het verloop
   dan hoger. Wil je het paneel weer effen, haal dan de twee background-image
   regels weg; wil je het weer teal, zet er dan background: #00B7BE voor in de
   plaats.
   ========================================================================== */

header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-panel__groep[hidden] {
	display: none;
}

@media (min-width: 993px) {

	/* ---------- Het paneel ---------- */

	header nav.navigation .navigation-menu ul > li.submenu.mega > ul {
		padding: 15px;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 14px;
		/* Het thema zet hier een dichte teal achtergrondkleur; die moet weg, anders
		   heeft doorschijnendheid geen enkel effect. */
		background-color: transparent;
		background-image:
			repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
			linear-gradient(180deg, rgba(63, 70, 75, 0.62) 0%, rgba(42, 47, 51, 0.66) 48%, rgba(29, 33, 36, 0.72) 100%);
		box-shadow:
			0 26px 60px rgba(0, 0, 0, 0.45),
			inset 0 1px 0 rgba(255, 255, 255, 0.16);
		-webkit-backdrop-filter: blur(30px) saturate(150%);
		backdrop-filter: blur(30px) saturate(150%);
	}

	/* Kan de browser niet vervagen, dan wordt het paneel gewoon dicht: liever
	   effen dan onleesbare tekst over een foto heen. */
	@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {

		header nav.navigation .navigation-menu ul > li.submenu.mega > ul {
			background-image:
				repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
				linear-gradient(180deg, rgba(63, 70, 75, 0.97) 0%, rgba(42, 47, 51, 0.97) 48%, rgba(29, 33, 36, 0.97) 100%);
		}
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}

	/* ---------- De items links ---------- */

	header nav.navigation .navigation-menu ul > li.mega > ul > li:not(.mega-panel) > a {
		position: relative;
		border-radius: 8px;
		color: rgba(255, 255, 255, 0.78);
		transition: background 0.16s ease, color 0.16s ease;
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li:not(.mega-panel) > a:hover,
	header nav.navigation .navigation-menu ul > li.mega > ul > li.current-menu-item > a {
		background: rgba(255, 255, 255, 0.08);
		color: #ffffff;
	}

	/* Waar het paneel bij hoort: een streepje ervoor, geen gekleurde vulling. */
	header nav.navigation .navigation-menu ul > li.mega > ul > li.is-actief > a {
		background: rgba(255, 255, 255, 0.08);
		color: #ffffff;
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.is-actief > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 2px;
		height: 15px;
		margin-top: -7.5px;
		border-radius: 1px;
		background: #ffffff;
	}

	/* ---------- Het paneel van binnen ---------- */

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-panel__label {
		margin-bottom: 12px;
		padding-bottom: 9px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.55);
		opacity: 1;
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-card__image {
		border-radius: 6px;
		border: 1px solid rgba(255, 255, 255, 0.12);
		background: rgba(255, 255, 255, 0.06);
		transition: border-color 0.2s ease;
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-card__image img {
		transition: transform 0.4s ease;
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-card:hover .mega-card__image {
		border-color: rgba(255, 255, 255, 0.34);
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-card:hover .mega-card__image img {
		transform: scale(1.04);
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-card__title {
		font-size: 13px;
		line-height: 1.35;
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-card__meta {
		font-size: 10px;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.5);
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-panel__all {
		margin-top: 14px;
		padding-top: 11px;
		border-top: 1px solid rgba(255, 255, 255, 0.10);
		font-size: 12px;
		letter-spacing: 0.03em;
		color: rgba(255, 255, 255, 0.7);
		transition: color 0.16s ease;
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-panel__all:hover {
		color: #ffffff;
	}

	header nav.navigation .navigation-menu ul > li.mega > ul > li.mega-panel .mega-panel__zoek input {
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.07);
		color: #ffffff;
	}
}

/* ---------- Beweging: kort en klein ---------- */

@media (prefers-reduced-motion: no-preference) {
	li.mega-panel[data-stc-animatie] .mega-panel__groep .mega-card {
		opacity: 0;
		transform: translateY(3px);
	}

	li.mega-panel[data-stc-animatie] .mega-panel__groep.is-in .mega-card {
		opacity: 1;
		transform: none;
		transition: opacity 0.22s ease, transform 0.22s ease;
		transition-delay: calc(var(--stc-i, 0) * 28ms);
	}
}

/* Eén kaartje in een groep: dan een grote voorvertoning van die pagina. */
li.mega-panel .mega-panel__groep[data-enkel] .mega-panel__grid {
	grid-template-columns: minmax(0, 1fr);
}

li.mega-panel .mega-panel__groep[data-enkel] .mega-card {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}

li.mega-panel .mega-panel__groep[data-enkel] .mega-card__image {
	margin-bottom: 0;
}

li.mega-panel .mega-panel__groep[data-enkel] .mega-card__title {
	font-size: 15px;
	line-height: 1.3;
}


/* ==========================================================================
   Mobiel: dezelfde kleuren als op desktop.

   Het thema geeft de uitklapmenu's onder 993 px nog de oude teal vulling
   (#00B7BE). Op desktop is dat sinds september geborsteld staal, dus op de
   telefoon klopte het niet meer met de rest.

   Hier krijgt datzelfde uitklapmenu op mobiel het staal, maar dan dicht in
   plaats van doorschijnend: het paneel valt daar over een lichte achtergrond
   en witte tekst op half doorzichtig grijs leest slecht.
   ========================================================================== */

@media (max-width: 992px) {

	header nav.navigation .navigation-menu ul > li.submenu > ul {
		border: 1px solid rgba(255, 255, 255, 0.10);
		background-color: transparent;
		background-image:
			repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
			linear-gradient(180deg, rgba(63, 70, 75, 0.97) 0%, rgba(42, 47, 51, 0.97) 48%, rgba(29, 33, 36, 0.97) 100%);
		box-shadow:
			0 18px 40px rgba(0, 0, 0, 0.35),
			inset 0 1px 0 rgba(255, 255, 255, 0.10);
	}

	header nav.navigation .navigation-menu ul > li.submenu > ul li a:hover,
	header nav.navigation .navigation-menu ul > li.submenu > ul li.current-menu-item a {
		background: rgba(255, 255, 255, 0.10);
		color: #ffffff;
	}
}


/* ------------------------------------------------------------------------
 * Proef 8 sep 2026: blauw glas in plaats van grijs (Sean vindt het mooi).
 * Desktop: het megamenupaneel. Mobiel: het hele uitklapmenu.
 * Terugdraaien = dit hele blok verwijderen; de oorspronkelijke grijze stijl
 * staat hierboven en is niet aangeraakt.
 * ---------------------------------------------------------------------- */
@media (min-width: 993px) {
	header nav.navigation .navigation-menu ul > li.submenu.mega > ul {
		background-color: rgba(0, 40, 58, 0.42);
		background-image:
			radial-gradient(60% 80% at 15% 20%, rgba(0, 183, 190, 0.38) 0%, rgba(0, 183, 190, 0) 60%),
			radial-gradient(50% 70% at 85% 90%, rgba(20, 120, 140, 0.50) 0%, rgba(20, 120, 140, 0) 65%),
			radial-gradient(40% 50% at 72% 12%, rgba(120, 215, 225, 0.22) 0%, rgba(120, 215, 225, 0) 60%),
			linear-gradient(160deg, rgba(0, 57, 77, 0.62) 0%, rgba(0, 45, 64, 0.66) 55%, rgba(0, 30, 45, 0.74) 100%);
		border-color: rgba(120, 220, 225, 0.22);
		box-shadow:
			0 26px 60px rgba(0, 20, 30, 0.45),
			inset 0 1px 0 rgba(255, 255, 255, 0.14);
		-webkit-backdrop-filter: blur(30px) saturate(1.4);
		backdrop-filter: blur(30px) saturate(1.4);
	}
}

@media (max-width: 992px) {
	header nav.navigation .navigation-menu {
		background-color: rgba(0, 40, 58, 0.45) !important;
		background-image:
			radial-gradient(70% 45% at 15% 12%, rgba(0, 183, 190, 0.38) 0%, rgba(0, 183, 190, 0) 60%),
			radial-gradient(60% 40% at 90% 80%, rgba(20, 120, 140, 0.50) 0%, rgba(20, 120, 140, 0) 65%),
			radial-gradient(45% 30% at 75% 40%, rgba(120, 215, 225, 0.20) 0%, rgba(120, 215, 225, 0) 60%),
			linear-gradient(170deg, rgba(0, 57, 77, 0.62) 0%, rgba(0, 45, 64, 0.68) 55%, rgba(0, 30, 45, 0.78) 100%) !important;
		-webkit-backdrop-filter: blur(26px) saturate(1.4);
		backdrop-filter: blur(26px) saturate(1.4);
		color: #ffffff;
	}

	header nav.navigation .navigation-menu .top-menu {
		background: rgba(255, 255, 255, 0.07) !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	header nav.navigation .navigation-menu li::after {
		border-bottom-color: rgba(255, 255, 255, 0.16) !important;
	}

	header nav.navigation .navigation-menu a,
	header nav.navigation .navigation-menu li {
		color: #ffffff !important;
	}

	header nav.navigation .navigation-menu .stc-menuzoek input {
		background: rgba(255, 255, 255, 0.12) !important;
		border-color: rgba(255, 255, 255, 0.22) !important;
		color: #ffffff !important;
	}

	header nav.navigation .navigation-menu .stc-menuzoek input::placeholder {
		color: rgba(255, 255, 255, 0.65);
	}

	header nav.navigation .navigation-menu ul > li.submenu > ul {
		background: rgba(255, 255, 255, 0.08) !important;
		border: 1px solid rgba(255, 255, 255, 0.14);
	}
}