/*
 * DTRenovatie — aanvullende stylesheet.
 *
 * Bevat UITSLUITEND wat theme.json niet kan uitdrukken: interactief gedrag
 * (header/menu/DT Reveal/sticky CTA), 2x2-grid op mobiel, skip-link, en een
 * paar herbruikbare componentklassen voor de homepage-patterns. Kleuren,
 * typografie en basisspacing komen overal uit theme.json-tokens
 * (var(--wp--preset--...)) — nergens hardcoded hex-waarden hieronder.
 */

/* -------------------------------------------------------------------- */
/* Fundament — voorkomt horizontale overflow bij toekomstige content     */
/* -------------------------------------------------------------------- */

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

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

body {
	overflow-x: hidden;
}

/* Lange Nederlandse samenstellingen mogen nooit een smalle kaart/kolom
   opduwen (bv. "gevelreinigingsspecialist") — geen woordafbreking nodig,
   enkel een veilige val-terug wanneer een woord echt te lang is.
   BEWUST NIET op `a`/`button`: interactieve UI-labels (nav-links, CTA's)
   mogen nooit binnen het woord breken — daar geldt white-space:nowrap
   i.p.v. overflow-wrap (zie header/CTA-regels verderop). break-word op
   deze elementen verkleinde ongewild hun flex-min-content-breedte, wat in
   een krappe rij tot een letter-per-regel-effect leidde. */
h1, h2, h3, h4, h5, h6, p, li {
	overflow-wrap: break-word;
}

/* Body-copy links (bv. later in Advies-artikelen) mogen wél breken —
   uitsluitend als voorzorg voor uitzonderlijk lange URL's/woorden in
   lopende tekst, niet voor UI-knoppen/navigatie. */
p a, li a {
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------- */
/* Basis / toegankelijkheid                                              */
/* -------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	background: var(--wp--preset--color--dt-navy);
	color: var(--wp--preset--color--dt-white);
	padding: 0.75rem 1.25rem;
	border-radius: var(--wp--custom--radius--small);
	text-decoration: none;
	font-weight: 600;
	transition: top 0.15s ease;
}

/* .screen-reader-text clipt het element permanent tot 1x1px — bij :focus
   moet die clip expliciet opgeheven worden, anders blijft de skip-link
   onzichtbaar voor ziende toetsenbordgebruikers ook al krijgt hij focus. */
.skip-link:focus {
	top: 1rem;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--dt-navy);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Subtiele, neutrale "demo"-badge — bewust GEEN rood: rood is gereserveerd
   voor CTA's/accenten en zou een dev-label onterecht laten opvallen als
   belangrijk actie-element. Duidelijk genoeg om nooit als echt te worden
   aangezien, rustig genoeg om een designbeoordeling niet te verstoren. */
.placeholder-badge {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--dt-gray-600);
	background: var(--wp--preset--color--dt-gray-50);
	border: 1px solid var(--wp--preset--color--dt-gray-300);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.2em 0.85em;
	margin-block-end: 0.75rem;
}

/* Zichtbare "Illustratief beeld"-badges op gewone stockfotografie zijn
 * bewust NIET meer aanwezig (eerdere .dt-illustrative-badge-klasse) — de
 * eigenaar wil gewone sfeer-/dienstfotografie zonder badge, zolang de copy
 * er nergens naast beweert dat het een concrete DTRenovatie-realisatie is.
 * Enkel het DT Reveal vóór/na-component behoudt een discrete onderschrift-
 * tekst (.dt-reveal__caption, zie verderop) — dat is geen badge óp de foto. */

/* Button style variation: outline (secundaire CTA) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--dt-navy);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--dt-navy);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--dt-navy);
	color: var(--wp--preset--color--dt-white);
}

/* Knop die (nog) geen geldige bestemming heeft, bv. telefoon ontbreekt nog */
.wp-block-button.is-style-outline .wp-block-button__link[aria-disabled="true"],
a.btn-disabled {
	pointer-events: none;
	opacity: 0.55;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--dt-gray-300);
	color: var(--wp--preset--color--dt-gray-600);
}

/* -------------------------------------------------------------------- */
/* Layout-hulpklasse                                                     */
/* -------------------------------------------------------------------- */

.dt-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 782px) {
	.dt-container {
		padding-inline: 2rem;
	}
}

/* Aparte, bredere container uitsluitend voor de header-rij: logo + volledige
   navigatie + taalwissel + CTA hebben structureel meer ruimte nodig dan de
   leesbare 1280px-contentbreedte van de rest van de site. De pagina-inhoud
   zelf behoudt .dt-container — dit is bewust NIET sitebreed verbreed. */
.dt-header-container {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 782px) {
	.dt-header-container {
		padding-inline: 2rem;
	}
}

/* Elke homepage-sectie (.dt-section) past dit automatisch toe op haar eigen
   directe inhoud: dezelfde 1280px leesbreedte + padding als .dt-container,
   maar zonder dat elk patroon-bestand zelf een containerklasse hoeft te
   herhalen. De sectie-achtergrondkleur (bv. navy/grijs) blijft wel gewoon
   volledig breed — enkel de inhoud erbinnen wordt ingesprongen/beperkt.
   Componenten met een eigen, smallere breedte (bv. .dt-reveal, .cta-band__inner)
   overschrijven dit verderop in dit bestand via een latere, specifiekere regel. */
.dt-section > * {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 782px) {
	.dt-section > * {
		padding-inline: 2rem;
	}
}

/* Losse introparagrafen (H1/H2 + korte toelichting, een terugkerend
 * patroon op zowel de homepage als bv. de Advies-overzichtspagina) erven
 * anders de volle 1280px sectiebreedte via de regel hierboven — op brede
 * schermen levert dat regels op die ruim voorbij de gangbare
 * leesbaarheidsrichtlijn van ~60-75 tekens gaan. Links uitgelijnde tekst
 * blijft links uitgelijnd (enkel de breedte wordt beperkt); expliciet
 * gecentreerde tekst (has-text-align-center) wordt ook zelf gecentreerd
 * binnen die beperkte breedte. */
.dt-section > p {
	max-width: 60ch;
}

.dt-section > p.has-text-align-center {
	margin-inline: auto;
}

/* Leescontent van servicepagina's/artikelen (page-service.html, page.html,
 * single.html — allemaal nu layout:"default" i.p.v. WordPress' eigen
 * layout:"constrained", zie die templates) wordt hier zelf begrensd i.p.v.
 * via WordPress' automatisch gegenereerde, CENTRERENDE contentSize-regel.
 * Enkel top-level tekstelementen; geneste content (bv. binnen een kaart of
 * alignwide-groep) blijft ongemoeid.
 *
 * HERZIEN (eindrapport "FINAL SCREENSHOT-DRIVEN LAUNCH REPORT", §3-8): de
 * kolom kreeg voorheen enkel "max-width" zonder "margin-inline:auto" — op
 * servicepagina's (volle 1280px-shell) bleef de leestekst daardoor tegen de
 * linkerkant hangen, terwijl H1/intro/foto daarboven via .dt-service-hero al
 * wél gecentreerd waren. Resultaat op echte screenshots: H1 links, intro
 * gecentreerd, foto gecentreerd, body-H2/tekst weer links — een zigzag-as
 * i.p.v. één samenhangende centrale as. "margin-inline:auto" hier maakt de
 * leeskolom ZELF gecentreerd (tekst blijft links uitgelijnd binnenin —
 * dat is het verschil tussen "gecentreerde architectuur" en "gecentreerde
 * tekst", zie §10 van de briefing), voor élke pagina die deze klasse
 * gebruikt — geen pagina-specifieke regel nodig. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > h2,
.wp-block-post-content > h3 {
	max-width: 760px;
	margin-inline: auto;
}

/* De H1 zelf (wp:post-title, template-niveau — komt vóór wp:post-content,
 * dus buiten bovenstaande selector) krijgt dezelfde gecentreerde intro-as
 * als de korte introalinea, op ELKE pagina die dit sjabloon gebruikt —
 * universeel, geen aparte pagina-type-regel nodig (§5 van de briefing:
 * "apply to ALL standard pages"). */
