/*
 * Solidoe menu – weergave.
 * Huisstijl overgenomen van solidoe.nl (Elementor-kit 8644, header 8656,
 * megamenu-template 8673). Aanpassen kan via de custom properties hieronder,
 * bijv. in Elementor → Site-instellingen → Eigen CSS:
 *   .solidoe-menu { --sm-top-padding: 18px; }
 * Wisselpunt computer/telefoon: 1024px, gelijk aan Elementor "tablet".
 */

.solidoe-menu {
	--sm-tekst: #2B3E40;
	--sm-hover: #707070;
	--sm-zacht: #5B6668;
	--sm-wit: #FFFFFF;
	--sm-lijn: #F2F2F2;
	--sm-vlak: #F7F7F7;
	--sm-focus: #2986E8;
	--sm-accent: #499CA6;
	--sm-schaduw: 0 10px 25px rgba(0, 0, 0, .1);
	--sm-font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sm-kopfont: "Poppins", var(--sm-font);
	--sm-top-grootte: 16px;
	--sm-top-hoogte: 50px;
	--sm-top-padding: 25px;
	--sm-link-grootte: 14px;
	--sm-link-regel: 28px;
	--sm-paneel-kolom: 15rem;
	--sm-duur: 180ms;
	--sm-ease: cubic-bezier(.2, .7, .2, 1);

	position: relative;
	font-family: var(--sm-font);
	color: var(--sm-tekst);
}

.solidoe-menu *,
.solidoe-menu *::before,
.solidoe-menu *::after {
	box-sizing: border-box;
}

/* :where() houdt dit op 0,1,0: wint van thema-regels (ul, p), maar niet van de eigen marges hieronder. */
.solidoe-menu :where(ul, li, p) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.solidoe-menu a {
	color: inherit;
	text-decoration: none;
}

/*
 * Knoppen neutraliseren. Hello Elementor (reset.css) geeft elke knop een rand,
 * padding en bij hover/focus een roze achtergrond, met specificiteit tot 0,2,0
 * ([type=button]:hover). Daarom hier 0,2,1 en 0,3,1; de eigen knopregels
 * hieronder gebruiken minstens dezelfde specificiteit en staan erna.
 */
.solidoe-menu button[type="button"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-align: inherit;
	white-space: normal;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.solidoe-menu button[type="button"]:hover,
.solidoe-menu button[type="button"]:focus,
.solidoe-menu button[type="button"]:active {
	color: inherit;
	background: transparent;
	text-decoration: none;
}

.solidoe-menu :focus-visible {
	outline: 2px solid var(--sm-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.solidoe-menu__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Hoofditems ------------------------------------------------------------ */

.solidoe-menu :is(a, button).solidoe-menu__top {
	display: flex;
	align-items: center;
	gap: .4em;
	font-family: var(--sm-font);
	font-size: var(--sm-top-grootte);
	font-weight: 700;
	line-height: 1.25;
	color: var(--sm-tekst);
	text-align: left;
	text-decoration: none;
	transition: color var(--sm-duur) ease-out;
}

.solidoe-menu__pijltje {
	flex: none;
	transition: transform var(--sm-duur) var(--sm-ease);
}

.solidoe-menu__item.is-open > .solidoe-menu__top .solidoe-menu__pijltje {
	transform: rotate(180deg);
}

/* Paneel-inhoud (computer én telefoon) ---------------------------------- */

.solidoe-menu__paneeltitel {
	font-family: var(--sm-kopfont);
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
}

.solidoe-menu__paneeltitel a,
.solidoe-menu__paneeltitel > span {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}

.solidoe-menu__paneeltitel a::before,
.solidoe-menu__paneeltitel > span::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--sm-accent);
}

.solidoe-menu__verder {
	flex: none;
	transition: transform var(--sm-duur) var(--sm-ease);
}

.solidoe-menu__paneeltitel a:hover .solidoe-menu__verder {
	transform: translateX(3px);
}

.solidoe-menu__kop {
	font-size: var(--sm-link-grootte);
	font-weight: 700;
	line-height: var(--sm-link-regel);
}

/* Optionele kopkleur (bijv. leeftijdsgroepen bij Aanbod): een streepje, de tekst blijft donker voor voldoende contrast. */
.solidoe-menu__kop.heeft-kleur {
	display: flex;
	align-items: center;
	gap: .5em;
}

.solidoe-menu__kop.heeft-kleur::before {
	content: "";
	flex: none;
	width: 4px;
	height: 1.1em;
	border-radius: 2px;
	background: var(--sm-kopkleur);
}

/* Kolomkop met adres maar zonder links eronder (bijv. "Postcode check"): een actielink, geen lege categorie. */
.solidoe-menu__kop.is-actie a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .85rem;
	border-radius: 6px;
	background: var(--sm-vlak);
	box-shadow: inset 3px 0 0 var(--sm-accent);
	line-height: 1.4;
}

