/* ==========================================================================
   Header — de gouden streep en de uitklap onder 'Expertise'

   De header is een Elementor-template. Elementor geeft elk element een klasse
   'elementor-element-<id>'; die id's zijn de enige haakjes tussen dit bestand
   en de template. Wordt de header opnieuw opgebouwd, dan is dit de lijst die
   mee moet — in header.js staat dezelfde lijst nog een keer:

     36fe5f4  hoofdmenu            Expertise · Cases · About · Contact
     6df2c9e  scheidingsteken      '|'            (krijgt bewust geen streep)
     1061ff2  taalkeuze            EN · NL · 中文
     646beea  de hele tweede rij: de uitklap
     0838343  opschrift 'Expertise' in die rij    (idem, is een kopje)
     9f5bf6b  de vijf expertisegebieden in die rij

   Elementor zet zijn eigen regels met 0-3-0 ('.elementor-2241
   .elementor-element.elementor-element-x') en laadt die ná het thema. Waar
   hier dezelfde eigenschap om moet, staat de klasse daarom dubbel: dat weegt
   0-4-0 en wint zonder !important. Zie [[elementor-kit-overruled-component-css]].

   Het openen en sluiten zelf staat in header.js; hier staat alleen hoe het
   eruitziet.
   ========================================================================== */

/* De header blijft bovenaan staan. 'sticky' en niet 'fixed': dan houdt hij
   zijn plek in de pagina en hoeft de inhoud eronder niet met een marge te
   worden weggeduwd die bij elke verandering van de balkhoogte weer anders is.
   De witte achtergrond staat er expliciet bij, anders schuift de pagina er bij
   het scrollen doorheen te zien. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background-color: #ffffff;

	--aer-nav-accent: #C2A14D;
	--aer-nav-line: 2px;
	--aer-nav-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );

	/* Wordt door het script op de werkelijke hoogte van de rij gezet, zodat
	   het uitklappen precies zo lang duurt als de beweging die je ziet. De
	   waarde hier is het vangnet voor als dat script niet draait. */
	--aer-sub-height: 200px;
}

/* --- De gouden streep ---------------------------------------------------- */

/* De streep hangt aan het tekstvakje en niet aan het <li>: Elementor gebruikt
   op dat <li> zelf al een ::after voor zijn eigen scheidingslijnen, en het
   <li> is in een inline-menu breder dan de tekst. */
.elementor-location-header .elementor-element-36fe5f4 .elementor-icon-list-text,
.elementor-location-header .elementor-element-1061ff2 .elementor-icon-list-text,
.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-text {
	position: relative;
	display: inline-block;
}

.elementor-location-header .elementor-element-36fe5f4 .elementor-icon-list-text::after,
.elementor-location-header .elementor-element-1061ff2 .elementor-icon-list-text::after,
.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-text::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -6px;
	left: 0;
	height: var( --aer-nav-line );
	background-color: var( --aer-nav-accent );

	/* Uitrekken en niet de breedte laten groeien: een transform kost de
	   browser geen nieuwe pagina-indeling, dus de streep loopt vloeiend ook
	   als er verderop op de pagina nog van alles binnenkomt. */
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 260ms var( --aer-nav-ease );
	pointer-events: none;
}

/* Let op: nergens een '>' tussen het <li> en de tekst. Deze menu's zijn
   icon-lists zonder links; zodra er een link op een item komt, zet Elementor
   een <a> tussen het <li> en de <span> in, en dan zou een rechtstreeks-
   kindselector stilletjes ophouden te werken. */
.elementor-location-header .elementor-element-36fe5f4 .elementor-icon-list-item:hover .elementor-icon-list-text::after,
.elementor-location-header .elementor-element-1061ff2 .elementor-icon-list-item:hover .elementor-icon-list-text::after,
.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-item:hover .elementor-icon-list-text::after,
.elementor-location-header .elementor-icon-list-item.aerocs-is-active .elementor-icon-list-text::after,
.elementor-location-header .elementor-icon-list-item a:focus-visible .elementor-icon-list-text::after,
.elementor-location-header .elementor-icon-list-text:focus-visible::after {
	transform: scaleX( 1 );
}

/* Het opschrift van de uitklap mag met het toetsenbord bediend worden; de
   standaardring van de browser valt midden in de balk hard in, dus hij krijgt
   er een die bij de rest past. De streep hierboven komt er ook al bij. */
