/*
Theme Name: SPEAX Child thema
Theme URI: https://github.com/elementor/hello-theme/
Description: SPEAX Child is een child thema gemaakt voor Elementor.
Author: SPEAX
Author URI: https://speax.nl
Template: hello-elementor
Version: 1.0.1
Text Domain: speax-child

License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html

*/
 
/* Vanaf hieronder kun je CSS plaatsen
-------------------------------------- */

/* Reviews-carousel
--------------------------------------
   De middelste slide staat op ware grootte, de buitenste twee schalen terug
   en vervagen. Verhouding 0.747 komt uit het XD: de zijkaarten zijn daar
   495x300 tegen 662x402 voor de actieve kaart.

   Let op de dubbele class in de selector (.jet-listing-grid__slider.swiper):
   swiper.min.css laadt NA dit bestand en zet zelf transform: translateZ(0) op
   .swiper-slide met dezelfde specificiteit. Met een class erbij winnen we
   zonder !important. De translateZ blijft staan voor GPU-compositing. */

.jet-listing-grid__slider.swiper .swiper-slide {
	transition: transform .5s ease, opacity .5s ease;
	transform: translateZ( 0 ) scale( .747 );
	opacity: .6;
}

.jet-listing-grid__slider.swiper .swiper-slide-active {
	transform: translateZ( 0 ) scale( 1 );
	opacity: 1;
	z-index: 2;
}

/* Bolletjes: 12px, 24px hart-op-hart, 40px onder de kaarten.
   swiper.min.css laadt na dit bestand met dezelfde specificiteit, dus losse
   regels voor kleur en marge verliezen. Swiper leest die waarden uit eigen
   custom properties -- die zetten werkt wel, en is meteen toekomstvast.
   Alleen de rand heeft geen variabele, dus die blijft een gewone regel. */
.jet-listing-grid .jet-engine-swiper-pagination-wrapper {
	--swiper-pagination-color: #FFFFFF;
	--swiper-pagination-bullet-inactive-color: transparent;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-size: 12px;
	--swiper-pagination-bullet-horizontal-gap: 6px;
	margin-block-start: 40px;
}

.jet-listing-grid .jet-engine-swiper-pagination-wrapper .swiper-pagination-bullet {
	border: 1px solid #FFFFFF;
}

/* Review-kaart (JetEngine listing 575)
--------------------------------------
   Elementor V4 genereert de kit-CSS per document en neemt daarin alleen de
   global classes mee die in DAT document voorkomen. Een JetEngine listing
   valt buiten die scan: global-60-frontend-*.css bevat wel card-blue en
   title-L-green (want pagina 60 gebruikt die zelf), maar niet de classes die
   alleen in de listing zitten. Die blijven dan ongestyled -- zwarte tekst.

   Leunen op classes die de pagina toevallig ook gebruikt is broos: zodra dat
   laatste element verdwijnt, valt de listing om. Vandaar hier, gescoped op
   de listing zelf. De global classes blijven op de elementen staan, zodat ze
   in Elementor zichtbaar zijn en dit werkt zodra Elementor listings wel
   meeneemt in de generatie. */

.jet-listing-grid--575 .review-card {
	height: 100%;
}

.jet-listing-grid--575 .review-mark {
	font-family: var( --font-primary );
	font-weight: 700;
	font-size: var( --font-title-xl );
	color: var( --color-green );
	line-height: 1;
}

.jet-listing-grid--575 .review-quote {
	font-family: var( --font-primary );
	font-size: var( --font-title-m );
	color: var( --color-white );
	line-height: 1.35;
	font-style: italic;
}

.jet-listing-grid--575 .review-author {
	font-family: var( --font-primary );
	font-weight: 700;
	font-size: var( --font-text-s );
	color: var( --color-white );
	margin-block-start: auto;
}

/* Header: mobiel menu
--------------------------------------
   De nav-menu is een V3-widget. Toggle-achtergrond, dropdown-achtergrond en
   de kleur/padding van de links komen uit widget-instellingen die Elementor
   als eigen CSS uitspuugt, NA dit bestand. Die vier eigenschappen zijn niet
   via V4 of de MCP te zetten, dus krijgen ze hier !important. De rest
   (radius, maat, icoon) heeft dat niet nodig.
   Witte pil met navy icoon, zelfde hoogte als de Control Tower-knop;
   dropdown wit met navy links, zodat hij zichtbaar is op de navy pagina. */
/* Alles hieronder alleen tot en met tablet: daarboven toont Elementor het
   gewone menu en verbergt hij de toggle. Zonder deze scope zou onze
   display:flex die display:none overschrijven en stond er een witte
   hamburger naast het desktopmenu (gezien op 1440, 2026-09-03). */
