/*
Theme Name: Export Loket Direct
Theme URI: https://exportloketdirect.nl
Author: SAM Online Marketing & Webdesign
Author URI: https://samonlinemarketing.nl
Description: Maatwerkthema voor Export Loket Direct.nl. Gebouwd op het ontwerp uit "Export Loket Direct.dc.html". Bevat header, footer en homepage.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: exportloketdirect
Tags: custom-menu, translation-ready
*/

/* ==========================================================================
   1. Fonts — lokaal gehost (AVG), variabele woff2 uit Google Fonts.
   De gewichtsranges dekken de gewichten uit HANDOFF.md: Outfit 300-500,
   Figtree 400-600.
   ========================================================================== */

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url("assets/fonts/outfit-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url("assets/fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/figtree-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("assets/fonts/figtree-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ==========================================================================
   2. Tokens — één op één de tabellen uit HANDOFF.md §2 en §4.
   Wijzig --gray-band en --cream nooit los van elkaar: ze horen exact bij de
   kleur in de PNG-vormen (HANDOFF.md §2).
   ========================================================================== */

:root {
	/* Kleuren */
	--eld-navy: #022f47;
	--eld-navy-dark: #012c43;
	--eld-navy-badge: #1b3b52;
	--eld-orange: #e8871e;
	--eld-orange-dark: #c96f0d;
	--eld-orange-accent: #e28216; /* focusrand, "Nieuw!"-badge, linkhover */
	--eld-orange-hover-soft: #cf7413; /* hover "Meer oplossingen" in de hero */
	--eld-green: #459123;
	--eld-green-dark: #3b7d1d;
	--eld-cream: #fdf1e6;
	--eld-cream-border: #f2d7ba;
	--eld-cream-border-2: #f7dcc0;
	--eld-cream-border-3: #fbecdc;
	--eld-cream-border-4: #f3e2cf; /* hero-snelkoppelingen */
	--eld-gray-band: rgba(0, 39, 69, 0.102);
	--eld-blue-gray: #5f7d99;
	--eld-blue-gray-2: #4a6478;
	--eld-blue-gray-3: #93a6b8;
	--eld-border-light: #e7eef5;
	--eld-border-med: #d8e4ef;
	--eld-callback-bar: #dde7f0;
	--eld-step-number: #8ea7ba;
	--eld-field-border: rgba(2, 47, 71, 0.102);
	--eld-surface: #f4f6f8;
	--eld-surface-2: #fbfbfc; /* het lichte vlak onderaan Over ons */
	--eld-text-black: #000000; /* de verhaalblokken op Over ons, bewust niet navy */
	--eld-white: #ffffff;

	/* Alleen op Direct regelen en Contact */
	--eld-whatsapp: #25a34a;
	--eld-whatsapp-dark: #1f8c3f;
	--eld-call-text: #0e3a5f;
	--eld-note: #89a0b4;
	--eld-orange-icon: #e28214; /* pictogrammen bij de contactgegevens */
	--eld-band-ghost-border: #65727f; /* omlijnde knop op de navy balk */
	--eld-toc-text: #102a3e; /* inhoudsopgave op een artikel */
	--eld-badge-green: #eaf4e4; /* label "Binnen 2 minuten" op Exportverzekering */
	--eld-badge-green-text: #356b16;

	/* Maten */
	--eld-wrap: 1280px;
	--eld-gutter: 24px;
	--eld-radius-sm: 5px;
	--eld-radius-md: 8px;
	--eld-radius-lg: 10px;
	--eld-radius-xl: 20px;
	--eld-field-height: 50px;
	--eld-button-height: 52px;

	/* Schaduwen */
	--eld-shadow-card: 0 14px 34px rgba(2, 47, 71, 0.09);
	--eld-shadow-form: 0 30px 50px rgba(130, 157, 185, 0.1137);
	--eld-shadow-cream: 15px 12px 30px rgba(226, 130, 22, 0.07);
	--eld-shadow-hero-panel: 0 18px 40px rgba(2, 47, 71, 0.08);
	--eld-shadow-green: 0 6px 18px rgba(69, 145, 35, 0.28);
	--eld-shadow-green-sm: 0 3px 6px rgba(69, 145, 35, 0.35);

	/* Fonts */
	--eld-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--eld-font-head: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

	/*
	 * De hoogte van de schuine band. De rand en het vlak eronder sluiten hier exact
	 * op aan: beide rekenen met dezelfde waarde, dus er valt geen haarlijn tussen.
	 *
	 * HANDOFF.md §5 punt 2 schrijft een overlap van 1px voor. Dat advies gaat uit van
	 * een dekkende vorm. De PNG is dat niet: zijn onderste rijen zijn
	 * rgba(0,39,69,0.102), precies dezelfde halftransparante kleur als het vlak. Twee
	 * van die lagen over elkaar geeft ~19% in plaats van 10%, en dat is een zichtbare
	 * donkere streep over de volle breedte. Dus geen overlap.
	 */
	--eld-band-h: clamp(96px, 9vw, 160px);

	/*
	 * De schuine ónderkant van de hero op een landingspagina, en hoe diep de grijze
	 * band daar begint. Ook hier geldt: geen overlap. De onderste vorm
	 * (diagonal-cream-bottom.png) is net zo halftransparant als de andere twee — zijn
	 * bovenste rijen zijn rgba(226,128,20,0.102) — dus een crèmevlak dat 1px te ver
	 * doorloopt geeft rgb(250,229,209) in plaats van rgb(253,241,230): een streep.
	 */
	--eld-lp-slope: clamp(90px, 14.2vw, 300px);
	--eld-lp-band-top: clamp(104px, 12vw, 180px);
}

/* ==========================================================================
   3. Reset en basis
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--eld-white);
	color: var(--eld-navy);
	font-family: var(--eld-font-body);
	font-size: 15px;
	line-height: 22px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/*
 * Alleen een aangrijpingspunt; er wordt niet op de body geslotenscrold. Het paneel
 * hangt onder een niet-vastgezette header, dus de pagina moet gewoon kunnen
 * scrollen — anders is een paneel dat langer is dan het scherm onbereikbaar.
 */
body.eld-nav-open {
	--eld-nav-open: 1;
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--eld-font-head);
	font-weight: 400; /* Bewust niet bold — HANDOFF.md §1. */
	margin: 0;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--eld-navy);
}