.elementor-location-header .elementor-icon-list-text:focus,
.elementor-location-header .elementor-icon-list-item a:focus {
	outline: none;
}

.elementor-location-header .elementor-icon-list-text:focus-visible,
.elementor-location-header .elementor-icon-list-item a:focus-visible {
	outline: 2px solid var( --aer-nav-accent );
	outline-offset: 6px;
}

/* De muis mag het tekstvakje aanwijzen zonder dat er een tekstcursor komt:
   dit is een knop, geen alinea. */
.elementor-location-header .elementor-element-36fe5f4 .elementor-icon-list-item,
.elementor-location-header .elementor-element-1061ff2 .elementor-icon-list-item,
.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-item {
	cursor: pointer;
}

/* --- De uitklap zelf — alleen op breed --------------------------------- */

/* Onder 1400px bestaat deze uitklap niet: daar staat de rij met de
   expertisegebieden altijd in beeld en schuift hij horizontaal. Die regels
   staan in header-mobile.css. Zou het open- en dichtklappen hieronder ook
   daar gelden, dan zou de rij daar onzichtbaar beginnen. */
@media ( min-width: 1400px ) {

	
	/* Dicht is écht dicht: geen hoogte, geen randen, niet aan te wijzen en niet
	   voor te lezen. Alleen 'opacity: 0' zou de rij in de pagina laten staan en
	   de rest omlaag duwen — precies wat hier niet hoort.

	   'visibility' staat in de overgang met een vertraging, zodat hij pas op
	   'hidden' springt als het dichtklappen klaar is. */
	.elementor-location-header.elementor-location-header .elementor-element.elementor-element-646beea {
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;

		/* De rij heeft van Elementor een lijn boven en onder. Die moeten mee
		   dicht, anders blijft er een streep van twee pixels staan waar niets
		   meer is. */
		border-top-width: 0;
		border-bottom-width: 0;

		/* De binnenruimte van de rij staat op nul en zit op de items zelf (zie
		   onderaan dit bestand). Dat is hier ook precies wat dichtklappen
		   mogelijk maakt: Elementor rekent met 'box-sizing: border-box', en dan
		   kan 'max-height: 0' niet lager dan de padding die eronder zou zitten —
		   de rij bleef anders 48px hoog. */
		transition:
			max-height 280ms var( --aer-nav-ease ),
			opacity 160ms linear,
			visibility 0s linear 280ms;
	}

	.elementor-location-header.elementor-location-header .elementor-element.elementor-element-646beea.aerocs-dd-open {
		max-height: var( --aer-sub-height );
		opacity: 1;
		visibility: visible;
		/* Alleen de lijn onderaan; naar de balk toe blijft het open. */
		border-top-width: 0;
		border-bottom-width: 1px;

		transition:
			max-height 280ms var( --aer-nav-ease ),
			opacity 200ms linear 60ms,
			visibility 0s;
	}
}

/* Wie beweging op zijn apparaat heeft uitgezet, krijgt het verschil zonder
   de overgang ernaartoe. */
@media ( prefers-reduced-motion: reduce ) {

	.elementor-location-header .elementor-icon-list-text::after,
	.elementor-location-header.elementor-location-header .elementor-element.elementor-element-646beea,
	.elementor-location-header.elementor-location-header .elementor-element.elementor-element-646beea.aerocs-dd-open {
		transition: none;
	}
}

/* --- Het pijltje naast 'Expertise' --------------------------------------- */

/* Elementor zet het icoon van een icon-list altijd vóór de tekst; in het
   ontwerp staat het erachter. Het <li> is bij Elementor zelf een flexbox
   ('.elementor-widget .elementor-icon-list-item{display:flex}'), dus 'order'
   verzet het zonder dat de HTML om hoeft — en dat werkt straks net zo goed
   als er een <a> omheen komt te staan, want dat is óók een flexbox. */
.elementor-location-header .elementor-element-36fe5f4 .elementor-icon-list-icon {
	order: 1;

	/* De ruimte die hij eerst rechts van zich had, staat nu links. */
	margin-inline-start: 8px;
}

/* De tekst houdt van Elementor 5px links aan ómdat er een icoon vóór staat
   ('.elementor-icon-list-icon + .elementor-icon-list-text'). Die regel kijkt
   naar de volgorde in de HTML en niet naar wat 'order' ervan maakt, dus zonder
   dit zou 'Expertise' scheef staan ten opzichte van Cases, About en Contact. */