.wp-block-post-title {
	text-align: center;
	max-width: 840px;
	margin-inline: auto;
}

/* -------------------------------------------------------------------- */
/* Pagina-type-breedtebeleid (§39/§41, eindrapport "FINAL CENTERED         */
/* DESIGN SYSTEM REPORT")                                                */
/* -------------------------------------------------------------------- */

/* SERVICE-/HUB-pagina's (Vochtbestrijding, Opstijgend vocht, Reiniging, ...)
 * behouden de volle 1280px-shell hierboven: die hebben brede kaartgrids en
 * (sinds deze ronde) een sfeerfoto die de extra breedte nuttig gebruiken.
 *
 * INFORMATIONAL-pagina's (Werkwijze, Over ons, Werkgebied) zijn daarentegen
 * bijna volledig lopende tekst zonder brede componenten — op de volle
 * 1280px-shell oogden ze daardoor als een half leeg Word-document, met H1/
 * intro/tekst die weliswaar dezelfde linker gridlijn deelden (§23 van een
 * eerdere ronde), maar dan wél een gridlijn die zelf ver naar links stond
 * met een enorme lege rechterzone. Deze regel verkleint voor exact deze
 * pagina's de HELE sectie-as (niet enkel de leescolumn erbinnen) naar een
 * bescheidener, gecentreerde ±900px — H1/breadcrumb/intro/lopende tekst
 * delen zo nog steeds precies dezelfde linker gridlijn (die 760px-leesregel
 * hieronder blijft ongewijzigd), maar die gridlijn zelf staat nu gecentreerd
 * in de viewport i.p.v. tegen de linkerkant van een veel bredere shell.
 * Scoping via WordPress' eigen automatische ".page-{slug}"-bodyclass —
 * geen page-specifieke CSS-hack, één regel dekt NL + FR. */
.page-werkwijze .dt-section > *,
.page-over-ons .dt-section > *,
.page-werkgebied .dt-section > *,
.page-notre-methode .dt-section > *,
.page-a-propos .dt-section > *,
.page-zone-dintervention .dt-section > * {
	max-width: 900px;
}

/* De korte introalinea (eerste alinea ná de H1) volgt dezelfde gecentreerde
 * intro-as als de H1 hierboven — enkel op pagina's waar de intro een RECHTSTREEKS
 * kind-paragraaf van post-content is (informatieve pagina's; servicepagina's
 * wikkelen hun intro al in .dt-service-hero, dat zichzelf al centreert). Alle
 * latere lopende tekst blijft bewust links uitgelijnd binnen de gecentreerde
 * leeskolom hierboven (§13: architectuur centreert, leestekst blijft links). */
.wp-block-post-content > p:first-child {
	text-align: center;
	max-width: 840px;
}

/* LEGAL-pagina's: nog wat bescheidener, zuivere leestekst. */
.page-privacyverklaring .dt-section > *,
.page-cookiebeleid .dt-section > *,
.page-politique-de-confidentialite .dt-section > *,
.page-politique-de-cookies .dt-section > * {
	max-width: 800px;
}

/* CONTACT: eigen, iets bredere "form shell" (§13/§39) — breed genoeg voor
 * een comfortabel formulier, nog steeds gecentreerd i.p.v. tegen links. Zelfde
 * bodyclass ".page-contact" geldt voor zowel /contact/ als /fr/contact/
 * (WordPress' bodyclass is gebaseerd op de post_name, niet het volledige pad),
 * dus deze ene regel dekt bewust meteen ook de Franse contactpagina. */
.page-contact .dt-section > * {
	max-width: 960px;
}

/* SERVICE-hero (herzien — eindrapport "FINAL DTRenovatie WEBSITE COMPLETION",
 * §9-15): een eerdere ronde loste de lege rechterzone op dienstpagina's op met
 * een tekst-links/foto-rechts grid, maar de eigenaar gaf nadien expliciet de
 * voorkeur aan een RUSTIGE VERTICALE opbouw i.p.v. een gesplitste hero ("mooi
 * onder elkaar" — geen "text left / image right", geen "floating image").
 * Nieuwe volgorde, allemaal gecentreerd: korte intro-alinea eerst, dan de
 * sfeerfoto eronder — één smalle, gecentreerde kolom i.p.v. de volle
 * 1280px-sectiebreedte, zodat de pagina als geheel gecentreerd oogt zonder
 * platte tekst-tegen-de-rand. Nieuwste eigenaarsrichting weegt zwaarder dan de
 * eerdere ontwerpkeuze (zie §63 van de briefing: "latest owner direction takes
 * priority"). */
.dt-service-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	max-width: 700px;
	margin: 0 auto 2rem;
	text-align: center;
}

.dt-service-hero__text p {
	margin: 0;
}

.dt-service-hero__photo {
	margin: 0;
	width: 100%;
}

.dt-service-hero__photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--radius--large);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--wp--custom--shadow--card);
	background: var(--wp--preset--color--dt-gray-50);
}

/* Aanvullende foto MIDDEN in lopende tekst (bv. bij de injectiebehandeling
 * op de Opstijgend vocht-pagina) — zelfde breedte als de leeskolom
 * hierboven, dus zelfde gecentreerde as, met dezelfde afgeronde hoeken/
 * schaduw als de rest van het beeldsysteem. */
.dt-inline-photo {
	max-width: 760px;
	margin: 1.5rem auto;
}

.dt-inline-photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--radius--large);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--wp--custom--shadow--card);
	background: var(--wp--preset--color--dt-gray-50);
}

.dt-inline-photo figcaption {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-600);
	text-align: center;
}

/* -------------------------------------------------------------------- */
/* Header                                                                */
/* -------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--dt-white);
	border-bottom: 1px solid var(--wp--preset--color--dt-gray-100);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 1rem;
	min-height: var(--wp--custom--header--height-mobile, 60px);
	padding-block: 0.5rem;
}

@media (min-width: 782px) {
	.site-header__inner {
		min-height: var(--wp--custom--header--height, 72px);
	}
}

@media (min-width: 1440px) {
	.site-header__inner {
		gap: 1.25rem;
	}
}

@media (min-width: 1680px) {
	.site-header__inner {
		gap: 1.75rem;
	}
}

.site-header__logo {
	flex-shrink: 0;
}

/* Goedgekeurd DTR-logo. Beeldverhouding blijft altijd behouden (height:auto,
 * enkel width gestuurd), nooit uitrekken/vervormen. Op expliciet verzoek
 * ("headerlogo groter, sterker en professioneler zichtbaar") nogmaals
 * vergroot t.o.v. de vorige maat (96/112/128px). */
