/*
 * Binnenpagina's met een crème kop: Direct regelen, Contact en Veelgestelde vragen.
 *
 * Volgt #direct-regelen, #contact en #veelgestelde-vragen uit
 * "Export Loket Direct.dc.html". Tokens komen uit style.css.
 *
 * Het breekbare stuk staat bij .eld-formcard: de kaart schuift boven 940px met een
 * negatieve marge de crèmeband in. Zie HANDOFF.md §6.
 */

/* ==========================================================================
   1. Crème kop
   ========================================================================== */

.eld-pagehead {
	background: var(--eld-cream);
}

.eld-pagehead__inner {
	padding-block: 56px 64px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.eld-pagehead__title {
	font-size: clamp(30px, 3vw, 38px);
	line-height: 1.15;
	color: var(--eld-navy);
}

.eld-pagehead__intro {
	max-width: 470px;
	font-size: 17px;
	line-height: 26px;
	color: var(--eld-navy);
}

/* ==========================================================================
   2. Tweekolommen eronder
   ========================================================================== */

.eld-split {
	padding-block: 44px 96px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 56px;
	align-items: start;
}

/* ==========================================================================
   3. De formulierkaart
   ==========================================================================

   De clamp-truc: boven 940px is (940px - 100vw) negatief, maal 1000 ver negatief,
   dus geklemd op -232px — de kaart schuift dan in de crèmeband erboven. Onder 940px
   is het positief en wordt het 0, want dan staan de kolommen onder elkaar en zou de
   kaart over de introtekst vallen.

   Koppel dit niet los van de 940px waarop het raster kantelt, en vervang het niet
   door een vaste marge. Zie HANDOFF.md §6.
*/

.eld-formcard {
	margin-top: clamp(-232px, calc((940px - 100vw) * 1000), 0px);
	padding: 40px;
	border-radius: var(--eld-radius-lg);
	background: var(--eld-white);
	box-shadow: inset 0 0 0 1px var(--eld-border-light), var(--eld-shadow-form);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.eld-formcard--roomy {
	gap: 26px;
}

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

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

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

.eld-formcard__note {
	text-align: center;
	font-size: 13px;
	line-height: 24px;
	letter-spacing: -0.025em;
	color: var(--eld-note);
}

/*
 * 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-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.eld-formcard--roomy .eld-form {
	gap: 26px;
}

/* Twee velden naast elkaar, zoals telefoon en e-mailadres. */
.eld-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 14px;
}

.eld-form__row--wide {
	gap: 18px;
}

/*
 * Velden op deze kaarten wijken af van die op de homepage: lichtere rand, label op
 * 16px en een kleinere tussenruimte. Dat komt uit het ontwerp.
 */
.eld-form--card .eld-field {
	gap: 6px;
	font-size: 16px;
	line-height: 24px;
}

.eld-form--card .eld-field input,
.eld-form--card .eld-field select,
.eld-form--card .eld-field textarea {
	border-color: var(--eld-border-light);
}

/*
 * Direct regelen zet de invoertekst op 13px, Contact op 15px. Dat verschil zit in het
 * ontwerp; haal deze regel weg als je overal 15px wilt.
 */
.eld-form--compact .eld-field input,
.eld-form--compact .eld-field select {
	font-size: 13px;
}

/* ==========================================================================
   4. Knoppen die alleen op deze pagina's staan
   ========================================================================== */

/* Volle breedte, gecentreerd label — anders dan de knoppen op de homepage. */
.eld-btn--block {
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 50px;
	padding: 0 18px;
	font-size: 15px;
	line-height: 22px;
}

.eld-btn--call {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--eld-border-med), 0 3px 6px rgba(2, 47, 71, 0.06);
	color: var(--eld-call-text);
}

.eld-btn--call:hover {
	box-shadow: inset 0 0 0 1px var(--eld-navy);
	color: var(--eld-call-text);
}

/* De WhatsApp-knop staat in style.css: de homepage gebruikt hem ook. */

/* ==========================================================================
   5. Direct regelen — de punten links
   ========================================================================== */

