/* ==========================================================================
   Hoitsema – aanvullende stijlen bovenop theme.json
   Alles wat theme.json niet kan uitdrukken staat hier. Bewust kort gehouden.
   ========================================================================== */

:root {
	--hoi-transition: 180ms cubic-bezier(.2, .6, .3, 1);
	--hoi-radius: 6px;

	/* Groen voor het menu-item Duurzaamheid. Zelfde contrastniveau als het
	   donkere cyaan: 5,4:1 op wit en 5,0:1 op lichtgrijs. De donkere
	   tegenhanger staat in donker.css. */
	--hoi-groen: #0f7a34;
}

* { -webkit-font-smoothing: antialiased; }

/* --- Toegankelijkheid ---------------------------------------------------- */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font: 600 1rem/1 var(--wp--preset--font-family--heading);
}
.skip-link.screen-reader-text:focus { left: 1rem; top: 1rem; }

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

/* --- Bovenkopje (eyebrow) ----------------------------------------------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: .75rem !important;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
	margin-bottom: .75rem;
}
.is-style-eyebrow.has-base-color { color: var(--wp--preset--color--accent); }

/* --- Introtekst --------------------------------------------------------- */
.is-style-lead {
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	max-width: 62ch;
}

/* --- Kaarten ------------------------------------------------------------ */
.wp-block-group.is-style-card,
.wp-block-group.is-style-card-hover {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hoi-radius);
}
.wp-block-group.is-style-card-hover {
	transition: border-color var(--hoi-transition), box-shadow var(--hoi-transition), transform var(--hoi-transition);
}
.wp-block-group.is-style-card-hover:hover,
.wp-block-group.is-style-card-hover:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--soft);
	transform: translateY(-2px);
}
.wp-block-group.is-style-card-hover .wp-block-heading a { color: inherit; text-decoration: none; }
.wp-block-group.is-style-card-hover:hover .wp-block-heading a { color: var(--wp--preset--color--accent-2); }

/* --- Kaartenraster ------------------------------------------------------
   Twee kolommen op tablet en desktop, één op mobiel. Als raster (en niet als
   twee rijen kolommen) blijven de kaarten even hoog en blijft de rij netjes
   ook als er een kaart bij komt of af gaat. */
.hoi-kaartraster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}
@media (min-width: 782px) {
	.hoi-kaartraster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.hoi-kaartraster > .wp-block-group { margin: 0; }

/* --- Kolommen met scheidingslijn --------------------------------------- */
@media (min-width: 782px) {
	.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--border);
		padding-left: var(--wp--preset--spacing--30);
	}
	.wp-block-columns.is-style-divided.has-navy-background-color > .wp-block-column + .wp-block-column,
	.has-navy-background-color .wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
		border-left-color: rgba(255, 255, 255, .18);
	}
}

/* --- Beeldverhoudingen -------------------------------------------------- */
.wp-block-image.is-style-ratio-4-3 img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* --- Archivo: alleen nog voor het woordmerk in het logo ------------------
   De site staat in Outfit (theme.json). Het woordmerk is een benadering van
   het echte logo en blijft daarom in Archivo staan: dat komt dichter bij de
   DIN Pro Bold van de huidige site. Zodra de officiële SVG er is, kan dit
   blok samen met de twee Archivo-bestanden weg. Relatieve url() ten opzichte
   van dit bestand, dus geen absolute URL die per omgeving verschilt. */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
}

/* --- Logo (wordmark in CSS; vervang door officiële SVG) ---------------- */
.hoi-logo { display: inline-flex; flex-direction: column; gap: .1rem; line-height: 1; text-decoration: none; }
.hoi-logo:hover { text-decoration: none; }
/* Beeldmerk: drie stippen met de balk eronder, in de verhoudingen uit het
   logo (stippen 182, balk 528 x 104, viewBox strak om het merk heen). Als
   SVG in plaats van losse CSS-stippen, zodat de verhoudingen kloppen op elke
   grootte. */
