/*
Theme Name: Rabin Klussenbedrijf
Theme URI: https://rabinklussenbedrijf.nl/
Author: Rabin Klussenbedrijf
Author URI: https://rabinklussenbedrijf.nl/
Description: Licht blokthema op maat voor Rabin Klussenbedrijf, stukadoor en klussenbedrijf in Roermond. Witte pagina, blauwgrijze vlakken, marineblauw en het rood van het logo, schermbrede fotobanden, weinig tekst. Alleen kernblokken, snel en toegankelijk (WCAG 2.2 AA).
Version: 3.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rabin-klussenbedrijf
Tags: block-theme, business, full-site-editing, one-column, wide-blocks, block-patterns, custom-logo, custom-menu, accessibility-ready, translation-ready
*/

/* ===== Rabin Klussenbedrijf — hoofdstijlblad (lichte versie 3.1)
   Alles wat in theme.json kan staat daar. Dit bestand is via add_editor_style()
   ook het editorstijlblad. Contrasttabel: THEME-CONTRACT.md §2.2.
   LET OP — het accent is het ROOD van het logo. De slugs `oranje` en
   `oranje-diep` zijn niet hernoemd (dat breekt opmaak) maar zijn allebei #CC0000.
   Recept: op licht is rood vulling én tekst (5,89:1 wit, 5,23:1 papier) met WIT
   erop (5,89:1), nooit navy (2,58:1); op donker is rood verboden (2,58:1 op navy)
   en is rood-licht #FF7B7B het accent (6,06:1). ===== */

/* --- 1. Basis en rolvariabelen --- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 0;
}

/*
 * Vanaf 48em is de kop sticky: elke ankersprong (#diensten, #contact, de
 * skiplink) moet er onderlangs landen. Per breekpunt een eigen waarde, want de
 * kop breekt anders af. Onder 48em staat de kop NIET vast (eigenaar,
 * 30-09-2026), dus daar 0.
 */
@media ( min-width: 48em ) {
	html {
		scroll-padding-top: 15.5rem;
	}
}

@media ( min-width: 64em ) {
	html {
		scroll-padding-top: 13.5rem;
	}
}

/*
 * Rolvariabelen: elke rol staat hier eenmaal op een paletslug, de rest van dit
 * bestand noemt alleen de rol. De donkere vlakken (7) draaien ze in één keer om.
 * --rabin-accent is het accent dat TEKST of LIJN mag zijn (licht #CC0000,
 * donker #FF7B7B), --rabin-accent-vlak is het accent als VULLING (altijd
 * #CC0000, altijd met WIT erop).
 */
body {
	--rabin-tekst: var( --wp--preset--color--inkt );
	--rabin-kop: var( --wp--preset--color--navy );
	--rabin-zacht: var( --wp--preset--color--inkt-zacht );
	--rabin-lijn: var( --wp--preset--color--lijn );
	--rabin-lijn-ui: var( --wp--preset--color--lijn-sterk );
	--rabin-accent: var( --wp--preset--color--oranje-diep );
	--rabin-accent-vlak: var( --wp--preset--color--oranje );
	--rabin-accent-op: var( --wp--preset--color--oranje-diep );
	--rabin-knoprand: var( --wp--preset--color--navy );
	--rabin-vlak: var( --wp--preset--color--wit );
	--rabin-focus: var( --wp--preset--color--navy );

	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

:where( img, svg, video, iframe ) {
	max-width: 100%;
	height: auto;
}

/* Plaatshouder achter een nog niet geladen foto: blauwgrijs, nooit zwart. */
:where( img ) {
	background-color: var( --wp--preset--color--papier );
}

/* Rode vulling met witte tekst: 5,89:1. */
::selection {
	background-color: var( --wp--preset--color--oranje );
	color: var( --wp--preset--color--wit );
}

/* --- 2. Focus --- */

/*
 * Navy ring op licht: 15,21:1 tegen wit, 13,53:1 tegen #EDF2F9. Op donker
 * draait --rabin-focus naar wit met een navy halo (7). Rood is hier geen optie:
 * #CC0000 haalt op een navy vlak 2,58:1 en zakt door de 3:1 van WCAG 2.4.11.
 */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --rabin-focus, var( --wp--preset--color--navy ) );
	outline-offset: 2px;
	border-radius: var( --wp--custom--radius--klein );
}

/*
 * Sprong-naar-inhoudlink: rood vlak, WITTE tekst en rand. Hij ligt altijd over de
 * navy kopbalk (zie hieronder), waar rood 2,58:1 haalt: zonder de witte rand
 * (15,21:1) is de knopgrens weg (1.4.11).
 */
.rabin-overslaan {
	position: fixed;
	top: -6rem;
	left: 1rem;
	z-index: 100;
	display: inline-block;
	min-height: 44px;
	padding: 0.75rem 1.25rem;
	background-color: var( --wp--preset--color--oranje );
	border: 1px solid var( --wp--preset--color--wit );
	border-radius: var( --wp--custom--radius--normaal );
	color: var( --wp--preset--color--wit );
	font-weight: 700;
	text-decoration: none;
	transition: top 140ms ease;
}

.rabin-overslaan:focus {
	top: 1rem;
	color: var( --wp--preset--color--wit );
}

/*
 * De skiplink staat position:fixed op top/left 1rem en valt dus altijd over de
 * navy kopbalk en de band eronder, nooit over wit. Een navy ring haalde daar
 * 1,00:1 tegen de balk (gemeten op alle zes de pagina's bij 360/390/414/768/
 * 1440). Daarom dezelfde behandeling als binnen de kopbalk (§7): witte ring met
 * een navy halo over de 2px offset plus 2px erbuiten, zodat de ring aan beide
 * kanten navy raakt. Achter de vier zijden gemeten: 7,26:1 tot 16,71:1.
 * De :is(...)-regel in §7 helpt hier niet: die heeft een afstammingscombinator
 * en de skiplink zit niet ín .rabin-kop.
 */
.rabin-overslaan:focus-visible {
	--rabin-focus: var( --wp--preset--color--wit );

	box-shadow: 0 0 0 7px rgba( 0, 36, 84, 0.92 );
}

/* --- 3. Typografie --- */

/*
 * Assistant heeft geen breedte-as, dus nergens font-stretch of
 * font-variation-settings: dat zou alleen synthetisch vervormen.
 */
:where( h1, h2, h3, h4, h5, h6 ) {
	text-wrap: balance;
}

/*
 * Kicker: het enige hoofdletterlabel en het enige rode tekstelement op licht.
 * --rabin-accent is daar #CC0000 (5,89:1 op wit, 5,23:1 op papier); op donker
 * draait hij vanzelf naar rood-licht #FF7B7B (6,06:1 op navy).
 */
