/*
 * SBTL site.css
 * Koppelt WordPress-blokken, Astra en Contact Form 7 aan het designsystem.
 * components.css is gegenereerd uit het designsystem; eigen aanvullingen staan hier.
 */

:root {
	--ast-global-color-0: var(--action-primary);
	--ast-global-color-1: var(--action-primary-hover);
	--ast-global-color-2: var(--text-heading);
	--ast-global-color-3: var(--text-body);
	--ast-global-color-4: var(--surface-page);
	--ast-global-color-5: var(--surface-raised);
	--ast-global-color-6: var(--border-subtle);
	--ast-global-color-7: var(--surface-inverse);
	--ast-global-color-8: var(--aarde-950);
	--sbtl-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--sbtl-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--sbtl-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

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

html { scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body.sbtl,
body.sbtl.ast-separate-container,
body.sbtl.ast-plain-container,
body.sbtl.ast-page-builder-template {
	background: var(--surface-page);
	color: var(--text-body);
	font: var(--text-body-font);
}
#page.sb-root { display: block; min-height: 100vh; overflow-x: clip; background: var(--surface-page); }
.sb-root .site-content,
.sb-root .sbtl-main { display: block; min-width: 0; }
.sb-root figure { margin: 0; }
.sb-root img { height: auto; }
.sb-root strong, .sb-root b { font-weight: var(--fw-semibold); }
.sb-root .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Overslaanlink */
.sbtl-skip {
	position: absolute; left: -9999px; top: 12px; z-index: 1000;
	background: var(--surface-inverse); color: var(--text-on-inverse);
	padding: 12px 18px; border-radius: var(--radius-sm); font-weight: var(--fw-semibold);
}
.sbtl-skip:focus { left: 16px; color: var(--text-on-inverse); }
#inhoud:focus { outline: none; }

/* Blokmarges van WordPress en Astra uit binnen opmaakgroepen: de ruimte komt uit het raster. */
.sb-root :is(.sb-section, .sb-container, .sb-grid, .k-two, .k-three, .k-stack, .k-layout, .k-article, .k-quiet, .k-quiet__items, .k-board, .k-person, .k-compare, .k-species, .k-species-photos, .k-hero__top, .k-hero__side, .k-hero__photo, .k-area, .sb-cta, .sb-cta__half, .sb-cta__text-col, .sb-sechead, .sb-sechead__text, .sbtl-stack, .sbtl-stack-24, .k-block, .k-aside, .sbtl-main, .sbtl-dossier, .sbtl-brief, .wp-block-buttons) > * {
	margin-block: 0;
}
.sb-root .wp-block-group { box-sizing: border-box; }
.sb-root .alignfull,
.sb-root .sb-section.alignfull { margin-left: 0; margin-right: 0; width: auto; max-width: none; }

/* --------------------------------------------------------- Rasterkolommen */

.sb-root .sbtl-col-4 { grid-column: span 4; }
.sb-root .sbtl-col-5 { grid-column: span 5; }
.sb-root .sbtl-col-6 { grid-column: span 6; }
.sb-root .sbtl-col-7 { grid-column: span 7; }
.sb-root .sbtl-col-5-from-8 { grid-column: 8 / span 5; }
.sb-root .sbtl-col-6-from-7 { grid-column: 7 / span 6; }
.sb-root .sbtl-col-7-from-6 { grid-column: 6 / span 7; }
.sb-root .sbtl-align-center { align-items: center; }
.sb-root .sbtl-stack { display: grid; gap: 16px; align-content: start; }
.sb-root .sbtl-stack-24 { display: grid; gap: 24px; align-content: start; }
.sb-root .sbtl-main { min-width: 0; }
.sb-root .sbtl-pad-bottom { padding-bottom: var(--section-y); }
.sb-root .sb-section.sbtl-section-tight { padding-top: calc(var(--section-y) / 2); padding-bottom: calc(var(--section-y) / 2); }
.sb-root .sb-section.sbtl-section-top0 { padding-top: 0; }
.sb-root .sbtl-h2-klein { font-size: 30px; }

/* -------------------------------------------------------- Sectiekoppen */

.sb-root .sb-sechead--split > .sbtl-link { flex-shrink: 0; }
.sb-root .sbtl-link a,
.sb-root a.sbtl-link {
	display: inline;
	font-weight: var(--fw-semibold); color: var(--text-link);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--mos-300);
}
.sb-root .sbtl-link a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
.sb-root .sbtl-link a::after {
	content: ""; display: inline-block; vertical-align: -3px; margin-left: 6px; width: 17px; height: 17px; background: currentColor;
	-webkit-mask: var(--sbtl-icon-arrow) center / contain no-repeat; mask: var(--sbtl-icon-arrow) center / contain no-repeat;
	transition: transform var(--dur-base) var(--ease-standard);
}
.sb-root .sbtl-link a:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- Knoppen */

.sb-root .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sb-root .wp-block-buttons > .wp-block-button { margin: 0; }
.sb-root .wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font: var(--fw-semibold) 16px/1.2 var(--font-sans); letter-spacing: 0;
	padding: 14px 22px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
	background: var(--action-primary); color: var(--action-on-primary);
	text-decoration: none; white-space: nowrap; box-shadow: none;
	transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.sb-root .wp-block-button .wp-block-button__link:hover,
.sb-root .wp-block-button .wp-block-button__link:focus-visible { background: var(--action-primary-hover); color: var(--action-on-primary); text-decoration: none; }
.sb-root .wp-block-button .wp-block-button__link:active { transform: translateY(1px); }
.sb-root .wp-block-button.is-style-sb-secondary .wp-block-button__link { background: transparent; color: var(--bos-700); border-color: var(--bos-700); }
.sb-root .wp-block-button.is-style-sb-secondary .wp-block-button__link:hover { background: var(--bos-100); color: var(--bos-900); }
.sb-root .wp-block-button.is-style-sb-inverse .wp-block-button__link { background: var(--zand-50); color: var(--bos-800); }
.sb-root .wp-block-button.is-style-sb-inverse .wp-block-button__link:hover { background: var(--meidoorn-200); color: var(--bos-900); }
.sb-root .wp-block-button.is-style-sb-inverse-outline .wp-block-button__link { background: transparent; color: var(--zand-50); border-color: rgba(251, 248, 242, 0.6); }
.sb-root .wp-block-button.is-style-sb-inverse-outline .wp-block-button__link:hover { background: rgba(251, 248, 242, 0.08); border-color: var(--zand-50); color: var(--zand-50); }
.sb-root .wp-block-button.sbtl-arrow .wp-block-button__link::after {
	content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor;
	-webkit-mask: var(--sbtl-icon-arrow) center / contain no-repeat; mask: var(--sbtl-icon-arrow) center / contain no-repeat;
	transition: transform var(--dur-base) var(--ease-standard);
}
.sb-root .wp-block-button.sbtl-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }
.sb-root .sb-cta__actions.wp-block-buttons { justify-content: flex-end; }
.sb-root .sb-cta--split .sb-cta__actions.wp-block-buttons { justify-content: flex-start; margin-top: 8px; }

