/*
 * Layout- en toegankelijkheidsfixes voor bestaande defecten.
 *
 * Dit zijn GEEN ontwerpwijzigingen. Elke regel hier repareert een gemeten bug
 * die al op de live site staat. Elke fix is in een echte browser voor/na
 * gemeten; de exacte cijfers staan bij de regel.
 *
 * SPECIFICITEIT — lees dit voor je hier iets toevoegt.
 * Dit bestand laadt op stylesheet-index 5, Elementors post-<id>.css op index 20.
 * Bij GELIJKE specificiteit wint Elementor dus altijd. Elke selector hieronder
 * is bewust één niveau zwaarder gemaakt dan die van Elementor. Dat is geen
 * opsmuk: een half-toegepaste fix (de ene property wint, de andere niet) is
 * erger dan geen fix. Gebruik geen !important — dat is hier nergens nodig.
 */

/* ============================================================ overflow ==== */

/*
 * 0. Header mag geen horizontale scrollbar veroorzaken.
 *
 * De Elfsight-vertaler in header 128 heeft op exact 768px een 59px-brede knop
 * die 21px voorbij de rechter viewportrand steekt. Omdat de header
 * `position: fixed` is, klipt geen enkele voorouder die overflow — een
 * `overflow-x: clip` op html of body werkt daardoor NIET (getest). De enige
 * plek die een fixed-element z'n eigen overflow laat klippen, is het element
 * zelf.
 *
 * `overflow-x: clip` (niet `hidden`) maakt géén scroll-container en laat
 * `overflow-y` op `visible`, dus de verticale dropdowns — het "Andere diensten"-
 * submenu, de taalwisselaar-dropdown, het mobiele hamburgermenu — blijven
 * volledig zichtbaar. Getest op alle 12 breedtes x 4 pagina's: scroll weg,
 * dropdowns intact, verticaal scrollen intact.
 *
 * Bewust NIET gericht op de Elfsight-hash (`container__Wrapper-sc-…`): die
 * verandert bij elke Elfsight-release. Dit is hash-onafhankelijk en raakt geen
 * enkele productie-Elementor-data aan. Bij go-live verdwijnt de vertaler
 * site-breed en is deze regel puur nog een vangnet.
 */
header.elementor {
	overflow-x: clip;
}

/* ---------------------------------------------------------------------- */

/*
 * 1. Werfkast-carousel: pijlen 50px buiten hun container.
 *
 * Widget bc9a97e (JetEngine listing 324) op pagina 9, 700, 713 en 714.
 * De Elementor-controls prev_left_position / next_right_position staan op
 * -50px, maar de pijl is via custom_css verkleind naar 33px. Dat past alleen
 * als de zijmarge >= 50px is, dus vanaf viewport 1420px (container max 1320px).
 *
 * Daaronder, dus van 320 t/m 1200px:
 *   - de next-pijl steekt 40px buiten beeld -> horizontale scrollbar
 *   - de prev-pijl staat op x=-40..-7 en is PERMANENT onbereikbaar
 * De carousel heeft geen dots (dots:false), dus op desktop zonder swipe was
 * er feitelijk geen bediening. Dit is dus geen cosmetische fix.
 *
 * Regressiepunt: revisie 640 (25-06-2026) zette dit van 10/10 naar -50/-50.
 * We zetten de pijlen terug binnen zolang er buiten geen 50px vrij is; vanaf
 * 1420px blijft de bestaande "buiten de grid"-look ongemoeid.
 *
 * Elementors regel is (0,5,0); `.elementor-page` maakt deze (0,6,0).
 */
@media (max-width: 1419px) {
	.elementor-page .elementor-element.elementor-element-bc9a97e .jet-listing-grid__slider-icon.slick-arrow.prev-arrow {
		left: 10px;
		right: auto;
	}

	.elementor-page .elementor-element.elementor-element-bc9a97e .jet-listing-grid__slider-icon.slick-arrow.next-arrow {
		right: 10px;
		left: auto;
	}
}

