/* ==========================================================================
   Header — het hamburgermenu onder 1400px

   Boven 1400px blijft de header zoals hij is. Daaronder verdwijnt de
   rechterkant van de balk, komt er een knop 'Menu' voor in de plaats, en
   opent die een paneel over het hele scherm.

   Het paneel zelf wordt opgebouwd door header-mobile.js en staat dus niet in
   de Elementor-template; de Elementor-id's hieronder zijn alleen nodig om de
   onderdelen van de balk te verbergen die op smal niet meekomen:

     61d2d3a  de bovenste balk als geheel
     8b6d969  menu, taalkeuze en knop — gaat op smal weg
     646beea  de uitklaprij onder Expertise — alleen op breed

   Let op de specificiteit: élke regel voor het paneel staat onder
   '.aerocs-mmenu'. De Elementor-kit van deze site stylet kale elementen
   ('.elementor-kit-1407 a' en '… button', allebei 0-1-1), en een losse klasse
   van 0-1-0 verliest daarvan. Zie [[elementor-kit-overruled-component-css]].
   ========================================================================== */

/* Het breekpunt staat ook in header-mobile.js. Veranderen betekent: op twee
   plekken. */

@media ( min-width: 1400px ) {

	.aerocs-mtoggle,
	.aerocs-mmenu {
		display: none !important;
	}
}

@media ( max-width: 1399.98px ) {

	/* --- De balk ---------------------------------------------------------- */

	/* Alleen het menu rechts van het logo gaat in het paneel zitten. De rij met
	   de expertisegebieden eronder blijft wél staan; die wordt hieronder een
	   strook die horizontaal schuift. */
	.elementor-location-header .elementor-element.elementor-element-8b6d969 {
		display: none !important;
	}

	/* 'nowrap' is hier geen opmaak maar noodzaak: de template staat op smal op
	   'flex-wrap: wrap', en omdat een Elementor-container standaard de volle
	   breedte neemt, viel de knop 'Menu' naar een tweede regel onder het
	   logo. De scheidingslijn komt van de bovenrand van de strook eronder, dus
	   die hoeft hier niet nog een keer. */
	.elementor-location-header .elementor-element.elementor-element-61d2d3a {
		flex-wrap: nowrap;
		align-items: center;
	}

	/* --- De strook met de expertisegebieden -------------------------------- */

	/* Alleen op de expertisepagina's zelf. Elders is de rij hier niet meer dan
	   een losse strook onder de balk zonder aanleiding. De klasse op de body
	   komt uit PHP (aerocs_expertise_body_class), zodat hij op andere pagina's
	   geen moment in beeld komt. */
	.elementor-location-header .elementor-element.elementor-element-646beea {
		display: none !important;
	}

	/* Hij staat hier altijd open, dus de maten van het open- en dichtklappen
	   op breed moeten eraf; die staan in header.css achter een eigen
	   mediaquery. Wat er niet in past, schuif je opzij. */
	.elementor-location-header .elementor-element.elementor-element-646beea.aerocs-dd-strip {
		display: flex !important;

		/* De strook klapt bij het scrollen weg. Een bovengrens die het script
		   opmeet, want 'auto' valt niet te animeren; staat het script niet,
		   dan is de terugvalwaarde ruim genoeg om niets af te snijden. */
		max-height: var( --aer-strip-height, 200px );
		transition:
			max-height 300ms cubic-bezier( 0.22, 0.61, 0.36, 1 ),
			opacity 200ms linear;

		/* Terug omhoog komt de rij pas als de balk weer op maat is. */
		transition-delay: 260ms;

		overflow-x: auto;
		overflow-y: hidden;

		/* Voorkomt dat een veeg voorbij het einde de browser laat
		   terugnavigeren. */
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;

		/* De binnenruimte verhuist naar het blok erin: op een scroller wordt
		   de ruimte aan het eind anders weggelaten, en dan plakt het laatste
		   item tegen de rand. */
		padding-inline: 0;

		/* Geen schuifbalk in beeld; dat hij schuift zie je aan het item dat
		   half buiten beeld valt. */
		scrollbar-width: none;
	}

	/* Weggeklapt zodra je gaat lezen: geen hoogte, geen lijn, niet aan te
	   wijzen. */
	.elementor-location-header.aerocs-sub-collapsed .elementor-element.elementor-element-646beea.aerocs-dd-strip {
		/* Naar beneden gaat deze als eerste, dus zonder wachten. */
		transition-delay: 0s;
		max-height: 0;
		opacity: 0;
		border-bottom-width: 0;
		pointer-events: none;
	}

	.elementor-location-header .elementor-element.elementor-element-646beea::-webkit-scrollbar {
		display: none;
	}

	.elementor-location-header .elementor-element.elementor-element-eb3ea76 {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		width: max-content;
		padding-inline: 24px;
		gap: 0;
	}

	/* Het opschrift 'Expertise' hoort hier niet: de strook ís het
	   expertisemenu, en een kopje dat meeschuift en verdwijnt helpt niemand. */
	.elementor-location-header .elementor-element.elementor-element-0838343 {
		display: none !important;
	}

	/* De items mogen niet afbreken en niet naar een volgende regel. */
	.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-items.elementor-inline-items {
		flex-wrap: nowrap;
	}

	.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* De pagina waar je bent, krijgt wat meer gewicht dan de rest. */
	.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-item.aerocs-is-active .elementor-icon-list-text {
		font-weight: 600;
	}

	/* Het blok om het logo mag niet meer de hele balk vullen. */
	.elementor-location-header .elementor-element.elementor-element-af922b9 {
		width: auto;
		flex: 0 0 auto;
		align-items: center;
	}

	/* En het logo zelf niet uitgerekt: Elementor laat de afbeelding met die
	   container meegroeien, waardoor hij hier op 197 bij 48 stond in plaats
	   van op zijn eigen maat. */
	.elementor-location-header .elementor-element.elementor-element-46f207d img {
		width: auto;
		max-width: 100%;
		height: 32px;
	}

	.aerocs-mtoggle {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: #0B1F3B;
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
		font-size: 15px;
		font-weight: 500;
		line-height: 18px;
		cursor: pointer;
	}

	/* De kit geeft élke knop een amberkleurige vulling, ook bij aanwijzen. */
	.elementor-location-header .aerocs-mtoggle,
	.elementor-location-header .aerocs-mtoggle:hover,
	.elementor-location-header .aerocs-mtoggle:focus {
		background: none;
		color: #0B1F3B;
	}

	.aerocs-mtoggle__icon {
		display: flex;
		align-items: center;
	}

	.elementor-location-header .aerocs-mtoggle:focus-visible {
		outline: 2px solid #C2A14D;
		outline-offset: 6px;
	}
}