a:hover {
	color: var(--eld-orange-accent);
}

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: inherit;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--eld-orange-accent);
	outline-offset: 2px;
}

.eld-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.eld-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--eld-navy);
	color: var(--eld-white);
	font-size: 15px;
	text-decoration: none;
}

.eld-skip-link:focus {
	left: 0;
	color: var(--eld-white);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.eld-wrap {
	max-width: var(--eld-wrap);
	margin-inline: auto;
	padding-inline: var(--eld-gutter);
}

.eld-wrap--narrow {
	max-width: 820px;
}

/* Rasters. Alle minmax-waarden zijn afgedekt met min(100%, …) zodat er bij
   375px geen horizontale overflow is — HANDOFF.md §6. */
.eld-grid {
	display: grid;
	gap: 22px;
}

.eld-grid--260 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.eld-grid--280 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 40px;
}

.eld-grid--300 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 26px;
	align-items: start;
}

.eld-grid--320 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 64px;
	align-items: center;
}

.eld-grid--420 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 56px;
	align-items: center;
}

/* ==========================================================================
   5. Typografie — HANDOFF.md §3
   ========================================================================== */

.eld-h1 {
	font-size: clamp(34px, 3.6vw, 46px);
	line-height: 1.1;
	color: var(--eld-navy);
}

.eld-h2 {
	font-size: clamp(32px, 3.4vw, 45px);
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--eld-navy);
}

.eld-h2--tight {
	line-height: 1.06;
}

.eld-h2--band {
	line-height: 1.05;
}

/* Zo groot als de kop van een binnenpagina, en zonder letterspatiëring. Voor de
   sectiekoppen op Exportverzekering. */
.eld-h2--page {
	font-size: clamp(30px, 3vw, 38px);
	line-height: 1.15;
	letter-spacing: normal;
}

/* Tweede regel van een tweekleurige kop. display:block is functioneel: het
   dwingt de kleurwissel op de regelovergang — HANDOFF.md §3. Bouw dit niet als
   één regel met een inline span. */
.eld-h2-line {
	display: block;
	color: var(--eld-orange);
}

/* Waar het tweede deel juist wél op dezelfde regel doorloopt: de hero-kop en
   het gecentreerde tekstblok. */
.eld-h2-inline {
	color: var(--eld-orange);
}

.eld-kicker {
	font-size: 18px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-lead {
	font-size: 18px;
	line-height: 26px;
	color: var(--eld-navy);
}

.eld-body {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-body a {
	color: var(--eld-orange);
	text-decoration: underline;
}

.eld-card-title {
	font-family: var(--eld-font-head);
	font-size: 18px;
	line-height: 24px;
	letter-spacing: -0.03em;
	color: var(--eld-navy);
}

.eld-section-head {
	display: flex;
	align-items: baseline;
	gap: 22px;
	flex-wrap: wrap;
}

/* ==========================================================================
   6. Knoppen
   ========================================================================== */

.eld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-width: min(100%, 233px);
	height: var(--eld-button-height);
	padding: 0 18px 0 28px;
	border: 0;
	border-radius: var(--eld-radius-sm);
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.025em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease,
		box-shadow 0.15s ease;
}

.eld-btn svg {
	display: block;
	flex: none;
}

.eld-btn--navy {
	background: var(--eld-navy);
	color: var(--eld-white);
}

.eld-btn--navy:hover {
	background: var(--eld-navy-dark);
	color: var(--eld-white);
}

.eld-btn--outline {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--eld-navy);
	color: var(--eld-navy);
}

.eld-btn--outline:hover {
	background: var(--eld-navy);
	color: var(--eld-white);
}

.eld-btn--green {
	background: var(--eld-green);
	box-shadow: var(--eld-shadow-green-sm);
	color: var(--eld-white);
}

.eld-btn--green:hover {
	background: var(--eld-green-dark);
	color: var(--eld-white);
}

.eld-btn--orange {
	background: var(--eld-orange);
	color: var(--eld-white);
}

.eld-btn--orange:hover {
	background: var(--eld-orange-hover-soft);
	color: var(--eld-white);
}

/*
 * De WhatsApp-knop. Staat híer en niet in pages.css, want drie templates gebruiken
 * hem: het contactblok op de homepage (template-parts/home/contact.php), Contact en
 * Direct regelen. pages.css wordt op de homepage niet ingeladen, en dan kwam de knop
 * daar zonder groen vlak op de pagina — een wit pictogram op crème met een los
 * label ernaast. Dit is de vijfde keer dat dit patroon toesloeg; zie de waarschuwing
 * bij "Waar staat wat" in de README.
 *
 * width: max-content en min-width: 0 moeten blijven staan: in het contactblok is de
 * knop een flex-kind naast een grid dat op 100% staat, en zonder die twee rekt hij
 * mee over de volle breedte.
 */