/*
 * 2. USP-icon-list breder dan het scherm.
 *
 * Widget c370128 ("Zelf ophalen ook mogelijk" / "Actief in heel België" /
 * "Snelle leveringen en afhalingen"). Elementor vertaalt space_between=50px
 * naar margin-inline:-25px op de <ul> (icon-list.php:250), maar de ouder
 * e09ee8e heeft maar 10px padding. Resultaat: 15px steekt aan elke kant uit.
 *
 * column-gap geeft exact dezelfde tussenruimte zonder negatieve marge.
 * Gemeten: ul-overschot 15px -> -10px op alle 48 metingen (4 pagina's x 12
 * breedtes), item-geometrie identiek. Op 1440/1920 was dit de enige oorzaak:
 * scrollWidth 1455 -> 1440 en 1935 -> 1920.
 *
 * De `ul`/`li` tag-selectors zijn LOAD-BEARING, niet cosmetisch: zonder die
 * winnen Elementors (0,5,0)/(0,6,0)-regels en pakt alleen column-gap, wat de
 * items 100px uit elkaar zet terwijl de overflow blijft. Erger dan niets.
 *
 * LET OP: de 50px moet gelijk blijven aan space_between van widget c370128.
 */
.elementor .elementor-element.elementor-element-c370128 ul.elementor-icon-list-items.elementor-inline-items {
	margin-inline: 0;
	column-gap: 50px;
	row-gap: 0;
}

.elementor .elementor-element.elementor-element-c370128 ul.elementor-icon-list-items.elementor-inline-items > li.elementor-icon-list-item {
	margin-inline: 0;
}

/*
 * 3. USP-koppen lopen bij 768-1024px over hun kolom.
 *
 * De vier koppen van de USP-rij (16ad3a9 "Veilig & gekeurd", 42255f7 "Snelle
 * interventie", abf7200 "Flexibele huurperiodes", 7a38350 "Ondersteuning door
 * experts") hebben een tablet-lettergrootte van 30px. Maar op tablet staan de
 * kolommen nog 4-breed op 25% — bij 768px is dat een box van 152px. Het
 * onbreekbare woord "Ondersteuning" wordt dan 235px en spilt 83px naar buiten.
 *
 * 30px hoort bij de GESTAPELDE mobile-layout, niet bij de 4-koloms tablet.
 * Gelijktrekken met desktop (16px) laat alle vier passen: 111-145px in 152px.
 * Gemeten @768: pagina-overschot 63 -> 40 (de rest is de slider-pijl hierboven).
 *
 * min-width:768px houdt de gestapelde mobile-weergave op 25px intact.
 * Bewust GEEN overflow-wrap:break-word — getest: dat breekt "Ondersteunin/g"
 * middenin af en laat de eigenlijke fout staan.
 *
 * Herhaald `.elementor-element` maakt dit (0,5,0) tegenover Elementors (0,4,0).
 */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor .elementor-element.elementor-element-16ad3a9.elementor-element .elementor-heading-title,
	.elementor .elementor-element.elementor-element-42255f7.elementor-element .elementor-heading-title,
	.elementor .elementor-element.elementor-element-abf7200.elementor-element .elementor-heading-title,
	.elementor .elementor-element.elementor-element-7a38350.elementor-element .elementor-heading-title {
		font-size: 16px;
	}
}