.eld-lead-col {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

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

.eld-point {
	display: flex;
	gap: 10px;
}

.eld-point svg {
	display: block;
	flex: none;
	margin-top: 6px;
}

.eld-point__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

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

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

/* ==========================================================================
   6. Contact — de gegevensblokken links
   ========================================================================== */

.eld-contactcols {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* De blokjes zelf staan in style.css: die komen sinds de briefing ook op de
   homepage, en daar wordt dit bestand niet geladen. */

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

/* ==========================================================================
   7. Veelgestelde vragen — gecentreerde kop
   ========================================================================== */

.eld-pagehead--center .eld-pagehead__inner {
	padding-block: 112px;
	align-items: center;
	text-align: center;
	gap: 22px;
}

.eld-pagehead--center .eld-pagehead__title {
	font-size: clamp(32px, 3.2vw, 40px);
}

.eld-pagehead--center .eld-pagehead__intro {
	max-width: 560px;
	font-size: 18px;
}

/* ==========================================================================
   8. Veelgestelde vragen — kolom met categorieën, en de vragen
   ==========================================================================

   Flex met wrap in plaats van grid: de verhouding 1:4 uit het ontwerp komt uit
   flex-grow, en bij wrappen gaan beide kolommen netjes over de volle breedte.
*/

.eld-faq {
	padding-block: 64px 96px;
	display: flex;
	flex-wrap: wrap;
	gap: 68px;
	align-items: flex-start;
}

.eld-faq__nav {
	flex: 1 1 220px;
	max-width: 325px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-right: 1px solid var(--eld-border-med);
	padding-right: 24px;
}

.eld-faq__nav ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eld-faq__cat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 22px 0;
	font-size: 17px;
	line-height: 22px;
	color: var(--eld-navy);
	text-decoration: none;
}

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

.eld-faq__cat--active {
	color: var(--eld-orange-accent);
}

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

.eld-faq__list {
	flex: 4 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Eén vraag. <details> zodat het uitklappen ook zonder JavaScript werkt. */
.eld-faq__item {
	border-radius: var(--eld-radius-sm);
	box-shadow: inset 0 0 0 1px var(--eld-border-med), 0 3px 6px rgba(69, 145, 35, 0.149);
	background: var(--eld-white);
}

.eld-faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 50px;
	padding: 13px 20px;
	cursor: pointer;
	list-style: none;
}

/* Het eigen driehoekje van <summary> weg in alle browsers. */
.eld-faq__q::-webkit-details-marker {
	display: none;
}

.eld-faq__q::marker {
	content: "";
}

.eld-faq__q-text {
	flex: 1;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: -0.025em;
	color: var(--eld-call-text);
}

/*
 * Het chevron draait bij openen. In het ontwerp staat hij ook op een geopende vraag
 * naar rechts, maar dat is een tekening van één toestand; een pijl die niet meebeweegt
 * laat de bezoeker niet zien dat het item open is.
 */
.eld-faq__q svg {
	display: block;
	flex: none;
	transition: transform 0.18s ease;
}

.eld-faq__item[open] > .eld-faq__q svg {
	transform: rotate(90deg);
}

.eld-faq__a {
	padding: 0 20px 20px;
}

.eld-faq__a p {
	max-width: 760px;
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-faq__a p + p {
	margin-top: 12px;
}

/* Een vraag zonder antwoord: geen uitklap, dus ook geen aanwijzer of chevron. */
.eld-faq__item--plain .eld-faq__q {
	cursor: default;
}

.eld-faq__empty {
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-blue-gray);
}

@media (prefers-reduced-motion: reduce) {
	.eld-faq__q svg {
		transition: none;
	}
}

/* Gewrapt: de streep rechts hoort dan niet meer, die deelt niets meer. */
@media (max-width: 767px) {
	.eld-faq {
		gap: 32px;
	}

	.eld-faq__nav {
		max-width: none;
		border-right: 0;
		padding-right: 0;
		border-bottom: 1px solid var(--eld-border-med);
		padding-bottom: 8px;
	}

	.eld-faq__cat {
		padding: 14px 0;
	}
}

/* ==========================================================================
   10. Kennisbank — kop
   ==========================================================================

   Derde variant van de crème kop: linksuitgelijnd zoals Direct regelen, maar met
   andere maten en een kop die helemaal oranje is in plaats van tweekleurig.
*/

.eld-pagehead--kb .eld-pagehead__inner {
	padding-block: 64px;
	gap: 18px;
}

.eld-pagehead--kb .eld-pagehead__title {
	color: var(--eld-orange);
}

.eld-pagehead--kb .eld-pagehead__intro {
	max-width: 660px;
	font-size: 18px;
}

/* ==========================================================================
   11. Kennisbank — kolom met categorieën en de artikelenlijst
   ========================================================================== */

.eld-kb {
	padding-block: 56px 96px;
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	align-items: flex-start;
}

.eld-kb__nav {
	flex: 1 1 220px;
	max-width: 334px;
	min-width: 0;
	border-right: 1px solid var(--eld-border-med);
	padding-right: 24px;
}

.eld-kb__nav ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eld-kb__cat {
	display: block;
	padding: 11px 0;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: -0.025em;
	color: var(--eld-call-text);
	text-decoration: none;
}

.eld-kb__cat:hover,
.eld-kb__cat--active {
	color: var(--eld-orange-accent);
}

.eld-kb__list {
	flex: 4 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/*
 * De scheidingslijnen zitten in het ontwerp op de artikelen zelf, met een andere
 * padding voor het eerste en het laatste. Vandaar niet één regel voor alles.
 */
.eld-kb__item {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 34px 0;
	border-bottom: 1px solid var(--eld-border-light);
}

/*
 * :first-of-type en :last-of-type, niet :first-child/:last-child. Onder de artikelen
 * kan nog een knop "meer artikelen laden" staan; dan is het laatste artikel geen
 * last-child meer en hield het zijn onderpadding en streep — 35px te veel.
 * :last-of-type kijkt naar het elementtype <article> en is daar immuun voor.
 */
.eld-kb__item:first-of-type {
	padding-top: 0;
}

.eld-kb__item:last-of-type {
	padding-bottom: 0;
	border-bottom: 0;
}

.eld-kb__thumb {
	flex: 1 1 200px;
	max-width: 244px;
	aspect-ratio: 244 / 163;
	border-radius: var(--eld-radius-lg);
	overflow: hidden;
	background: var(--eld-surface);
}

.eld-kb__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voor een artikel zonder uitgelichte afbeelding. */
.eld-kb__thumb--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: repeating-linear-gradient(
		135deg,
		#eef2f6 0 12px,
		var(--eld-surface) 12px 24px
	);
	color: var(--eld-blue-gray);
	font-size: 12px;
	line-height: 18px;
	text-align: center;
}

.eld-kb__body {
	flex: 3 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eld-kb__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	font-size: 12px;
	line-height: 22px;
	letter-spacing: -0.025em;
	color: var(--eld-orange-accent);
}

.eld-kb__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--eld-orange-accent);
	flex: none;
}