.site-header__logo-img {
	width: 108px;
	height: auto;
	display: block;
}

@media (min-width: 782px) {
	.site-header__logo-img {
		width: 128px;
	}
}

@media (min-width: 1080px) {
	.site-header__logo-img {
		width: 152px;
	}
}

.site-header__nav {
	display: none;
	min-width: 0;
}

/* NL | FR: één compacte, visueel gegroepeerde eenheid (pil-achtergrond),
   nooit los tussen andere headeronderdelen. */
.site-header__lang {
	display: flex;
	flex-shrink: 0;
	gap: 0.2rem;
	align-items: center;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--dt-gray-50);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.25rem;
}

.site-header__lang a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	text-decoration: none;
	padding: 0.3rem 0.5rem;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--dt-navy);
}

.site-header__lang a[aria-current="true"] {
	background: var(--wp--preset--color--dt-navy);
	color: var(--wp--preset--color--dt-white);
}

.site-header__lang a[aria-disabled="true"] {
	color: var(--wp--preset--color--dt-gray-300);
	pointer-events: none;
}

.site-header__phone {
	display: none;
	flex-shrink: 0;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--dt-navy);
	white-space: nowrap;
}

.site-header__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.75rem;
}

/* Eén subtiele, verzorgde verticale scheidingslijn tussen de hoofdnavigatie
 * en de taal-/telefoon-/CTA-groep — bewust NIET tussen elk los navigatie-
 * item (dat oogt al snel druk), enkel hier, waar het één logische groep
 * scheidt van een andere (eindrapport "FINAL SCREENSHOT-DRIVEN LAUNCH
 * REPORT", §23). Enkel zichtbaar zodra de echte desktopnavigatie zelf ook
 * zichtbaar is (zelfde 1440px-grens als .site-header__nav). */
@media (min-width: 1440px) {
	.site-header__actions::before {
		content: "";
		width: 1px;
		align-self: stretch;
		background: var(--wp--preset--color--dt-gray-100);
		margin-inline-end: 0.25rem;
	}
}

@media (min-width: 1680px) {
	.site-header__actions {
		gap: 1.1rem;
	}
}

.site-header__cta.wp-block-button {
	flex-shrink: 0;
}

.site-header__cta.wp-block-button .wp-block-button__link {
	display: none;
	overflow-wrap: normal;
}

.site-header__cta .dt-cta-label--short {
	display: none;
}

/* Volledige navigatie past pas comfortabel vanaf 1440px op een brede
   desktopviewport (logo + 7 navigatie-items + NL|FR + CTA). Daaronder
   blijft de hamburger + sticky CTA de aangewezen oplossing i.p.v.
   samengeperste of overlappende navigatie (Fase 2E). */
@media (min-width: 1440px) {
	.site-header__nav {
		display: block;
	}

	.site-header__phone {
		display: inline-flex;
	}

	.site-header__cta.wp-block-button .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		padding-block: 0.6rem;
		padding-inline: 1.1rem;
		font-size: var(--wp--preset--font-size--small);
	}

	/* 1440-1679px: verkorte CTA-tekst houdt de rij rustig. Vanaf 1680px is
	   er ruimte voor de volledige, herkenbare CTA-tekst. */
	.site-header__cta .dt-cta-label--short {
		display: inline;
	}

	.site-header__cta .dt-cta-label--full {
		display: none;
	}
}

@media (min-width: 1680px) {
	.site-header__cta.wp-block-button .wp-block-button__link {
		padding-inline: 1.5rem;
	}

	.site-header__cta .dt-cta-label--short {
		display: none;
	}

	.site-header__cta .dt-cta-label--full {
		display: inline;
	}
}

/* ">" i.p.v. een afstammelingenselector is hier LOAD-BEARING: de geneste
 * dropdown-submenu (.nav-dropdown__submenu, ook een <ul>) mag deze regels
 * niet erven. Een eerdere afstammelingenselector (".site-header__nav ul")
 * had een hogere specificiteit (0,1,1) dan ".nav-dropdown__submenu"
 * (0,1,0) en overschreef daardoor diens "display:none" — het submenu stond
 * daardoor altijd zichtbaar op desktop, ongeacht hover/focus. Root cause,
 * niet enkel het symptoom gepatcht. */
.site-header__nav > ul {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 1680px) {
	.site-header__nav > ul {
		gap: 1.6rem;
	}
}

.site-header__nav a {
	display: inline-block;
	white-space: nowrap;
	overflow-wrap: normal;
	text-decoration: none;
	color: var(--wp--preset--color--dt-navy);
	font-weight: 600;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
	color: var(--wp--preset--color--dt-red);
}

/* Actieve/voorouder-navigatiestatus (§43, eindrapport "FINAL DTRenovatie
 * WEBSITE COMPLETION"): kleur + subtiele underline — bewust GEEN
 * font-weight-wijziging, die zou de tekstbreedte (en dus de dropdown-
 * pointerbox uit de eerdere dode-hoverzone-fix) laten verschuiven. */
.site-header__nav > ul > li > a.is-current,
.site-header__nav > ul > li.nav-dropdown.is-current > a {
	color: var(--wp--preset--color--dt-red);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.nav-dropdown__submenu li a.is-current {
	color: var(--wp--preset--color--dt-red);
	background: var(--wp--preset--color--dt-gray-50);
}

.nav-dropdown {
	position: relative;
}

/* Subtiele, altijd-zichtbare indicator dat er een submenu is — draait mee
 * bij hover/focus-within, net als de mobiele chevron. inline-flex +
 * vertical-align zodat hij netjes met de tekstbaseline meeloopt zonder de
 * regelhoogte van de navigatie te beïnvloeden (geen layout shift). */
.nav-dropdown > a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.nav-dropdown__chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.6;
	transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.nav-dropdown__chevron {
		transition: none;
	}
}

.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown:focus-within .nav-dropdown__chevron {
	transform: rotate(180deg);
}

/* GEEN margin-top hier (bewust, na handmatige pointer-geometrieanalyse,
 * §67D): de ".nav-dropdown"-<li> heeft zelf geen hoogte voorbij de
 * linktekst (dit submenu staat absoluut gepositioneerd en telt dus niet mee
 * voor de flow-hoogte van zijn ouder). Met "top:100%" + een margin-top zou
 * er een onbeweegde/onhoverbare strook ontstaan tussen de link en het
 * submenu — een muisbeweging recht naar beneden verlaat dan de hoverbox van
 * de <li> vóór hij het submenu bereikt, waardoor ":hover"/":focus-within"
 * wegvalt en het menu alweer "display:none" is vóór de cursor er is (het
 * klassieke "dropdown sluit onderweg naar beneden"-probleem). "top:100%"
 * zonder enige marge sluit die kloof volledig: het submenu begint exact waar
 * de <li> ophoudt, dus de cursor blijft ononderbroken binnen een hoverbare
 * box tijdens de volledige beweging van link naar submenu. */
