/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ==========================================================================
   Rijenlijst met hover

   Hangt aan de container die de rijen bevat, zodat elke rij die erbij komt
   automatisch meedoet. Drie manieren, in volgorde van voorkeur:
     .aerocs-rowlist   op de container met de rijen erin
     .aerocs-row       op een losse rij
     en de element-id's van de blokken die er nu staan.

   Elementor zet kleuren met specificiteit 0-3-0 (rand), 0-4-0 (kop) en
   0-4-1 (icoongrootte); de verdubbelde klasse telt dubbel en wint daarvan
   zonder !important.
   ========================================================================== */

.aerocs-row,
.aerocs-rowlist > .e-con,
.elementor-element-12a3421 > .e-con,
.elementor-element-77960d6 > .e-con,
.elementor-element-06fe27c > .e-con {
	--aerocs-gold: var( --e-global-color-primary, #c2a14d );
	--aerocs-arrow: #9aa5b5;
	--aerocs-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );

	transition: border-color 320ms var(--aerocs-ease);
}

.aerocs-row .elementor-heading-title,
.aerocs-rowlist > .e-con .elementor-heading-title,
.elementor-element-12a3421 > .e-con .elementor-heading-title,
.elementor-element-77960d6 > .e-con .elementor-heading-title,
.elementor-element-06fe27c > .e-con .elementor-heading-title {
	transition: color 320ms var(--aerocs-ease);
}

.aerocs-row .elementor-icon svg,
.aerocs-rowlist > .e-con .elementor-icon svg,
.elementor-element-12a3421 > .e-con .elementor-icon svg,
.elementor-element-77960d6 > .e-con .elementor-icon svg,
.elementor-element-06fe27c > .e-con .elementor-icon svg {
	transition: transform 380ms var(--aerocs-ease);
}

.aerocs-row .elementor-icon svg path,
.aerocs-rowlist > .e-con .elementor-icon svg path,
.elementor-element-12a3421 > .e-con .elementor-icon svg path,
.elementor-element-77960d6 > .e-con .elementor-icon svg path,
.elementor-element-06fe27c > .e-con .elementor-icon svg path {
	transition: fill 320ms var(--aerocs-ease), fill-opacity 320ms var(--aerocs-ease);
}

/* --- Rust: de pijl zichtbaar maken ---
   De SVG draagt fill="white" fill-opacity="0.4" als attribuut. CSS wint daar
   altijd van, ongeacht specificiteit, dus hoeft de SVG zelf niet aangepast. */
.aerocs-row .elementor-icon svg path,
.aerocs-rowlist > .e-con .elementor-icon svg path,
.elementor-element-77960d6 > .e-con .elementor-icon svg path,
.elementor-element-06fe27c > .e-con .elementor-icon svg path {
	fill: var(--aerocs-arrow);
	fill-opacity: 1;
}

/* --- Maat van de pijl: 16px breed, hoogte volgt de verhouding (17:14) ---
   Elementor zet hier height op de svg met specificiteit 0-4-1, vandaar de
   dubbele klassen. */
.aerocs-row.aerocs-row .elementor-widget-icon.elementor-widget-icon .elementor-icon svg,
.aerocs-rowlist.aerocs-rowlist > .e-con .elementor-widget-icon.elementor-widget-icon .elementor-icon svg,
.elementor-element-77960d6.elementor-element-77960d6 > .e-con .elementor-widget-icon.elementor-widget-icon .elementor-icon svg,
.elementor-element-06fe27c.elementor-element-06fe27c > .e-con .elementor-widget-icon.elementor-widget-icon .elementor-icon svg {
	width: 16px;
	height: auto;
}

/* --- Hover: titel goud --- */
.aerocs-row.aerocs-row:hover .elementor-heading-title,
.aerocs-rowlist.aerocs-rowlist > .e-con:hover .elementor-heading-title,
.elementor-element-12a3421.elementor-element-12a3421 > .e-con:hover .elementor-heading-title,
.elementor-element-77960d6.elementor-element-77960d6 > .e-con:hover .elementor-heading-title,
.elementor-element-06fe27c.elementor-element-06fe27c > .e-con:hover .elementor-heading-title {
	color: var(--aerocs-gold);
}

/* --- Hover: de lijn bóven de rij wordt goud ---
   Heeft de rij een eigen bovenrand, dan kleurt die. Ligt de lijn als ónderrand
   op de vorige rij, dan pakt :has() die. */
.aerocs-row.aerocs-row:hover,
.aerocs-rowlist.aerocs-rowlist > .e-con:hover,
.elementor-element-12a3421.elementor-element-12a3421 > .e-con:hover,
.elementor-element-77960d6.elementor-element-77960d6 > .e-con:hover,
.elementor-element-06fe27c.elementor-element-06fe27c > .e-con:hover {
	border-top-color: var(--aerocs-gold);
}