.eld-btn--whatsapp {
	align-self: flex-start;
	justify-content: flex-start;
	width: max-content;
	min-width: 0;
	gap: 10px;
	height: 50px;
	padding: 0 20px;
	background: var(--eld-whatsapp);
	color: var(--eld-white);
	font-size: 15px;
	line-height: 22px;
	letter-spacing: -0.025em;
}

.eld-btn--whatsapp:hover {
	background: var(--eld-whatsapp-dark);
	color: var(--eld-white);
}

/* Direct regelen zet dit label een punt groter en zonder letterspatiëring. */
.eld-btn--whatsapp-lg {
	font-size: 16px;
	letter-spacing: 0;
}

/* De header-CTA: gecentreerd label, eigen hoogte en schaduw. */
.eld-btn--cta {
	justify-content: center;
	gap: 16px;
	min-width: min(100%, 189px);
	height: 50px;
	padding: 0 24px;
	background: var(--eld-green);
	box-shadow: var(--eld-shadow-green);
	color: var(--eld-white);
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0;
	flex: none;
}

.eld-btn--cta:hover {
	background: var(--eld-green-dark);
	color: var(--eld-white);
}

.eld-badge {
	display: inline-flex;
	align-items: center;
	height: 33px;
	padding: 0 16px;
	border-radius: var(--eld-radius-lg);
	background: var(--eld-orange-accent);
	color: var(--eld-white);
	font-size: 15px;
	line-height: 1;
	letter-spacing: -0.05em;
}

/* ==========================================================================
   7. Formuliervelden — HANDOFF.md §4
   ========================================================================== */

.eld-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.025em;
	color: var(--eld-navy);
}

/*
 * Labeltekst en sterretje horen in één span. Zou de tekst als los tekstknooppunt
 * naast het sterretje staan, dan maakt de flexbox er twee items van en valt het
 * sterretje op een eigen regel — dat maakte de formulierkaart 62px te hoog.
 */
.eld-field__label {
	display: block;
}

.eld-field__req {
	color: var(--eld-orange);
}

.eld-field input,
.eld-field select {
	height: var(--eld-field-height);
	padding: 0 14px;
	border: 1px solid var(--eld-field-border);
	border-radius: var(--eld-radius-sm);
	background: var(--eld-white);
	font-size: 15px;
	color: var(--eld-navy);
	outline: none;
	width: 100%;
}

.eld-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23022f47' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M1 1.5 5 4.5 9 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

.eld-field textarea {
	padding: 12px 14px;
	border: 1px solid var(--eld-field-border);
	border-radius: var(--eld-radius-sm);
	background: var(--eld-white);
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-navy);
	outline: none;
	resize: vertical;
	width: 100%;
}

.eld-field input:focus,
.eld-field select:focus,
.eld-field textarea:focus {
	border-color: var(--eld-orange-accent);
	outline: none;
}

.eld-field input::placeholder,
.eld-field textarea::placeholder {
	color: var(--eld-blue-gray-3);
}

.eld-field--invalid input,
.eld-field--invalid select,
.eld-field--invalid textarea {
	border-color: #c0392b;
}

/* Invoerveld met iets ernaast in dezelfde rij, zoals het kenteken met de knop
   "Gegevens ophalen" op Exportverzekering. */
.eld-field__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.eld-field__row input {
	flex: 1 1 180px;
	min-width: 0;
}

.eld-field__error {
	font-size: 13px;
	line-height: 20px;
	color: #c0392b;
}

/* Honeypot. Niet display:none — dat slaan sommige bots over. */
.eld-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eld-notice {
	padding: 14px 16px;
	border-radius: var(--eld-radius-sm);
	font-size: 14px;
	line-height: 22px;
}

.eld-notice--ok {
	background: #eaf5e4;
	color: #2f6b17;
	box-shadow: inset 0 0 0 1px #c7e4b8;
}

.eld-notice--error {
	background: #fdecea;
	color: #a3271a;
	box-shadow: inset 0 0 0 1px #f3c8c2;
}

/* ==========================================================================
   8. Header
   ========================================================================== */

.eld-header {
	width: 100%;
	position: relative;
	z-index: 40;
	font-family: var(--eld-font-body);
	color: var(--eld-navy);
}

/* Topbalk */
.eld-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-block: 9px 10px;
}

.eld-topbar__slogan {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-topbar__right {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

.eld-topbar__phone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-orange);
	text-decoration: none;
}

.eld-topbar__phone:hover {
	color: var(--eld-orange-dark);
}

.eld-topbar__phone svg {
	display: block;
	flex: none;
}

.eld-topbar__menu {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eld-topbar__menu a {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-navy);
	text-decoration: none;
}

.eld-topbar__menu a:hover {
	color: var(--eld-orange);
}