.hoi-logo__mark {
	display: block;
	width: 2.1em;
	margin: 0 auto .34em;
	color: var(--wp--preset--color--accent);
	line-height: 0;
}
.hoi-logo__mark svg { display: block; width: 100%; height: auto; }
.hoi-logo__word {
	font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(1.05rem, 2.2vw, 1.4rem);
	letter-spacing: -.02em;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}
.hoi-logo__word em { font-style: normal; color: var(--wp--preset--color--contrast-2); font-weight: 600; }
.hoi-logo__since {
	font-family: var(--wp--preset--font-family--heading);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
	text-align: right;
}

/* --- Taalschakelaar in de header ---------------------------------------
   Tijdelijk; Polylang genereert deze schakelaar straks zelf. */
.hoi-lang {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
}
.hoi-lang a { color: var(--wp--preset--color--contrast-2); text-decoration: none; }
.hoi-lang a:hover { color: var(--wp--preset--color--accent-2); text-decoration: underline; }
.hoi-lang__sep { color: var(--wp--preset--color--border); }
.hoi-lang__current { color: var(--wp--preset--color--contrast); }

/* --- Header ------------------------------------------------------------- */
.hoi-header { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--border); }


/* Meeschuiven bij scrollen.
   Het sticky-element is de omhullende div van het template part, niet
   .hoi-header zelf. WordPress zet elk template part in zo'n div, en die is
   precies zo hoog als de header. Een sticky kind kan nooit buiten zijn ouder
   blijven staan: met sticky op .hoi-header schuift de balk mee naar boven en
   zie je halverwege alleen de onderste helft van het logo.

   Die div krijgt de klasse `hoi-plakbalk` mee vanuit de templates
   (`wp:template-part … "className":"hoi-plakbalk"`). Dat is bewust een eigen
   klasse en geen :first-child of :has(): dan hangt het niet af van de
   DOM-structuur, die een plugin of een volgende WordPress-versie kan
   veranderen. */
.hoi-plakbalk {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Reserveregel voor het geval de klasse er niet op zit: als iemand een template
   in de Site Editor bewerkt, komt die versie uit de database en niet meer uit
   het themabestand. Aparte regel, want een browser zonder :has() negeert een
   hele selectorlijst waarin :has() voorkomt. */
.wp-site-blocks > .wp-block-template-part:has(> .hoi-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.hoi-header .wp-block-navigation a { color: var(--wp--preset--color--contrast); }
.hoi-header .wp-block-navigation .current-menu-item > a,
.hoi-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent-2); }
/* De "u bent hier"-streep neemt de tekstkleur over (currentColor). Zo klopt
   hij automatisch in de lichte en donkere stand én bij het groen van
   Duurzaamheid, en heeft de streep altijd hetzelfde contrast als de tekst
   die erboven staat. */
.hoi-header .wp-block-navigation .current-menu-item > a { box-shadow: inset 0 -2px 0 0 currentColor; }

/* Duurzaamheid krijgt groen bij hover, toetsenbordfocus, indrukken en als je
   op die pagina staat. De onderstreping gaat mee, anders zou kleur alleen het
   verschil maken (WCAG 1.4.1). */
.hoi-header .wp-block-navigation .hoi-nav--groen > a:hover,
.hoi-header .wp-block-navigation .hoi-nav--groen > a:focus-visible,
.hoi-header .wp-block-navigation .hoi-nav--groen > a:active,
.hoi-header .wp-block-navigation .hoi-nav--groen.current-menu-item > a {
	color: var(--hoi-groen);
}
.hoi-header .wp-block-navigation .hoi-nav--groen > a:focus-visible {
	outline-color: var(--hoi-groen);
}

/* --- Het uitklapmenu -----------------------------------------------------
   De navigatie staat op de balk rechts uitgelijnd. In het uitklapmenu erft
   core die uitlijning: dan stonden alle items met de rechterkant tegen de
   schermrand, zonder marge. In de flap lijnen ze links uit, met dezelfde
   zijmarge als de rest van de site. */
@media (max-width: 1219px) {
	.hoi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.hoi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.hoi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		align-items: flex-start;
	}
	.hoi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding: 4.5rem clamp(1.25rem, 5vw, 2rem) 2rem;
	}
	.hoi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 1.15rem;
	}
}