.is-style-kicker,
.rabin-kicker,
.is-style-kicker-chip {
	color: var( --rabin-accent );
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.is-style-kicker,
.rabin-kicker {
	display: block;
	margin-bottom: 0.625rem;
}

/*
 * Chip: streep in de kickerkleur, 5,89:1 op wit. Blok-niveau (flex, niet
 * inline-flex): alleen zo staat de chip in een `layout:constrained` band in
 * dezelfde kolom als de kop eronder.
 */
.is-style-kicker-chip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.is-style-kicker-chip::before {
	content: "";
	display: block;
	width: 2rem;
	height: 3px;
	background-color: var( --rabin-accent );
	flex: none;
}

/* Blijft geregistreerd; zet nu alleen de letterafstand terug op nul. */
.is-style-normaal,
.is-style-normaal.wp-block-heading {
	letter-spacing: 0;
}

/*
 * Introzin. GEEN max-width hier: 62ch is bij `groot` SMALLER (671px bij 22px)
 * dan de contentSize, en smaller dan de kolom centreert de layoutregel van
 * WordPress met automarges (!important): 768px gaf zin x=75, koppen x=31.
 * De 62ch staat daarom alleen op een flow-ouder.
 */
.rabin-intro {
	color: var( --rabin-tekst );
	font-size: var( --wp--preset--font-size--groot );
	font-weight: 400;
	line-height: 1.55;
}

.is-layout-flow > .rabin-intro {
	max-width: var( --wp--custom--meet );
}

/* --- 4. Knoppen --- */

/*
 * De primaire knop staat in theme.json: rode vulling, WITTE tekst (5,89:1),
 * 1px navy rand, 3px radius. De tekst was navy zolang het accent oranje was; op
 * rood haalt navy 2,58:1, dus die moest om. De navy rand blijft, want hij houdt
 * de knopgrens op wit én op papier scherp (15,21:1 / 13,53:1); op donker wordt
 * hij rood-licht (7).
 * De varianten staan bewust NIET onder theme.json styles.blocks.*.variations:
 * WordPress schrijft die per blok-instantie uit — 28 kopieën op de voorpagina,
 * 11,2 KB inline. Registratie blijft in inc/setup.php.
 */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	text-align: center;
	transition: background-color var( --wp--custom--overgang ),
		border-color var( --wp--custom--overgang ),
		color var( --wp--custom--overgang );
}

/*
 * Variant "omlijnd" — secundair: geen vulling, navy rand en tekst (15,21:1), op
 * donker wit (15,21:1) en op een band wit (>= 6,78:1). Dat draait via de rollen
 * --rabin-knop2 (rand en tekst) en --rabin-knop2-op (de tekst bij hover, als de
 * rol de vulling wordt); de fallback is de lichte variant.
 */
.wp-block-button.is-style-omlijnd .wp-block-button__link {
	background-color: transparent;
	border-color: var( --rabin-knop2, var( --wp--preset--color--navy ) );
	color: var( --rabin-knop2, var( --wp--preset--color--navy ) );
}

.wp-block-button.is-style-omlijnd .wp-block-button__link:is( :hover, :focus ) {
	background-color: var( --rabin-knop2, var( --wp--preset--color--navy ) );
	border-color: var( --rabin-knop2, var( --wp--preset--color--navy ) );
	color: var( --rabin-knop2-op, var( --wp--preset--color--wit ) );
}

/*
 * Variant "licht": wit vlak, navy tekst (15,21:1), voor donkere vlakken en
 * fotobanden. De witte rand haalt 15,21:1 tegen navy en >= 6,78:1 op de overlay.
 */
.wp-block-button.is-style-licht .wp-block-button__link {
	background-color: var( --wp--preset--color--wit );
	border-color: var( --wp--preset--color--wit );
	color: var( --wp--preset--color--navy );
}

.wp-block-button.is-style-licht .wp-block-button__link:hover,
.wp-block-button.is-style-licht .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--papier );
	border-color: var( --wp--preset--color--papier );
	color: var( --wp--preset--color--navy );
}

/*
 * Invoervelden (zoekveld op de 404 en in de zoekresultaten). Wit veld, 1px
 * #868792: 3,56:1 op wit en 3,17:1 op #EDF2F9, boven de 3:1 van WCAG 1.4.11.
 * Tekst inkt 17,40:1, plaatshouder inkt-zacht 10,50:1.
 */
:where( input[type="search"], input[type="text"], input[type="email"], textarea ),
.wp-block-search__input {
	min-height: 48px;
	padding: 0.625rem 0.875rem;
	background-color: var( --wp--preset--color--wit );
	border: 1px solid var( --rabin-lijn-ui );
	border-radius: var( --wp--custom--radius--normaal );
	color: var( --rabin-tekst );
	font: inherit;
}

:where( input, textarea )::placeholder {
	color: var( --rabin-zacht );
	opacity: 1;
}

/* Knop met onderregel, zoals "Bellen · 06 24 37 87 40" in de actiebalk. */
.rabin-knop-sub {
	display: block;
	font-size: var( --wp--preset--font-size--micro );
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
}

/* --- 5. Vlakken en banden --- */

/*
 * Wit is de standaard: een groep zonder bandklasse is al wit. Drie bandklassen:
 *   .is-style-band-wit     expliciet wit (om een band hard af te sluiten)
 *   .is-style-band-papier  blauwgrijs #EDF2F9 — het lichte vlak
 *   .is-style-band-navy    marineblauw — HOOGUIT ÉÉN PER PAGINA (zie 7)
 * Om dezelfde reden als bij de knoppen (4) staan ze niet in theme.json.
 */
.wp-block-group.is-style-band-wit {
	background-color: var( --wp--preset--color--wit );
	color: var( --wp--preset--color--inkt );
}

.wp-block-group.is-style-band-papier {
	background-color: var( --wp--preset--color--papier );
	color: var( --wp--preset--color--inkt );
}

/*
 * Kaart: wit vlak, 1px haarlijn, 3px radius, geen schaduw. De haarlijn #DCE4F0
 * haalt 1,28:1 tegen wit en is DECORATIEF: nooit de enige aanwijzing. Alles wat
 * bedienbaar is krijgt --rabin-lijn-ui (>= 3:1).
 */
.wp-block-group.is-style-kaart {
	background-color: var( --rabin-vlak );
	border: 1px solid var( --rabin-lijn );
	border-radius: var( --wp--custom--radius--normaal );
	padding: var( --wp--preset--spacing--60 );
}

.wp-block-group.is-style-kaart > :last-child {
	margin-bottom: 0;
}

/* Scheidingslijnen: 1px haarlijn, nooit een schaduw. */
.rabin-lijn-boven {
	border-top: 1px solid var( --rabin-lijn );
}

.rabin-lijn-onder {
	border-bottom: 1px solid var( --rabin-lijn );
}

/* Rode accentregel boven een sectiekop: --rabin-accent, 5,89:1 op wit. */
.rabin-accentlijn {
	border-top: 3px solid var( --rabin-accent );
	padding-top: var( --wp--preset--spacing--40 );
}

/* Scheidingsblok: 1px, volledig ondoorzichtig. */
.wp-block-separator:not( .is-style-dots ) {
	border: none;
	border-top: 1px solid currentColor;
	opacity: 1;
}