/*
 * 4. Werfkast-kaarten: "Aanvragen"-knoppen staan niet op één lijn.
 *
 * De kaarten van listing 324 (en de klonen 799 FR / 800 EN) zijn even hoog —
 * JetEngine's equal_columns_height staat aan en zet de itemhoogte gelijk aan de
 * hoogste kaart. De INHOUD is dat niet: een producttitel van één of twee regels
 * en een "Uitvoering"-waarde van één tot vier regels verschuiven alles daaronder.
 * Omdat de inhoud bovenaan uitgelijnd staat, eindigt de knop op elke kaart op
 * een andere hoogte en blijft er onderaan een verschillend gat over.
 *
 * Gemeten @1440 vóór deze fix (verticaal verschil tussen de knoppen in één rij):
 *   /            carousel, 6 kaarten        73px
 *   /werfkasten/ grid, rij 1 / rij 2        48px / 73px
 *   /fr/         carousel (listing 799)     48px
 *
 * De kaart is al een flex-kolom. De beschrijving (f70038b) laten meegroeien met
 * de vrije ruimte duwt alles daaronder — dus de knop — naar de onderkant. De
 * tekst zelf blijft bovenaan in z'n eigen vak staan, dus visueel verandert er
 * niets aan de tekst; alleen de lege ruimte verhuist van ónder de knop naar
 * boven de knop. Alle kaarten in een rij zijn even hoog en beginnen op dezelfde
 * y, dus de knoppen komen daarmee op één lijn.
 *
 * Bewust `flex-grow` op de tekst en NIET `margin-top: auto` op de knop. Dat
 * laatste lijnt de knoppen ook uit, maar een auto-marge telt niet mee in de
 * intrinsieke hoogte: JetEngine mat de kaarten daardoor 35px lager (819 -> 784)
 * en op de hoogste kaart plakte de knop tegen de tekst. Gemeten, dus verworpen.
 * `flex-grow` verdeelt alleen bestaande vrije ruimte en laat elke marge staan.
 *
 * Gescoped op `.jet-equal-columns`: alleen dáár legt JetEngine een kaarthoogte
 * op en is er vrije ruimte om te verdelen. Elders (o.a. de losse
 * listing-preview) heeft de kaart z'n natuurlijke hoogte en doet de regel niets.
 *
 * De element-id's 0593457 (kaart) en f70038b (beschrijving) komen alleen voor
 * in listing 324/799/800 (nagegaan over alle _elementor_data), dus deze selector
 * raakt geen andere widget. Elementors regel is (0,3,0); deze is (0,6,0).
 */
.jet-equal-columns .elementor .elementor-element.elementor-element-0593457 > .elementor-element.elementor-element-f70038b {
	flex-grow: 1;
}

/* ================================================== lege social-links ==== */

/*
 * Verberg social-iconen die geen adres hebben.
 *
 * De Instagram- en Facebook-icoon in de footer renderen als <a> zonder href:
 * ze zien er klikbaar uit, maar er gebeurt niets. Voor een screenreader is het
 * bovendien een link zonder bestemming.
 *
 * Bewust op `:not([href])` en niet op de iconen zelf: zodra de echte
 * account-URL's zijn ingevuld, verschijnen ze vanzelf weer. Geen code die
 * later teruggedraaid moet worden.
 */
a.elementor-social-icon:not([href]) {
	display: none;
}

/* ====================================================== aanraakvlakken ==== */

/*
 * De eis van 44x44px geldt voor AANRAAKvlakken. Daarom staat alles hieronder
 * in een media query tot 1024px: op een desktop met muis is 25px een prima
 * doel, en 44px forceren zou de productieheader ~19px hoger maken op elke
 * pagina zonder dat iemand daar iets aan heeft.
 *
 * Gemeten op /home-2/ @390: 49 te kleine doelen -> 12.
 * De overblijvers zijn bewust niet aangeraakt: de skip-link (1px is het
 * normale verborgen-tot-focus-patroon), inline tekstlinks binnen een alinea,
 * en de Elfsight-widgets (styled-components-hashes wijzigen bij elke update,
 * dus CSS daarop breekt bij de eerstvolgende release).
 */
@media (max-width: 1024px) {
	/* Mobiel menu: 42 -> 44. */
	.elementor-nav-menu--dropdown a.elementor-item,
	.elementor-nav-menu--dropdown a.elementor-sub-item {
		min-height: 44px;
	}

	/* Footer: social-iconen 20x20 -> 44x44, lijstlinks 24 -> 44 hoog. */
	.elementor-social-icon {
		min-width: 44px;
		min-height: 44px;
	}

	.elementor-icon-list-item > a {
		min-height: 44px;
	}

	/* Knoppen (o.a. "Aanvragen" in listing 324): 39 -> 44. */
	.elementor-widget-button .elementor-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Slider-pijlen: 33x33 -> 44x44. Werkt samen met fix 1 hierboven. */
	.jet-listing-grid__slider-icon {
		min-width: 44px;
		min-height: 44px;
	}

	/*
	 * Formulierknoppen en keuzerijen. De `body`-prefix is noodzaak, geen
	 * opsmuk: vivario-form.css heeft dezelfde specificiteit en laadt later,
	 * dus zonder prefix blijft het 36px. Gemeten.
	 */
	body .vwf .vwf-btn {
		min-height: 44px;
		height: auto;
	}

	body .vwf .vwf-radio-row {
		min-height: 44px;
	}
}