@media ( max-width: 1024px ) {
	/* De widget is een kolom van toggle + (dichtgeklapte) dropdown en meet
	   daardoor 96px; met align-items:center stond de toggle dan 28px boven het
	   logo. Widget vast op 40px hoog: de dropdown loopt eroverheen (overflow
	   visible) in plaats van de header op te rekken. Header + dropdown boven
	   de hero stapelen, anders verdwijnt het open menu achter de content. */
	.elementor-location-header {
		position: relative;
		z-index: 1000;
	}
	.elementor-location-header .elementor-widget-nav-menu {
		height: 40px;
		overflow: visible;
	}
	.elementor-location-header .elementor-nav-menu--dropdown {
		position: relative;
		z-index: 2;
		flex: none; /* de dropdown heeft overflow:hidden en zou anders in de 40px-widget tot 0 krimpen */
	}

	.elementor-location-header .elementor-menu-toggle {
		width: 40px;
		height: 40px;
		flex: none; /* anders krimpt hij in de 40px-hoge widget tot 20px */
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF !important;
		color: #242A5D;
		border: 0;
		border-radius: 25px;
	}

	.elementor-location-header .elementor-menu-toggle svg {
		width: 20px;
		height: 20px;
		fill: #242A5D;
	}

	.elementor-location-header .elementor-menu-toggle:hover,
	.elementor-location-header .elementor-menu-toggle:focus,
	.elementor-location-header .elementor-menu-toggle.elementor-active {
		background-color: #00BE85 !important;
	}

	.elementor-location-header .elementor-nav-menu--dropdown {
		background-color: #FFFFFF !important;
		border-radius: 20px;
		margin-top: 12px;
		padding: 12px 0;
		box-shadow: 0 12px 32px rgba( 0, 0, 0, .25 );
	}

	.elementor-location-header .elementor-nav-menu--dropdown a {
		color: #242A5D !important;
		padding: 14px 24px !important;
		font-size: 16px;
		font-weight: 600;
	}

	.elementor-location-header .elementor-nav-menu--dropdown a:hover,
	.elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active {
		color: #00BE85 !important;
		background-color: transparent !important;
	}
}

/* Mobiel: volgorde en breedte van de dropdown.
   Volgorde: logo, Control Tower + globe, dan de hamburger uiterst rechts. Kan
   niet via de widget-CSS -- die laag verwerkt @media(--mobile) niet.

   Let op: de dropdown MOET in de flow blijven (position static). Elementor
   koppelt open/dicht aan '.elementor-menu-toggle.elementor-active + nav';
   zodra de nav absolute of fixed staat, blijft hij op max-height:0 hangen
   (getest, 2026-09-03). Daarom: widget vast op 40px, en de dropdown met een
   negatieve marge naar links getrokken tot 10px van beide schermranden.
   Rekensom: widget staat op 100vw - 10 - 40; linkerrand moet op 10 komen,
   dus margin = 10 - (100vw - 50) = 60px - 100vw. 767px = Elementors mobiel. */
@media ( max-width: 767px ) {
	.elementor-location-header .elementor-widget-nav-menu {
		order: 3;
		flex: 0 0 40px;
		width: 40px;
		min-width: 0;
		margin-inline-start: 0;
		overflow: visible;
	}
	.elementor-location-header .elementor-nav-menu--dropdown {
		width: calc( 100vw - 20px );
		margin-inline-start: calc( 60px - 100vw );
	}
	/* Ongeveer zo groot als het wereldbolletje ernaast (29x29, was eerst 25x25),
	   i.p.v. de 40x40 van tablet/desktop-breedte hierboven. Icoon zelf ook mee
	   verkleind (20px paste niet meer). De widget-wrapper eromheen staat vast op
	   40px hoog (zie hierboven) en is een kolom (toggle + dichtgeklapte dropdown)
	   zonder centrering -- de knop stond daardoor tegen de bovenkant. Vaste
	   margin-top zet 'm verticaal in het midden van die 40px, zonder
	   align-items/justify-content op de wrapper te zetten (dat verschoof de knop
	   eerder wel al eens fout zodra de dropdown openklapte, zie de kolom-notitie
	   hierboven). */
	.elementor-location-header .elementor-menu-toggle {
		width: 29px;
		height: 29px;
		margin-block-start: 5.5px !important; /* de nav-menu-widget zet zelf `margin:0 auto` met hogere
		                                          specificiteit (.elementor-3572 ... .elementor-menu-toggle) */
	}
	.elementor-location-header .elementor-menu-toggle svg {
		width: 14px;
		height: 14px;
	}
}