.eld-lang {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-lang svg {
	display: block;
}

.eld-lang__flag {
	border-radius: 2px;
}

/*
 * De taalkiezer van GTranslate.
 *
 * De plugin bouwt zijn schakelaar met JavaScript en spuit er een eigen <style>-blok
 * bij, met een wíllekeurige containerklasse (`.gt_container--3g3yy7`). Die klasse
 * verandert per installatie, dus daar kun je niet op mikken. Zijn regels wegen
 * (0,2,1) — bijvoorbeeld `.gt_container--x .gt_switcher a` — en zijn stijlblok komt
 * later in het document dan onze stylesheet, dus bij gelijk gewicht wint de plugin.
 * Daarom staat `body` ervoor: dat maakt (0,3,1) en dan winnen wij. Zelfde truc als
 * bij `body .elv` voor de verzekeringsplugin.
 *
 * Wat we bewust laten staan: het chevronnetje. De plugin tekent dat zelf als
 * achtergrond-SVG op `.gt_selected a::after`, in de kleur die bij Instellingen is
 * ingevuld (#022f47), en draait het om als de lijst openstaat. Dat is precies wat
 * het ontwerp toont, dus daar hoeft niets bij.
 */
body .eld-lang--gt {
	display: block;
}

body .eld-lang--gt .gt_switcher,
body .eld-lang--gt .gt_switcher a {
	font-family: var(--eld-font-body);
	font-size: 14px;
	letter-spacing: -0.025em;
}

/*
 * box-sizing terugzetten: de plugin zet `content-box` op zijn links en rekent daar
 * een vaste breedte bij op (151px + padding + rand = 183px). Met border-box is de
 * breedte die we opgeven ook de breedte die het wordt.
 *
 * Geen verticale padding. De topbalk is 41px hoog in het ontwerp en dat is precies
 * genoeg voor een regel van 22px; met padding erbij werd de balk 51px, en op een
 * telefoon viel de kiezer op een eigen regel en werd de balk 99px.
 */
body .eld-lang--gt .gt_switcher .gt_selected a,
body .eld-lang--gt .gt_switcher .gt_option a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 7px;
	line-height: 22px;
	padding: 0 24px 0 8px;
	color: var(--eld-navy);
	/* De plugin zet hier een rand van 1px. Die is wit en dus onzichtbaar, maar maakte
	   de topbalk 43px in plaats van de 41px uit het ontwerp. */
	border: 0;
}

body .eld-lang--gt .gt_switcher,
body .eld-lang--gt .gt_switcher .gt_selected a,
body .eld-lang--gt .gt_switcher .gt_option {
	width: 152px;
}

body .eld-lang--gt .gt_switcher .gt_option a {
	line-height: 30px;
}

/*
 * Op telefoonformaat alleen de vlag en het pijltje. Anders is de kiezer 152px breed
 * en past hij niet naast het telefoonnummer, waardoor de topbalk twee regels wordt.
 * De naam weghalen kan niet met display:none — het is een los tekstknooppunt naast
 * de <img> — dus gaat de letter naar 0 en krijgt de vlag zijn maat terug. Dezelfde
 * aanpak die de verzekeringsplugin voor zijn stappenlabels gebruikt.
 *
 * De lijst die openklapt houdt wél de volledige namen: daar is de ruimte er wel, en
 * "Polski" moet leesbaar zijn voor wie geen Nederlands leest.
 */
@media (max-width: 767px) {
	body .eld-lang--gt .gt_switcher,
	body .eld-lang--gt .gt_switcher .gt_selected a {
		width: 52px;
	}

	body .eld-lang--gt .gt_switcher .gt_selected a {
		font-size: 0;
		padding: 0 20px 0 4px;
	}

	body .eld-lang--gt .gt_switcher .gt_option {
		width: 152px;
	}
}

/*
 * De lijst hangt onder de balk en hoort bij de kaarten van het ontwerp.
 *
 * Absoluut en rechts uitgelijnd, om twee redenen. Ten eerste blijft de topbalk zijn
 * hoogte houden als de lijst openklapt — in de flow zou hij de balk uitrekken. Ten
 * tweede is de knop op een telefoon maar 52px breed terwijl de lijst 152px is: in de
 * flow lijnt die links uit en liep hij 78px buiten het scherm, waardoor de talen niet
 * meer te lezen waren. Met `right: 0` valt de lijst naar binnen.
 */
body .eld-lang--gt .gt_switcher {
	position: relative;
	overflow: visible;
}

body .eld-lang--gt .gt_switcher .gt_option {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 6px;
	border: 1px solid var(--eld-cream-border);
	border-radius: var(--eld-radius-sm);
	box-shadow: var(--eld-shadow-card);
}

/*
 * De plugin rekent de open hoogte uit met zijn eigen maat — in dwf.js staat
 * `Math.min(198, Math.min(aantal - 1, 6) * (flag_size + 6) + 1)`, dus 67px bij vier
 * talen en een vlag van 16px. Onze regels zijn hoger dan die 22px, en de laatste
 * taal wordt in die formule niet meegerekend, dus het paneel viel te kort uit en de
 * lijst ging scrollen.
 *
 * Die hoogte zet de plugin inline, en dus is `!important` de enige manier om eronder
 * uit te komen. Alleen in de open stand: de plugin zet `open` op de gekozen link, en
 * `:has()` laat ons daarop mikken. Zodra de lijst dichtgaat verdwijnt die klasse,
 * geldt deze regel niet meer, en klapt hij netjes terug op de inline `height: 0`.
 */
body .eld-lang--gt .gt_switcher:has(.gt_selected a.open) .gt_option {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

body .eld-lang--gt .gt_switcher .gt_option a:hover {
	background: var(--eld-cream);
}

/* De plugin zet de vlaggen op 80% dekking; in de balk mogen ze gewoon vol staan. */
body .eld-lang--gt .gt_switcher a img {
	opacity: 1;
	border-radius: 2px;
	flex: 0 0 auto;
}

/* Hoofdbalk */
.eld-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding-block: 10px 12px;
}