@media ( max-width: 767px ) {

	/* Op een telefoon loopt de balk op 24px van de rand, net als het paneel. */
	.elementor-location-header .elementor-element.elementor-element-61d2d3a {
		min-height: 72px;
		padding-block: 0;
		padding-inline: 24px;
	}

	.elementor-location-header .elementor-element.elementor-element-46f207d img {
		height: 26px;
	}

	/* Op een telefoon stuurt de minimumhoogte de balk en niet de binnenruimte;
	   het krimpen moet daar dus ook op die hoogte. */
	.elementor-location-header .elementor-element.elementor-element-61d2d3a {
		transition: min-height 240ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
	}

	.elementor-location-header.aerocs-compact .elementor-element.elementor-element-61d2d3a {
		min-height: 56px;
		padding-block: 0;
	}
}

/* ==========================================================================
   Het paneel
   ========================================================================== */

.aerocs-mmenu {
	--aer-m-navy: #0B1F3B;
	--aer-m-gold: #C2A14D;
	--aer-m-gold-bright: #E2B901;
	--aer-m-line: #E5E9F0;
	--aer-m-muted: #56657C;
	--aer-m-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--aer-m-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

	/* Vaste maten uit het ontwerp. Eerder schaalden deze mee met de
	   schermhoogte omdat het paneel niet mocht scrollen; nu dat wel mag, is
	   meeschalen alleen maar verlies van leesbaarheid. */
	--aer-m-bar: 72px;
	--aer-m-title: 32px;
	--aer-m-sub: 20px;
	--aer-m-gap: 32px;
	--aer-m-gap-sm: 16px;
	--aer-m-pad-top: 24px;
	/* Krap onder de knop, zodat er bovenin meer overblijft voor de items. Op
	   een telefoon met een thuisbalk onderaan wint de ruimte die het systeem
	   daar sowieso al voor vrijhoudt — anders zou de knop eronder verdwijnen. */
	--aer-m-pad-bottom: max( 8px, env( safe-area-inset-bottom, 0px ) );
	--aer-m-side: 32px;

	/* Dit is het donkere vlak over de hele pagina; de witte lade zit erin. */
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	justify-content: flex-end;
	background: rgba( 0, 0, 0, 0.6 );
	color: var( --aer-m-navy );

	/* Dicht is hij onzichtbaar én onbereikbaar: 'visibility: hidden' haalt
	   alles erin ook uit de tab-volgorde. Met 'display: none' zou er niets te
	   animeren vallen.

	   Het zichtbaar maken en het bewegen zijn twee aparte klassen, en dat is
	   geen opsmuk: een element dat in hetzelfde beeldje zichtbaar wórdt, start
	   géén overgang — de lade verscheen dan in plaats van dat hij inschoof.
	   header-mobile.js zet daarom eerst 'is-visible', laat de browser die
	   stand doorrekenen, en zet dan pas 'is-open'. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 240ms ease;

	/* Nooit scrollen. */
	overflow: hidden;
	overscroll-behavior: contain;
}