.eld-kb__title {
	font-family: var(--eld-font-head);
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -0.03em;
	color: var(--eld-navy);
}

.eld-kb__title a {
	color: inherit;
	text-decoration: none;
}

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

.eld-kb__excerpt {
	max-width: 640px;
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-kb__more {
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: -0.025em;
	color: var(--eld-navy);
	text-decoration: none;
}

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

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

/* "Meer artikelen laden": dezelfde omlijnde knop, met een vaste breedte. */
.eld-kb__pager {
	margin-top: 40px;
	width: min(100%, 209px);
}

.eld-kb__empty {
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-blue-gray);
}

@media (max-width: 767px) {
	.eld-kb {
		gap: 32px;
	}

	.eld-kb__nav {
		max-width: none;
		border-right: 0;
		padding-right: 0;
		border-bottom: 1px solid var(--eld-border-med);
		padding-bottom: 8px;
	}
}

/* ==========================================================================
   12. Over ons — crème kop met vinkjes
   ========================================================================== */

.eld-pagehead--over .eld-pagehead__inner {
	padding-block: 80px;
	gap: 22px;
}

.eld-pagehead--over .eld-pagehead__title,
.eld-pagehead--over .eld-pagehead__intro {
	max-width: 760px;
}

.eld-pagehead--over .eld-pagehead__intro {
	font-size: 18px;
}