/* ---------------------------------------------------------------- Foto's */

.sb-root .wp-block-image { margin: 0; }
.sb-root .wp-block-image img { display: block; max-width: 100%; height: auto; }
.sb-root .wp-block-image.is-style-sb-foto img {
	width: 100%; border-radius: var(--radius-md);
	background: var(--surface-placeholder); box-shadow: inset 0 0 0 1px rgba(36, 28, 21, 0.05);
}
.sb-root .wp-block-image figcaption,
.sb-root .sb-figure figcaption,
.sb-root .sbtl-artikel__foto figcaption {
	margin: 8px 0 0; text-align: left; font: var(--text-small); font-size: 14px; color: var(--text-muted);
}
.sb-root .sbtl-foto-smal { max-width: 360px; }
.sb-root .sbtl-logo-klein img { width: auto; max-width: 180px; border-radius: 0; }
.sb-root .sbtl-foto-volgt {
	aspect-ratio: 4 / 5; border-radius: var(--radius-md); background: var(--surface-placeholder);
	box-shadow: inset 0 0 0 1px rgba(36, 28, 21, 0.05); display: grid; place-items: center;
}
.sb-root .sbtl-foto-volgt p { font: var(--fw-medium) 13px/1.4 var(--font-sans); color: var(--text-placeholder); }
.sb-root .sbtl-hoofdfoto { margin-bottom: 56px; }
.sb-root .sbtl-hoofdfoto img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-placeholder); }