.aerocs-mmenu.is-visible {
	visibility: visible;
}

.aerocs-mmenu.is-open {
	opacity: 1;
}

/* De lade. Rechts tegen de rand, nooit breder dan 500px — op een telefoon is
   100% minder dan dat en vult hij het scherm vanzelf. */
.aerocs-mmenu .aerocs-mmenu__panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 500px;
	height: 100%;
	background: #FFFFFF;
	overflow: hidden;

	transform: translateX( 100% );
	transition: transform 320ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.aerocs-mmenu.is-open .aerocs-mmenu__panel {
	transform: translateX( 0 );
}

/* De pagina achter het paneel staat stil zolang het open is. */
.aerocs-mmenu-open,
.aerocs-mmenu-open body {
	overflow: hidden;
}

/* --- De balk in het paneel ------------------------------------------------ */

.aerocs-mmenu .aerocs-mmenu__bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var( --aer-m-bar );
	padding: 0 24px;
	border-bottom: 1px solid var( --aer-m-line );
}

.aerocs-mmenu .aerocs-mmenu__logo img {
	display: block;
	width: auto;
	height: 26px;
}

.aerocs-mmenu .aerocs-mmenu__close {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var( --aer-m-navy );
	font-family: var( --aer-m-sans );
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	cursor: pointer;
}

.aerocs-mmenu .aerocs-mmenu__close:hover,
.aerocs-mmenu .aerocs-mmenu__close:focus {
	background: none;
	color: var( --aer-m-navy );
}

.aerocs-mmenu .aerocs-mmenu__close:focus-visible {
	outline: 2px solid var( --aer-m-gold );
	outline-offset: 4px;
}

/* Het grijze rondje om het kruisje. */
.aerocs-mmenu .aerocs-mmenu__x {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 100px;
	background: rgba( 11, 31, 59, 0.04 );
}

/* --- De menu-items --------------------------------------------------------- */

/* Deze rekt mee: is het scherm hoger dan het ontwerp, dan komt die ruimte
   vanzelf tussen het laatste item en de streep eronder terecht. */
/* Het vak waarin de menu-items scrollen. De streep rechts hangt hieraan en
   niet aan de lijst zelf: een element binnen iets dat scrollt, schuift mee. */
.aerocs-mmenu .aerocs-mmenu__scroll {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.aerocs-mmenu .aerocs-mmenu__nav {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --aer-m-gap );
	padding: var( --aer-m-pad-top ) var( --aer-m-side );
	overflow-y: auto;
	overscroll-behavior: contain;

	/* De eigen schuifbalk van de browser gaat uit; die ziet er op elk
	   apparaat anders uit en vervaagt op een telefoon na een seconde. */
	scrollbar-width: none;
}

.aerocs-mmenu .aerocs-mmenu__nav::-webkit-scrollbar {
	display: none;
}

/* De aanduiding: een baan tegen de rechterrand met een blokje dat meeloopt.
   Hij staat er alleen als er werkelijk iets te schuiven valt — die klasse zet
   header-mobile.js, die ook de maat van het blokje rekent. */