/* --- 6. Fotobanden (volledige breedte) --- */

/*
 * Drie blokstijlen: .is-style-banner (tekst op de foto), -naast (tekst ernaast
 * op wit, geen overlay) en -stil (alleen beeld). Bouw volgens THEME-CONTRACT.md
 * §7: de groep bevat .rabin-banner-beeld en daarna .rabin-banner-inhoud.
 * OVERLAY — nagerekend op de vier bandbeelden, lichtste pixel in de tekstzone
 * als achtergrond: >= 0,72 tot 92% hoogte, vanaf 48em gekapt op 50vw (breder
 * zakte de kolom naar 3,87:1). Over alle beelden en breedtes: wit 6,78-14,59:1,
 * papier >= 6,03:1. Rood #CC0000 haalt op effen navy al 2,58:1 en op een band
 * dus minder; het is er verboden. Tekst op een band is WIT (7).
 */
.wp-block-group.is-style-banner,
.wp-block-group.is-style-banner-stil {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background-color: var( --wp--preset--color--navy );
	color: var( --wp--preset--color--wit );
}

.wp-block-group.is-style-banner {
	min-height: var( --wp--custom--banner--laag );
	padding-top: var( --wp--preset--spacing--90 );
	padding-bottom: var( --wp--preset--spacing--90 );
}

/*
 * Band zonder tekst: ALLEEN de verhouding bepaalt de hoogte. Er staat bewust
 * geen min-height bij — dat is dezelfde val als bij banner-naast (zie de
 * opmerking bij @media 48em verderop): zodra de min-height wint, rekent Chrome
 * de BREEDTE terug uit de hoogte. 34vh op een telefoon is 286,96px, x 7/3 =
 * 669,5px, en de band liep op 360, 390 en 414 rechts het scherm uit (de foto
 * rechts afgesneden, auto-marge negatief). Vanaf 48em geeft 7/3 sowieso meer
 * dan banner--laag, dus daar was hij ook overbodig: 768 -> 329px en
 * 1440 -> 617px, met of zonder. Na het weghalen: 360 -> 360x154, 390 ->
 * 390x167, 414 -> 414x177, en geen overloop meer.
 */
.wp-block-group.is-style-banner-stil {
	aspect-ratio: var( --wp--custom--verhouding--banner );
}

/*
 * Het beeld vult de hele band, ook onder de paginamarge: de bevattende doos van
 * een absoluut kind is de opvulbox van de band. max-width en de automarges van
 * de layoutregel moeten eraf, anders versmalt de <img>-wikkel tot contentSize.
 */
.rabin-banner-beeld {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.wp-block-group.is-style-banner > .rabin-banner-beeld,
.wp-block-group.is-style-banner-stil > .rabin-banner-beeld {
	max-width: none;
	margin: 0;
}

.rabin-banner-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

/* Mobiel: plateau tot 92%, want padding-top 64px op een band van 284px is 77%. */
.wp-block-group.is-style-banner::before,
.wp-block-group.is-style-banner-stil::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(
		to top,
		rgba( 0, 36, 84, 0.88 ) 0%,
		rgba( 0, 36, 84, 0.82 ) 50%,
		rgba( 0, 36, 84, 0.72 ) 92%,
		rgba( 0, 36, 84, 0.38 ) 100%
	);
}

/*
 * Band zonder tekst: alleen een lichte vignet, zodat de foto boven- en onderaan
 * in de witte pagina overloopt. Een bijschrift hoort ONDER deze band.
 */
.wp-block-group.is-style-banner-stil::before {
	background-image: linear-gradient(
		to top,
		rgba( 0, 36, 84, 0.34 ) 0%,
		rgba( 0, 36, 84, 0.08 ) 40%,
		rgba( 0, 36, 84, 0 ) 66%,
		rgba( 0, 36, 84, 0.18 ) 100%
	);
}

/*
 * De tekstkolom. Twee dingen moeten weg van de layoutregel van WordPress: de
 * max-width van contentSize en de automarges, die de kolom zouden centreren
 * terwijl de tekst LINKS moet staan, waar het verloop zit. Die marges staan er
 * met !important — daarom hieronder ook, en nergens anders. Wijzig de
 * maximumbreedte niet: die houdt de tekst in de zone die 4,5:1 haalt.
 */
.rabin-banner-inhoud {
	position: relative;
	z-index: 2;
}

.wp-block-group.is-style-banner > .rabin-banner-inhoud {
	max-width: min( 100%, 44ch );
	margin-inline: 0 auto !important;
}

/* Vanaf 48em: tekst links, verticaal gecentreerd, verloop naar rechts. */
@media ( min-width: 48em ) {
	.wp-block-group.is-style-banner {
		justify-content: center;
		min-height: var( --wp--custom--banner--hoog );
	}

	/* 50vw houdt de kolom links van 58%, waar het verloop nog op 0,72 staat. */
	.wp-block-group.is-style-banner > .rabin-banner-inhoud {
		max-width: min( 100%, var( --wp--custom--banner--tekst ), 50vw );
	}

	.wp-block-group.is-style-banner::before {
		background-image:
			linear-gradient(
				to right,
				rgba( 0, 36, 84, 0.8 ) 0%,
				rgba( 0, 36, 84, 0.72 ) 58%,
				rgba( 0, 36, 84, 0.3 ) 80%,
				rgba( 0, 36, 84, 0 ) 97%
			),
			linear-gradient(
				to top,
				rgba( 0, 36, 84, 0.3 ) 0%,
				rgba( 0, 36, 84, 0.18 ) 55%,
				rgba( 0, 36, 84, 0.26 ) 100%
			);
	}
}

/* Een lagere tussenband (dus geen hero) krijgt deze klasse erbij. */
.wp-block-group.is-style-banner.rabin-banner-laag {
	min-height: var( --wp--custom--banner--laag );
}

/*
 * Variant "banner-naast": zelfde bouw en kinderen, maar foto en tekst naast
 * elkaar (vanaf 48em) of onder elkaar (mobiel), allebei op wit. Geen overlay,
 * dus geen contrastkwestie: de variant voor een lichte foto, voor veel detail en
 * voor elke band met rood in de tekst. .rabin-beeld-rechts spiegelt hem.
 */
.wp-block-group.is-style-banner-naast {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	align-items: center;
	padding-top: 0;
	padding-bottom: var( --wp--preset--spacing--90 );
	background-color: var( --wp--preset--color--wit );
	color: var( --wp--preset--color--inkt );
}

/* Het beeld staat hier gewoon in de flow, niet absoluut over de band. */
.wp-block-group.is-style-banner-naast > .rabin-banner-beeld {
	position: static;
	max-width: none;
	margin: 0;
	aspect-ratio: var( --wp--custom--verhouding--project );
}

.wp-block-group.is-style-banner-naast > .rabin-banner-inhoud {
	max-width: min( 100%, var( --wp--custom--meet ) );
	padding-inline: var( --wp--custom--goot );
}