/* Werkgebiedbalk onder de hoofdfoto */
.sb-root .k-area strong { color: var(--text-strong); font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------- Lijsten */

.sb-root .wp-block-list.is-style-sb-voorwaarden,
.sb-root .wp-block-list.is-style-sb-stappen,
.sb-root .wp-block-list.is-style-sb-lagen { list-style: none; margin: 0; padding: 0; display: grid; }
.sb-root .wp-block-list.is-style-sb-voorwaarden > li,
.sb-root .wp-block-list.is-style-sb-stappen > li,
.sb-root .wp-block-list.is-style-sb-lagen > li { margin: 0; }

.sb-root .wp-block-list.is-style-sb-voorwaarden > li {
	position: relative; padding: 12px 0 12px 38px; border-top: 1px solid var(--border-subtle);
}
.sb-root .wp-block-list.is-style-sb-voorwaarden > li:last-child { border-bottom: 1px solid var(--border-subtle); }
.sb-root .wp-block-list.is-style-sb-voorwaarden > li::before {
	content: ""; position: absolute; left: 2px; top: 16px; width: 18px; height: 18px; background: var(--mos-600);
	-webkit-mask: var(--sbtl-icon-check) center / contain no-repeat; mask: var(--sbtl-icon-check) center / contain no-repeat;
}
.sb-root .wp-block-list.is-style-sb-voorwaarden > li.sbtl-niet { color: var(--text-muted); }
.sb-root .wp-block-list.is-style-sb-voorwaarden > li.sbtl-niet::before {
	background: var(--klaproos-600);
	-webkit-mask-image: var(--sbtl-icon-x); mask-image: var(--sbtl-icon-x);
}

.sb-root .wp-block-list.is-style-sb-stappen { counter-reset: sbtl-stap; }
.sb-root .wp-block-list.is-style-sb-stappen > li {
	counter-increment: sbtl-stap; position: relative; min-height: 68px;
	padding: 16px 0 16px 64px; border-top: 1px solid var(--border-subtle);
}
.sb-root .wp-block-list.is-style-sb-stappen > li::before {
	content: counter(sbtl-stap); width: 36px; height: 36px; border-radius: 50%;
	border: 1.5px solid var(--bos-700); color: var(--bos-800); display: grid; place-items: center;
	font: var(--fw-medium) 17px/1 var(--font-serif); position: absolute; left: 0; top: 14px;
}
.sb-root .wp-block-list.is-style-sb-stappen > li > strong:first-child { display: block; color: var(--text-strong); margin-bottom: 2px; }

.sb-root .wp-block-list.is-style-sb-lagen { border-top: 1px solid var(--border-subtle); }
.sb-root .wp-block-list.is-style-sb-lagen > li {
	display: flex; justify-content: space-between; gap: 16px; padding: 12px 0;
	border-bottom: 1px solid var(--border-subtle); font-weight: var(--fw-medium); color: var(--text-strong);
}
.sb-root .wp-block-list.is-style-sb-lagen > li span { color: var(--text-muted); font-weight: var(--fw-regular); font-size: 15px; text-align: right; }

/* Gewone lijsten buiten lopende tekst */
.sb-root :is(.k-block, .k-quiet__items, .sb-cta__half) > .wp-block-list:not([class*="is-style-sb"]),
.sb-root :is(.k-block, .k-quiet__items) .wp-block-group > .wp-block-list:not([class*="is-style-sb"]) { padding-left: 1.2em; margin: 0; }
.sb-root :is(.k-block, .k-quiet__items) li + li { margin-top: 0.35em; }
.sb-root .wp-block-list li::marker { color: var(--mos-600); }
.sb-root .sbtl-bronnenlijst { font-size: 15px; color: var(--text-muted); }
.sb-root .sbtl-noot { font: var(--text-small); font-size: 14px; color: var(--text-muted); }

/* ----------------------------------------------------- Kit-onderdelen als blokken */

.sb-root .k-hero__h1 { margin: 0; }
.sb-root .k-species strong { font: var(--fw-medium) 19px/1.3 var(--font-serif); color: var(--text-heading); }
.sb-root .k-species div > p:last-child:not(:first-child) { font-size: 14px; color: var(--text-muted); }
.sb-root .k-compare strong { font: var(--fw-medium) 20px/1.3 var(--font-serif); color: var(--text-heading); }
.sb-root .k-species-photos .wp-block-image { display: grid; gap: 6px; }
.sb-root .k-species-photos figcaption { margin: 0; }
.sb-root .k-person__name strong { font-weight: inherit; }
.sb-root .k-person .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; }
.sb-root .k-block > h2 { margin: 0; }
.sb-root .k-block > .wp-block-buttons { margin-top: 8px; }
.sb-root .k-quiet__items h3 { margin: 0 0 6px; }
.sb-root .k-quiet__items .wp-block-group > * + * { margin-top: 6px; }