.elementor-location-header .elementor-element-36fe5f4 .elementor-icon-list-icon + .elementor-icon-list-text {
	padding-inline-start: 0;
}

/* Elementor geeft de svg zelf ook nog een marge aan de rechterkant, bedoeld
   voor de plek waar het icoon eerst stond. De klasse staat er dubbel omdat hun
   regel even zwaar weegt. */
.elementor-location-header .elementor-element-36fe5f4.elementor-widget .elementor-icon-list-icon svg {
	margin: 0;
	transition: transform 260ms var( --aer-nav-ease );
}

/* De kleur hoort op het pad en niet op de <svg>. Elementor zet hem wél op de
   <svg>, maar het pad draagt 'fill="black"' als attribuut en erft dus niets:
   het pijltje stond zwart naast navy tekst. */
.elementor-location-header .elementor-element-36fe5f4 .elementor-icon-list-icon svg path {
	fill: var( --e-global-color-secondary, #0B1F3B );
}

/* Omdraaien zodra de uitklap opengaat: bij hover, bij een klik die hem
   vastzet, en op een expertisepagina. Dat hangt dus aan dezelfde klasse als de
   rij zelf, zodat het pijltje nooit de verkeerde kant op wijst bij een rij die
   wél openstaat — bijvoorbeeld als je hem hebt vastgeklikt en je muis is al
   lang weer ergens anders. */
.elementor-location-header .aerocs-has-sub:hover .elementor-icon-list-icon svg,
.elementor-location-header .aerocs-has-sub.aerocs-dd-trigger-open .elementor-icon-list-icon svg {
	transform: rotate( 180deg );
}

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

	.elementor-location-header .elementor-element-36fe5f4.elementor-widget .elementor-icon-list-icon svg {
		transition: none;
	}
}

/* ==========================================================================
   De deellijnen en de gouden streep daarop
   ========================================================================== */

/* Alle scheidingslijnen in de header in één kleur. Elementor zet ze op
   '--e-global-color-1210807' (#9AA5B5); dat is te donker naast de rest. De
   klasse staat dubbel om zwaarder te wegen dan hun eigen regel. */
.elementor-location-header.elementor-location-header .elementor-element.elementor-element-61d2d3a,
.elementor-location-header.elementor-location-header .elementor-element.elementor-element-646beea {
	border-color: #D9DDE4;
}

/* --- De rij met de expertisegebieden ------------------------------------- */

/* De gouden streep van het item waar je bent of overheen gaat, hoort op de
   lijn ónder de rij te liggen en niet los onder het woord.

   Daarvoor moet het item tot onderaan de rij doorlopen, dus de verticale
   binnenruimte verhuist van de rij naar de items zelf. Dat heeft een tweede
   voordeel: een rij zonder eigen padding klapt op breed ook echt tot nul
   dicht, zonder dat die padding mee geanimeerd hoeft te worden. */
/* De maat van de rij wordt hier vastgelegd, want verderop is hij niet meer te
   krijgen: Elementor's '.e-con' definieert '--padding-top' op élke container
   opnieuw, dus binnen de container hieronder staat hij alweer op de
   standaardwaarde in plaats van op de 24px van deze rij. Door hem hier in een
   eigen variabele te zetten, wordt de waarde nu berekend en erft hij als
   getal. */
.elementor-location-header.elementor-location-header .elementor-element.elementor-element-646beea {
	--aer-row-pad: var( --padding-top, 24px );
}

.elementor-location-header.elementor-location-header .elementor-element.elementor-element-646beea,
.elementor-location-header.elementor-location-header .elementor-element.elementor-element-eb3ea76 {
	align-items: stretch;
	padding-block: 0;
}

.elementor-location-header .elementor-element.elementor-element-0838343,
.elementor-location-header .elementor-element.elementor-element-9f5bf6b,
.elementor-location-header .elementor-element.elementor-element-0838343 .elementor-icon-list-items,
.elementor-location-header .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-items {
	display: flex;
	align-items: stretch;
}

.elementor-location-header .elementor-element-0838343 .elementor-icon-list-item,
.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-item {
	align-items: center;
	padding-block: var( --aer-row-pad, 24px );
}

/* De streep onder het woord gaat hier weg ... */
.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-text::after {
	display: none;
}