.eld-logo {
	display: flex;
	flex-direction: column;
	gap: 3.2px;
	flex: none;
	text-decoration: none;
}

.eld-logo img {
	display: block;
}

.eld-logo__line1 {
	width: min(100%, 174px);
	height: 18.2px;
}

.eld-logo__line2 {
	width: min(100%, 120px);
	height: 18.2px;
}

/* De <nav> is alleen een omhulsel voor de aria-label; de <ul> erin doet de
   opmaak. Zou de nav zelf flex zijn, dan zou de lijst in het mobiele paneel
   niet de volle breedte pakken. */
.eld-nav {
	display: block;
}

.eld-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eld-nav__list a {
	font-size: 15px;
	line-height: 24px;
	color: var(--eld-navy);
	text-decoration: none;
}

.eld-nav__list a:hover,
.eld-nav__list .current-menu-item > a,
.eld-nav__list .current_page_item > a {
	color: var(--eld-orange);
}

/* Hamburger — toevoeging op het ontwerp, kantelt op 940px (HANDOFF.md §6). */
.eld-burger {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--eld-border-light);
	border-radius: var(--eld-radius-sm);
	background: var(--eld-white);
	color: var(--eld-navy);
	font-size: 14px;
	line-height: 22px;
	cursor: pointer;
	flex: none;
}

.eld-burger__bars {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
	flex: none;
}

.eld-burger__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--eld-navy);
	transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.eld-burger__bars span:nth-child(1) {
	top: 0;
}

.eld-burger__bars span:nth-child(2) {
	top: 6px;
}

.eld-burger__bars span:nth-child(3) {
	top: 12px;
}

.eld-burger[aria-expanded="true"] .eld-burger__bars span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

.eld-burger[aria-expanded="true"] .eld-burger__bars span:nth-child(2) {
	opacity: 0;
}

.eld-burger[aria-expanded="true"] .eld-burger__bars span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

/* Uitschuifpaneel */
.eld-panel {
	display: none;
}

@media (max-width: 939px) {
	.eld-burger {
		display: inline-flex;
	}

	.eld-header__desktop-nav,
	.eld-header__desktop-cta,
	.eld-topbar__menu {
		display: none;
	}

	.eld-topbar__slogan {
		display: none;
	}

	.eld-topbar__inner {
		justify-content: flex-end;
	}

	.eld-bar {
		gap: 16px;
		flex-wrap: nowrap;
	}

	/*
	 * Het paneel schuift en vervaagt; het klapt niet uit op hoogte. Twee eerdere
	 * pogingen liepen op een randgeval stuk en staan hier om ze niet nog eens te
	 * proberen:
	 *
	 *  - max-height: calc(100vh - 100%) — die 100% rekent tegen de hoogte van het
	 *    omhullende blok. De header heeft een automatische hoogte, dus de hele calc
	 *    viel terug op 0 en het paneel bleef dicht.
	 *  - grid-template-rows: 0fr → 1fr — werkt alleen in een container met een
	 *    bepaalde hoogte. Dit paneel staat absoluut zonder hoogte, dus de 1fr
	 *    resolveerde ook naar 0.
	 *
	 * Vervagen en schuiven heeft geen hoogte nodig en werkt overal. Het paneel legt
	 * zich over de inhoud in plaats van hem weg te duwen; dat mag, want het staat
	 * absoluut.
	 *
	 * visibility houdt de links buiten de tabvolgorde zolang het paneel dicht is. Bij
	 * openen schakelt die direct om, bij sluiten pas na de animatie — daarom staat de
	 * overgang twee keer, met en zonder vertraging.
	 */
	.eld-panel {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--eld-white);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease,
			visibility 0s linear 0.2s;
	}

	.eld-panel[data-open="true"] {
		visibility: visible;
		opacity: 1;
		transform: none;
		border-top: 1px solid var(--eld-border-light);
		box-shadow: var(--eld-shadow-card);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
	}

	/*
	 * De scrolllaag. dvh en niet een percentage: een percentage zou weer tegen de
	 * hoogte van de header rekenen. Nodig voor een telefoon in liggende stand, waar
	 * het paneel hoger is dan het scherm.
	 */
	.eld-panel__clip {
		max-height: 70dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.eld-panel__inner {
		display: flex;
		flex-direction: column;
		gap: 22px;
		padding: 24px var(--eld-gutter) 32px;
	}

	.eld-panel__list {
		display: flex;
		flex-direction: column;
		gap: 0;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.eld-panel__list li + li {
		border-top: 1px solid var(--eld-border-light);
	}

	.eld-panel__list a {
		display: block;
		padding: 13px 0;
		font-size: 17px;
		line-height: 24px;
		color: var(--eld-navy);
		text-decoration: none;
	}

	.eld-panel__list a:hover {
		color: var(--eld-orange);
	}

	.eld-panel__list--secondary a {
		font-size: 15px;
		color: var(--eld-blue-gray);
	}

	.eld-panel .eld-btn--cta {
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eld-panel,
	.eld-panel[data-open="true"],
	.eld-burger__bars span {
		transition: none;
	}

	.eld-panel {
		transform: none;
	}
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.eld-footer {
	width: 100%;
	background: var(--eld-navy);
	color: var(--eld-blue-gray-3);
	font-family: var(--eld-font-body);
}

.eld-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 48px 40px;
	padding-block: 72px 40px;
}

.eld-footer__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.eld-footer__col--brand {
	gap: 18px;
}

.eld-footer__wordmark {
	font-family: var(--eld-font-head);
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -0.05em;
	color: var(--eld-white);
}

.eld-footer__wordmark span {
	color: var(--eld-blue-gray-3);
}

.eld-footer__text {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-blue-gray-3);
}

.eld-footer__heading {
	font-size: 18px;
	line-height: 22px;
	color: var(--eld-white);
}

.eld-footer__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eld-footer a {
	color: var(--eld-blue-gray-3);
	text-decoration: none;
}

.eld-footer a:hover {
	color: var(--eld-white);
}

.eld-footer__list a,
.eld-footer__contact {
	font-size: 14px;
	line-height: 22px;
}

.eld-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: var(--eld-blue-gray-3);
}