.nav-dropdown__submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--wp--preset--color--dt-white);
	border: 1px solid var(--wp--preset--color--dt-gray-100);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--custom--shadow--card);
	padding: 0.5rem;
	list-style: none;
	margin: 0;
}

.nav-dropdown:hover .nav-dropdown__submenu,
.nav-dropdown:focus-within .nav-dropdown__submenu {
	display: block;
}

/* Onzichtbare hoverbrug (owner-melding: "dropdown verdwijnt te snel als je
 * naar beneden gaat"). De submenu zelf begint al exact op top:100% zonder
 * marge (geen verticale kloof), maar zolang hij "display:none" is, heeft hij
 * ZELF geen hoverbare doos — bij een diagonale muisbeweging (bv. naar een
 * submenu-item rechts van de smallere triggertekst) kan de cursor dan even
 * buiten zowel de <li> als het nog-onzichtbare submenu vallen, waardoor
 * :hover wegvalt vóór het submenu ooit verschijnt. Deze brug is een altijd
 * aanwezig (nooit display:none), onzichtbaar element met exact dezelfde
 * positie/breedte als het submenu, dat de hoverstatus continu draagt tot het
 * echte submenu het overneemt. */
.nav-dropdown::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 220px;
	height: 14px;
}

.nav-dropdown__submenu li a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius--small);
	font-weight: 500;
}

.nav-dropdown__submenu li a:hover,
.nav-dropdown__submenu li a:focus-visible {
	background: var(--wp--preset--color--dt-gray-50);
}

/* FR-navigatielabels zijn merkbaar langer dan NL (bv. "Traitement de
 * l'humidité" versus "Vochtbestrijding"). Een eerdere versie van deze regel
 * verborg de volledige FR-desktopnavigatie tot 1680px en dwong tot dan de
 * hamburger af — daarmee was de FR-site op heel gewone laptopbreedtes
 * (1366/1440px) NOOIT via een echte navigatie bruikbaar, enkel via het
 * mobiele menu. Root-cause fix i.p.v. dat compromis: de nav-items zelf zijn
 * verkort (Nettoyage-dropdown i.p.v. het langere "Nettoyage de façade" als
 * los item, Zone d'intervention uit de hoofdnav).
 *
 * HERZIEN (eindrapport "FINAL DTRenovatie WEBSITE COMPLETION", §41): een
 * eerdere versie verkleinde hier ook de FR-lettergrootte t.o.v. NL — de
 * eigenaar wees dit expliciet af als een storend verschil in visueel gewicht
 * tussen de twee taalversies. NL en FR gebruiken nu overal exact dezelfde
 * font-size/font-weight; enkel de horizontale tussenruimte wordt in deze
 * krappe zone verder verkleind (en Realisaties/Réalisations valt sinds §21
 * sowieso al weg uit de nav zolang er nog geen realisaties gepubliceerd
 * zijn, wat extra ruimte vrijmaakt in beide talen). */
@media (min-width: 1440px) and (max-width: 1679px) {
	html[lang="fr-BE"] .site-header__nav > ul {
		gap: 0.6rem;
	}
}

/* Mobiele hamburger + paneel */
.mobile-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--wp--preset--color--dt-navy);
}

@media (min-width: 1440px) {
	.mobile-menu-toggle {
		display: none;
	}
}

.mobile-menu-toggle svg {
	width: 26px;
	height: 26px;
}

.mobile-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--wp--preset--color--dt-white);
	overflow-y: auto;
	padding: 1rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
}

.mobile-menu.is-open {
	display: block;
}

.mobile-menu__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 1.5rem;
}

.mobile-menu__lang {
	display: flex;
	gap: 0.5rem;
	font-weight: 700;
}

.mobile-menu__lang a {
	padding: 0.5rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	border: 2px solid var(--wp--preset--color--dt-navy);
	text-decoration: none;
	color: var(--wp--preset--color--dt-navy);
}

.mobile-menu__lang a[aria-current="true"] {
	background: var(--wp--preset--color--dt-navy);
	color: var(--wp--preset--color--dt-white);
}

.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-menu > ul > li {
	border-bottom: 1px solid var(--wp--preset--color--dt-gray-100);
}

.mobile-menu a {
	display: flex;
	align-items: center;
	min-height: 56px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--dt-navy);
}

.mobile-menu__item-row {
	display: flex;
	align-items: stretch;
}

.mobile-menu__item-row a {
	flex: 1;
	min-width: 0;
}

.mobile-menu li > a.is-current,
.mobile-menu__item.is-current > .mobile-menu__item-row > a,
.mobile-menu__submenu li a.is-current {
	color: var(--wp--preset--color--dt-red);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Aparte, ruime tap-target (56×56px, ruim boven de 44px-richtlijn) los van
 * de link zelf — tikken op de labeltekst navigeert, tikken op deze knop
 * opent/sluit enkel het submenu. Standaard dicht: het submenu-element
 * hieronder heeft het "hidden"-attribuut tot nav.js het wegneemt. */
.mobile-menu__disclosure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--dt-navy);
}

.mobile-menu__chevron {
	width: 20px;
	height: 20px;
	transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu__chevron {
		transition: none;
	}
}

.mobile-menu__disclosure[aria-expanded="true"] .mobile-menu__chevron {
	transform: rotate(180deg);
}

.mobile-menu__submenu {
	padding-inline-start: 1rem;
}

/* Defensief expliciet naast het natieve [hidden]-gedrag: voorkomt dat een
 * eventuele latere, bredere "display"-regel het per ongeluk overschrijft. */
.mobile-menu__submenu[hidden] {
	display: none;
}

.mobile-menu__submenu a {
	min-height: 48px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

.mobile-menu__cta {
	margin-block-start: 1.5rem;
}

/* -------------------------------------------------------------------- */
/* Trustbar                                                              */
/* -------------------------------------------------------------------- */

/* Zelfde verticale ritme als .dt-section (clamp(2.5rem, 2rem + 2vw, 5rem))
 * — stond hier voorheen los als vaste "2rem 0" op .trustbar__grid, waardoor
 * de trustbar merkbaar krapper oogde dan elke andere sectie op de pagina. */
.trustbar {
	background: var(--wp--preset--color--dt-navy);
	padding-block: clamp(2.5rem, 2rem + 2vw, 5rem);
}

.trustbar__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.trustbar__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}
}

.trustbar__item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--wp--preset--color--dt-white);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}

.trustbar__item svg {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--dt-red);
	margin-top: 0.1em;
}

/* -------------------------------------------------------------------- */
/* Kaartgrids (probleemherkenning, realisaties, advies)                  */
/* -------------------------------------------------------------------- */

.dt-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

/* Modifier voor kaartgrids die zelf een gecentreerde, iets smallere shell
 * nodig hebben i.p.v. de volle 1280px sectiebreedte (eindrapport "FINAL
 * SCREENSHOT-DRIVEN LAUNCH REPORT", §11 — "Waarom DTRenovatie" oogde
 * edge-to-edge te breed op de echte screenshots). Bewust een losse
 * modifier-klasse i.p.v. dit globaal op ".dt-card-grid" toe te passen: de
 * bredere kaartgrids elders (problem-cards, reiniging-cards, ...) zijn niet
 * gemeld als probleem en blijven ongewijzigd. */