/* Standpunten: dossiers */
.sb-root .sbtl-dossier { scroll-margin-top: 24px; }
.sb-root .sbtl-dossier .k-quiet__items h3 {
	font: var(--text-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); margin-bottom: 6px;
}
.sb-root .sbtl-dossier h2 { scroll-margin-top: 24px; }

/* Brieven en citaten */
.sb-root .sbtl-brief {
	background: var(--surface-raised); border: 1px solid var(--border-subtle); border-left: 3px solid var(--mos-500);
	border-radius: var(--radius-md); padding: 28px 32px; display: grid; gap: 0.9em;
	font: var(--fw-regular) 17px/1.65 var(--font-sans); color: var(--text-strong);
}

/* Kort antwoord als blokstijl */
.sb-root .is-style-sb-kort-antwoord {
	background: var(--surface-accent); border: 1px solid var(--mos-300); border-radius: var(--radius-md);
	padding: 26px 30px 28px; display: grid; gap: 10px; font: var(--fw-regular) 19px/1.6 var(--font-sans); color: var(--text-strong);
}

/* ----------------------------------------------------------- Accordeon */

.sb-root details.sb-acc__item > summary { list-style: none; }
.sb-root details.sb-acc__item > summary::-webkit-details-marker { display: none; }
.sb-root .sb-acc__q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.sb-root .sb-acc__h { margin: 0; font: inherit; color: inherit; letter-spacing: 0; text-wrap: balance; }
.sb-root details.sb-acc__item[open] .sb-acc__icon { background: var(--bos-700); border-color: var(--bos-700); color: var(--zand-50); transform: rotate(45deg); }
.sb-root details.sb-acc__item .sb-acc__a { padding-bottom: 24px; }
.sb-root .sb-acc__a p + p { margin-top: 0.8em; }

/* ------------------------------------------------------- Kop en menu */

.sb-root .sbtl-menu-open,
.sb-root .sbtl-menu-close { display: inline-flex; align-items: center; gap: 8px; }
.sb-root .sbtl-menu-close { display: none; }
.sb-root .sb-header__menubtn[aria-expanded="true"] .sbtl-menu-open { display: none; }
.sb-root .sb-header__menubtn[aria-expanded="true"] .sbtl-menu-close { display: inline-flex; }
.sb-root .sb-header__mobile .sbtl-mobiel-cta { padding-top: 18px; }
.sb-root .sb-header__mobile .sbtl-mobiel-cta a.sb-btn {
	justify-content: center; color: var(--action-on-primary); border-bottom: 0; padding: 14px 22px; font: var(--fw-semibold) 16px/1.2 var(--font-sans);
}

/* ----------------------------------------------------------- Paginakop */

.sb-root .k-pagehead__intro { max-width: 720px; }
.sb-root .k-pagehead h1 { margin: 0; }
.sb-root .sb-answer__body p { margin: 0; }

/* -------------------------------------------------- Lopende tekst */

.sb-root .sbtl-flow > .wp-block-image,
.sb-root .sbtl-flow > figure { margin-top: 1.6em; margin-bottom: 0.4em; }
.sb-root .sbtl-flow h2[id], .sb-root .k-block h2[id] { scroll-margin-top: 24px; }
.sb-root .sb-prose .k-compare { margin-top: 1.2em; }
.sb-root .sb-prose .k-compare > * + * { margin-top: 0; }
.sb-root .sb-prose .wp-block-list.is-style-sb-stappen,
.sb-root .sb-prose .wp-block-list.is-style-sb-voorwaarden { margin-top: 1.2em; }
.sb-root .sb-prose .wp-block-list.is-style-sb-stappen > li + li,
.sb-root .sb-prose .wp-block-list.is-style-sb-voorwaarden > li + li { margin-top: 0; }
.sb-root .sb-prose .wp-block-table table { width: 100%; border-collapse: collapse; }
.sb-root .sb-prose .wp-block-table th,
.sb-root .sb-prose .wp-block-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; }