.eld-footer__contact .eld-footer__kvk {
	margin-top: 22px;
}

.eld-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	flex-wrap: wrap;
	padding-block: 24px 40px;
}

.eld-footer__copy {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-blue-gray-3);
	max-width: 320px;
}

/* flex:1 met space-evenly zet de twee links op dezelfde plek als in het
   ontwerp, waar ze losse flex-kinderen van de onderbalk zijn. */
.eld-footer__legal {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	gap: 24px 40px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
}

.eld-footer__badge {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 37px;
	padding: 0 15px;
	border-radius: var(--eld-radius-sm);
	background: var(--eld-navy-badge);
	font-size: 15px;
	line-height: 22px;
	letter-spacing: -0.025em;
	color: var(--eld-white);
	flex: none;
}

.eld-footer__badge-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3fa040;
	flex: none;
}

/* ==========================================================================
   10. Navy balk met een oproep, onderaan een pagina

   Staat hier en niet in een paginastylesheet: deze balk komt op meerdere pagina's
   terug, ook op een kennisbankartikel dat pages.css niet laadt.
   ========================================================================== */

.eld-ctaband {
	background: var(--eld-navy-dark);
}

.eld-ctaband__inner {
	padding-block: 52px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 40px;
	align-items: center;
}

.eld-ctaband__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eld-ctaband__title {
	font-family: var(--eld-font-head);
	font-size: clamp(30px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.05em;
	color: var(--eld-white);
}

.eld-ctaband__text {
	max-width: 560px;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: -0.025em;
	color: var(--eld-blue-gray-3);
}

.eld-ctaband__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Gecentreerd label, eigen breedtes — anders dan de knoppen elders. */
.eld-btn--band {
	justify-content: center;
	height: 50px;
	padding: 0 24px;
	font-size: 15px;
	line-height: 22px;
}

.eld-btn--band-green {
	min-width: min(100%, 162px);
	background: var(--eld-green);
	box-shadow: 0 6px 18px rgba(69, 145, 35, 0.35);
	color: var(--eld-white);
}

.eld-btn--band-green:hover {
	background: var(--eld-green-dark);
	color: var(--eld-white);
}

.eld-btn--band-ghost {
	min-width: min(100%, 201px);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--eld-band-ghost-border);
	color: var(--eld-white);
}

.eld-btn--band-ghost:hover {
	box-shadow: inset 0 0 0 1px var(--eld-white);
	color: var(--eld-white);
}

@media (max-width: 767px) {
	.eld-ctaband__actions {
		justify-content: flex-start;
	}

	/*
	 * 16px en geen 15px, alleen op telefoonformaat. Safari op iOS zoomt de hele
	 * pagina in zodra je een veld aantikt waarvan de letter kleiner is dan 16px,
	 * en zoomt daarna niet terug — de bezoeker moet zelf uitknijpen. Het ontwerp
	 * schrijft 15px voor, dus op grotere schermen blijft dat staan.
	 *
	 * Layoutneutraal: de veldhoogte is vastgezet met --eld-field-height en de
	 * regelhoogte van het tekstvak staat in pixels, dus er verschuift niets.
	 */
	.eld-field input,
	.eld-field select,
	.eld-field textarea {
		font-size: 16px;
	}
}

/* ==========================================================================
   11. De schuine band — homepage (grijs) en Over ons (crème)
   ==========================================================================

   Drie lagen in een position:relative wrapper (HANDOFF.md §5):
     1. .eld-band__edge  — de schuine rand, met een eigen hoogte
     2. .eld-band__fill  — het vlak eronder, in dezelfde kleur, exact aansluitend
                           (géén overlap; zie de opmerking bij .eld-band__fill)
     3. .eld-band__body  — de content, die de hoogte bepaalt

   Zet de PNG nooit als <img> in de flow: die is 3840px breed en zou op een
   breed scherm de sectiehoogte gaan bepalen. background-size: 100% 100% is
   bewust — de vorm wordt naar de bandhoogte gerekt.

   Staat hier en niet in home.css: Over ons gebruikt dezelfde lagen met de
   crèmekleurige vorm.
   ========================================================================== */

/*
 * De band begint standaard bovenaan zijn wrapper. --eld-band-offset schuift rand én
 * vlak samen omlaag; op de landingspagina steken de stapkaarten daardoor boven de
 * schuinte uit. 0px en niet 0: het gaat in een calc() met een lengte.
 */
.eld-band {
	position: relative;
	--eld-band-offset: 0px;
}

.eld-band--offset {
	--eld-band-offset: var(--eld-lp-band-top);
}

.eld-band__edge {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--eld-band-offset);
	height: var(--eld-band-h);
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.eld-band--gray .eld-band__edge {
	background-image: url("assets/shapes/diagonal-band-top.png");
}