.dt-card-grid--narrow {
	max-width: 1120px;
	margin-inline: auto;
}

/* Tussenliggende 2-koloms stand voor tablet (bv. 768-1024px): rechtstreeks
 * van 1 naar 3 kolommen bij 680px liet drie kaarten (en zeker de langere
 * Franse titels, bv. "Hydrofugation de façade") onnodig dicht opeenpakken
 * op een tabletbreedte die daar eigenlijk nog niet comfortabel ruimte voor
 * heeft. */
@media (min-width: 620px) {
	.dt-card-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.dt-card-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.dt-card {
	background: var(--wp--preset--color--dt-white);
	border: 1px solid var(--wp--preset--color--dt-gray-100);
	border-radius: var(--wp--custom--radius--medium);
	padding: 1.5rem;
	box-shadow: var(--wp--custom--shadow--card);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dt-card--placeholder {
	border-style: dashed;
	border-color: var(--wp--preset--color--dt-gray-300);
}

.dt-card__link {
	font-weight: 700;
	text-decoration: none;
	margin-top: auto;
}

/* -------------------------------------------------------------------- */
/* Twee specialisaties — herpositionering §11                            */
/* -------------------------------------------------------------------- */

/* Bewust maar TWEE kolommen (nooit meer) — dit is precies het punt waarop
   de positionering ("twee gekozen vakgebieden, geen wij-doen-alles") ook
   visueel moet kloppen. 1 kolom op mobiel, 2 kolommen vanaf tablet: met
   slechts twee panelen is dat op elke breedte vanaf ~700px comfortabel. */
.dt-specialty-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 700px) {
	.dt-specialty-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}

.dt-specialty-card {
	background: var(--wp--preset--color--dt-white);
	border: 1px solid var(--wp--preset--color--dt-gray-100);
	border-top: 4px solid var(--wp--preset--color--dt-navy);
	border-radius: var(--wp--custom--radius--large);
	padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
	box-shadow: var(--wp--custom--shadow--card);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.dt-specialty-card--cleaning {
	border-top-color: var(--wp--preset--color--dt-red);
}

.dt-specialty-card__eyebrow {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dt-gray-600);
}

.dt-specialty-card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.dt-specialty-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.dt-specialty-card__list li {
	position: relative;
	padding-inline-start: 1.4rem;
	font-weight: 600;
}

.dt-specialty-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--dt-navy);
}

.dt-specialty-card--cleaning .dt-specialty-card__list li::before {
	background: var(--wp--preset--color--dt-red);
}

.dt-specialty-card .dt-card__link {
	margin-top: 0.25rem;
}

/* -------------------------------------------------------------------- */
/* Werkgebied — typografische compositie i.p.v. "Demokaart"              */
/* -------------------------------------------------------------------- */

/* Geen echte kaartgrafiek beschikbaar — een nette typografische compositie
   is dan sterker dan een placeholder-kaart-SVG die zich als "Demokaart"
   presenteert (§14, eindrapport "FINAL SCREENSHOT-DRIVEN REPAIR"). */
.dt-service-area-panel {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--wp--custom--radius--large);
	padding: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
	text-align: center;
}

.dt-service-area-panel__icon {
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--dt-red);
	margin-block-end: 0.75rem;
}

.dt-service-area-panel__label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--dt-white);
	line-height: 1.15;
}

.dt-service-area-panel__divider {
	color: var(--wp--preset--color--dt-red);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 0.35rem;
}

.dt-service-area-panel__note {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-300);
}

/* -------------------------------------------------------------------- */
/* Diensten-secties (opstijgend/doorslaand/kelder)                       */
/* -------------------------------------------------------------------- */

/* Herzien (eindrapport "FINAL DTRenovatie WEBSITE COMPLETION", §21): geen
 * alternerende links/rechts-blokken meer ("is-reversed" deed voorheen een
 * RTL-swap voor een 2-koloms grid) — één rustige, verticaal gestapelde,
 * gecentreerde component, bronvolgorde = leesvolgorde. Sommige patterns
 * plaatsen de foto eerst (bv. Opstijgend vocht), andere de tekst eerst (bv.
 * Doorslaand vocht, dankzij de vroegere "is-reversed"-klasse) — dat verschil
 * blijft nu gewoon zichtbaar als "foto boven tekst" vs. "tekst boven foto",
 * beide evengoed geldige, rustige varianten van hetzelfde verticale patroon. */
.service-highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 700px;
	margin-inline: auto;
	text-align: center;
}

.service-highlight__content {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	align-items: center;
}

.service-highlight__media {
	position: relative;
	width: 100%;
}

.service-highlight__media img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--large);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* Zachte achtergrondkleur i.p.v. wit: als een foto ooit echt zou falen
	 * (404/netwerkfout), toont de gereserveerde aspect-ratio-box dan een
	 * rustig grijs vlak met het browser-eigen kapot-icoontje i.p.v. een
	 * groot wit gat (eindrapport "FINAL SCREENSHOT-DRIVEN LAUNCH REPORT",
	 * §16). Onzichtbaar zolang de foto normaal laadt. */
	background: var(--wp--preset--color--dt-gray-50);
}

/* -------------------------------------------------------------------- */
/* Vocht-motief — subtiele, herbruikbare achtergrondaccent                */
/* -------------------------------------------------------------------- */

/* Het ripple-motief (concentrische ringen) is VOLLEDIG VERWIJDERD — zowel
 * achter de hero (eerdere ronde, §16) als achter de "Welk vochtprobleem
 * herkent u?"-sectie (#vochtproblemen), waar de eigenaar op de nieuwste
 * echte screenshots alsnog een vage cirkelvorm linksonder opmerkte
 * (eindrapport "FINAL SCREENSHOT-DRIVEN LAUNCH REPORT", §13: "REMOVE ALL OF
 * IT... No circles... No falling drops. The droplet belongs only inside the
 * approved DTR logo"). Nergens op de site wordt motif-ripple.svg nog
 * toegepast; het bestand blijft ongebruikt op schijf staan. Geen enkele
 * sectie krijgt een vervangende water-/druppeldecoratie. */
.dt-hero {
	position: relative;
}

/* -------------------------------------------------------------------- */
/* DT Reveal                                                             */
/* -------------------------------------------------------------------- */

.dt-reveal {
	max-width: 900px;
	margin-inline: auto;
}

.dt-reveal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--dt-gray-100);
	touch-action: pan-y;
	user-select: none;
	box-shadow: var(--wp--custom--shadow--card);
}

.dt-reveal__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Statische variant (§6, eindrapport "FINAL MASTER AUTOPILOT — live-ready"):
 * één echte, staande foto i.p.v. de interactieve sleepvergelijking — 4/5 in
 * plaats van 4/3 zodat de staande compositie (klinkers, links/rechts-
 * contrast) niet te veel bovenaan/onderaan wordt afgesneden. */
.dt-reveal__frame--static {
	aspect-ratio: 4 / 5;
}

@media (min-width: 700px) {
	.dt-reveal__frame--static {
		aspect-ratio: 16 / 10;
	}
}