.solidoe-menu__paneel .solidoe-menu__kop.is-actie a:hover {
	color: var(--sm-tekst);
	background: var(--sm-lijn);
	text-decoration: none;
}

.solidoe-menu__kop.is-actie a:hover .solidoe-menu__verder {
	transform: translateX(3px);
}

.solidoe-menu__link {
	display: inline-block;
	font-size: var(--sm-link-grootte);
	font-weight: 400;
	line-height: var(--sm-link-regel);
}

.solidoe-menu__omschrijving {
	font-size: 12px;
	color: var(--sm-zacht);
	white-space: nowrap;
}

.solidoe-menu__paneel a:hover {
	color: var(--sm-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.solidoe-menu__paneeltitel a:hover {
	text-decoration: none;
}

.solidoe-menu a[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--sm-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ======================================================================
   Computer (vanaf 1025px)
   ====================================================================== */
@media (min-width: 1025px) {
	.solidoe-menu__toggle,
	.solidoe-menu__lade-kop,
	.solidoe-menu__achtergrond,
	.solidoe-menu__item.is-alleen-mobiel {
		display: none !important;
	}

	/*
	 * Tussen 1025 en ±1366px is de headerkolom smaller dan de balk met 25px
	 * per kant (de vier items liepen op twee regels). De ruimte rond de items
	 * schaalt daarom mee: 8px bij 1025px, 25px vanaf ±1365px.
	 */
	.solidoe-menu {
		--sm-top-padding: clamp(8px, calc(8px + (100vw - 1025px) * .05), 25px);
	}

	/*
	 * nowrap: met het terugvalfont (vóór Lato geladen is) is de balk iets
	 * breder; met wrap sprong hij dan even naar twee regels en weer terug,
	 * wat de hele pagina 20px liet verspringen (CLS 0,27 bij 1025px).
	 */
	.solidoe-menu__balk {
		display: flex;
		flex-wrap: nowrap;
		justify-content: var(--sm-uitlijning, flex-start);
		align-items: stretch;
	}

	.solidoe-menu__item {
		position: relative;
	}

	.solidoe-menu :is(a, button).solidoe-menu__top {
		position: relative;
		height: var(--sm-top-hoogte);
		padding: 0 var(--sm-top-padding);
		white-space: nowrap;
	}

	.solidoe-menu :is(a, button).solidoe-menu__top:hover,
	.solidoe-menu .is-open > :is(a, button).solidoe-menu__top {
		color: var(--sm-hover);
	}

	/* Accentstreep onder het hoofditem: open of huidige sectie. */
	.solidoe-menu__top::after {
		content: "";
		position: absolute;
		left: var(--sm-top-padding);
		right: var(--sm-top-padding);
		bottom: 6px;
		height: 3px;
		border-radius: 2px;
		background: var(--sm-accent);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--sm-duur) var(--sm-ease);
	}

	.solidoe-menu__item.is-open > .solidoe-menu__top::after,
	.solidoe-menu__item.is-actief > .solidoe-menu__top::after {
		transform: scaleX(1);
	}

	.solidoe-menu__paneel {
		position: absolute;
		top: 100%;
		left: var(--sm-verschuif, 0px);
		z-index: 1000;
		width: calc(var(--sm-kolommen, 3) * var(--sm-paneel-kolom) + 4rem);
		/* Eén kolom (bijv. Werken bij): breed genoeg voor lange linkteksten. */
		min-width: min(24rem, calc(100vw - 2rem));
		max-width: calc(100vw - 2rem);
		padding: 2rem;
		background: var(--sm-wit);
		border-top: 3px solid var(--sm-accent);
		box-shadow: var(--sm-schaduw);
		/* Niet hoger dan het scherm (JS zet --sm-max-hoogte; de header is sticky). */
		max-height: var(--sm-max-hoogte, calc(100vh - 140px));
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition:
			opacity var(--sm-duur) ease-out,
			transform var(--sm-duur) var(--sm-ease),
			visibility 0s linear var(--sm-duur);
	}

	.solidoe-menu__item.is-open > .solidoe-menu__paneel,
	/* Zolang het script nog niet draait (bijv. uitgesteld door een cacheplugin): hover/focus. */
	.solidoe-menu:not(.is-js) .solidoe-menu__item:hover > .solidoe-menu__paneel,
	.solidoe-menu:not(.is-js) .solidoe-menu__item:focus-within > .solidoe-menu__paneel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.solidoe-menu__paneeltitel {
		padding-bottom: 1rem;
		margin-bottom: 1.25rem;
		border-bottom: 2px solid var(--sm-lijn);
	}

	.solidoe-menu__groepen {
		display: grid;
		grid-template-columns: repeat(var(--sm-kolommen, 3), minmax(0, 1fr));
		gap: 1.25rem 2rem;
	}

	/* Vervolgkolom zonder kop (bijv. "Ziekte"): begint op de hoogte van de eerste link, niet als kop. */
	.solidoe-menu__groepen:has(> .solidoe-menu__groep:not(.zonder-kop)) > .solidoe-menu__groep.zonder-kop {
		padding-top: var(--sm-link-regel);
	}
}

/* ======================================================================
   Telefoon en tablet (tot en met 1024px)
   ====================================================================== */
@media (max-width: 1024.98px) {
	.solidoe-menu {
		display: flex;
		justify-content: var(--sm-uitlijning, flex-start);
	}

	.solidoe-menu__item.is-alleen-desktop {
		display: none !important;
	}

	.solidoe-menu button.solidoe-menu__toggle {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		min-width: 44px;
		min-height: 44px;
		padding: 0 .5rem;
		font-family: var(--sm-font);
		font-weight: 700;
		font-size: 16px;
		color: var(--sm-tekst);
	}

	/* Hamburger: drie streepjes van 30px (zoals --nav-menu-icon-size op live). */
	.solidoe-menu__toggle-icoon,
	.solidoe-menu__toggle-icoon > span,
	.solidoe-menu__toggle-icoon > span::before,
	.solidoe-menu__toggle-icoon > span::after {
		display: block;
	}

	.solidoe-menu__toggle-icoon {
		position: relative;
		width: 26px;
		height: 18px;
	}

	.solidoe-menu__toggle-icoon > span,
	.solidoe-menu__toggle-icoon > span::before,
	.solidoe-menu__toggle-icoon > span::after {
		position: absolute;
		left: 0;
		width: 26px;
		height: 2.5px;
		border-radius: 2px;
		background: currentColor;
	}

	.solidoe-menu__toggle-icoon > span {
		top: 8px;
	}

	.solidoe-menu__toggle-icoon > span::before,
	.solidoe-menu__toggle-icoon > span::after {
		content: "";
	}

	.solidoe-menu__toggle-icoon > span::before {
		top: -7px;
	}

	.solidoe-menu__toggle-icoon > span::after {
		top: 7px;
	}

	/* De lade schuift van rechts in beeld. */
	.solidoe-menu__lade {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100001;
		display: flex;
		flex-direction: column;
		width: min(380px, 88vw);
		background: var(--sm-wit);
		box-shadow: -10px 0 30px rgba(0, 0, 0, .15);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(100%);
		visibility: hidden;
		transition:
			transform 260ms var(--sm-ease),
			visibility 0s linear 260ms;
	}

	.solidoe-menu.lade-open .solidoe-menu__lade {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}

	/* De lade scrolt (overflow) en heeft een sticky kop: focusring binnen het element, anders valt hij weg. */
	.solidoe-menu__lade :focus-visible {
		outline-offset: -3px;
	}

	/* Heel smalle schermen (320px): de menuknop past dan nog naast "Inschrijven". */
	@media (max-width: 359.98px) {
		.solidoe-menu {
			margin-right: -8px;
		}
	}

	.solidoe-menu__achtergrond {
		position: fixed;
		inset: 0;
		z-index: 100000;
		background: rgba(13, 13, 13, .45);
		opacity: 0;
		transition: opacity 260ms ease-out;
	}

	.solidoe-menu.lade-open .solidoe-menu__achtergrond {
		opacity: 1;
	}

	/*
	 * Smalle telefoons: alleen het hamburgericoon, zodat de knop naast
	 * "Inschrijven" past (zoals het oude menu). "Menu" blijft de naam voor
	 * schermlezers; de knop houdt 44x44px als aanraakvlak.
	 */
	@media (max-width: 480px) {
		.solidoe-menu button.solidoe-menu__toggle {
			justify-content: center;
			padding: 0 9px;
		}

		.solidoe-menu__toggle-tekst {
			position: absolute !important;
			width: 1px;
			height: 1px;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
		}
	}

	.solidoe-menu__lade-kop {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 64px;
		padding: 0 8px 0 20px;
		background: var(--sm-wit);
		border-bottom: 1px solid var(--sm-lijn);
	}

	.solidoe-menu__lade-titel {
		font-family: var(--sm-kopfont);
		font-weight: 600;
		font-size: 18px;
	}

	.solidoe-menu button.solidoe-menu__sluit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		color: var(--sm-tekst);
	}

	.solidoe-menu__balk {
		display: flex;
		flex-direction: column;
	}

	.solidoe-menu__item {
		position: relative;
		border-bottom: 1px solid var(--sm-lijn);
	}

	.solidoe-menu :is(a, button).solidoe-menu__top {
		position: relative;
		width: 100%;
		min-height: 56px;
		padding: 12px 20px;
		justify-content: space-between;
		font-size: 17px;
	}

	/* Accentbalkje links: open of huidige sectie. */
	.solidoe-menu__top::before {
		content: "";
		position: absolute;
		left: 0;
		top: 12px;
		height: 32px;
		width: 4px;
		border-radius: 0 2px 2px 0;
		background: var(--sm-accent);
		transform: scaleY(0);
		transition: transform var(--sm-duur) var(--sm-ease);
	}

	.solidoe-menu__item.is-open > .solidoe-menu__top::before,
	.solidoe-menu__item.is-actief > .solidoe-menu__top::before {
		transform: scaleY(1);
	}

	.solidoe-menu__pijltje {
		width: 14px;
		height: 14px;
	}

	.solidoe-menu__paneel {
		display: none;
		padding: 4px 20px 20px;
		background: var(--sm-vlak);
	}

	.solidoe-menu__item.is-open > .solidoe-menu__paneel {
		display: block;
		animation: solidoe-menu-in var(--sm-duur) ease-out;
	}

	.solidoe-menu__paneeltitel {
		font-size: 15px;
		padding: 14px 0 10px;
	}

	.solidoe-menu__paneeltitel a::before,
	.solidoe-menu__paneeltitel > span::before {
		width: 10px;
		height: 10px;
	}

	.solidoe-menu__groepen {
		display: grid;
		gap: 14px;
	}

	.solidoe-menu__groep.zonder-kop {
		margin-top: -10px;
	}

	.solidoe-menu__kop {
		font-size: 15px;
		line-height: 1.4;
		padding: 6px 0 2px;
	}

	/* Kop-links: groter aanraakvlak (was 18px hoog). */
	.solidoe-menu__kop:has(> a) {
		padding: 0;
	}

	.solidoe-menu__kop > a {
		display: block;
		padding: 10px 0;
	}

	.solidoe-menu__kop.is-actie > a {
		display: inline-flex;
		margin: 4px 0;
		padding: 10px 14px;
		background: var(--sm-wit);
	}

	.solidoe-menu__link {
		display: block;
		font-size: 15px;
		line-height: 1.4;
		padding: 9px 0;
	}

	.solidoe-menu__omschrijving {
		white-space: normal;
	}
}

@keyframes solidoe-menu-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Pagina niet laten scrollen achter de open lade. scrollbar-gutter houdt de
 * ruimte van de schuifbalk vast, zodat de pagina niet opzij springt.
 */
html.solidoe-menu-vergrendeld {
	scrollbar-gutter: stable;
}

html.solidoe-menu-vergrendeld,
html.solidoe-menu-vergrendeld body {
	overflow: hidden;
}

/*
 * Elementor Pro sticky: de onzichtbare kloon van de header (plaatshouder)
 * bevat ook dit menu. Panelen/lade daarin nooit tonen, ook niet als ze op het
 * moment van klonen open stonden (visibility: visible in een verborgen ouder
 * wordt anders zichtbaar). Ze staan absoluut/fixed, dus dit verschuift niets.
 */
.elementor-sticky__spacer .solidoe-menu__paneel,
.elementor-sticky__spacer .solidoe-menu__lade,
.elementor-sticky__spacer .solidoe-menu__achtergrond,
.solidoe-menu[data-solidoe-kloon] .solidoe-menu__paneel,
.solidoe-menu[data-solidoe-kloon] .solidoe-menu__lade,
.solidoe-menu[data-solidoe-kloon] .solidoe-menu__achtergrond {
	display: none !important;
}

.elementor-sticky__spacer .solidoe-menu,
.elementor-sticky__spacer .solidoe-menu * {
	visibility: hidden !important;
}

/* Voorbeeld in het beheer: net gewijzigde regels even laten opvallen. */
.solidoe-menu .is-gemarkeerd:not(li),
.solidoe-menu li.is-gemarkeerd > .solidoe-menu__top {
	background: #FFF1C2;
	box-shadow: 0 0 0 3px #FFF1C2;
	border-radius: 2px;
}

/* Zonder JavaScript: openen bij hover/focus (computer), menu uitgeklapt (telefoon). */
@media (scripting: none) {
	.solidoe-menu__item:hover > .solidoe-menu__paneel,
	.solidoe-menu__item:focus-within > .solidoe-menu__paneel {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.solidoe-menu__toggle,
	.solidoe-menu__lade-kop,
	.solidoe-menu__achtergrond {
		display: none !important;
	}
}

@media (scripting: none) and (max-width: 1024.98px) {
	.solidoe-menu__lade {
		position: static;
		width: 100%;
		transform: none;
		visibility: visible;
		box-shadow: none;
	}

	.solidoe-menu__paneel {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.solidoe-menu *,
	.solidoe-menu *::before,
	.solidoe-menu *::after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}

@media (forced-colors: active) {
	.solidoe-menu__paneel,
	.solidoe-menu__lade {
		border: 1px solid CanvasText;
	}
}