.aerocs-row.aerocs-row:has( + .aerocs-row:hover ),
.aerocs-rowlist.aerocs-rowlist > .e-con:has( + .e-con:hover ),
.elementor-element-12a3421.elementor-element-12a3421 > .e-con:has( + .e-con:hover ),
.elementor-element-77960d6.elementor-element-77960d6 > .e-con:has( + .e-con:hover ),
.elementor-element-06fe27c.elementor-element-06fe27c > .e-con:has( + .e-con:hover ) {
	border-bottom-color: var(--aerocs-gold);
}

/* --- Hover: de pijl springt naar binnen en wordt goud --- */
.aerocs-row.aerocs-row:hover .elementor-icon svg,
.aerocs-rowlist.aerocs-rowlist > .e-con:hover .elementor-icon svg,
.elementor-element-12a3421.elementor-element-12a3421 > .e-con:hover .elementor-icon svg,
.elementor-element-77960d6.elementor-element-77960d6 > .e-con:hover .elementor-icon svg,
.elementor-element-06fe27c.elementor-element-06fe27c > .e-con:hover .elementor-icon svg {
	transform: translateX( -8px );
}

.aerocs-row.aerocs-row:hover .elementor-icon svg path,
.aerocs-rowlist.aerocs-rowlist > .e-con:hover .elementor-icon svg path,
.elementor-element-12a3421.elementor-element-12a3421 > .e-con:hover .elementor-icon svg path,
.elementor-element-77960d6.elementor-element-77960d6 > .e-con:hover .elementor-icon svg path,
.elementor-element-06fe27c.elementor-element-06fe27c > .e-con:hover .elementor-icon svg path {
	fill: var(--aerocs-gold);
	fill-opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.aerocs-row .elementor-icon svg,
	.aerocs-rowlist > .e-con .elementor-icon svg,
	.elementor-element-12a3421 > .e-con .elementor-icon svg,
	.elementor-element-77960d6 > .e-con .elementor-icon svg,
	.elementor-element-06fe27c > .e-con .elementor-icon svg {
		transition: none;
		transform: none !important;
	}
}

/* ==========================================================================
   Breadcrumbs (Rank Math-shortcode)

   Markup die Rank Math uitspuugt:
     <nav class="rank-math-breadcrumb"><p>
       <a>Home</a><span class="separator"> / </span><span class="last">Titel</span>
     </p></nav>

   De klasse is verdubbeld omdat Elementor's kit `a` op elementniveau stylet
   (onder meer het lettertype) en dat anders wint.
   ========================================================================== */