.dt-reveal__before-wrap {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
}

.dt-reveal__before-wrap .dt-reveal__img {
	width: var(--dt-reveal-frame-width, 100%);
	max-width: none;
}

.dt-reveal__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 0;
	transform: translateX(-50%);
	pointer-events: none;
}

.dt-reveal__divider::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: -1px;
	width: 2px;
	background: var(--wp--preset--color--dt-white);
	box-shadow: 0 0 0 1px rgba(10, 27, 46, 0.25);
}

.dt-reveal__handle {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--dt-white);
	border: 2px solid var(--wp--preset--color--dt-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	cursor: ew-resize;
	box-shadow: var(--wp--custom--shadow--card);
}

.dt-reveal__handle:hover {
	background: var(--wp--preset--color--dt-gray-50);
}

.dt-reveal__handle::before {
	content: "";
	width: 18px;
	height: 18px;
	background: transparent;
	border-left: 3px solid var(--wp--preset--color--dt-navy);
	border-right: 3px solid var(--wp--preset--color--dt-navy);
}

.dt-reveal__label {
	position: absolute;
	bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.7rem;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(10, 27, 46, 0.72);
	color: var(--wp--preset--color--dt-white);
	pointer-events: none;
}

.dt-reveal__label--before {
	left: 0.75rem;
}

.dt-reveal__label--after {
	right: 0.75rem;
}

.dt-reveal__caption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-600);
	text-align: center;
}

/* .dt-reveal__droplets is bewust NIET meer gestyled: letterlijke, verspreide
   waterdruppel-iconen zijn expliciet uitgesloten (leest als "loodgieter"/
   goedkoop sjabloon), en elke ripple-/druppeldecoratie is intussen sitebreed
   verwijderd (zie de noot bij .dt-hero hierboven) — de druppel hoort enkel
   nog thuis in het goedgekeurde DTR-logo. Het element blijft in de markup
   staan met display:none zodat een eventuele oudere cache geen los drupje
   toont. */
.dt-reveal__droplets {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Werkwijze                                                             */
/* -------------------------------------------------------------------- */

/* Herzien (eindrapport "FINAL SCREENSHOT-DRIVEN LAUNCH REPORT", §10): een
 * eerdere CSS Grid-versie gebruikte "auto-fit" + "justify-content:center" in
 * de veronderstelling dat dit een onvolledige laatste rij (5 items in 3
 * kolommen = rij van 3 + rij van 2) zou centreren — maar CSS Grid centreert
 * daarmee enkel de KOLOMMENSET als geheel, niet de items van een kortere
 * laatste rij zelf: die blijven gewoon in kolom 1 en 2 staan, dus visueel
 * links onder de eerste rij. Bevestigd op de echte screenshots. Flexbox met
 * "flex-wrap" + "justify-content:center" centreert WEL elke rij afzonderlijk
 * — de correcte, robuuste oplossing voor exact dit "3 + 2"-patroon. */
.werkwijze__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	counter-reset: dt-step;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 920px;
}

.werkwijze__step {
	position: relative;
	padding: 1.5rem 1.25rem;
	background: var(--wp--preset--color--dt-gray-50);
	border-radius: var(--wp--custom--radius--medium);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 220px;
}

.werkwijze__step::before {
	counter-increment: dt-step;
	content: counter(dt-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--dt-red);
	color: var(--wp--preset--color--dt-white);
	font-weight: 700;
	margin-block-end: 0.75rem;
}

.werkwijze__step-label {
	display: block;
	font-weight: 700;
	margin-block-end: 0.25rem;
}

.werkwijze__step-desc {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-600);
}

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */

.site-footer {
	background: var(--wp--preset--color--dt-navy);
	color: var(--wp--preset--color--dt-white);
}

.site-footer a {
	color: var(--wp--preset--color--dt-white);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 700px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Vanaf de derde kolom (logo + Vochtbestrijding + Reiniging + Bedrijf +
   Contact = 5 stuks) is een tussenstap nodig vóór de volle desktop-lay-out —
   anders springt de grid op tablet-achtige breedtes rechtstreeks van 2 naar
   5 kolommen. */
@media (min-width: 900px) and (max-width: 1259px) {
	.site-footer__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1260px) {
	.site-footer__grid {
		grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
	}
}

.site-footer__grid h2,
.site-footer__grid h3 {
	color: var(--wp--preset--color--dt-white);
	font-size: var(--wp--preset--font-size--medium);
}

.site-footer__grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Het goedgekeurde DTR-logo heeft zelf een witte achtergrond (bewust
 * ongewijzigd gelaten, zie §4 van de briefing: geen herkleuring van het
 * beeld zelf) — op de donkere navy footer krijgt het daarom een eigen witte
 * "kaart" met ruimte/afronding eromheen, zodat het bewust en verzorgd oogt
 * i.p.v. als een per ongeluk uitgesneden wit blok. */
.site-footer__logo-card {
	display: inline-block;
	background: var(--wp--preset--color--dt-white);
	border-radius: var(--wp--custom--radius--medium);
	padding: 0.6rem 0.9rem;
	line-height: 0;
}

.site-footer__logo img {
	width: 155px;
	height: auto;
	display: block;
}

.site-footer__social {
	display: flex;
	gap: 1rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}

.site-footer__social-link {
	font-weight: 600;
	text-decoration: underline;
}

.site-footer__lang-repeat {
	display: flex;
	gap: 0.6rem;
	margin-top: 1rem;
	font-weight: 700;
}

.site-footer__lang-repeat a {
	color: inherit;
}

.site-footer__lang-repeat a[aria-current="true"] {
	text-decoration: underline;
}

.site-footer__bottom-inner {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-300);
}

.site-footer__bottom nav a {
	color: var(--wp--preset--color--dt-gray-300);
}

/* -------------------------------------------------------------------- */
/* Sticky mobiele CTA                                                    */
/* -------------------------------------------------------------------- */

.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--wp--preset--color--dt-white);
	border-top: 1px solid var(--wp--preset--color--dt-gray-100);
	box-shadow: 0 -2px 12px rgba(10, 27, 46, 0.12);
	padding-bottom: env(safe-area-inset-bottom);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

.sticky-cta.is-visible {
	transform: translateY(0);
}

@media (min-width: 1440px) {
	.sticky-cta {
		display: none;
	}
}

.sticky-cta a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--wp--custom--sticky-cta--height, 60px);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.sticky-cta__call {
	background: var(--wp--preset--color--dt-navy);
	color: var(--wp--preset--color--dt-white);
}

.sticky-cta__visit {
	background: var(--wp--preset--color--dt-red);
	color: var(--wp--preset--color--dt-white);
}

.sticky-cta__call[aria-disabled="true"] {
	background: var(--wp--preset--color--dt-gray-300);
	color: var(--wp--preset--color--dt-gray-600);
	pointer-events: none;
}

body {
	padding-bottom: 0;
}

@media (max-width: 1439px) {
	body.has-sticky-cta {
		padding-bottom: calc(var(--wp--custom--sticky-cta--height, 60px) + env(safe-area-inset-bottom));
	}
}