.aerocs-mmenu .aerocs-mmenu__track {
	position: absolute;
	top: var( --aer-m-pad-top );
	right: 0;
	bottom: var( --aer-m-pad-top );
	width: 3px;
	border-radius: 2px;
	background-color: var( --aer-m-line );
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.aerocs-mmenu .aerocs-mmenu__scroll.is-scrollable .aerocs-mmenu__track {
	opacity: 1;
}

.aerocs-mmenu .aerocs-mmenu__thumb {
	position: absolute;
	right: 0;
	left: 0;
	border-radius: 2px;
	background-color: var( --aer-m-gold );
}

.aerocs-mmenu .aerocs-mmenu__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: var( --aer-m-gap-sm );
}

/* De gouden streep hangt aan het woord en niet aan de knop eromheen, anders
   loopt hij ook onder het pijltje door.

   Dit is een <button>, en die krijgt van de Elementor-kit een amberkleurige
   vulling en van hello-elementor een rand; alles wat een knop standaard
   meekrijgt gaat er daarom hier af. */
.aerocs-mmenu .aerocs-mmenu__head {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
}

.aerocs-mmenu .aerocs-mmenu__head:hover,
.aerocs-mmenu .aerocs-mmenu__head:focus {
	background: none;
	color: inherit;
}

.aerocs-mmenu .aerocs-mmenu__title {
	display: block;
	color: var( --aer-m-navy );
	font-family: var( --aer-m-serif );
	font-size: var( --aer-m-title );
	font-weight: 500;
	line-height: 1.375;
	text-decoration: none;
}

/* De streep onder de kop van de uitklapper. */
.aerocs-mmenu .aerocs-mmenu__head .aerocs-mmenu__title {
	border-bottom: 1px solid var( --aer-m-gold );
}

.aerocs-mmenu .aerocs-mmenu__sub {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: var( --aer-m-gap-sm );
	margin: 0;
	padding: 0;
	list-style: none;
}

.aerocs-mmenu .aerocs-mmenu__sublink {
	display: block;
	color: var( --aer-m-navy );
	font-family: var( --aer-m-serif );
	font-size: var( --aer-m-sub );
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
}

.aerocs-mmenu .aerocs-mmenu__title:focus-visible,
.aerocs-mmenu .aerocs-mmenu__sublink:focus-visible {
	outline: 2px solid var( --aer-m-gold );
	outline-offset: 4px;
}

/* --- Onderin: streep, taal en de knop -------------------------------------- */

.aerocs-mmenu .aerocs-mmenu__foot {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --aer-m-gap );
	padding: var( --aer-m-pad-top ) var( --aer-m-side ) var( --aer-m-pad-bottom );
}

.aerocs-mmenu .aerocs-mmenu__line {
	align-self: stretch;
	height: 0;
	border-top: 1px solid var( --aer-m-line );
}

.aerocs-mmenu .aerocs-mmenu__langs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: 12px;
}

.aerocs-mmenu .aerocs-mmenu__langlabel {
	color: var( --aer-m-muted );
	font-family: var( --aer-m-sans );
	font-size: 12px;
	font-weight: 600;
	line-height: 15px;
	text-transform: uppercase;
}

.aerocs-mmenu .aerocs-mmenu__langlist {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aerocs-mmenu .aerocs-mmenu__lang {
	display: block;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	color: var( --aer-m-muted );
	font-family: var( --aer-m-sans );
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	text-decoration: none;
}

.aerocs-mmenu .aerocs-mmenu__lang.is-active {
	border-bottom-color: var( --aer-m-gold-bright );
	color: var( --aer-m-navy );
	font-weight: 700;
}

/* De knop loopt over de volle breedte van de lade, dus tot 500px min de
   binnenruimte. */
.aerocs-mmenu .aerocs-mmenu__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 16px 24px;
	background: var( --aer-m-navy );
	color: #FFFFFF;
	font-family: var( --aer-m-sans );
	font-size: 16px;
	font-weight: 600;
	line-height: 19px;
	text-decoration: none;
}

.aerocs-mmenu .aerocs-mmenu__cta:hover,
.aerocs-mmenu .aerocs-mmenu__cta:focus {
	background: #16304f;
	color: #FFFFFF;
}