/*
 * margin-bottom: 0 staat er niet voor niets: een <ul> houdt anders de marge van de
 * browser en dan zakt alles eronder een regel weg.
 */
.eld-pagehead__usps {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

/* Eén punt met een vinkje. Heet .eld-check en niet .eld-pagehead__usp, omdat de hero
   van een landingspagina precies dezelfde punten heeft — alleen met een andere
   tussenruimte in de rij eromheen. */
.eld-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-navy);
}

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

/* ==========================================================================
   13. Over ons — de twee verhaalblokken
   ==========================================================================

   Tekst en foto naast elkaar; in het tweede blok staat de foto links. Die volgorde
   komt uit de bronvolgorde, niet uit een order-eigenschap, zodat de voorleesorde
   gelijk blijft aan wat je ziet.

   De tekst is hier zwart en niet navy. Dat staat zo in het ontwerp, op beide
   blokken en ook op de kop van het tweede blok.
*/

.eld-story {
	padding-block: 88px 0;
}

.eld-story--second {
	padding-block: 88px;
}

.eld-story__text,
.eld-story__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.eld-story__body p {
	max-width: 596px;
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-text-black);
}

.eld-story--second .eld-story__title {
	max-width: 520px;
	color: var(--eld-text-black);
}

.eld-story__photo {
	position: relative;
	aspect-ratio: 640 / 590;
	border-radius: var(--eld-radius-lg);
	overflow: hidden;
	background: var(--eld-surface);
}

.eld-story__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Opvulblok voor de twee foto's die nog niet zijn aangeleverd
   (HANDOFF.md §8, punt 2). Vervangbaar via de mediakiezer bij het blok. */
.eld-story__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: repeating-linear-gradient(
		135deg,
		#eef2f6 0 12px,
		var(--eld-surface) 12px 24px
	);
	color: var(--eld-blue-gray);
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}

/* ==========================================================================
   14. Over ons — beoordelingen in de crèmeband, en het lichte vlak onderaan
   ========================================================================== */

.eld-overreviews {
	margin-top: 88px;
}

/* De kop staat hier boven de band; de ruimte eronder komt van de band zelf. */
.eld-overreviews .eld-reviews__head {
	margin-bottom: 0;
}

.eld-overreviews .eld-band {
	margin-top: 40px;
}

/* De kaarten beginnen onder de schuinte: bandhoogte plus de 52px uit het ontwerp. */
.eld-band__cards {
	padding-block: calc(var(--eld-band-h) + 52px) 96px;
}

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

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

/* ==========================================================================
   15. Exportverzekering — kop en de twee kaarten
   ========================================================================== */

.eld-pagehead--wide .eld-pagehead__intro {
	max-width: 640px;
}

.eld-vzcards {
	padding-block: 44px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 26px;
	align-items: start;
}

.eld-vzcard {
	position: relative;
	padding: 36px;
	border-radius: var(--eld-radius-md);
	background: var(--eld-white);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* De linkerkaart is de opvallende: crème rand met de warme schaduw. De rechter is
   rustiger, met alleen een koele rand en geen schaduw. Dat staat zo in het ontwerp. */
.eld-vzcard--online {
	border: 1px solid var(--eld-cream-border);
	box-shadow: var(--eld-shadow-cream);
}

.eld-vzcard--advice {
	border: 1px solid var(--eld-border-light);
}

.eld-vzcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* 24px zonder letterspatiëring — anders dan de kaarttitels elders. */
.eld-vzcard__title {
	font-family: var(--eld-font-head);
	font-size: 24px;
	line-height: 1.15;
	color: var(--eld-navy);
}

.eld-vzcard__badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	border-radius: 4px;
	font-size: 13px;
	line-height: 28px;
}