/* --- Kenmerkenbalk onder de hero --------------------------------------- */
.hoi-facts { border-top: 1px solid var(--wp--preset--color--border); border-bottom: 1px solid var(--wp--preset--color--border); }
.hoi-facts p { margin: 0; }
.hoi-facts strong { font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: -.01em; }

/* --- Accentlijn boven een processtap ----------------------------------
   Vervangt het oude "STAP 01"-label: dezelfde visuele scheiding, zonder de
   nummering die niets toevoegde. */
.hoi-step__rule {
	display: block;
	border-top: 2px solid var(--wp--preset--color--accent);
	margin-bottom: 1.15rem;
}

/* --- Kerncijfers -------------------------------------------------------- */
.hoi-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	display: block;
	margin-bottom: .4rem;
}

/* --- Donkere secties ---------------------------------------------------- */
.has-navy-background-color :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.has-navy-background-color p { color: rgba(255, 255, 255, .82); }
.has-navy-background-color .is-style-lead { color: rgba(255, 255, 255, .82); }
.has-navy-background-color a:not(.wp-element-button) { color: #7fd6ec; }

/* --- Nieuws (query loop) ----------------------------------------------- */
.hoi-news .wp-block-post-title { font-size: var(--wp--preset--font-size--large); }
.hoi-news .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.hoi-news .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-2); }
.hoi-news .wp-block-post-date { font-size: .8125rem; color: var(--wp--preset--color--contrast-2); }
.hoi-news .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; }

