/**
 * Wateroverlastonline, aanvullende CSS.
 *
 * Alles wat via theme.json kan, staat in theme.json. Hier staat alleen
 * wat block-supports niet uitdrukken: de sticky CTA, counters, scroll-tabellen
 * en de paar responsive schakelaars. Mobile first, geen JavaScript.
 */

/* -------------------------------------------------------------------------
   1. Basis
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Zichtbare focus. Standaard-outline van de browser is op donkerblauw te zwak. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-600);
	outline-offset: 2px;
}

/* Afbeeldingen krabbelen nooit buiten hun kolom. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
   2. Header
   ---------------------------------------------------------------------- */

/* Topbalk met de vier onderscheiders: op mobiel weg, daar telt elke pixel
   boven de vouw. De informatie staat verderop in de onderscheiders-sectie. */
.wol-topbalk {
	display: none;
}

/* Telefoonnummer in de header is op mobiel dubbelop, daar staat het in de
   sticky onderbalk. */
.wol-header-tel {
	display: none;
}

@media (min-width: 782px) {
	.wol-topbalk,
	.wol-header-tel {
		display: block;
	}
}

.wol-header-tel a {
	text-decoration: none;
	color: var(--wp--preset--color--ink-900);
	font-weight: 600;
}

.wol-header-tel small {
	display: block;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-500);
}

/* De offerte-knop in de header verdwijnt op mobiel: de sticky onderbalk
   heeft hem al, twee keer dezelfde CTA in beeld is ruis. */
.wol-header-cta {
	display: none;
}

@media (min-width: 782px) {
	.wol-header-cta {
		display: block;
	}
}

/* -------------------------------------------------------------------------
   2b. Footer
   ---------------------------------------------------------------------- */

ul.wol-footer-links {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.wol-footer-links li + li {
	margin-top: var(--wp--preset--spacing--20);
}

.wol-footer-links a {
	text-decoration: none;
	color: var(--wp--preset--color--ink-700);
}

.wol-footer-links a:hover,
.wol-footer-links a:focus {
	text-decoration: underline;
	color: var(--wp--preset--color--brand-700);
}

/* -------------------------------------------------------------------------
   3. Sticky CTA (conversielaag 1)
   ---------------------------------------------------------------------- */

.wol-sticky-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface-0);
	border-top: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -2px 12px rgba(18, 32, 58, 0.1);
}

.wol-sticky-cta a {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 48px; /* tapdoel */
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.wol-sticky-cta__tel {
	color: var(--wp--preset--color--brand-700);
	border: 2px solid var(--wp--preset--color--brand-700);
}

.wol-sticky-cta__tel-label {
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink-500);
}

.wol-sticky-cta__btn {
	background: var(--wp--preset--color--brand-700);
	color: var(--wp--preset--color--surface-0);
}

.wol-sticky-cta__btn:hover,
.wol-sticky-cta__btn:focus {
	background: var(--wp--preset--color--brand-600);
	color: var(--wp--preset--color--surface-0);
}

/* Ruimte onder de footer zodat de balk niets afdekt. */
body:has(.wol-sticky-cta) {
	padding-bottom: 72px;
}