.eld-vzcard__badge--green {
	background: var(--eld-badge-green);
	color: var(--eld-badge-green-text);
}

.eld-vzcard__badge--gray {
	background: var(--eld-surface);
	color: var(--eld-call-text);
}

.eld-vzcard__text {
	font-size: 15px;
	line-height: 24px;
	color: var(--eld-navy);
}

/* Het <form> is een extra laag tussen de kaart en de velden en neemt de tussenruimte
   over die in het ontwerp op de kaart zelf zat. */
.eld-vzcard .eld-form {
	gap: 20px;
}

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

/* De knop naast het kenteken: geen minimumbreedte en gecentreerd label, anders dan
   de knoppen elders. */
.eld-vzcard__lookup {
	flex: none;
	justify-content: center;
	min-width: 0;
	height: var(--eld-field-height);
	padding: 0 20px;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--eld-border-med);
	color: var(--eld-call-text);
	font-size: 15px;
	line-height: 22px;
}

.eld-vzcard__lookup:hover {
	box-shadow: inset 0 0 0 1px var(--eld-navy);
	color: var(--eld-call-text);
}

/* Beide grote knoppen vullen de kaart en hebben hun eigen binnenruimte. */
.eld-vzcard .eld-btn--green,
.eld-vzcard .eld-btn--outline {
	width: 100%;
	min-width: 0;
	padding: 0 20px 0 24px;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: normal;
}

/* Hier de grotere groene schaduw, niet de kleine van de homepage. */
.eld-vzcard .eld-btn--green {
	box-shadow: var(--eld-shadow-green);
}

.eld-vzcard__note {
	font-size: 13px;
	line-height: 20px;
	color: var(--eld-navy);
}

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

.eld-vzcard__call:hover {
	color: var(--eld-orange-accent);
	text-decoration: underline;
}

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

/* ==========================================================================
   16. Exportverzekering — "Wat zit erin" en de vragen
   ========================================================================== */

.eld-vzincl {
	padding-block: 88px 0;
}

.eld-vzincl__head {
	margin-bottom: 40px;
}

/*
 * Kaartje met een vinkje ervoor. Gedeeld door "Wat zit erin" op Exportverzekering en
 * "Wat wij regelen" op Import; die twee verschillen alleen in de randkleur.
 */
.eld-checkcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 18px;
}

.eld-checkcard {
	display: flex;
	gap: 12px;
	padding: 24px;
	border-radius: var(--eld-radius-md);
	background: var(--eld-white);
	border: 1px solid var(--eld-border-light);
}

.eld-checkcard--cream {
	border-color: var(--eld-cream-border);
}

/* Het vinkje staat op de hoogte van de eerste regel, niet bovenaan het blok. */
.eld-checkcard > svg {
	display: block;
	flex: none;
	margin-top: 7px;
}

.eld-checkcard__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

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

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

.eld-vzfaq {
	padding-block: 88px 96px;
}

.eld-vzfaq__head {
	margin-bottom: 32px;
}

/* Zelfde accordeon als op Veelgestelde vragen, maar smaller en met een koele
   schaduw in plaats van de groene. */
.eld-vzfaq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 920px;
}

.eld-vzfaq__list .eld-faq__item {
	box-shadow: inset 0 0 0 1px var(--eld-border-med), 0 3px 6px rgba(2, 47, 71, 0.04);
}

/* Link naar de volledige lijst, onder een korte selectie op een dienstpagina. */
.eld-faq__more {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 6px;
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-navy);
	text-decoration: none;
}

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

.eld-faq__more svg {
	display: block;
	flex: none;
	transition: transform 0.18s ease;
}

.eld-faq__more:hover svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.eld-faq__more svg {
		transition: none;
	}
}

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

	.eld-checkcard {
		padding: 18px;
	}
}