/* ... en komt op de onderlijn. Op ::before en niet op ::after: die laatste is
   bij Elementor al in gebruik voor zijn eigen scheidingslijntjes tussen
   inline-items. */
.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-item:hover::before,
.elementor-location-header .elementor-element-9f5bf6b .elementor-icon-list-item.aerocs-is-active::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var( --aer-nav-line );
	background-color: var( --aer-nav-accent );
}

/* Het hoofdmenu in de balk houdt zijn streep wél onder het woord: daar staat
   geen deellijn vlak onder de items, en een streep onderaan de balk zou los
   van de tekst komen te hangen. */

/* --- Zeven gebieden op één regel ----------------------------------------- */

/* Elementor zet 48px tussen de items. Dat was ruim met de vijf gebieden uit de
   template, maar met de twee die het thema erbij zet — zie
   aerocs_expertise_added_slugs() in functions.php — past de rij daarmee pas
   vanaf ongeveer 1650px op één regel. Daaronder breekt de lijst af naar een
   tweede regel, en omdat de items hierboven hun eigen verticale ruimte dragen
   wordt de uitklap dan bijna twee keer zo hoog.

   De tussenruimte krimpt daarom mee: 48px vanaf 1650px, en op 1400px — waar de
   uitklap overgaat in de schuivende strook van header-mobile.css — 32px. Daar
   blijft dan nog een kleine veertig pixel over, ruimte genoeg voor het
   verschil tussen Inter en het lettertype dat de browser laat zien zolang
   Inter nog niet binnen is.

   Het blijft op 'margin-inline' en niet op 'gap', omdat Elementor het zo zet;
   de negatieve marge op de lijst zelf haalt de halve marge van het eerste en
   het laatste item weer weg, zodat de rij op dezelfde plek begint als de rest
   van de header.

   Zeven klassen diep: Elementor zet deze marge met zes en laadt zijn CSS ná het
   thema, dus bij gelijk gewicht wint hij. Hetzelfde speelde onderaan
   header-mobile.css. */
@media ( min-width: 1400px ) {

	.elementor-location-header .elementor-element.elementor-element-9f5bf6b {
		--aer-sub-gap: clamp( 32px, calc( 48px - ( 1650px - 100vw ) * 0.064 ), 48px );
	}

	.elementor-location-header.elementor-location-header .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-items.elementor-inline-items {
		margin-inline: calc( var( --aer-sub-gap, 48px ) / -2 );
	}

	.elementor-location-header.elementor-location-header .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
		margin-inline: calc( var( --aer-sub-gap, 48px ) / 2 );
	}

	/* Elementor hangt zijn scheidingslijntje tussen de items halverwege die
	   marge; zonder deze regel blijft het op de oude 24px staan en komt het
	   los van de nieuwe tussenruimte. */
	.elementor-location-header.elementor-location-header .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item::after {
		inset-inline-end: calc( var( --aer-sub-gap, 48px ) / -2 );
	}
}

/* --- Krimpen tijdens het scrollen ---------------------------------------- */

/* Bovenaan de pagina staat de balk op zijn volle hoogte; ben je een stuk naar
   beneden, dan neemt hij minder ruimte in. De klasse zet header.js. */
.elementor-location-header .elementor-element.elementor-element-61d2d3a {
	transition: padding-block 240ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.elementor-location-header.aerocs-compact .elementor-element.elementor-element-61d2d3a {
	padding-block: 14px;
}

/* Op een expertisepagina wacht de balk tot de rij eronder is weggeklapt. Zo
   volgt het ene het andere op, als één beweging, zonder dat er een tweede
   drempel verderop in de pagina voor nodig is — dat gaf juist een lange strook
   waarin de header op een middenhoogte bleef hangen.

   Omhoog gaat het andersom: daar heeft de balk geen wachttijd en groeit hij
   meteen, waarna de rij eronder terugkomt. */
.aerocs-strip-page .elementor-location-header.aerocs-compact .elementor-element.elementor-element-61d2d3a {
	transition-delay: 300ms;
}

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

	.elementor-location-header .elementor-element.elementor-element-61d2d3a {
		transition: none;
	}
}