/* Tablet (768-1024): Elementor toont hier ook de hamburger (dropdown: tablet).
   Zelfde principe als mobiel, maar met de desktop-gutter van de header:
   48px links, 52px rechts. Widget rechts = 100vw - 52 - 40; linkerrand op 48
   => margin = 48 - (100vw - 92) = 140px - 100vw; breedte = 100vw - 100px. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.elementor-location-header .elementor-widget-nav-menu {
		order: 3;
		flex: 0 0 40px;
		width: 40px;
		min-width: 0;
		margin-inline-start: 0;
		overflow: visible;
	}
	.elementor-location-header .elementor-nav-menu--dropdown {
		width: calc( 100vw - 100px );
		margin-inline-start: calc( 140px - 100vw );
	}
}

/* Knoppen: getekende omtrek bij hover
--------------------------------------
   SVG-rect met stroke-dasharray/dashoffset "tekent" de rand van de knop bij
   hover in 1s en blijft staan zolang je hovert -- zelfde effect als
   sliderrevolution.com/resources/css-button-hover-effects (100 Days CSS
   Button N045), als extra laag boven de bestaande achtergrondkleur-hover.

   pathLength="100" op de rect normaliseert de omtrek naar 100 eenheden,
   ongeacht de echte breedte van de knop (verschilt per instantie door de
   tekstlengte) -- zo werkt hetzelfde dasharray/dashoffset-stel overal.

   Hier staat alleen de basisvorm van de rect. De svg zelf en de animatie
   (Web Animations API, niet CSS-transition -- zie functions.php voor de
   reden) worden per knop toegevoegd door het script in wp_footer. */
.button-primary,
.button-secondary,
.button-tertiary {
	position: relative;
}
.btn-draw-outline {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
.btn-draw-outline rect {
	fill: none;
	stroke-width: 1.5px;
	stroke-dasharray: 30 100;
	stroke-dashoffset: 30;
	vector-effect: non-scaling-stroke;
}
.button-primary .btn-draw-outline rect {
	stroke: #5fe3bc; /* lichtere "gloed"-kleur van de pijl-animatie (--dwg-glow), i.p.v. --color-green:
	                     die was identiek aan de knop-achtergrond, dus de getekende omtrek was onzichtbaar. */
}
.button-secondary .btn-draw-outline rect {
	stroke: #E2ECEF;
}
.button-tertiary .btn-draw-outline rect {
	stroke: #00BE85;
}
/* Mailknop in de footer is lokaal overschreven naar een navy achtergrond
   (widget e-780d7f58-c9d7f35, elders is button-secondary wit) -- die ene knop
   krijgt daarom de blauwe randkleur i.p.v. de witte default hierboven. */
.button-secondary.e-780d7f58-c9d7f35 .btn-draw-outline rect {
	stroke: var( --color-blue );
}
@media ( prefers-reduced-motion: reduce ) {
	.btn-draw-outline {
		display: none;
	}
}

/* Voorkomt horizontale scroll wanneer decoratieve elementen (zoals de pijlen
   hieronder) bewust over de paginarand heen steken. */
@media ( max-width: 767px ) {
	html, body {
		overflow-x: hidden;
	}
}

/* Logo: 20px linker-padding
-------------------------------------- */
.e-76d0b305-f8d17f8 {
	padding-inline-start: 20px;
}

/* Taal-switcher: vlaggetjes-dropdown onder het wereldbolletje in de header
--------------------------------------
   WPML zet op elke pagina automatisch <link rel="alternate" hreflang="..."> tags
   in de <head> met de vertaalde URL van de HUIDIGE pagina (dankzij de WPML SEO-
   plugin) -- die worden client-side uitgelezen (zie de "Taal-switcher"-snippet in
   wp_footer) zodat de vlaggetjes altijd naar de juiste vertaling van de pagina
   linken, niet altijd naar de homepage. */
.e-62a311fd-da8eaa7 {
	position: relative;
	cursor: pointer;
}
.lang-switcher-dropdown {
	position: absolute;
	inset-block-start: calc( 100% + 12px );
	inset-inline-start: 50%;
	transform: translateX( -50% );
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 10px;
	z-index: 1000;
}
.lang-switcher-dropdown.is-open {
	display: flex;
}
.lang-switcher-dropdown a {
	display: block;
	width: 28px;
	height: 28px;
	line-height: 0;
}
.lang-switcher-dropdown img {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}