/* ==========================================================================
   17. Import — oranje kop en de twee keuzekaarten
   ========================================================================== */

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

.eld-imchoice {
	padding-block: 44px 0;
}

.eld-imchoice__kicker {
	display: block;
	margin-bottom: 26px;
	font-size: 18px;
	line-height: 22px;
	color: var(--eld-navy);
}

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

/* De hele kaart is één link. Bij zweven wordt de rand oranje; verder verandert er
   niets, zodat de kaart rustig blijft. */
.eld-imcard {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px;
	border-radius: var(--eld-radius-md);
	background: var(--eld-white);
	border: 1px solid var(--eld-cream-border);
	box-shadow: var(--eld-shadow-cream);
	text-decoration: none;
	transition: border-color 0.18s ease;
}

.eld-imcard:hover,
.eld-imcard:focus-visible {
	border-color: var(--eld-orange);
}

.eld-imcard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--eld-cream);
}

.eld-imcard__icon svg {
	display: block;
}

.eld-imcard__title {
	font-family: var(--eld-font-head);
	font-size: 24px;
	line-height: 1.15;
	color: var(--eld-navy);
}

.eld-imcard__text {
	font-size: 15px;
	line-height: 24px;
	color: var(--eld-navy);
}

/* Geen echte knop maar de aanwijzing binnen de kaartlink; de kaart is al klikbaar. */
.eld-imcard__more {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 4px;
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-imcard__more svg {
	display: block;
	flex: none;
	transition: transform 0.18s ease;
}

.eld-imcard:hover .eld-imcard__more svg {
	transform: translateX(3px);
}

.eld-imservices {
	padding-block: 88px 96px;
}

.eld-imservices__head {
	margin-bottom: 40px;
}

@media (prefers-reduced-motion: reduce) {
	.eld-imcard,
	.eld-imcard__more svg {
		transition: none;
	}
}

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

/* ==========================================================================
   18. Contact — route, parkeren en de kaart
   ==========================================================================

   Staat niet in het ontwerp maar wel in de briefing (§5.9). Zelfde maten als de
   andere twee-koloms blokken op de site, zodat het er niet uit valt.
*/

.eld-ctroute {
	padding-block: 24px 96px;
}

.eld-ctroute__head {
	margin-bottom: 40px;
}

.eld-ctroute__grid {
	align-items: start;
}

.eld-ctroute__col {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.eld-ctroute__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.eld-ctroute__body p {
	max-width: 560px;
	font-size: 15px;
	line-height: 24px;
	color: var(--eld-navy);
}

/* Parkeren staat apart in een crèmeblokje: klanten komen met hun auto, dus dit is
   het eerste wat ze willen weten. */
.eld-ctroute__parking {
	display: flex;
	gap: 14px;
	padding: 22px 24px;
	border-radius: var(--eld-radius-lg);
	background: var(--eld-cream);
}

.eld-ctroute__parking > svg {
	display: block;
	flex: none;
	margin-top: 2px;
}

.eld-ctroute__parking-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.eld-ctroute__parking-label {
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-navy);
}

.eld-ctroute__parking-text p {
	font-size: 14px;
	line-height: 22px;
	color: var(--eld-blue-gray-2);
}

.eld-ctroute__map {
	border-radius: var(--eld-radius-lg);
	overflow: hidden;
	min-height: 380px;
	background: var(--eld-surface);
}

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

/* Zelfde reden als bij de kaart naast een formulier: op een telefoon mag de kaart de
   veegbeweging niet opvangen. */
@media (max-width: 767px) {
	.eld-ctroute__map iframe {
		pointer-events: none;
	}
}

/* ==========================================================================
   19. Importroute — /import/nederland/ en /import/buitenland/
   ==========================================================================

   Staan niet in het ontwerp maar wel in de briefing (§5.6, §5.7). De kaart rechts,
   de vinkjeskaartjes en de accordeon komen uit bestaande onderdelen; alleen de
   genummerde stappen links zijn nieuw.
*/

.eld-imroute {
	padding-block: 44px 0;
	align-items: start;
}

.eld-imroute__col {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.eld-imroute__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.eld-imroute__body p {
	max-width: 560px;
	font-size: 15px;
	line-height: 24px;
	color: var(--eld-navy);
}

.eld-imroute__steps-title {
	font-family: var(--eld-font-head);
	font-size: 19px;
	line-height: 26px;
	letter-spacing: -0.03em;
	color: var(--eld-navy);
	margin-top: 6px;
}

/* margin: 0 is functioneel: de standaardmarges van een <ol> schuiven alles eronder
   op, en de nummers tekenen we zelf. */
.eld-imroute__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.eld-imroute__step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.eld-imroute__step-num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--eld-cream);
	color: var(--eld-orange);
	font-size: 14px;
	line-height: 30px;
}