.eld-band--cream .eld-band__edge {
	background-image: url("assets/shapes/diagonal-band-cream.png");
}

/*
 * Begint exact waar de rand eindigt — dezelfde --eld-band-h, dus geen gat en geen
 * overlap. Zet hier géén waarde die 1px hoger ligt: de rand en het vlak zijn beide
 * halftransparant, dus in die overlappende rij tellen ze op tot een donkere streep.
 */
.eld-band__fill {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--eld-band-offset) + var(--eld-band-h));
	bottom: 0;
}

.eld-band--gray .eld-band__fill {
	background: var(--eld-gray-band);
}

/*
 * Crème is hier een dekkende kleur, terwijl de onderste rijen van de PNG
 * rgba(226,128,20,0.102) zijn — over wit vlakt dat af naar rgb(252,242,231), en
 * --eld-cream is rgb(253,241,230). Eén stap verschil per kanaal, onzichtbaar. Ook
 * hier dus geen overlap van 1px: die zou de halftransparante rand over het dekkende
 * vlak leggen en dat geeft wél een streep.
 */
.eld-band--cream .eld-band__fill {
	background: var(--eld-cream);
}

.eld-band__body {
	position: relative;
}

/* ==========================================================================
   12. Beoordelingen en het formulier met de kaart
   ==========================================================================

   Staan hier en niet in home.css: Over ons gebruikt dezelfde kaarten en hetzelfde
   formulier, alleen met een andere achtergrond en een andere randkleur. De
   paginaspecifieke afwijkingen zitten in de modifiers --cream en --light.
   ========================================================================== */

.eld-reviews {
	padding-block: 96px 0;
}

.eld-reviews__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 56px;
}

.eld-reviews__head h2 {
	max-width: 460px;
}

.eld-reviews__head p {
	max-width: 420px;
}

/* Zelfde kaart als de stapkaart, maar met de cirkel rechts en zonder
   verspringing. */
.eld-review {
	position: relative;
	z-index: 0;
	padding: 48px 30px 30px;
	border-radius: var(--eld-radius-md);
	background: var(--eld-white);
	border: 1px solid var(--eld-cream-border);
	box-shadow: var(--eld-shadow-cream);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eld-review__ring {
	position: absolute;
	right: 24px;
	top: -34px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--eld-white);
	border: 1px solid var(--eld-cream-border);
}

.eld-review__mask {
	position: absolute;
	right: 25px;
	top: -1px;
	width: 54px;
	height: 27px;
	background: var(--eld-white);
}

.eld-review__score {
	position: absolute;
	right: 35px;
	top: -23px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--eld-orange);
	color: var(--eld-white);
	font-size: 14px;
	line-height: 34px;
	text-align: center;
	letter-spacing: -0.03em;
}

.eld-review__name {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-blue-gray-3);
}

/* --------------------------------------------------------------------------
   Het formulier met de kaart ernaast
   -------------------------------------------------------------------------- */

/*
 * De achtergrond en de marge erboven zitten in de modifiers, niet in het blok zelf:
 * op de homepage staat dit blok op crème met 96px lucht erboven, op Over ons in het
 * lichtgrijze vlak zonder marge.
 */
.eld-contact--cream {
	margin-top: 96px;
	background: var(--eld-cream);
}

/* Over ons: het formulier staat in het lichtgrijze vlak, met een koelere rand en
   schaduw dan de crèmevariant op de homepage. */
.eld-contact--light .eld-contact__card {
	box-shadow: inset 0 0 0 1px var(--eld-border-med),
		15px 10px 20px rgba(136, 160, 180, 0.102);
}

.eld-contact--light .eld-contact__inner {
	padding-block: 0 96px;
}

/* Zonder de tweede rij beoordelingen erboven draagt het formulier de bovenruimte. */
.eld-contact--light-top .eld-contact__inner {
	padding-block: 88px 96px;
}

.eld-contact--light .eld-contact__map {
	background: var(--eld-surface);
}

.eld-contact__inner {
	padding-block: 88px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px;
	align-items: stretch;
}