/* ==========================================================================
   De homepage: de header ligt over de hero

   Daar is de balk doorzichtig met witte opschriften, en springt hij bij het
   scrollen om naar de witte uitvoering die op alle andere pagina's staat —
   op hetzelfde moment als het krimpen, dus het is één overgang.

   De klasse 'aerocs-transparent-header' staat op de body (zie functions.php);
   'aerocs-compact' komt van header.js zodra je voorbij de drempel bent. Alles
   hieronder geldt dus zolang die twee niet samenvallen.
   ========================================================================== */

/* 'fixed' en niet 'sticky': de header mag hier géén ruimte innemen, anders
   begint de hero eronder in plaats van erachter. */
.aerocs-transparent-header .elementor-location-header {
	position: fixed;
	right: 0;
	left: 0;
	background-color: transparent;
	transition: background-color 240ms ease;
}

.aerocs-transparent-header .elementor-location-header.aerocs-compact {
	background-color: #ffffff;
}

/* --- Het logo ------------------------------------------------------------ */

/* Een witte uitvoering van hetzelfde bestand: de letters wit, het goud
   ongemoeid. Afgeleid van 'Aerocs-logo-header.svg'; staat er later een eigen
   wit logo in de mediatheek, dan wijst deze regel daarheen. */
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-46f207d img {
	content: url( "../img/aerocs-logo-white.svg" );
}

/* --- De opschriften ------------------------------------------------------ */

.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-36fe5f4 .elementor-icon-list-text,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-9f5bf6b .elementor-icon-list-text,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-0838343 .elementor-icon-list-text {
	color: #ffffff;
}

/* Aanwijzen verandert hier niets aan de kleur. Elementor zet de items bij
   hover op de donkere tekstkleur van de huisstijl, en die valt tegen de hero
   volledig weg — in de witte balk op de andere pagina's klopt diezelfde kleur
   juist wel, dus daar blijft hij staan.

   De selector is met opzet lang: die hover-regel van Elementor weegt zelf al
   zes klassen en laadt ná het thema. */
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element.elementor-element-36fe5f4 .elementor-icon-list-item:hover .elementor-icon-list-text,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element.elementor-element-9f5bf6b .elementor-icon-list-item:hover .elementor-icon-list-text,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element.elementor-element-0838343 .elementor-icon-list-item:hover .elementor-icon-list-text,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element.elementor-element-1061ff2 .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: #ffffff;
}

/* Het pijltje naast 'Expertise'. Ook op het pad zelf: dat draagt 'fill="black"'
   als attribuut, en een vulling op de omliggende <svg> erft daar niet
   overheen. */
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-36fe5f4 .elementor-icon-list-icon svg,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-36fe5f4 .elementor-icon-list-icon svg path {
	fill: #ffffff;
}

/* Het streepje tussen het menu en de taalkeuze. */
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-6df2c9e .elementor-icon-list-text {
	color: rgba( 255, 255, 255, 0.25 );
}

/* De taal waarin de site staat is wit, de andere gedempt. */
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-1061ff2 .elementor-icon-list-text {
	color: rgba( 255, 255, 255, 0.6 );
}

.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-1061ff2 .elementor-icon-list-item:first-child .elementor-icon-list-text {
	color: #ffffff;
}

/* --- De knop ------------------------------------------------------------- */

/* De randdikte blijft op de 2px van Elementor staan: de knop rekent met
   'border-box', dus van 1px zou hij niet kleiner worden, maar zo springt er
   bij het omklappen naar wit helemaal niets. */
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-e16a224 .elementor-button {
	background-color: transparent;
	border-color: rgba( 255, 255, 255, 0.5 );
	color: #ffffff;
	fill: #ffffff;
}

.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-e16a224 .elementor-button:hover,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element-e16a224 .elementor-button:focus {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var( --e-global-color-secondary );
}

/* --- De scheidingslijnen ------------------------------------------------- */

/* Op een donkere hero valt het lichtgrijs van de andere pagina's veel te hard
   op; hier een lijn van wit dat je nét ziet. */
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element.elementor-element-61d2d3a,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .elementor-element.elementor-element-646beea {
	border-color: rgba( 255, 255, 255, 0.25 );
}

/* --- De knop 'Menu' op smal ---------------------------------------------- */

.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .aerocs-mtoggle,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .aerocs-mtoggle:hover,
.aerocs-transparent-header .elementor-location-header:not( .aerocs-compact ) .aerocs-mtoggle:focus {
	color: #ffffff;
}

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

	.aerocs-transparent-header .elementor-location-header {
		transition: none;
	}
}