.eld-imroute__step-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.eld-imroute__step-label {
	font-size: 15px;
	line-height: 22px;
	color: var(--eld-navy);
}

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

/* ==========================================================================
   20. De verzekeringsplugin in de huisstijl
   ==========================================================================

   Het formulier op /exportverzekering/ komt van de plugin export-loket-verzekering.
   Die hangt volledig aan CSS-variabelen op .elv, dus hier zetten we de merkkleuren en
   blijft de plugin zelf ongemoeid. Zie HANDOFF.md van de plugin, §7.

   Raak assets/css/form.css in de plugin niet aan: dat gaat verloren bij een update.
*/

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

/*
 * body ervoor, niet voor de sier: de plugin zet zijn standaardwaarden ook op .elv, en
 * form.css wordt ná pages.css ingeladen. Met dezelfde specificiteit zou de plugin dus
 * winnen. Met body erbij (0,1,1 tegen 0,1,0) winnen deze waarden altijd, ongeacht de
 * volgorde waarin de stylesheets binnenkomen.
 */
body .elv {
	/* Blauw is bij ons navy. */
	--elv-blue: var(--eld-navy);
	--elv-blue-dark: var(--eld-navy-dark);
	--elv-blue-soft: var(--eld-cream);

	--elv-orange: var(--eld-orange);
	--elv-green: var(--eld-green);
	--elv-green-dark: var(--eld-green-dark);

	--elv-ink: var(--eld-navy);
	--elv-muted: var(--eld-blue-gray);
	--elv-line: var(--eld-border-light);
	--elv-bg: var(--eld-white);
	--elv-bg-soft: var(--eld-surface);
	--elv-error: #c0392b;

	/* 8px, zoals de kaart ernaast. De plugin staat standaard op 12. */
	--elv-radius: var(--eld-radius-md);

	/* De plugin klemt zichzelf op 720px; in deze kolom is dat 603px en dat is genoeg.
	   Zonder deze regel zou hij in een bredere kolom smaller blijven dan de kaart
	   ernaast. */
	max-width: none;
	font-family: var(--eld-font-body);
}

/* Zelfde rand en schaduw als de kaart ernaast, zodat het één rij van twee kaarten
   blijft en niet twee losse dingen. */
body .elv .elv-form {
	border-color: var(--eld-cream-border);
	box-shadow: var(--eld-shadow-cream);
	padding: 36px;
}

/* De kop in het kopfont, op dezelfde maat als .eld-vzcard__title. */
body .elv .elv-head__title {
	font-family: var(--eld-font-head);
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: normal;
}

body .elv .elv-head__sub {
	font-size: 15px;
	line-height: 24px;
}

/* De invoervelden op de maten van het thema (HANDOFF.md §4). */
body .elv .elv-field input,
body .elv .elv-field select {
	height: var(--eld-field-height);
	border-radius: var(--eld-radius-sm);
}

body .elv .elv-field label {
	font-size: 15px;
	line-height: 24px;
	letter-spacing: -0.025em;
}

body .elv .elv-btn {
	border-radius: var(--eld-radius-sm);
	font-family: var(--eld-font-body);
	letter-spacing: -0.025em;
}

@media (max-width: 520px) {
	body .elv .elv-form {
		padding: 26px 20px;
	}
}