.eld-contact__card {
	padding: 40px;
	border-radius: var(--eld-radius-lg);
	background: var(--eld-white);
	box-shadow: inset 0 0 0 1px var(--eld-cream-border-3),
		15px 10px 20px rgba(226, 130, 22, 0.051);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* --------------------------------------------------------------------------
   RDW-band: foto naast tekst op crème

   Staat hier en niet in home.css: sinds de briefing (§5.8, "RDW-erkenning prominent")
   staat deze band ook op Over ons.
   -------------------------------------------------------------------------- */

.eld-rdw {
	margin-top: 104px;
	background: var(--eld-cream);
}

.eld-rdw__inner {
	padding-block: 88px;
}

.eld-rdw__photo {
	display: block;
	width: 100%;
	max-width: 640px;
	border-radius: var(--eld-radius-xl);
	object-fit: cover;
}

.eld-rdw__col {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

.eld-rdw__col p {
	max-width: 560px;
}

/* --------------------------------------------------------------------------
   De contactgegevens: bezoekadres, openingstijden, telefoon, e-mail

   Staan hier en niet in pages.css: sinds de briefing komen ze ook op de homepage,
   en die laadt pages.css niet.
   -------------------------------------------------------------------------- */

.eld-contactgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 36px 40px;
}

.eld-contactblock {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Als rij in plaats van als kolom: op de homepage staan de vier blokjes naast elkaar
   boven het formulier, met minder tussenruimte dan in de kolom op Contact. */
.eld-contactgrid--row {
	gap: 24px 32px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.eld-contactblock svg {
	display: block;
}

.eld-contactblock__label {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.025em;
	color: var(--eld-blue-gray-3);
}

.eld-contactblock__value {
	font-size: 18px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-contactblock__value a {
	color: var(--eld-navy);
	text-decoration: none;
}

.eld-contactblock__value a:hover {
	color: var(--eld-orange-accent);
}

/*
 * Rij contactgegevens boven het formulier op de homepage. Staat niet in het ontwerp
 * maar wel in de briefing (§5.1, punt 7). Eronder een streep, zodat het formulier en
 * de kaart hun eigen blok blijven.
 */
.eld-contact__details {
	padding-block: 56px 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
}

/*
 * width: 100% is nodig, niet cosmetisch. align-items: flex-start laat een flexkind
 * krimpen tot zijn min-content, en dan rekent minmax(min(100%, 200px), 1fr) tegen die
 * smalle breedte — het raster viel daardoor terug op één kolom. De WhatsApp-knop moet
 * juist wél krimpen, dus de breedte staat op het raster en niet op alle kinderen.
 */
.eld-contact__details .eld-contactgrid {
	width: 100%;
}

.eld-contact__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eld-contact__title {
	font-family: var(--eld-font-head);
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.05em;
	color: var(--eld-navy);
}

/* Het <form> is een extra laag tussen de kaart en de velden en neemt daarom de
   kolomopbouw over die in het ontwerp op de kaart zelf zat. */
.eld-contact__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.eld-contact__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 18px;
}

.eld-contact__card .eld-btn {
	width: min(100%, 233px);
	align-self: flex-start;
}

.eld-contact__map {
	border-radius: var(--eld-radius-lg);
	overflow: hidden;
	min-height: 420px;
	background: var(--eld-white);
}

.eld-contact__map img,
.eld-contact__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
	object-fit: cover;
}

/*
 * Op een telefoon vangt de kaart de veegbeweging op en scrollt de pagina niet meer.
 * Daarom is hij daar alleen om te kijken: de prikker en de straatnamen zijn wat je
 * nodig hebt, en scrollen blijft scrollen. Boven 767px blijft hij gewoon te slepen.
 */
@media (max-width: 767px) {
	.eld-contact__map iframe {
		pointer-events: none;
	}
}

@media (max-width: 520px) {
	.eld-contact__card {
		padding: 28px 20px;
	}
}

/* ==========================================================================
   13. Fallback-inhoud voor niet-ontworpen pagina's (index.php).
   Tijdelijk: de overige templates volgen in een latere ronde.
   ========================================================================== */

.eld-fallback {
	padding-block: 88px;
}

.eld-fallback__title {
	font-size: clamp(30px, 3vw, 38px);
	line-height: 1.15;
	margin-bottom: 20px;
}

.eld-fallback__content > * + * {
	margin-top: 18px;
}

.eld-fallback__content h2,
.eld-fallback__content h3 {
	margin-top: 32px;
}

.eld-fallback__content a {
	color: var(--eld-orange);
}

/* ==========================================================================
   14. Zwevende bel- en WhatsApp-knop
   ==========================================================================

   Staat niet in het ontwerp maar wel in de briefing (§6, laag 3): altijd zichtbaar,
   op mobiel en op desktop.

   z-index 30, dus onder de header (40). Zo komt het uitschuifpaneel op mobiel over
   deze knoppen heen in plaats van eronder te verdwijnen.
   ========================================================================== */

.eld-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 30;
	display: flex;
	flex-direction: column-reverse;
	gap: 12px;
}

.eld-float__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	color: var(--eld-white);
	text-decoration: none;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.eld-float__btn svg {
	display: block;
	flex: none;
}

.eld-float__btn--whatsapp {
	background: var(--eld-whatsapp);
	box-shadow: 0 6px 18px rgba(37, 163, 74, 0.32);
}

.eld-float__btn--whatsapp:hover {
	background: var(--eld-whatsapp-dark);
}

.eld-float__btn--call {
	background: var(--eld-navy);
	box-shadow: 0 6px 18px rgba(2, 47, 71, 0.28);
}

.eld-float__btn--call:hover {
	background: var(--eld-navy-dark);
}

.eld-float__btn:hover,
.eld-float__btn:focus-visible {
	transform: translateY(-2px);
	color: var(--eld-white);
}

/*
 * Het tekstballonnetje. Het staat er altijd in de HTML — dat is ook het toegankelijke
 * label van de knop — maar is standaard onzichtbaar en niet aan te klikken, zodat het
 * de knop ernaast niet in de weg zit.
 */
.eld-float__tip {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	padding: 7px 12px;
	border-radius: var(--eld-radius-sm);
	background: var(--eld-navy);
	color: var(--eld-white);
	font-size: 13px;
	line-height: 18px;
	letter-spacing: -0.025em;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.16s ease;
}

.eld-float__btn:hover .eld-float__tip,
.eld-float__btn:focus-visible .eld-float__tip {
	opacity: 1;
	visibility: visible;
}

/* Op een smal scherm is er geen ruimte voor het ballonnetje naast de knop, en een
   vinger heeft geen hover. Het label blijft wel in de aria-label staan. */
@media (max-width: 767px) {
	.eld-float {
		right: 14px;
		bottom: 14px;
		gap: 10px;
	}

	.eld-float__btn {
		width: 50px;
		height: 50px;
	}

	.eld-float__tip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eld-float__btn,
	.eld-float__tip {
		transition: none;
	}
}