/* --- Footer ------------------------------------------------------------- */
.hoi-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.hoi-footer a:hover { color: #fff; text-decoration: underline; }
.hoi-footer h2, .hoi-footer h3 {
	font-size: .75rem !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(255, 255, 255, .55) !important;
}
.hoi-footer .hoi-logo__word { color: #fff; }
.hoi-footer .hoi-logo__word em { color: rgba(255, 255, 255, .6); }
.hoi-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; }

/* --- Contactformulier (Forminator) --------------------------------------
   De formulierstijl van Forminator staat op "Basisstijlen": de plugin levert
   dan alleen de structuur en erft de rest van het thema. Dat is bewust — met
   zijn eigen stijl schrijft Forminator CSS met een id-selector
   (#forminator-module-68), en daar komt geen themaregel meer bovenuit, ook
   niet met !important. Met "Basisstijlen" is dit gewone CSS zonder trucs.

   Randen van invoervelden zijn UI-componenten: die hebben 3:1 contrast nodig
   (WCAG 1.4.11), niet de 1,8:1 van een decoratief lijntje. #7d858d haalt
   3,7:1 op wit. */
.hoi-formulier .forminator-row { margin-bottom: 1.1rem; }
.hoi-formulier .forminator-row-last { margin-bottom: 0; }
.hoi-formulier .forminator-field { display: flex; flex-direction: column; gap: .35rem; }

.hoi-formulier .forminator-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.hoi-formulier .forminator-required { margin-left: .15rem; color: #b4232a; }

.hoi-formulier .forminator-input,
.hoi-formulier .forminator-textarea,
.hoi-formulier .forminator-select--field {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	font: 400 1.0625rem/1.5 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid #7d858d;
	border-radius: var(--hoi-radius);
	transition: border-color var(--hoi-transition);
}
.hoi-formulier .forminator-textarea { min-height: 9rem; resize: vertical; }
.hoi-formulier .forminator-input::placeholder,
.hoi-formulier .forminator-textarea::placeholder {
	color: var(--wp--preset--color--contrast-2);
	opacity: 1;
}
.hoi-formulier .forminator-input:hover,
.hoi-formulier .forminator-textarea:hover,
.hoi-formulier .forminator-select--field:hover { border-color: #5f676f; }
.hoi-formulier .forminator-input:focus,
.hoi-formulier .forminator-textarea:focus,
.hoi-formulier .forminator-select--field:focus {
	border-color: var(--wp--preset--color--accent-2);
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 1px;
}

/* Toestemmingsvinkje: het eigen vakje van Forminator uit, het echte
   selectievakje aan — dat werkt met toetsenbord en schermlezer zonder extra
   CSS, en accent-color geeft het de huisstijlkleur. */
.hoi-formulier .forminator-checkbox {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font: 400 1rem/1.5 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
}
.hoi-formulier .forminator-checkbox input {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: .2rem 0 0;
	accent-color: var(--wp--preset--color--accent-2);
}
.hoi-formulier .forminator-checkbox-box { display: none; }

.hoi-formulier .forminator-button-submit {
	align-self: flex-start;
	padding: .9rem 1.6rem;
	font: 600 var(--wp--preset--font-size--small)/1.2 var(--wp--preset--font-family--heading);
	color: #0d1b21;
	background-color: var(--wp--preset--color--accent);
	border: 1px solid #0d90a6;
	border-radius: var(--hoi-radius);
	cursor: pointer;
	transition: background-color var(--hoi-transition), border-color var(--hoi-transition);
}
.hoi-formulier .forminator-button-submit:hover {
	background-color: #0e9cb5;
	border-color: #0b7688;
}
.hoi-formulier .forminator-button-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
}

.hoi-formulier .forminator-error-message {
	color: #b4232a;
	font: 400 .875rem/1.4 var(--wp--preset--font-family--body);
}
.hoi-formulier .forminator-response-message {
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hoi-radius);
}
.hoi-formulier .forminator-field-captcha { margin-top: .25rem; }

/* --- Statische kaart ----------------------------------------------------
   Staat op de eigen server, dus geen verzoek naar buiten en geen
   cookiebanner nodig. De maten staan als attribuut op de <img>, zodat de
   pagina niet verschuift terwijl de afbeelding laadt. */
.hoi-kaart {
	margin: var(--wp--preset--spacing--30) 0 0;
}
.hoi-kaart img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hoi-radius);
}
.hoi-kaart figcaption {
	margin-top: .5rem;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Placeholder-beeld (tot echte fotografie beschikbaar is) ----------- */
.hoi-ph {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(135deg, rgba(24, 165, 205, .14), rgba(2, 45, 65, .10)),
		repeating-linear-gradient(45deg, #eef1f3 0 12px, #e7ebee 12px 24px);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--hoi-radius);
}
.hoi-ph[data-ratio="16-9"] { aspect-ratio: 16 / 9; }
.hoi-ph[data-ratio="1-1"]  { aspect-ratio: 1 / 1; }
.hoi-ph[data-ratio="3-4"]  { aspect-ratio: 3 / 4; }
.hoi-ph::after {
	content: attr(data-label);
	position: absolute;
	inset: auto 0 0 0;
	padding: .6rem .8rem;
	font: 600 .6875rem/1.3 var(--wp--preset--font-family--heading);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
	background: rgba(255, 255, 255, .78);
}

/* --- Kleine schermen ---------------------------------------------------- */
/* --- Header in twee trappen ---------------------------------------------
   Gemeten breedtes in Outfit: logo 232, menu 678, taalschakelaar 52,
   themaknop 38 px, plus tussenruimtes van 24/28 px en 2 x 32 px zijmarge.
   Onder dat punt klapt het menu in naar de hamburger, anders wordt de header
   twee regels hoog — en hij is sticky. Core klapt standaard pas bij 600 px
   in, wat hier veel te laat is. De CTA-knop die hier eerder stond is op
   verzoek van de site gehaald; daarmee is de derde trap vervallen.

   Het breekpunt ligt op 1219 px en niet op de krappe 1179 px die met Outfit
   nog net past. Reden: font-display: swap laat de eerste render in de
   fallback (Helvetica Neue / Arial) zien, en die letters zijn breder. Bij
   1180 px blijft daar maar 6 px ruimte over, bij 1220 px ruim 40 px. Zonder
   die marge wipt de header tijdens het laden even naar twee regels. */
@media (max-width: 1219px) {
	.hoi-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.hoi-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.hoi-header > .wp-block-group.alignwide {
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
}

@media (max-width: 781px) {
	/* Op telefoon ook de taalschakelaar weg; die komt in het uitklapmenu
	   zodra Polylang staat. */
	.hoi-lang { display: none; }

	/* Kenmerkenbalk: 2 x 2 in plaats van vier smalle kolommen. */
	.hoi-facts .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		gap: 1.25rem 1rem;
	}
	.hoi-facts .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
		flex-grow: 0;
	}

	/* Kerncijfers in de donkere sectie ook naast elkaar houden, maar ruimer. */
	.has-navy-background-color .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		gap: 1.5rem 1rem;
	}
	.has-navy-background-color .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
		flex-grow: 0;
	}

	/* Iets minder verticale lucht op telefoon. */
	.hoi-ph { max-height: 60vh; }
}