.rank-math-breadcrumb {
	--bc-link: #56657c;
	--bc-separator: #9aa5b5;
	--bc-current: #0b1f3b;
	--bc-hover: var( --e-global-color-primary, #c2a14d );
	--bc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.rank-math-breadcrumb.rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9.6px;
	margin: 0;
	padding: 0;
	font-family: var(--bc-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
}

.rank-math-breadcrumb.rank-math-breadcrumb a {
	font-family: var(--bc-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	color: var(--bc-link);
	text-decoration: none;
	transition: color 220ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.rank-math-breadcrumb.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb.rank-math-breadcrumb a:focus-visible {
	color: var(--bc-hover);
}

/* Het scheidingsteken staat in de HTML als " / " mét spaties eromheen; die
   zouden bovenop de gap van 9.6px komen. Daarom de tekst verbergen en de
   slash zelf tekenen. */
.rank-math-breadcrumb.rank-math-breadcrumb .separator {
	/* flex-container: zonder strut valt de regelhoogte terug op die van de
	   ::before, anders wordt de rij 21px in plaats van 16px hoog. */
	display: flex;
	align-items: center;
	font-size: 0;
	color: var(--bc-separator);
}

.rank-math-breadcrumb.rank-math-breadcrumb .separator::before {
	content: '/';
	font-family: var(--bc-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
}

/* Huidige pagina */
.rank-math-breadcrumb.rank-math-breadcrumb .last {
	font-family: var(--bc-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	color: var(--bc-current);
}

/* Een tussenliggende crump zonder URL krijgt van Rank Math óók class="last".
   Die moet er als gewone kruimel uitzien, niet als de huidige pagina. */
.rank-math-breadcrumb.rank-math-breadcrumb p > .last:not( :last-child ) {
	font-weight: 400;
	color: var(--bc-link);
}

/* ==========================================================================
   Telefoonnummers die de browser zélf tot link maakt

   In de voettekst stond het nummer eerst als gewone tekst — zonder link in de
   HTML en nergens in de site-CSS rood. Toch kleurde hij in sommige
   browsers af: iOS en Safari herkennen een telefoonnummer in lopende tekst en
   maken er uit zichzelf een belbare link van ('data detectors'), met hun eigen
   kleur en onderstreping. Het e-mailadres ernaast blijft dan grijs en het
   nummer niet.

   De link blijft staan — op een telefoon is tikken om te bellen juist handig —
   maar hij neemt de kleur van de tekst eromheen over.

   Uitzondering: de tekst in een Elementor-icon-list. Daar zet Elementor de
   kleur (en de hover-kleur) op het tekstvakje zelf, en het <li> eromheen heeft
   de gewone tekstkleur van de body. Zou dat vakje ook 'inherit' krijgen, dan
   wordt een 'tel:'-link in zo'n lijst #333 — onleesbaar op de donkere footer
   en net anders dan het e-mailadres ernaast. Het vakje houdt dus de kleur uit
   Elementor, net als de mailto-link erboven.
   ========================================================================== */

a[href^="tel:"],
a[href^="tel:"] span:not( .elementor-icon-list-text ),
a[x-apple-data-detectors],
a[x-apple-data-detectors] span {
	color: inherit !important;
	text-decoration: none !important;
	-webkit-text-decoration-color: inherit !important;
}

/* ==========================================================================
   Knoppen — het pijltje
   ========================================================================== */

/* Bij het aanwijzen schuift de pijl een stukje mee naar rechts. Op de wikkel
   om de svg en niet op de svg zelf: daar zet Elementor zijn kleurovergang op,
   en die zou dan sneuvelen. */
.elementor-button .elementor-button-icon {
	transition: transform 220ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.elementor-button:hover .elementor-button-icon,
.elementor-button:focus .elementor-button-icon {
	transform: translateX( 4px );
}

/* De pijl neemt de kleur van het opschrift over — in rust én bij hover. Dus
   wordt de tekst wit op een donkerblauwe achtergrond, dan wordt de pijl dat
   ook, zonder dat dat per knop ingesteld hoeft te worden.

   Dit moet op het <path> staan. De SVG draagt 'fill="#0B1F3B"' als attribuut,
   en een vulling op de omliggende <svg> erft daar niet overheen — Elementor
   zet hem juist wél op de <svg>, en daardoor deed hun eigen hover-kleur voor
   het pijltje niets. */
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon svg path {
	fill: currentColor;
	transition: fill 0.3s;
}

/* Wie beweging heeft uitgezet, krijgt de kleurwissel zonder het schuiven. */
@media ( prefers-reduced-motion: reduce ) {

	.elementor-button .elementor-button-icon {
		transition: none;
	}

	.elementor-button:hover .elementor-button-icon,
	.elementor-button:focus .elementor-button-icon {
		transform: none;
	}
}

/* ==========================================================================
   Contactpagina — e-mail en telefoon naast elkaar

   Een inline icon-list van Elementor geeft elk item een marge van de halve
   tussenruimte en de lijst een even grote negatieve marge, zodat de buitenste
   items gelijk met de rand staan. Bij deze lijst is die tussenruimte groot
   (104px): op een telefoon staan de twee items al onder elkaar, maar de lijst
   steekt dan nog 52px aan weerszijden uit en de pagina kreeg een horizontale
   scrollbalk.

   Wegknippen op de widget en niet de marges op nul: naast elkaar, op breed,
   is die ruimte precies de bedoelde tussenruimte. Er valt niets zichtbaars
   weg — over de rand ligt alleen de lege marge.
   ========================================================================== */

.elementor-element-0b3d5d3 {
	overflow-x: clip;
}

/* ==========================================================================
   Contactpagina — de Gravity Forms in de maat van het oude formulier

   De twee formulieren stonden eerst als Elementor-formulier op de pagina en
   zijn nu Gravity Forms in de Gravity Form Styler van UAE (klasse
   'aerocs-contact-gf' op de widget). Kleuren, lettertypes, de binnenruimte van
   de velden en de knop staan in die widget, zodat ze in Elementor te wijzigen
   blijven. Wat de widget niet kan, staat hier, met de maten van het oude
   formulier: 10px tussen twee velden naast elkaar, 32px tussen de rijen,
   velden van 40px hoog, een tekstvak van 94px en 32px boven de knop.

   Gravity Forms tekent deze formulieren in zijn basisthema ('gravity-theme',
   met 'gform-theme--no-framework'), niet in Orbital. De maten gaan daarom op
   de elementen zelf en niet via de --gf-variabelen van Orbital.

   De aanduiding '(Required)' en de regel erboven blijven weg: het oude
   formulier had ze niet. De velden houden aria-required, dus een
   schermlezer meldt ze nog steeds als verplicht.
   ========================================================================== */

.aerocs-contact-gf .gform_wrapper.gravity-theme .gform_fields {
	row-gap: 32px;
	column-gap: 10px;
}

.aerocs-contact-gf .gform_wrapper.gravity-theme .gform_heading,
.aerocs-contact-gf .gform_wrapper.gravity-theme .gfield_required {
	display: none;
}

.aerocs-contact-gf .gform_wrapper.gravity-theme .gfield input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.aerocs-contact-gf .gform_wrapper.gravity-theme .gfield select {
	height: 40px;
}

/* 'block': als inline-blok krijgt een tekstvak ruimte voor de onderkant van
   de letters eronder mee, en schoof alles erna 6px omlaag. */
.aerocs-contact-gf .gform_wrapper.gravity-theme .gfield textarea,
.aerocs-contact-gf .gform_wrapper.gravity-theme .gfield textarea.large {
	display: block;
	height: 94px;
}

/* Binnenruimte van tekstvak en keuzelijst zoals Elementor ze had; die wijken
   af van de gewone velden (8/16), dus de instelling in de widget dekt ze niet.
   Zwaardere selector, want UAE zet zijn binnenruimte met het id van de
   widget ervoor. */
.elementor-widget-uael-gf-styler.aerocs-contact-gf .uael-gf-style .gform_wrapper.gravity-theme .gfield textarea {
	padding: 5px 14px;
}

/* De keuzelijst krijgt het driehoekje van Elementor terug (zijn eigen
   'caret-down', zelfde pad) in plaats van het pijltje van de browser:
   11 bij 7 pixels, 10px uit de rechterkant, in de grijze tekstkleur
   (#9AA5B5, de globale kleur van de veldtekst). */
.elementor-widget-uael-gf-styler.aerocs-contact-gf .uael-gf-style .gform_wrapper.gravity-theme .gfield select {
	padding: 5px 20px 5px 14px;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 357 571.4 322'%3E%3Cpath fill='%239AA5B5' d='M571 393Q571 407 561 418L311 668Q300 679 286 679T261 668L11 418Q0 407 0 393T11 368 36 357H536Q550 357 561 368T571 393Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px top 19px;
	background-size: 11px 6.2px;
}

/* UAE zet om de keuzelijst een eigen pijltje (Font Awesome, via ::after);
   naast het driehoekje hierboven zou er dan een tweede staan. */
.elementor-widget-uael-gf-styler.aerocs-contact-gf .uael-gf-style .uael-gf-select-custom::after {
	display: none;
}

.aerocs-contact-gf .gform_wrapper.gravity-theme .gform_footer {
	margin: 0;
	padding: 32px 0 0;
}

/* Foutmeldingen — die had het oude formulier niet (de browser hield een leeg
   veld zelf tegen), Gravity Forms toont ze in de pagina. De kleur en het
   lettertype staan in de widget; hier gaat het roze kader van Gravity Forms
   eraf, zodat een melding als gewone regel onder het veld staat. */
.aerocs-contact-gf .gform_wrapper.gravity-theme .gfield_validation_message {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

/* De samenvatting bovenaan: de links erin kregen het lettertype van de kit
   (Poppins) en het uitroepteken van Gravity Forms viel over de lijst heen,
   omdat de binnenruimte uit de widget de ruimte ervoor wegneemt. */
.aerocs-contact-gf .gform_wrapper.gravity-theme .gform_validation_errors .gform-icon {
	display: none;
}

/* De kop is een h2 en kreeg daardoor het lettertype van de kit; de regels
   eronder het donkerrood van Gravity Forms, slecht leesbaar op donkerblauw.
   Allebei in het lichtrood van de meldingen onder de velden (#F28B82, zoals
   in de widget ingesteld). */
.aerocs-contact-gf .gform_wrapper.gravity-theme .gform_validation_errors h2 {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

.aerocs-contact-gf .gform_wrapper.gravity-theme .gform_validation_errors ol,
.aerocs-contact-gf .gform_wrapper.gravity-theme .gform_validation_errors ol li,
.aerocs-contact-gf .gform_wrapper.gravity-theme .gform_validation_errors ol a {
	color: #f28b82;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
}

/* Twee velden naast elkaar pas vanaf 768px, het mobiele breekpunt van
   Elementor. Gravity Forms zelf zet ze pas onder 640px onder elkaar. */
@media ( max-width: 767px ) {

	.aerocs-contact-gf .gform_wrapper.gravity-theme .gfield--width-half {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   Ankers — ruimte voor de sticky balk

   De hoogte komt uit header.js ('--aerocs-header-h', gezet bij de klik); zie
   de uitleg daar. Zonder die variabele valt het terug op 0, het gedrag van
   de browser zelf.
   ========================================================================== */

[id] {
	scroll-margin-top: var( --aerocs-header-h, 0px );
}