.aerocs-mmenu .aerocs-mmenu__arrow {
	display: flex;
	flex: none;
	align-items: center;
	transition: transform 220ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.aerocs-mmenu .aerocs-mmenu__cta:hover .aerocs-mmenu__arrow,
.aerocs-mmenu .aerocs-mmenu__cta:focus .aerocs-mmenu__arrow {
	transform: translateX( 4px );
}

/* --- De focusring ---------------------------------------------------------- */

/* hello-elementor zet in zijn reset op élke knop en link met toetsenbordfocus
   een witte schaduw van 4px plus een zwarte rand ('button:focus-visible',
   0-1-1). Die witte schaduw snijdt hier een gat in het paneel. Hij gaat eraf,
   en wie met het toetsenbord navigeert krijgt er de gouden ring van de
   huisstijl voor terug. */
.aerocs-mmenu a:focus-visible,
.aerocs-mmenu button:focus-visible,
.elementor-location-header .aerocs-mtoggle:focus-visible {
	box-shadow: none;
	outline: 2px solid var( --aer-m-gold, #C2A14D );
	outline-offset: 4px;
}

/* Wie beweging op zijn apparaat heeft uitgezet, krijgt het menu zonder de
   schuif en zonder het vervagen. */
@media ( prefers-reduced-motion: reduce ) {

	.aerocs-mmenu,
	.aerocs-mmenu.is-open,
	.aerocs-mmenu .aerocs-mmenu__panel,
	.aerocs-mmenu.is-open .aerocs-mmenu__panel {
		transition: none;
	}
}

/* --- De strook op een telefoon -------------------------------------------- */

/* Kleiner dan op een tablet: op 500px en smaller passen er anders te weinig
   gebieden tegelijk in beeld om te laten zien dát de strook verder loopt.

   De selector staat zes klassen diep. Elementor zet de lettergrootte van deze
   widget zélf met vijf klassen en laadt zijn CSS ná het thema, dus bij gelijk
   gewicht wint hij — met vijf klassen gebeurde er hier niets. Staat de maat later in Elementor zelf goed, dan
   mag dit blok weg. */
@media ( max-width: 500px ) {

	.elementor-location-header .aerocs-dd-strip .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-item a,
	.elementor-location-header .aerocs-dd-strip .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-item .elementor-icon-list-text {
		font-size: 14px;
	}

	/* 24px tussen de items. Elementor zet die ruimte als een halve marge aan
	   weerszijden (zijn eigen 48px) en doet dat met zes klassen; deze selector
	   staat er daarom zeven diep. Mijn eerdere poging woog te licht en deed
	   niets. De lijst krijgt dezelfde marge negatief, zodat het eerste item
	   wél op 24px van de rand begint. */
	.elementor-location-header .aerocs-dd-strip .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-items.elementor-inline-items {
		margin-inline: -12px;
	}

	.elementor-location-header .aerocs-dd-strip .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		margin-inline: 12px;
	}
}

/* --- 'Expertise' als uitklapper -------------------------------------------- */

/* De kop is hier een knop. Het pijltje staat rechts van het woord en draait
   als de gebieden eronder dichtgaan. */
.aerocs-mmenu .aerocs-mmenu__head {
	gap: 12px;
	cursor: pointer;
}

.aerocs-mmenu .aerocs-mmenu__chevron {
	display: flex;
	flex: none;
	align-items: center;
	color: var( --aer-m-navy );
	transition: transform 240ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/* Het icoon uit Elementor draagt 'fill="black"' als attribuut; CSS wint daar
   altijd van, dus de SVG zelf hoeft niet aangepast. Alleen op het gekloonde
   icoon: het pijltje dat dit bestand zelf meelevert is met lijnen getekend en
   zou door een vulling dichtlopen. */
.aerocs-mmenu .aerocs-mmenu__chevron.is-elementor svg,
.aerocs-mmenu .aerocs-mmenu__chevron.is-elementor path {
	fill: currentColor;
}

/* Het icoon wijst van zichzelf omlaag: dicht blijft hij zo staan, en bij het
   openklappen draait hij een halve slag omhoog. */
.aerocs-mmenu .aerocs-mmenu__group:not( .is-closed ) .aerocs-mmenu__chevron {
	transform: rotate( 180deg );
}

.aerocs-mmenu .aerocs-mmenu__group.is-closed .aerocs-mmenu__sub {
	display: none;
}

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

	.aerocs-mmenu .aerocs-mmenu__chevron,
	.aerocs-mmenu .aerocs-mmenu__track {
		transition: none;
	}
}