@media ( min-width: 48em ) {
	/*
	 * minmax( 0, 1fr ) en NIET 1fr: 1fr is minmax( auto, 1fr ) en laat een kolom
	 * dus opendrukken door zijn inhoud. De fotokolom deed dat ook: aspect-ratio
	 * 16/9 plus min-height banner--laag gaf een minimumbreedte van
	 * 34vh x 16/9 (op 768 x 1024 al 619px), en daardoor liep de tekstkolom van
	 * 768 tot ongeveer 830px buiten beeld — kop, zin en de rode knop
	 * afgesneden. De min-height is daarom ook weg: vanaf 48em bepaalt alleen de
	 * verhouding de hoogte van het beeld (zie de tabel bij verhouding--hero in
	 * THEME-CONTRACT.md §6).
	 */
	.wp-block-group.is-style-banner-naast {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		gap: clamp( 2rem, 4vw, 4rem );
		padding-bottom: 0;
	}

	.wp-block-group.is-style-banner-naast > .rabin-banner-beeld {
		aspect-ratio: var( --wp--custom--verhouding--hero );
	}

	.wp-block-group.is-style-banner-naast > .rabin-banner-inhoud {
		padding-block: var( --wp--preset--spacing--70 );
		padding-inline: 0 var( --wp--custom--goot );
	}

	.wp-block-group.is-style-banner-naast.rabin-beeld-rechts > .rabin-banner-beeld {
		order: 2;
	}

	.wp-block-group.is-style-banner-naast.rabin-beeld-rechts > .rabin-banner-inhoud {
		padding-inline: var( --wp--custom--goot ) 0;
	}
}

/* --- 7. De donkere vlakken --- */

/*
 * De omkering hangt aan de ACHTERGROND, niet aan een klasse: haal
 * has-navy-background-color weg en de omkering gaat mee, zodat er geen witte
 * tekst op wit achterblijft. (.rabin-op-donker is dus geen schakelaar.)
 * Op navy #002454: wit 15,21:1 · papier 13,53:1 · rood-licht #FF7B7B 6,06:1 ·
 * rand-UI #868792 4,27:1. Op navy-diep: wit 17,09:1 · rood-licht 6,81:1. Op
 * navy-mid: rood-licht 4,76:1. Rood #CC0000 haalt op navy 2,58:1 en is hier dus
 * nooit tekst of lijn — alleen VULLING, met wit erop en een rood-lichte rand.
 */
.rabin-kop,
.rabin-actiebalk,
.is-style-band-navy,
.has-navy-background-color,
.has-navy-diep-background-color,
.is-style-banner > .rabin-banner-inhoud,
.is-style-banner-stil > .rabin-banner-inhoud,
.rabin-donker {
	--rabin-tekst: var( --wp--preset--color--wit );
	--rabin-kop: var( --wp--preset--color--wit );
	--rabin-zacht: var( --wp--preset--color--papier );
	--rabin-lijn: var( --wp--preset--color--navy-mid );
	--rabin-lijn-ui: var( --wp--preset--color--lijn-sterk );
	--rabin-accent: var( --wp--preset--color--rood-licht );
	--rabin-accent-op: var( --wp--preset--color--rood-licht );
	--rabin-knoprand: var( --wp--preset--color--rood-licht );
	--rabin-knop2: var( --wp--preset--color--wit );
	--rabin-knop2-op: var( --wp--preset--color--navy );
	--rabin-vlak: var( --wp--preset--color--navy-mid );
	--rabin-focus: var( --wp--preset--color--wit );

	color: var( --wp--preset--color--wit );
}

/*
 * Focusring: een accentring haalde op een fotoband 1,0-3,2:1 en naast de gevulde
 * cel in de actiebalk te weinig — onder de 3:1 van 1.4.11/2.4.11. Nu wit (>= 15,21:1
 * op donker, >= 6,78:1 op een band) met een navy halo over de 2px offset plus
 * 2px erbuiten, zodat de ring aan beide kanten navy raakt.
 */
:is( .rabin-kop, .rabin-actiebalk, .is-style-band-navy, .has-navy-background-color, .has-navy-diep-background-color, .is-style-banner, .rabin-donker )
	:focus-visible {
	--rabin-focus: var( --wp--preset--color--wit );

	box-shadow: 0 0 0 7px rgba( 0, 36, 84, 0.92 );
}

/* De accentband zelf, als een patroon hem als blokstijl zet. */
.wp-block-group.is-style-band-navy {
	background-color: var( --wp--preset--color--navy );
}

/*
 * theme.json zet koppen en links op navy; op donker moet dat wit worden. Één
 * :is()-lijst, elk lid één klasse, dus de specificiteit blijft 0-1-0.
 */
:is( .rabin-kop, .is-style-band-navy, .has-navy-background-color, .has-navy-diep-background-color, .is-style-banner, .rabin-donker )
	:is( h1, h2, h3, h4, h5, h6, figcaption, summary ) {
	color: var( --rabin-kop );
}

:is( .rabin-kop, .is-style-band-navy, .has-navy-background-color, .has-navy-diep-background-color, .is-style-banner, .rabin-donker )
	a:where( :not( .wp-element-button ) ) {
	color: var( --rabin-tekst );
}

/*
 * :active hoort hier NET ZO GOED bij als :hover en :focus: theme.json zet alle
 * drie op `oranje-diep`, en dat is nu #CC0000 — 2,58:1 op navy, 2,90:1 op
 * navy-diep. Zonder :active bleef de INGEDRUKTE link op elk donker vlak rood,
 * en op een telefoon staat die stand zolang de vinger de link raakt. Deze
 * selector haalt 0-2-1 en wint van de 0-2-0 van theme.json.
 */
:is( .rabin-kop, .is-style-band-navy, .has-navy-background-color, .has-navy-diep-background-color, .is-style-banner, .rabin-donker )
	a:where( :not( .wp-element-button ) ):is( :hover, :focus, :active ) {
	color: var( --rabin-accent-op );
}

/*
 * Op donker keert de knoppenhiërarchie om, maar dat staat nu in het rolblok
 * hierboven: --rabin-knoprand (rood-licht, 6,06:1; navy op navy is 1,00:1 en het
 * rood zelf 2,58:1) en --rabin-knop2 (wit, 15,21:1). Dat scheelde drie lange
 * :is()-lijsten (THEME-CONTRACT.md §14).
 */

/*
 * Kicker op een band: op een foto is geen accentkleur betrouwbaar. De patronen
 * vingen dat op met has-wit-color in de markup — een val voor elke nieuwe
 * kicker, dus staat wit nu hier. Het streepje blijft accent: decoratie.
 */
:is( .is-style-banner, .is-style-banner-stil )
	:is( .is-style-kicker, .rabin-kicker, .is-style-kicker-chip ) {
	color: var( --wp--preset--color--wit );
}