/* Zorg dat de sticky header niet over een anchor-doel valt. */
:target { scroll-margin-top: 6rem; }

/* --- Secundaire (outline) knop -----------------------------------------
   Core zet bij is-style-outline de tekstkleur op currentColor, waardoor de
   randkleur de tekstkleur werd (contrast 1,2:1). Hier expliciet vastgezet. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid #c3c9ce;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
}
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--navy);
}

/* --- Links in tekst: onderstreept, niet alleen kleurverschil (WCAG 1.4.1) - */
main :where(p, li, dd, figcaption) a:not(.wp-element-button):not(.wp-block-navigation-item__content) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
main :where(p, li, dd, figcaption) a:not(.wp-element-button):hover {
	text-decoration-color: currentColor;
}
/* Footer: linkkolommen zijn lijsten van losse links, geen doorlopende tekst.
   Daar zijn bolletjes en onderstrepingen alleen ruis; hover blijft duidelijk. */
.hoi-footer ul.wp-block-list { list-style: none; margin: 0; padding: 0; }
.hoi-footer :where(p, li) a { text-decoration: none; }
.hoi-footer :where(p, li) a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}


/* In de donkere footer moet het "Since 1653"-regeltje juist lichter zijn. */
.hoi-footer .hoi-logo__since { color: var(--wp--preset--color--accent); }

/* --- Afronding: alle afbeeldingen, velden en knoppen ---------------------
   De knopradius komt uit theme.json; hier de rest, zodat beeld en formulier
   hetzelfde ritme volgen. */
:where(.wp-block-image, .wp-block-post-featured-image, figure) :where(img) {
	border-radius: var(--hoi-radius);
}
.wp-block-image :where(figcaption) { border-radius: 0; }

/* Zoekveld en -knop meelaten lopen met de knoppen. */
.wp-block-search__input {
	border-radius: var(--hoi-radius);
	border: 1px solid var(--wp--preset--color--border);
	padding: .7rem .9rem;
}
.wp-block-search .wp-block-search__button { border-radius: var(--hoi-radius); }

/* Kaarten en de donkere/lichte blokken houden dezelfde radius. */
.wp-block-group.is-style-card,
.wp-block-group.is-style-card-hover { border-radius: var(--hoi-radius); }

/* --- Koppen niet middenin een woord afbreken ----------------------------
   WordPress zet word-break: break-word, waardoor lange Nederlandse woorden
   als "uitgangspunt" midden doorgesneden worden. Alleen als een woord
   werkelijk niet past mag het nog wijken. */
:where(h1, h2, h3, h4, h5, h6, .hoi-logo__word) {
	word-break: normal;
	overflow-wrap: break-word;
}

/* --- Zijmarge van de volle-breedte secties ------------------------------
   WordPress' root-padding-aware alignments leveren hier maar ~11 px, wat op
   een telefoon te krap is. Daarom expliciet: 20 px op mobiel, 32 px vanaf
   tablet. De inhoud zelf blijft begrensd op 1320 px. */
section.wp-block-group.alignfull,
.wp-block-group.alignfull.has-global-padding,
.hoi-header,
.hoi-footer {
	padding-left: clamp(1.25rem, 5vw, 2rem);
	padding-right: clamp(1.25rem, 5vw, 2rem);
}