/* -------------------------------------------------------------------- */
/* Section ritme                                                         */
/* -------------------------------------------------------------------- */

.dt-section {
	padding-block: clamp(2.5rem, 2rem + 2vw, 5rem);
}

/* -------------------------------------------------------------------- */
/* Breadcrumbs                                                           */
/* -------------------------------------------------------------------- */

.dt-breadcrumbs {
	margin-block-end: 1.5rem;
}

.dt-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-600);
}

.dt-breadcrumbs li {
	display: flex;
	align-items: center;
}

.dt-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline: 0.5rem;
	color: var(--wp--preset--color--dt-gray-300);
}

.dt-breadcrumbs a {
	color: var(--wp--preset--color--dt-gray-600);
	text-decoration: none;
}

.dt-breadcrumbs a:hover,
.dt-breadcrumbs a:focus-visible {
	color: var(--wp--preset--color--dt-red);
	text-decoration: underline;
}

.dt-breadcrumbs li[aria-current="page"] {
	color: var(--wp--preset--color--dt-navy);
	font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Realisatie-detail (single-dt_realisatie.html)                         */
/* -------------------------------------------------------------------- */

.dt-realisatie-detail {
	margin-block: 1.5rem 2rem;
}

.dt-realisatie-detail__meta {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--dt-gray-600);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-block-end: 1.25rem;
}

.dt-realisatie-detail .dt-reveal {
	margin-block-end: 1.5rem;
}

.dt-realisatie-detail__photo {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--custom--shadow--card);
	margin-block-end: 1.5rem;
}

/* -------------------------------------------------------------------- */
/* Contactpagina                                                         */
/* -------------------------------------------------------------------- */

.dt-contact__info {
	background: var(--wp--preset--color--dt-gray-50);
	border-radius: var(--wp--custom--radius--medium);
	padding: 1.25rem 1.5rem;
	margin-block: 1.5rem;
}

.dt-contact__info p {
	margin-block: 0.5rem;
}

/* Jetpack Forms — afstemming op het DTRenovatie-ontwerpsysteem via de
 * native input-types (type="radio"/"file"/"checkbox"/...) i.p.v. geraden
 * Jetpack-specifieke klassennamen — dat blijft correct werken ongeacht de
 * exacte block-markup die Jetpack zelf rendert (zie de kanttekening in
 * page-contact.php over de niet-live-geverifieerde block-markup). */
/* Bewust GEEN JS-wizard/faux-multistep — Jetpack Forms' blokstructuur is
 * plat (geen nest-per-stap mogelijk) en een zelfgebouwde stap-simulatie zou
 * de formulierinzending kunnen breken (§11, eindrapport "FINAL
 * SCREENSHOT-DRIVEN REPAIR": "functionaliteit gaat voor effect"). In plaats
 * daarvan: drie duidelijk onderscheiden, genummerde stapkoppen i.p.v. één
 * grote grijze monolithische kaart — puur CSS, werkt in elke browser, breekt
 * nooit de inzending. Formulier zelf krijgt een subtiele rand i.p.v. een
 * volle grijze achtergrond, zodat elke sectie duidelijker eigen "gewicht"
 * krijgt in plaats van in één ononderbroken paneel te versmelten.
 */
.wp-block-jetpack-contact-form {
	background: var(--wp--preset--color--dt-white);
	border: 1px solid var(--wp--preset--color--dt-gray-100);
	border-radius: var(--wp--custom--radius--medium);
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	margin-block: 1.5rem;
	counter-reset: dt-form-step;
}

.wp-block-jetpack-contact-form h3 {
	counter-increment: dt-form-step;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-block-start: 2.25rem;
	margin-block-end: 1rem;
	padding-block-start: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--dt-gray-100);
}

.wp-block-jetpack-contact-form h3::before {
	content: counter(dt-form-step);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--dt-red);
	color: var(--wp--preset--color--dt-white);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-jetpack-contact-form h3:first-child {
	margin-block-start: 0;
	padding-block-start: 0;
	border-top: none;
}

.wp-block-jetpack-contact-form label {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--dt-navy);
	margin-block-end: 0.4rem;
}

.wp-block-jetpack-contact-form p,
.wp-block-jetpack-contact-form fieldset {
	margin-block: 0 1.25rem;
	border: none;
	padding: 0;
}

.wp-block-jetpack-contact-form legend {
	font-weight: 600;
	color: var(--wp--preset--color--dt-navy);
	margin-block-end: 0.4rem;
	padding: 0;
}

.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form input[type="url"],
.wp-block-jetpack-contact-form input[type="date"],
.wp-block-jetpack-contact-form textarea,
.wp-block-jetpack-contact-form select {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--dt-white);
	border-radius: var(--wp--custom--radius--small);
	border: 1px solid var(--wp--preset--color--dt-gray-300);
	padding: 0.7rem 0.9rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--dt-navy);
}

.wp-block-jetpack-contact-form textarea {
	min-height: 7rem;
	resize: vertical;
}

.wp-block-jetpack-contact-form input:focus-visible,
.wp-block-jetpack-contact-form textarea:focus-visible,
.wp-block-jetpack-contact-form select:focus-visible {
	outline: 3px solid var(--wp--preset--color--dt-navy);
	outline-offset: 1px;
}

/* Radio-opties (probleemkeuze, eigenaarsstatus, pandtype): ruime tap-
 * targets, duidelijke afstand tussen opties — geen dichtgepakte lijst. */
.wp-block-jetpack-contact-form ul.jetpack-field-radio-options,
.wp-block-jetpack-contact-form .jetpack-field-radio__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.wp-block-jetpack-contact-form input[type="radio"],
.wp-block-jetpack-contact-form input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	flex-shrink: 0;
	margin: 0 0.6rem 0 0;
	accent-color: var(--wp--preset--color--dt-red);
}

.wp-block-jetpack-contact-form input[type="radio"] + label,
.wp-block-jetpack-contact-form input[type="checkbox"] + label {
	display: inline;
	font-weight: 500;
}

/* Consentvakje (privacyverklaring): iets meer ademruimte, tekst en vakje op
 * één lijn ook wanneer de tekst over twee regels loopt. */
.wp-block-jetpack-contact-form .jetpack-field-consent,
.wp-block-jetpack-contact-form [class*="consent"] {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-600);
}

.wp-block-jetpack-contact-form [class*="consent"] input[type="checkbox"] {
	margin-block-start: 0.2rem;
}

/* Foto-upload: duidelijk als een eigen, aparte "dropzone"-achtige stijl
 * i.p.v. een kaal, standaard bestandsveld. */
.wp-block-jetpack-contact-form input[type="file"] {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--dt-white);
	border: 1px dashed var(--wp--preset--color--dt-gray-300);
	border-radius: var(--wp--custom--radius--small);
	padding: 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-600);
}

.wp-block-jetpack-contact-form input[type="file"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--dt-navy);
	outline-offset: 1px;
}

/* Foutmeldingen: rode rand op het veld zelf + de foutmelding in dezelfde
 * signaalkleur als de rest van het merk, nooit puur zwart. Steunt op
 * aria-invalid, dat elk toegankelijkheidsbewust formulierscript (incl.
 * Jetpack Forms) op een ongeldig veld zet. */