/*
 * Op een effen navy vlak zijn gedempt (papier, 13,53:1) en de hoverkleur van een
 * link (rood-licht, 6,06:1) allebei goed. Op een fotoband haalt papier 6,03:1
 * maar is geen accentkleur betrouwbaar, dus daar is ALLES wit — en de knoprand
 * ook (wit >= 6,78:1 op elke band, 1.4.11). Deze regel staat NA het donkere
 * blok: zelfde specificiteit, dus de volgorde beslist.
 * --rabin-accent hoort er sinds het rood bij: dat is het VINKJE van
 * is-style-vinkjes (9), dus dragend en 3:1. Rood-licht haalde op de overlay
 * 2,53-3,28:1 (0,72-verloop over een witte fotopixel), wit 6,34-8,24:1.
 * Treft home-hero.php, het enige patroon met vinkjes op een band.
 */
:is( .is-style-banner, .is-style-banner-stil ) > .rabin-banner-inhoud {
	--rabin-zacht: var( --wp--preset--color--wit );
	--rabin-accent: var( --wp--preset--color--wit );
	--rabin-accent-op: var( --wp--preset--color--wit );
	--rabin-knoprand: var( --wp--preset--color--wit );
}

/*
 * .rabin-op-licht blijft bestaan voor markup die hem al zet: hij zet de lichte
 * rollen terug, bijvoorbeeld voor een witte kaart in een navy band.
 */
.rabin-op-licht {
	--rabin-tekst: var( --wp--preset--color--inkt );
	--rabin-kop: var( --wp--preset--color--navy );
	--rabin-lijn-ui: var( --wp--preset--color--lijn-sterk );
	--rabin-zacht: var( --wp--preset--color--inkt-zacht );
	--rabin-lijn: var( --wp--preset--color--lijn );
	--rabin-accent: var( --wp--preset--color--oranje-diep );
	--rabin-accent-op: var( --wp--preset--color--oranje-diep );
	--rabin-knoprand: var( --wp--preset--color--navy );
	--rabin-knop2: var( --wp--preset--color--navy );
	--rabin-knop2-op: var( --wp--preset--color--wit );
	--rabin-vlak: var( --wp--preset--color--wit );
	--rabin-focus: var( --wp--preset--color--navy );

	color: var( --wp--preset--color--inkt );
}

/* --- 8. Beeld --- */

.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.wp-block-image.is-style-kader img {
	border: 1px solid var( --rabin-lijn );
}

.wp-block-image figcaption {
	margin-top: 0.625rem;
	margin-bottom: 0;
	color: var( --rabin-zacht );
	text-align: left;
}

/* --- 9. Lijsten en FAQ --- */

/*
 * Vinkjes: hoogstens drie korte punten per blok. Het vinkje draagt betekenis en
 * moet dus 3:1 halen: --rabin-accent is op licht 5,89:1, op donker 6,06:1.
 */
.wp-block-list.is-style-vinkjes {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.wp-block-list.is-style-vinkjes > li {
	position: relative;
	margin-bottom: 0.625rem;
	padding-left: 1.875rem;
}

.wp-block-list.is-style-vinkjes > li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.75rem;
	height: 0.4rem;
	border-left: 2px solid var( --rabin-accent );
	border-bottom: 2px solid var( --rabin-accent );
	transform: rotate( -45deg );
}