/* Nieuws, verslagen en documenten */
.sb-root .sbtl-artikel { padding-bottom: var(--section-y); }
.sb-root .sbtl-artikel__body { min-width: 0; display: grid; gap: 32px; align-content: start; }
.sb-root .sbtl-artikel__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-placeholder); }
.sb-root .sbtl-sub { font-size: 26px; margin: 16px 0 -8px; }
.sb-root .sbtl-terug { padding-top: 8px; }

/* Kennisbank */
.sb-root .sbtl-kennis { padding-bottom: var(--section-y); }
.sb-root .sbtl-bronnen { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border-subtle); }
.sb-root .sb-prose .sbtl-bronnen h2 { margin-top: 0; font-size: 24px; }
.sb-root .sbtl-bronnen ul { font-size: 15px; color: var(--text-muted); }
.sb-root .sbtl-controle { font: var(--text-small); font-size: 14px; color: var(--text-muted); }
.sb-root .sbtl-related-title { font-size: 30px; }
.sb-root .sbtl-kennislijst { --cols: 3; row-gap: 32px; }

/* Overzichten */
.sb-root .sbtl-lijst { padding-bottom: var(--section-y); display: grid; gap: 48px; }
.sb-root .sbtl-rijen { display: grid; }
.sb-root .sbtl-rijen > .sb-ncard--row:last-child { border-bottom: 1px solid var(--border-subtle); }
.sb-root .sbtl-paginering .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-root .sbtl-paginering .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--border-default); border-radius: var(--radius-sm); text-decoration: none; color: var(--bos-800); font-weight: var(--fw-semibold);
}
.sb-root .sbtl-paginering .page-numbers.current { background: var(--bos-700); border-color: var(--bos-700); color: var(--zand-50); }

/* Doelbalk en rekeningnummer */
.sb-root .sbtl-goal-bron { margin-top: 8px; font: var(--text-small); font-size: 14px; color: var(--text-muted); }
.sb-root .sbtl-rekening { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-strong); }

/* 404 */
.sb-root .sbtl-404 .wp-block-buttons,
.sb-root .sbtl-404 .sbtl-404__acties { margin-top: 24px; }

/* ----------------------------------------------------- Formulier (CF7) */

.sb-root .wpcf7 form { display: grid; gap: 20px; }
.sb-root .sbtl-form { display: grid; gap: 20px; }
.sb-root .sbtl-form p { margin: 0; display: grid; gap: 7px; }
.sb-root .sbtl-form label { font: var(--fw-semibold) 15px/1.3 var(--font-sans); color: var(--text-strong); }
.sb-root .wpcf7 input[type="text"],
.sb-root .wpcf7 input[type="email"],
.sb-root .wpcf7 input[type="tel"],
.sb-root .wpcf7 select,
.sb-root .wpcf7 textarea {
	width: 100%; font: var(--fw-regular) 16px/1.4 var(--font-sans); color: var(--text-strong);
	background: var(--wit); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
	padding: 12px 14px; box-shadow: none; appearance: none;
	transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.sb-root .wpcf7 select {
	padding-right: 42px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4a3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.sb-root .wpcf7 textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.sb-root .wpcf7 :is(input, select, textarea):hover { border-color: var(--aarde-600); }
.sb-root .wpcf7 :is(input, select, textarea):focus { outline: none; border-color: var(--bos-700); box-shadow: 0 0 0 3px var(--mos-100); }
.sb-root .wpcf7 .wpcf7-not-valid { border-color: var(--klaproos-600); }
.sb-root .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font: var(--fw-medium) 14px/1.4 var(--font-sans); color: var(--klaproos-600); }
.sb-root .wpcf7 .wpcf7-form-control-wrap { display: block; }
.sb-root .wpcf7 input[type="submit"] {
	justify-self: start; display: inline-flex; align-items: center; gap: 10px;
	font: var(--fw-semibold) 16px/1.2 var(--font-sans); padding: 14px 22px; border-radius: var(--radius-sm);
	border: 1.5px solid transparent; background: var(--action-primary); color: var(--action-on-primary); cursor: pointer;
}
.sb-root .wpcf7 input[type="submit"]:hover { background: var(--action-primary-hover); }
.sb-root .wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }
.sb-root .wpcf7 form .wpcf7-response-output {
	margin: 0; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-default);
	background: var(--surface-raised); font-size: 15px;
}
.sb-root .wpcf7 form.sent .wpcf7-response-output { border-color: var(--mos-300); background: var(--surface-accent); }
.sb-root .wpcf7 form.invalid .wpcf7-response-output,
.sb-root .wpcf7 form.failed .wpcf7-response-output { border-color: var(--klaproos-600); }
.sb-root .sbtl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sb-root .sbtl-form__privacy { font: var(--text-small); font-size: 14px; color: var(--text-muted); }