.wp-block-jetpack-contact-form input[aria-invalid="true"],
.wp-block-jetpack-contact-form textarea[aria-invalid="true"],
.wp-block-jetpack-contact-form select[aria-invalid="true"] {
	border-color: var(--wp--preset--color--dt-red);
}

.wp-block-jetpack-contact-form .contact-form__error,
.wp-block-jetpack-contact-form [class*="error-message"],
.wp-block-jetpack-contact-form [class*="field-error"] {
	color: var(--wp--preset--color--dt-red);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-block-start: 0.3rem;
}

.wp-block-jetpack-contact-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--dt-red);
	color: var(--wp--preset--color--dt-white);
	border-radius: var(--wp--custom--radius--small);
	border: none;
	padding: 0.9rem 1.75rem;
	min-height: 3rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
	margin-block-start: 0.5rem;
	width: 100%;
}

@media (min-width: 480px) {
	.wp-block-jetpack-contact-form button[type="submit"] {
		width: auto;
	}
}

.wp-block-jetpack-contact-form button[type="submit"]:hover {
	background: var(--wp--preset--color--dt-navy);
}

.wp-block-jetpack-contact-form button[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--dt-navy);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Contactformulier — stapnavigatie (FINAL LAUNCH BLOCKER — contactformulier) */
/* -------------------------------------------------------------------- */

/* Progressive enhancement: zonder JS blijven alle velden gewoon zichtbaar
 * (de bestaande genummerde-koppenstijl hierboven volstaat dan als "step"-
 * aanduiding) — nooit een lege of onbereikbare stap. contact-form-steps.js
 * zet ".is-stepped" op het formulier zodra het de stappen succesvol heeft
 * geïnitialiseerd; enkel dan wordt niet-actieve stappen verborgen. */
.wp-block-jetpack-contact-form.is-stepped .dt-form-step:not(.is-active) {
	display: none;
}

.dt-form-progress {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-block-end: 1.75rem;
}

.dt-form-progress__track {
	flex: 1 1 auto;
	height: 6px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--dt-gray-100);
	overflow: hidden;
}

.dt-form-progress__fill {
	height: 100%;
	width: 33.33%;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--dt-red);
	transition: width 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.dt-form-progress__fill {
		transition: none;
	}
}

.dt-form-progress__label {
	flex-shrink: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--dt-gray-600);
	white-space: nowrap;
}

/* De genummerde-cirkelkop hierboven telt door over ALLE h3's op de pagina
 * (counter-reset staat op .wp-block-jetpack-contact-form) — met precies 3
 * stapkoppen blijft dat exact overeenkomen met stap 1/2/3, ook zonder JS. */
.dt-form-step__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.85rem;
	margin-block-start: 1.5rem;
}

.dt-form-step__nav--split {
	justify-content: space-between;
}

.dt-form-step__prev,
.dt-form-step__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--small);
	padding: 0.9rem 1.75rem;
	min-height: 3rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	font-family: inherit;
	cursor: pointer;
}

.dt-form-step__next {
	background: var(--wp--preset--color--dt-red);
	color: var(--wp--preset--color--dt-white);
	border: none;
}

.dt-form-step__next:hover {
	background: var(--wp--preset--color--dt-navy);
}

.dt-form-step__prev {
	background: transparent;
	color: var(--wp--preset--color--dt-navy);
	border: 1px solid var(--wp--preset--color--dt-gray-300);
}

.dt-form-step__prev:hover {
	background: var(--wp--preset--color--dt-gray-50);
}

.dt-form-step__prev:focus-visible,
.dt-form-step__next:focus-visible {
	outline: 3px solid var(--wp--preset--color--dt-navy);
	outline-offset: 2px;
}

/* Op stap 3 staat de echte verzendknop naast "Vorige" — zelfde rijgedrag,
 * geen aparte regel nodig, button[type="submit"] erft al width:100%/auto. */
.dt-form-step__nav .wp-block-jetpack-button {
	margin: 0;
}

.wp-block-jetpack-contact-form.is-stepped .dt-form-step .wp-block-jetpack-contact-form button[type="submit"] {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------- */
/* Contactformulier — eigen gelokaliseerde foto-uploadknop                */
/* -------------------------------------------------------------------- */

/* De native "Bestand kiezen"/"Choose File"-knoptekst wordt door de BROWSER
 * bepaald (OS/browsertaal), niet door de pagina — daardoor kon die op de
 * Franse pagina toch Nederlandse of Engelse tekst tonen. Vaste, betrouwbare
 * fix: de native input blijft functioneel en toegankelijk aanwezig, maar
 * volledig onzichtbaar over een eigen, taalcorrecte knop heen (overlay-
 * techniek — geen zware library, werkt met toetsenbord en schermlezers,
 * want het native element ontvangt nog altijd echt de interactie). */
.dt-file-field {
	position: relative;
}

.dt-file-field__visual {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	background: var(--wp--preset--color--dt-white);
	border: 1px dashed var(--wp--preset--color--dt-gray-300);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.85rem 1rem;
}

.dt-file-field__button {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--dt-gray-50);
	color: var(--wp--preset--color--dt-navy);
	border-radius: var(--wp--custom--radius--small);
	padding: 0.5rem 0.9rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.dt-file-field__status {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-600);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dt-file-field.has-files .dt-file-field__status {
	color: var(--wp--preset--color--dt-navy);
	font-weight: 600;
}

.dt-file-field input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	opacity: 0;
	cursor: pointer;
}

.dt-file-field input[type="file"]:focus-visible + .dt-file-field__visual {
	outline: 3px solid var(--wp--preset--color--dt-navy);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Contactpagina: geen dubbele CTA (mobiele stickybalk overlapt anders het
 * formulier zelf, dat de bestemming AL IS — zie docblok page-contact.php). */
/* -------------------------------------------------------------------- */

body.page-contact .sticky-cta {
	display: none !important;
}

/* -------------------------------------------------------------------- */
/* CTA-band (synced template part)                                       */
/* -------------------------------------------------------------------- */

.cta-band {
	text-align: center;
}

.cta-band__inner {
	max-width: 640px;
}

.cta-band .wp-block-buttons {
	justify-content: center;
	margin-block-start: 0.5rem;
}

.cta-band__form-note {
	margin-block-start: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dt-gray-300);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: var(--wp--custom--radius--medium);
	padding: 1rem;
}

/* Verzorgd "lijstwerk" rond het hero-beeld — houdt de sectie professioneel
   ogend op staging en is een drop-in vervanging zodra een echte DT-foto
   beschikbaar is (enkel de <img src> hoeft dan te wijzigen). */
.dt-hero__media {
	position: relative;
	padding: 0.6rem;
	background: linear-gradient(155deg, var(--wp--preset--color--dt-gray-50), var(--wp--preset--color--dt-white));
	border-radius: calc(var(--wp--custom--radius--large) + 0.6rem);
	box-shadow: 0 0 0 1px var(--wp--preset--color--dt-gray-100);
}

.dt-hero__media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--radius--large);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: var(--wp--custom--shadow--card);
}

.dt-hero__media .placeholder-badge {
	position: absolute;
	top: 1.35rem;
	left: 1.35rem;
	z-index: 1;
}