/* Lijst zonder opsommingsteken (voettekstkolommen, NAP). */
.wp-block-list.is-style-kaal {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.wp-block-list.is-style-kaal > li + li {
	margin-top: 0.4rem;
}

/* FAQ: native <details>, geen JavaScript. */
.wp-block-details {
	margin-top: 0;
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding: 0.5rem 0;
	color: var( --rabin-kop );
	cursor: pointer;
	font-size: var( --wp--preset--font-size--kop-s );
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	margin-right: 0.35rem;
	border-right: 2px solid var( --rabin-accent );
	border-bottom: 2px solid var( --rabin-accent );
	transform: rotate( 45deg ) translate( -0.15rem, -0.15rem );
	transition: transform var( --wp--custom--overgang );
}

.wp-block-details[ open ] > summary::after {
	transform: rotate( -135deg ) translate( -0.2rem, -0.2rem );
}

.wp-block-details[ open ] > summary {
	color: var( --rabin-accent );
}

.wp-block-details > :not( summary ) {
	max-width: var( --wp--custom--meet );
	margin-top: 0.25rem;
	margin-bottom: 0.75rem;
	color: var( --rabin-zacht );
}

/* --- 10. Kop en menu --- */

/*
 * Marineblauwe kopbalk op een witte pagina. De 3px onderrand is rood-licht en
 * DECORATIEF (6,06:1 tegen de balk, 2,51:1 tegen de pagina): de scheiding komt
 * van de balk zelf (15,21:1). Rood #CC0000 haalt tegen de balk 2,58:1 en valt weg.
 */
.rabin-kop {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var( --wp--preset--color--navy );
	border-bottom: 3px solid var( --wp--preset--color--rood-licht );
	transition: box-shadow var( --wp--custom--overgang );
}

/* Scrolstatus: gezet door assets/js/rabin.js. Lichte schaduw, geen zware. */
.rabin-kop.is-gescrold {
	box-shadow: 0 2px 6px rgba( 0, 36, 84, 0.14 );
}

/*
 * Het ronde embleem is een <img> met doorzichtige hoeken, dus background:none —
 * :where( img ) in 1 zou er een papierkleurig vierkant achter zetten. 48px is
 * meer dan het raakdoel van 44px, dus de opvulling van het oude woordmerk (36px)
 * kan weg; de breedte volgt uit width/height (1:1), dus geen layout shift.
 * Kop en voettekst: liggend logo, zie het blok onder .rabin-koptel.
 */
.rabin-logo {
	display: block;
	width: auto;
	height: 48px;
	background: none;
}

@media ( min-width: 48em ) {
	.rabin-logo {
		height: 60px;
	}
}

/* Telefoonlink in de kop: witte tekst, rood-lichte onderlijn (6,06:1 op navy).
   .rabin-kopofferte (alleen mobiel) deelt hem: zelfde vorm, zelfde kleuren. */
.rabin-koptel,
.rabin-kopofferte {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	border-bottom: 2px solid var( --wp--preset--color--rood-licht );
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* --- Liggend logo + belknop (29-09-2026) ---
 * 36px = 114 breed, vanaf 48em 52 = 165 (= sizes in header-hoofd.php); 0-2-0
 * wint van .rabin-logo (embleem). Onder 48em zijn Offerte en de tel-link
 * dezelfde omlijnde pil (30-09-2026): 2px rood-licht (6,06:1 op navy), binnen
 * doorzichtig, wit 15,21:1. Bel rond 44x44, nummer in .rabin-verborgen. */
.rabin-logo.rabin-logo-liggend {
	height: 36px;
}

@media ( max-width: 47.999em ) {
	.rabin-koptel,
	.rabin-kopofferte {
		box-sizing: border-box;
		justify-content: center;
		border: 2px solid var( --wp--preset--color--rood-licht );
		border-radius: var( --wp--custom--radius--normaal ); /* zelfde hoek als de menuknop */
	}

	.rabin-koptel {
		width: 44px;
	}
}

@media ( min-width: 48em ) {
	.rabin-logo.rabin-logo-liggend {
		height: 52px;
	}
}
/* --- einde liggend logo --- */

/* --- Mobiele kop: logo | Offerte | bel | Menu (29-09-2026) ---
 * 114 + 87 + 44 + 44 + 3 x 8 = 313 van 320 (360 breed). NIET sticky en niet
 * meer wegschuiven (eigenaar, 30-09-2026: "niet sticky, hij blijft daar
 * gewoon"): de onderbalk heeft de knoppen zodra de kop uit beeld is. */
@media ( max-width: 47.999em ) {
	.rabin-kop {
		position: relative;
	}

	.rabin-kop .alignwide {
		gap: 0.5rem;
	}

	/* Logo links, Offerte + bel + Menu samen rechts. 0-2-0: WordPress zet de
	   marge met .is-layout-flex > :is( *, div ) (0-1-1) op 0. */
	.rabin-kop .rabin-kopofferte {
		margin-left: auto;
		padding: 0 0.5rem;
		gap: 0.375rem;
		font-size: var( --wp--preset--font-size--klein );
	}

	/* 0-2-0: de basisregel staat hieronder. */
	.rabin-kop .rabin-menu-knop {
		box-sizing: border-box;
		justify-content: center;
		width: 44px;
		padding: 0;
	}
}
/* --- einde mobiele kop --- */

/* Menuknop: alleen zichtbaar onder 64em. currentColor is hier wit (15,21:1). */
.rabin-menu-knop {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0.4rem 0.75rem;
	background: none;
	border: 1px solid currentColor;
	border-radius: var( --wp--custom--radius--normaal );
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 700;
}

.rabin-menu-streep {
	display: block;
	position: relative;
	width: 20px;
	height: 11px;
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.rabin-menu-streep::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 100%;
	border-top: 2px solid currentColor;
}

/*
 * Zonder JavaScript staat het menupaneel open en blijft de navigatie bruikbaar.
 * Zodra rabin.js draait krijgt <html> de klasse rabin-js (inline in de <head>,
 * geen flikkering) en neemt de knop het over. Boven 64em geen knop.
 */
@media ( max-width: 63.999em ) {
	.rabin-js .rabin-menu-paneel {
		display: none;
	}

	.rabin-js .rabin-menu-paneel.is-open {
		display: revert;
	}
}

@media ( min-width: 64em ) {
	.rabin-menu-knop {
		display: none;
	}
}

.rabin-menu-paneel a {
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.rabin-menu-paneel a:hover,
.rabin-menu-paneel a:focus {
	text-decoration: underline;
}

/*
 * De open pagina (aria-current="page", uit inc/navigatie.php). Menu en
 * voetnavigatie staan op donker, waar --rabin-accent rood-licht is: 6,06:1
 * (navy) en 6,81:1 (navy-diep). De onderlijn maakt het verschil niet alleen kleur.
 *
 * GEEN border-bottom: die landt onder het VAK van de link, en dat vak is 44px
 * hoog door het raakdoel (.rabin-menu-paneel a hierboven en
 * .wp-site-blocks > footer a in §15). Gemeten op /over-ons/ bij 390px stond het
 * streepje daardoor 25px onder "Over ons" en maar 10px boven "Contact" — het
 * las als de markering van Contact. Een onderstreping volgt de letters zelf en
 * blijft aan het woord vastzitten, hoe hoog het raakdoel ook is.
 */
.wp-block-navigation a[aria-current="page"] {
	text-decoration-line: underline;
	text-decoration-color: var( --rabin-accent );
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* --- 11. Vaste actiebalk (mobiel) --- */

/*
 * rabin.js zet is-zichtbaar zodra de hero voorbij is en haalt hem pas weg als
 * de kop bovenaan weer in beeld komt; scrollrichting doet niets (eigenaar,
 * 30-09-2026, contract §9). Links Offerte
 * (rood, WIT 5,89:1), rechts Bellen (navy, wit 15,21:1). Het verloop kleurt
 * de safe-area-strook onder elke cel mee.
 */
.rabin-actiebalk {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 45;
	background: linear-gradient( 90deg, var( --wp--preset--color--oranje ) 50%, var( --wp--preset--color--navy ) 0 );
	border-top: 3px solid var( --wp--preset--color--rood-licht );
	padding-bottom: env( safe-area-inset-bottom );
	transition: transform var( --wp--custom--overgang ), visibility var( --wp--custom--overgang );
}

/* Weg: onder het scherm en na de overgang visibility:hidden, dus niet
   focusbaar. Alleen binnen .rabin-js: zonder script blijft hij staan. */
.rabin-js .rabin-actiebalk:not( .is-zichtbaar ) {
	transform: translateY( 100% );
	visibility: hidden;
}

.rabin-actiebalk nav {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
}

.rabin-actiebalk nav a {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	min-height: 56px;
	padding: 0.375rem 0.25rem;
	color: var( --wp--preset--color--wit );
	font-size: var( --wp--preset--font-size--basis );
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

/* Eerste cel = CTA: rood, WITTE tekst (navy haalt er 2,58:1). */
.rabin-actiebalk nav a:first-child {
	background-color: var( --wp--preset--color--oranje );
}

.rabin-actiebalk small {
	font-size: var( --wp--preset--font-size--micro );
	font-weight: 400;
}

/*
 * "Naar boven" hangt aan de bovenrand van de balk, dus nooit erover, en komt
 * en gaat met de balk (rabin.js). Navy vlak (15,21:1 op wit, 13,53:1 op
 * papier), 3px rood-licht rand zoals kop en balk (6,06:1 op navy, 6,81:1 op
 * navy-diep), witte pijl 15,21:1: vlak of rand haalt overal 3:1 (1.4.11).
 */
.rabin-naarboven {
	position: absolute;
	right: 1rem;
	bottom: calc( 100% + 1rem );
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	background-color: var( --wp--preset--color--navy );
	border: 3px solid var( --wp--preset--color--rood-licht );
	border-radius: 50%;
	color: var( --wp--preset--color--wit );
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --wp--custom--overgang ), visibility var( --wp--custom--overgang );
}

.rabin-naarboven.is-zichtbaar {
	opacity: 1;
	visibility: visible;
}

@media ( min-width: 48em ) {
	.rabin-actiebalk {
		display: none;
	}
}

/*
 * Ruimte onderaan: balk 59 + 1 = 60px + safe area (was 135: grote lege
 * strook, eigenaar 30-09-2026). De knop "naar boven" staat rechts; de onderste
 * voettekstregels staan daarom links onder elkaar (§19). Op de voettekst, niet
 * op body. Idem scroll-padding-bottom voor Tab-focus (WCAG 2.4.11).
 */
@media ( max-width: 47.999em ) {
	html {
		scroll-padding-bottom: calc( 60px + env( safe-area-inset-bottom ) );
	}

	.wp-site-blocks > footer {
		background-color: var( --wp--preset--color--navy-diep );
		padding-bottom: calc( 60px + env( safe-area-inset-bottom ) );
	}
}

/* --- 12. Video (klik om te spelen) --- */

.rabin-video {
	position: relative;
	display: block;
	margin: 0;
	background-color: var( --wp--preset--color--papier );
}

.rabin-video img,
.rabin-video video {
	display: block;
	width: 100%;
	height: auto;
}

.rabin-video-knop {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	background: none;
	border: none;
	color: var( --wp--preset--color--navy );
	cursor: pointer;
	font: inherit;
}

/*
 * Beide pseudo-elementen liggen in dezelfde rastercel: rode schijf, 2px navy
 * ring, daarbuiten een witte ring. Die witte ring is nodig — op de poster
 * alleen haalde de beste grens op één punt nog 2,45:1. Navy en wit kunnen niet
 * allebei zakken (samen altijd >= 3,94:1), dus de knop begrenst zich op elk
 * beeld (WCAG 1.4.11). Het driehoekje is WIT: navy haalt op rood 2,58:1 en dat
 * pijltje zegt wat de knop doet.
 */
.rabin-video-knop::before {
	content: "";
	grid-area: 1 / 1;
	width: 4.5rem;
	height: 4.5rem;
	background-color: var( --wp--preset--color--oranje );
	border: 2px solid var( --wp--preset--color--navy );
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.95 );
}

.rabin-video-knop::after {
	content: "";
	grid-area: 1 / 1;
	width: 0;
	height: 0;
	margin-left: 0.45rem;
	border-top: 0.85rem solid transparent;
	border-bottom: 0.85rem solid transparent;
	border-left: 1.4rem solid var( --wp--preset--color--wit );
}

.rabin-video-label {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0.625rem 0.875rem;
	background-color: var( --wp--preset--color--navy );
	color: var( --wp--preset--color--wit );
	font-size: var( --wp--preset--font-size--klein );
	text-align: left;
}

/* --- 13. Hulpklassen --- */

.rabin-meet {
	max-width: var( --wp--custom--meet );
}

.rabin-meet-kort {
	max-width: var( --wp--custom--meetkort );
}

.rabin-alleen-desktop {
	display: none;
}

@media ( min-width: 48em ) {
	.rabin-alleen-mobiel {
		display: none;
	}

	.rabin-alleen-desktop {
		display: revert;
	}
}

/* Alleen voor schermlezers (naast de kernklasse screen-reader-text). */
.rabin-verborgen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/*
 * NAP-blok: label boven waarde, cijfers uitgelijnd. Bij 200% tekstzoom op
 * 390px brak 'facebook.com/rabin.stuk' niet: de rasterkolom werd 352px in een
 * vak van 310 en het laatste teken viel 2px buiten beeld zonder schuifbalk
 * (WCAG 1.4.4). 'anywhere' telt wél mee in de min-content-maat, de geërfde
 * break-word van body niet. Op 100% verandert er niets, gemeten 360-1440.
 */
.rabin-nap {
	display: grid;
	gap: 0.875rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.rabin-nap > div {
	display: grid;
	gap: 0.1rem;
}

.rabin-nap dt {
	color: var( --rabin-zacht );
	font-size: var( --wp--preset--font-size--micro );
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rabin-nap dd {
	margin: 0;
}

/* 44px raakvlak: gemeten was de telefoonlink in de NAP-lijst 32px hoog. */
.rabin-nap a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * LET OP — GEEN schakelaar meer: hij zet alleen de tekstrol terug, licht of
 * donker naar gelang de achtergrond (7). has-wit-color is dat NIET: WordPress
 * drukt die af met !important, dus een blok dat has-wit-color houdt terwijl zijn
 * navy achtergrond verdwijnt wordt onleesbaar. Haal die klasse samen met
 * has-navy-background-color uit de markup.
 */
.rabin-op-donker {
	color: var( --rabin-tekst );
}

.rabin-gedempt {
	color: var( --rabin-zacht );
}

/* --- 14. Beweging --- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	html {
		scroll-behavior: smooth;
	}
}

/* --- 15. Mobiel raster en raakdoelen --- */

/*
 * .rabin-raster-2: twee kolommen op mobiel (scheelt bij diensten en projecten
 * ~5.100px). De grid-instelling van het blok blijft staan, dus desktop houdt drie
 * kolommen. minmax( 0, 1fr ), anders duwt een brede foto de kolom te breed.
 */
@media ( max-width: 47.999em ) {
	.rabin-raster-2 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.rabin-raster-2 .is-style-kaart {
		padding: 0.875rem;
	}
}

/*
 * Raakdoelen. Gemeten was de tel-link in een FAQ-antwoord 97x22, de
 * voettekstlinks 32 en de Facebook-link 60x19. §13.11 van het contract eist
 * minstens 24px op ELKE breedte (44px voor primaire en mobiele bediening), dus
 * deze twee regels staan BEWUST BUITEN de mediaquery hierboven. Stonden ze
 * erbinnen, dan viel vanaf 768px "Facebook" terug naar 60x19, "Privacyverklaring"
 * naar 100x18 en de tel-link in de FAQ naar 97x22 — alle drie onder de 24.
 * 44px is hier hetzelfde getal als bij .rabin-nap a, .rabin-koptel,
 * .rabin-menu-knop en .wp-block-details summary, die ook op elke breedte gelden.
 * Gemeten na deze verplaatsing: op 768 en 1440 geen voettekstlink meer onder
 * 24px, de voetbandhoogte blijft gelijk (het voetmenu groeit 152 -> 252px, maar
 * de NAP-kolom ernaast was al hoger) en de paginahoogte verandert niet.
 */
.wp-site-blocks > footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* In een FAQ-antwoord staat de link MIDDEN in een zin: inline-flex zou hem
   onbreekbaar maken. Opvulling telt ook mee: 22px hoog + 2 x 11 = 44. Op een
   inline element verandert opvulling de regelhoogte niet, dus dit verschuift
   ook op desktop niets. */
.wp-block-details p a {
	padding-block: 11px;
}

/* --- 16. Renderbudget --- */

/*
 * Wat buiten het scherm staat slaat de browser over. Gemeten (snelheid.md §3.1):
 * LCP 1.120 -> 820 ms, langste taak 330 -> 0 ms, CLS blijft 0. BEWUST erbuiten:
 * het eerste kind van main (het LCP-element) en de sectie met de haak
 * actiebalk-stop — een overgeslagen deelboom heeft geen maten, dus
 * getBoundingClientRect geeft daar nul en de vaste balk zou verborgen blijven
 * (rabin.js). SINDS 29-09-2026 INERT: rabin.js meet dat niet meer. Zonder
 * :has() vervalt de regel: kost snelheid, breekt niets.
 * `auto` bewaart de laatste hoogte, zodat een ankersprong daarna landt.
 */
main.wp-block-group > :nth-child( n + 2 ):not( :has( [data-rabin="actiebalk-stop"] ) ):not( #ervaringen ),
.wp-site-blocks > footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 800px;
}

/* Op papier niets overslaan, anders komt de halve pagina er niet op. */
@media print {
	main.wp-block-group > *,
	.wp-site-blocks > * {
		content-visibility: visible;
	}
}

/*
 * HERO OP MOBIEL: op een smal scherm valt van de brede foto alleen het midden
 * te zien, en dat was de kale muur links. Richt de uitsnede op de rechterkant,
 * zodat het raam en de kamer achter de tekst in beeld staan.
 */
@media ( max-width: 47.999em ) {
	.wp-block-group.rabin-hero > .rabin-banner-beeld img {
		object-position: 82% 50%;
	}
}

/* --- 17. Google-reviewwidget (patterns/home-reviews.php) --- */

/* Wit op #1A73E8 4,51:1 (hover #1765CC 5,57:1); grijs #5F6368 6,05:1 op wit,
   5,38:1 op papier; pijl #3C4043 10,47:1 op wit. Kaart 85% breed (je ziet er
   meer), vanaf 48em twee, vanaf 64em drie met de pijlen opzij. */
.rabin-gr :is( p, blockquote, figure, ul ) {
	margin: 0;
}

.rabin-gr-kop,
.rabin-gr-merk,
.rabin-gr-score,
.rabin-gr-wie,
.rabin-gr-wie div,
.rabin-gr .rabin-gr-bron {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	color: #5f6368;
}

.rabin-gr-kop {
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.rabin-gr-merk {
	font-size: 1.375rem;
	font-weight: 600;
}

.rabin-gr-getal {
	color: #202124;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.rabin-gr .rabin-gr-knop {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5rem;
	border-radius: 4px;
	background: #1a73e8;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.rabin-gr .rabin-gr-knop:hover {
	background: #1765cc;
}

.rabin-gr-rij {
	display: flex;
	position: relative;
	gap: 1rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding: 0 0 0.5rem;
	list-style: none;
}

.rabin-gr-kaart {
	display: flex;
	flex: 0 0 85%;
	scroll-snap-align: start;
}

.rabin-gr figure {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 12px;
	color: #3c4043;
}

.rabin-gr-wie {
	flex-wrap: nowrap;
	gap: 0.75rem;
	font-size: 0.875rem;
}

.rabin-gr-wie b {
	flex-basis: 100%;
	color: #202124;
	font-size: 1rem;
}

.rabin-gr-av {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
}

.rabin-gr-lang p {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.rabin-gr-meer {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	min-height: 44px;
	margin-top: -0.75rem;
}

.rabin-gr .rabin-gr-bron {
	margin-top: auto;
	font-size: 0.875rem;
}

.rabin-gr-bron b {
	color: #1a73e8;
}

.rabin-gr-pijlen {
	text-align: center;
}

.rabin-gr-pijlen button {
	width: 44px;
	height: 44px;
	margin: 0.75rem 0.25rem 0;
	border: 1px solid #dadce0;
	border-radius: 50%;
	background: #fff;
	color: #3c4043;
	cursor: pointer;
}

@media ( min-width: 48em ) {
	.rabin-gr .rabin-gr-knop {
		flex: none;
	}

	.rabin-gr-kaart {
		flex-basis: calc( 50% - 0.5rem );
	}
}

@media ( min-width: 64em ) {
	.rabin-gr-baan {
		position: relative;
		padding: 0 56px;
	}

	.rabin-gr-kaart {
		flex-basis: calc( ( 100% - 2rem ) / 3 );
	}

	.rabin-gr-pijlen button {
		position: absolute;
		top: 50%;
		left: 0;
		margin: -22px 0 0;
	}

	.rabin-gr-pijlen button + button {
		right: 0;
		left: auto;
	}
}

/* --- 18. Compacte diensten (29-09-2026, patterns/home-diensten.php) --- */

/*
 * Onder 48em: foto randloos 4:3 (--rabin-verhouding leest de inline stijl van
 * de img; desktop blijft 4:5). 390x844: raster 743px = 0,88 scherm.
 * !important: de sectiepadding staat inline.
 */
@media ( max-width: 47.999em ) {
	.rabin-compact {
		--rabin-verhouding: 4 / 3;

		padding-block: var( --wp--preset--spacing--60 ) !important;
	}

	.rabin-compact .rabin-raster-2 {
		gap: 0.75rem;
	}

	.rabin-compact .is-style-kaart {
		gap: 0.5rem;
		overflow: hidden;
		padding: 0 0 0.625rem;
	}

	.rabin-compact .is-style-kaart > :not( figure ) {
		margin-inline: 0.625rem;
	}

	.rabin-compact h3 {
		font-size: var( --wp--preset--font-size--basis );
	}

	.rabin-compact .wp-block-button__link {
		min-height: 44px;
		padding: 0.5rem;
		font-size: var( --wp--preset--font-size--klein );
	}
}

/* --- 19. Voettekst: onder elkaar, compact, met lijnen (30-09-2026, patterns/footer-hoofd.php) --- */

/*
 * Eigenaar: "alles onder elkaar, wel compact", met lijnen ALLEEN tussen de
 * blokken (logo / menu / contact / onderregel), NIET per link of per regel
 * ("niet voor elke link een lijn"). Label links, waarde rechts, zodat een rij
 * één raakvlak hoog blijft. De links houden hun 44px, maar met -10px marge
 * boven en onder tellen ze in de rij maar voor 24px mee.
 */
.wp-site-blocks > footer .rabin-nap {
	gap: 0;
}

.wp-site-blocks > footer .rabin-nap > div {
	grid-template-columns: 6.5rem minmax( 0, 1fr );
	align-items: baseline;
	column-gap: 0.75rem;
	padding-block: 0.375rem;
}

.wp-site-blocks > footer .rabin-nap dt {
	white-space: nowrap;
}

.wp-site-blocks > footer .rabin-nap a {
	margin-block: -10px;
}

.wp-site-blocks > footer :is( .wp-block-navigation, .wp-block-navigation__container ) {
	align-items: stretch;
	width: 100%;
}

/* Onder 48em: één kolom, een lijn tussen logo, menu en contact. Ruimtematen
   80 en 60 worden 32 en 24px (patroonwaarden staan inline: via de variabele). */
@media ( max-width: 47.999em ) {
	.wp-site-blocks > footer {
		--wp--preset--spacing--80: 2rem;
		--wp--preset--spacing--60: 1.5rem;
	}

	.wp-site-blocks > footer .is-layout-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.wp-site-blocks > footer .is-layout-grid > * + * {
		padding-top: 1.5rem;
		border-top: 1px solid var( --rabin-lijn );
	}

	/* Copyright en privacy links onder elkaar: rechts staat de knop "naar boven". */
	.wp-site-blocks > footer .rabin-lijn-boven {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
}