/* ------------------------------------------------------- Smalle schermen */

@container sb (max-width: 1080px) {
	.sb-root .k-layout { gap: 48px; }
}

@container sb (max-width: 720px) {
	.sb-root .sbtl-pad-bottom,
	.sb-root .sbtl-artikel,
	.sb-root .sbtl-kennis,
	.sb-root .sbtl-lijst { padding-bottom: var(--section-y-mobile); }
	.sb-root .sbtl-h2-klein { font-size: 26px; }
	.sb-root .k-hero__photo .wp-block-image.is-style-sb-foto img { border-radius: 0; aspect-ratio: 4 / 3 !important; }
	.sb-root .k-landscape-photo .wp-block-image img { aspect-ratio: 4 / 3 !important; }
	.sb-root .k-hero__btns .wp-block-button { width: 100%; }
	.sb-root .k-hero__btns .wp-block-button__link { width: 100%; }
	.sb-root .sb-cta__actions.wp-block-buttons { justify-content: flex-start; }
	.sb-root .sbtl-hoofdfoto { margin-bottom: 32px; }
	.sb-root .sbtl-hoofdfoto img { aspect-ratio: 4 / 3; }
	.sb-root .sbtl-brief { padding: 20px; font-size: 16px; }
	.sb-root .is-style-sb-kort-antwoord { padding: 20px; font-size: 17px; }
	.sb-root .sbtl-kennislijst { --cols: 1; }
	.sb-root .wp-block-list.is-style-sb-lagen > li { flex-direction: column; gap: 2px; }
	.sb-root .wp-block-list.is-style-sb-lagen > li span { text-align: left; }
	.sb-root .sbtl-foto-smal { max-width: none; }
}

/* Marges uit het designsystem die de blokreset hierboven anders zou wegnemen */
.sb-root .k-hero .k-hero__photo { margin-top: 56px; }
@container sb (max-width: 720px) {
	.sb-root .k-hero .k-hero__photo { margin-top: 32px; }
}

/* Rijen in persoonskaarten niet uitrekken: foto's blijven 4:5 */
.sb-root .k-person { align-content: start; }

/* Lege cellen in tegelrasters opvullen met de laatste tegel */
.sb-root .k-species > :last-child:nth-child(3n + 1) { grid-column: span 3; }
.sb-root .k-species > :last-child:nth-child(3n + 2) { grid-column: span 2; }
.sb-root .sb-partners[style*="--cols:4"] > :last-child:nth-child(4n + 1) { grid-column: span 4; }
.sb-root .sb-partners[style*="--cols:4"] > :last-child:nth-child(4n + 2) { grid-column: span 3; }
.sb-root .sb-partners[style*="--cols:4"] > :last-child:nth-child(4n + 3) { grid-column: span 2; }
@container sb (max-width: 720px) {
	.sb-root .k-species > :last-child,
	.sb-root .sb-partners > :last-child { grid-column: auto; }
	.sb-root .k-species > :last-child:nth-child(odd),
	.sb-root .sb-partners > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* Tabellen: seizoen niet afbreken */
.sb-root .sb-table td:first-child,
.sb-root .sb-table th:first-child { white-space: nowrap; }

/* Contact Form 7 zonder eigen CF7-stijl: verborgen onderdelen echt verbergen */
.sb-root .wpcf7 .hidden-fields-container { display: none; border: 0; padding: 0; margin: 0; }
.sb-root .wpcf7 .screen-reader-response {
	position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important;
}
.sb-root .wpcf7 form.init .wpcf7-response-output,
.sb-root .wpcf7 form.resetting .wpcf7-response-output,
.sb-root .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.sb-root .wpcf7 .wpcf7-spinner { visibility: hidden; display: inline-block; width: 20px; height: 20px; }
.sb-root .wpcf7 form.submitting .wpcf7-spinner { visibility: visible; }
.sb-root .wpcf7 select { height: auto; min-height: 50px; line-height: 1.4; padding-top: 12px; padding-bottom: 12px; }
.sb-root .wpcf7 input[type="text"],
.sb-root .wpcf7 input[type="email"] { height: auto; min-height: 50px; }