@media (min-width: 782px) {
	/* Desktop: één knop rechtsonder, het telefoonnummer staat al in de header. */
	.wol-sticky-cta {
		inset: auto var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) auto;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.wol-sticky-cta__tel {
		display: none;
	}

	.wol-sticky-cta__btn {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
		box-shadow: 0 4px 14px rgba(18, 32, 58, 0.28);
	}

	body:has(.wol-sticky-cta) {
		padding-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
   4. Blokstijlen
   ---------------------------------------------------------------------- */

/* Kaart: één definitie, gebruikt in systemen, doelgroepen, proces, kennis. */
.wp-block-group.is-style-kaart {
	padding: var(--wp--custom--card-padding);
	background: var(--wp--preset--color--surface-0);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
}

/* Doelgroep-CTA: het tweede kleurspoor uit het designplan. Nooit alleen. */
.wp-block-button.is-style-doelgroep .wp-block-button__link {
	background-color: var(--wp--preset--color--accent-700);
	color: var(--wp--preset--color--surface-0);
	border: 0;
}

.wp-block-button.is-style-doelgroep .wp-block-button__link:hover,
.wp-block-button.is-style-doelgroep .wp-block-button__link:focus {
	background-color: #7d4d13;
	color: var(--wp--preset--color--surface-0);
}

/* Keuzetabel: het visuele hart van de systeempagina, en meteen het blok dat
   op een telefoon het hardst breekt. Scrollen in plaats van proppen. */
.wp-block-table.is-style-keuzetabel {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table.is-style-keuzetabel table {
	min-width: 620px;
}

.wp-block-table.is-style-keuzetabel th,
.wp-block-table.is-style-keuzetabel td {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.wp-block-table.is-style-keuzetabel thead th {
	background: var(--wp--preset--color--surface-50);
	color: var(--wp--preset--color--ink-900);
	font-weight: 600;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   5. Secties met eigen opmaak
   ---------------------------------------------------------------------- */

/* Cijferstrook. Twee kolommen op mobiel, vier vanaf tablet: vier cijfers
   naast elkaar op 375px maakt ze onleesbaar. */
.wol-cijfers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50);
	text-align: center;
}

@media (min-width: 782px) {
	.wol-cijfers {
		grid-template-columns: repeat(4, 1fr);
	}
}

.wol-cijfers p {
	margin: 0;
}

.wol-cijfers strong {
	display: block;
	font-size: var(--wp--preset--font-size--stat);
	line-height: 1.1;
	color: var(--wp--preset--color--brand-700);
	font-weight: 700;
}

.wol-cijfers span {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-500);
	line-height: 1.35;
}

/* Genummerde processtappen. De cijfers komen uit een CSS-counter, dus de
   redacteur kan een stap toevoegen of verwijderen zonder te hernummeren. */
.wol-stappen {
	counter-reset: wol-stap;
}

.wol-stappen .wp-block-column {
	position: relative;
	counter-increment: wol-stap;
	padding-top: var(--wp--preset--spacing--60);
}

.wol-stappen .wp-block-column::before {
	content: counter(wol-stap);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-700);
	color: var(--wp--preset--color--surface-0);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Hotspot-illustratie op de doelgroeplandingen. De genummerde punten staan
   als lijst onder het beeld, niet als absolute overlay: op een telefoon is
   een overlay op een foto onleesbaar en niet aantikbaar. */
.wol-risicopunten ol {
	counter-reset: wol-punt;
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.wol-risicopunten li {
	counter-increment: wol-punt;
	position: relative;
	padding-left: var(--wp--preset--spacing--70);
	margin-bottom: var(--wp--preset--spacing--40);
}

.wol-risicopunten li::before {
	content: counter(wol-punt);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-100);
	color: var(--wp--preset--color--ink-900);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Meta-regel onder een cijfer of claim: bron, datum, voorwaarde. */
.wol-bron {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-500);
}

/* -------------------------------------------------------------------------
   6. WooCommerce
   ---------------------------------------------------------------------- */

.wol-btw {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--ink-500);
}

/* -------------------------------------------------------------------------
   7. Print
   ---------------------------------------------------------------------- */

@media print {
	.wol-sticky-cta,
	.wol-topbalk,
	.wp-block-navigation,
	.wp-site-blocks > footer {
		display: none !important;
	}

	body:has(.wol-sticky-cta) {
		padding-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
   8. Aankleding naar Claude Design (19-07)
   ---------------------------------------------------------------------- */

/* Kicker: klein uppercase label boven een sectietitel */
.wol-kicker{
	margin:0 0 var(--wp--preset--spacing--20);
	font-size:var(--wp--preset--font-size--small);
	font-weight:600;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--wp--preset--color--ink-500);
}

/* Kaart met beeld bovenaan: foto vult de kaartbreedte, tekst eronder */
.wp-block-group.is-style-kaart{overflow:hidden;}
.is-style-kaart > figure.wp-block-image:first-child{
	margin:calc(-1 * var(--wp--custom--card-padding)) calc(-1 * var(--wp--custom--card-padding)) var(--wp--preset--spacing--40);
}
.is-style-kaart > figure.wp-block-image:first-child img{
	display:block;width:100%;height:auto;border-radius:0;
	aspect-ratio:4 / 3;object-fit:cover;
}

/* Herobeeld en maatwerkbeeld: vaste verhouding, netjes bijgesneden */
.wol-hero-image img{
	width:100%;height:auto;border-radius:var(--wp--custom--radius);
	aspect-ratio:16 / 10;object-fit:cover;
}

/* Cijferstrook staat nu op een donkere band: cijfers wit, onderschrift licht */
.wol-cijfers strong{color:var(--wp--preset--color--surface-0);}
.wol-cijfers span{color:rgba(255,255,255,0.72);}

/* Onderscheiders als genummerde kaarten 01 tot 06 */
.wol-onderscheiders{counter-reset:wol-usp;}
.wol-onderscheiders > .wp-block-group{counter-increment:wol-usp;}
.wol-onderscheiders > .wp-block-group::before{
	content:counter(wol-usp,decimal-leading-zero);
	display:block;
	margin-bottom:var(--wp--preset--spacing--20);
	font-size:var(--wp--preset--font-size--small);
	font-weight:700;
	color:var(--wp--preset--color--brand-700);
}

/* Processtappen als kaarten met het nummer linksboven in de kaart */
.wol-stappen .wp-block-column{
	background:var(--wp--preset--color--surface-0);
	border:1px solid var(--wp--preset--color--border);
	border-radius:var(--wp--custom--radius);
	padding:var(--wp--custom--card-padding);
	padding-top:calc(var(--wp--custom--card-padding) + 2.75rem);
}
.wol-stappen .wp-block-column::before{
	top:var(--wp--custom--card-padding);
	left:var(--wp--custom--card-padding);
}

/* Placeholder voor beeld dat nog volgt (projectfoto's) */
.wol-placeholder{
	background:var(--wp--preset--color--surface-100);
	border-radius:var(--wp--custom--radius);
	aspect-ratio:16 / 9;
	display:flex;align-items:center;justify-content:center;
	padding:var(--wp--preset--spacing--50);
}

/* Topbalk donker: links leesbaar op donkere achtergrond */
.wol-topbalk a{color:#c9d1dc;text-decoration:none;}
.wol-topbalk a:hover,.wol-topbalk a:focus{color:#ffffff;text-decoration:underline;}

/* Header: menu en acties blijven op één rij op desktop */
.wol-header .wp-block-navigation{flex-wrap:nowrap;}
.wol-header-actions{flex-wrap:nowrap;}

/* Donkere footer: koppen, links en scheiding leesbaar op navy */
.wol-footer .wp-block-heading{color:var(--wp--preset--color--surface-0);}
.wol-footer a{color:#c9d1dc;}
.wol-footer .wol-footer-links a{color:#c9d1dc;}
.wol-footer .wol-footer-links a:hover,.wol-footer .wol-footer-links a:focus{color:#ffffff;}
.wol-footer .has-ink-500-color{color:#8f9db4 !important;}
.wol-footer .has-border-background-color{background-color:rgba(255,255,255,0.14) !important;}
.wol-footer .is-style-outline .wp-block-button__link{color:#ffffff;border-color:rgba(255,255,255,0.5);}
.wol-footer .is-style-outline .wp-block-button__link:hover,.wol-footer .is-style-outline .wp-block-button__link:focus{background:rgba(255,255,255,0.12);color:#ffffff;}

/* ============================================================
   9. FONT-SIZE PRESET FALLBACK
   WordPress genereert soms de standaard presets (small/medium/
   large) in plaats van onze custom presets, waardoor koppen op
   16px vallen. We definieren de variabelen en .has-*-font-size
   klassen hier hard, zodat de typografie altijd klopt ongeacht
   de global-styles cache.
   ============================================================ */
:root{
	--wp--preset--font-size--small: 0.875rem;
	--wp--preset--font-size--body: 1rem;
	--wp--preset--font-size--lead: clamp(1.0625rem, 1.019rem + 0.217vw, 1.1875rem);
	--wp--preset--font-size--h3: clamp(1.125rem, 1.084rem + 0.204vw, 1.25rem);
	--wp--preset--font-size--h2: clamp(1.375rem, 1.253rem + 0.611vw, 1.75rem);
	--wp--preset--font-size--h1: clamp(1.875rem, 1.671rem + 1.019vw, 2.5rem);
	--wp--preset--font-size--stat: clamp(1.75rem, 1.587rem + 0.815vw, 2.25rem);
}
.has-small-font-size{ font-size: var(--wp--preset--font-size--small) !important; }
.has-body-font-size{ font-size: var(--wp--preset--font-size--body) !important; }
.has-lead-font-size{ font-size: var(--wp--preset--font-size--lead) !important; }
.has-h3-font-size{ font-size: var(--wp--preset--font-size--h3) !important; }
.has-h2-font-size{ font-size: var(--wp--preset--font-size--h2) !important; }
.has-h1-font-size{ font-size: var(--wp--preset--font-size--h1) !important; }
.has-stat-font-size{ font-size: var(--wp--preset--font-size--stat) !important; }

/* Koppen zonder expliciete font-size klasse toch nette schaal geven */
.wp-block-post-content h1:not([class*="-font-size"]){ font-size: var(--wp--preset--font-size--h1); }
.wp-block-post-content h2:not([class*="-font-size"]){ font-size: var(--wp--preset--font-size--h2); }
.wp-block-post-content h3:not([class*="-font-size"]){ font-size: var(--wp--preset--font-size--h3); }