/*
Theme Name: Site Theme
Description: Block theme voor Winkelverf.nl: een inspirerende, redactionele kennisbank met veel ruimte voor beeld, kleur en video. Kleuren, lettertypes en ruimte staan in theme.json; beeld en kleur per pagina via de uitgelichte afbeelding en het paneel "Paginakop en kleur".
Version: 3.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: site-theme
License: GPL-2.0-or-later
*/

/* Alleen wat theme.json niet kan. Kleuren en maten komen uit de presets. */

:root {
	--c-ink: var(--wp--preset--color--contrast);
	--c-paper: var(--wp--preset--color--base);
	--c-line: var(--wp--preset--color--border);
	--c-muted: var(--wp--preset--color--muted);
	--c-green: var(--wp--preset--color--accent);
	--c-terra: var(--wp--preset--color--terra);
	--site-shadow: 0 12px 28px rgba(23, 45, 53, 0.08);
	--site-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.site-content) a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--c-terra); outline-offset: 4px; }
h1 em, h2 em, h3 em, .site-float-card__title em { color: var(--c-green); font-style: italic; font-weight: 350; }
::selection { background: var(--wp--preset--color--sage-soft); }

.site-kicker {
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-ink);
}
.site-kicker--line::before { content: ""; display: inline-block; width: 26px; height: 2px; margin-right: 0.7rem; vertical-align: middle; background: var(--c-green); }
.has-white-color .site-kicker, .site-banner .site-kicker { color: #fff; }
.site-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.65; color: var(--c-muted); max-width: 34em; }
.site-note-small { font-size: 0.78rem; color: var(--c-muted); margin-top: 0.9rem; }

/* ---------------------------------------------------------------- topregel en header */

.site-topline { background: var(--c-ink); color: #f5f3e9; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.site-topline p { margin: 0; padding: 0.55rem 0; }
.site-topline a { color: #f5f3e9; text-decoration: none; letter-spacing: 0.03em; text-transform: none; font-size: 0.78rem; }
.site-topline a:hover { text-decoration: underline; }
@media (max-width: 640px) { .site-topline__inner > :last-child { display: none; } }

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 249, 245, 0.94);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--c-line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; position: relative; } }
.site-header__top { gap: 2rem; min-height: 92px; }

.site-header__brand { gap: 0.7rem; flex-shrink: 0; }
.site-header__logo { margin: 0; line-height: 0; }
.site-header__logo img { width: auto !important; height: auto; max-height: 52px; max-width: 240px; }
.site-header__name { gap: 0 !important; }
.site-header__title { margin: 0; line-height: 1; }
.site-header__title a { display: inline-flex; align-items: center; gap: 0.6rem; }
/* Zonder logo: een getekende verfroller voor de naam. */
.site-header__title a::before {
	content: "";
	width: 34px;
	height: 38px;
	flex-shrink: 0;
	background: url("assets/img/roller.svg") no-repeat center / contain;
}
.site-header__tagline { margin: 0.35rem 0 0 calc(34px + 0.6rem); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--c-ink); }
/* Met een logo (Ontwerp → Identiteit) toont de header alleen het logo; de titel blijft voor zoekmachines en schermlezers. */
.site-header__brand:has(.wp-block-site-logo img) .site-header__name {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-header__right { gap: 1.5rem; }
.site-header__nav .wp-block-navigation__container { gap: 0.25rem 1.6rem; }
.site-header__nav .wp-block-navigation-item__content { color: var(--c-ink); padding: 0.5rem 0; position: relative; }
.site-header__nav .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0.1rem; height: 1px;
	background: var(--c-green); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--site-ease);
}
.site-header__nav .wp-block-navigation-item__content:hover::after,
.site-header__nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.site-header__nav .current-menu-item > .wp-block-navigation-item__content { color: var(--c-green); }

.site-header__search { margin: 0; padding-left: 1.5rem; border-left: 1px solid var(--c-line); }
.site-header__search .wp-block-search__button { background: transparent; color: var(--c-ink); padding: 0.4rem; margin: 0; border: 0; }
.site-header__search .wp-block-search__button svg { width: 22px; height: 22px; }
.site-header__search .wp-block-search__input { border: 1px solid var(--c-line); background: #fff; font-size: 0.9rem; }
.site-header__search.wp-block-search__searchfield-hidden .wp-block-search__input { border: 0; }

@media (max-width: 1080px) {
	.site-header__top { min-height: 76px; }
	.site-header__search { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------- algemene pagina */

.site-main { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--60); }
.site-main--home { padding-top: 0; padding-bottom: 0; }

.site-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; list-style: none; margin: 0; padding: 0; font-size: 0.78rem; color: var(--c-muted); }
.site-breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--c-line); }
.site-breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.site-breadcrumbs a:hover { color: var(--c-green); text-decoration: underline; }

/* Paginakop: kicker, grote kop, intro en beeld of kleurvlak */
.site-hero-page { margin-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); border-bottom: 1px solid var(--c-line); }
.site-hero-page__kicker { margin: 0 0 1.25rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.site-hero-page__title { margin: 0; max-width: 15em; font-size: var(--wp--preset--font-size--huge); }
.site-hero-page__lead { margin: 1.5rem 0 0; max-width: 36em; font-size: var(--wp--preset--font-size--large); line-height: 1.6; color: var(--c-muted); }
.site-hero-page__meta { margin: 1.25rem 0 0; font-size: 0.78rem; color: var(--c-muted); }
.site-hero-page__image { margin: var(--wp--preset--spacing--50) 0 0; }
.site-hero-page__image img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: cover; box-shadow: 18px 18px 0 #eee9de; }
.site-hero-page__image figcaption { margin-top: 1.4rem; font-size: 0.8rem; color: var(--c-muted); }
.site-hero-page.has-swatch { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--50); align-items: end; }
.site-hero-page__swatch {
	display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; padding: 1.5rem;
	background: var(--site-kleur); box-shadow: 18px 18px 0 #eee9de; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.site-hero-page__swatch span { font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; }
.site-hero-page__swatch small { font-size: 0.72rem; max-width: 22em; }
@media (max-width: 782px) { .site-hero-page.has-swatch { grid-template-columns: 1fr; } }

/* Artikel: inhoudsopgave links, tekst rechts */
.site-article { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--wp--preset--spacing--60); margin-top: var(--wp--preset--spacing--50); }
.site-article:not(:has(.site-toc)) { grid-template-columns: minmax(0, 1fr); }
.site-article:not(:has(.site-toc)) .site-article__aside { display: none; }
.site-article__aside { position: relative; }
.site-article__aside .site-toc { position: sticky; top: 130px; }
@media (max-width: 960px) {
	.site-article { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
	.site-article__aside .site-toc { position: static; }
}

.site-toc { border-top: 2px solid var(--c-ink); padding-top: 1.25rem; font-size: 0.82rem; }
.site-toc__title { margin: 0 0 0.9rem; font-weight: 700; }
.site-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.site-toc li { counter-increment: toc; margin: 0; border-bottom: 1px solid var(--c-line); }
.site-toc a { display: block; padding: 0.6rem 0; color: var(--c-muted); text-decoration: none; }
.site-toc a::before { content: counter(toc, decimal-leading-zero); margin-right: 0.7rem; font-size: 0.7rem; color: var(--c-green); }
.site-toc a:hover { color: var(--c-ink); }

.site-content { font-size: 1.08rem; }
.site-content > :first-child { margin-top: 0; }
.site-content > p:first-child { font-size: 1.2rem; line-height: 1.75; }
.site-content h2 { scroll-margin-top: 140px; }
.site-content .wp-block-image, .site-content .wp-block-gallery, .site-content .wp-block-embed, .site-content .wp-block-video { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.site-content .wp-block-image img { height: auto; }
.site-content .alignwide { margin-left: 0; margin-right: 0; max-width: none; }
@media (min-width: 1240px) {
	.site-content .alignwide { width: calc(100% + 280px); max-width: calc(100vw - 4rem); }
}

.site-section-title { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 1.5rem; }
.site-summary { border-left: 2px solid var(--c-green); padding: 0.25rem 0 0.25rem 1.25rem; }
.site-summary__label { margin: 0 0 0.25rem; font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-green); }
.site-summary__text { margin: 0; font-size: var(--wp--preset--font-size--large); }
.site-updated { font-size: 0.78rem; color: var(--c-muted); }

/* ---------------------------------------------------------------- kaarten en beeld */

.site-media__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--site-ease); }
.site-media__swatch {
	position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
	background: var(--site-kleur);
}
/* Kleurvlak met drie verfstreken: zo zien kaarten zonder foto er toch verzorgd uit. */
.site-media__swatch i { position: absolute; display: block; border-radius: 999px; background: #fff; opacity: 0.14; }
.site-media__swatch i:nth-child(1) { width: 70%; height: 22%; left: -10%; top: calc(12% + var(--y, 0) * 1%); transform: rotate(calc(-12deg + var(--r, 0) * 1deg)); }
.site-media__swatch i:nth-child(2) { width: 55%; height: 16%; right: -12%; top: calc(48% + var(--y, 0) * 0.6%); transform: rotate(calc(-12deg + var(--r, 0) * 1deg)); opacity: 0.1; }
.site-media__swatch i:nth-child(3) { width: 26%; height: 34%; right: calc(8% + var(--y, 0) * 1%); top: 10%; border-radius: 50%; background: #172d35; opacity: 0.08; }

.site-subpages { margin-top: var(--wp--preset--spacing--60); }
.site-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.site-subpages--cols-3 .site-cards { grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 3rem) / 3)), 1fr)); }
.site-subpages--cols-2 .site-cards { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.site-subpages--cols-4 .site-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.site-card__link { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--c-ink); text-decoration: none; }
.site-card__link:hover { text-decoration: none; }
.site-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--surface); }
.site-card__link:hover .site-media__img { transform: scale(1.04); }
.site-card__body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem 2rem 0 0; }
.site-card__kicker { font-size: 0.72rem; color: var(--c-muted); }
.site-card__title { font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; }
.site-card__link:hover .site-card__title { color: var(--c-green); }
.site-card__text { font-size: 0.9rem; line-height: 1.55; color: var(--c-muted); }
.site-card__meta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-green); }
.site-card__arrow { position: absolute; right: 0; bottom: 0; font-size: 1rem; transition: transform 0.2s var(--site-ease); }
.site-card__link:hover .site-card__arrow { transform: translate(3px, -3px); }

/* Genummerde tegels zonder beeld */
.site-cards--tiles { gap: 0; border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); }
.site-cards--tiles .site-card { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.site-cards--tiles .site-card__link { padding: 2rem; min-height: 180px; }
.site-cards--tiles .site-card__body { padding: 0; }
.site-cards--tiles .site-card__arrow { top: 2rem; right: 2rem; bottom: auto; }

/* Artikelkaarten (Nieuw / Van vraag naar aanpak) */
.site-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.site-article-card a { display: flex; flex-direction: column; height: 100%; color: var(--c-ink); text-decoration: none; }
.site-article-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 1.25rem; }
.site-article-card a:hover .site-media__img { transform: scale(1.04); }
.site-article-card__kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-green); }
.site-article-card__title { margin: 0.6rem 0 0.75rem; font-family: var(--wp--preset--font-family--serif); font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.02em; }
.site-article-card a:hover .site-article-card__title { color: var(--c-green); }
.site-article-card__text { font-size: 0.9rem; line-height: 1.6; color: var(--c-muted); }
.site-article-card__more { display: flex; justify-content: space-between; margin-top: auto; padding-top: 1.25rem; font-size: 0.8rem; font-weight: 700; }

.site-recent__list { list-style: none; margin: 0; padding: 0; }
.site-recent__list li { display: flex; flex-direction: column; padding: 0.85rem 0; border-bottom: 1px solid var(--c-line); }
.site-recent__list a { font-weight: 600; text-decoration: none; }
.site-recent__meta { font-size: 0.8rem; color: var(--c-muted); }

.site-related { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--c-line); }
.site-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.site-related__list li { border-bottom: 1px solid var(--c-line); }
.site-related__list a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem 1rem 0; text-decoration: none; font-family: var(--wp--preset--font-family--serif); font-size: 1.15rem; }
.site-related__list a::after { content: "↗"; font-family: var(--wp--preset--font-family--sans); font-size: 0.9rem; }
.site-related__list a:hover { color: var(--c-green); }

/* ---------------------------------------------------------------- homepage */

.site-home-hero { gap: var(--wp--preset--spacing--60) !important; padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); margin-bottom: 0; }
.site-home-hero__title { font-size: clamp(2.6rem, 4.6vw, 4.1rem); margin: 0.5rem 0 1.5rem; line-height: 1.04; }
.site-home-hero__search { max-width: 540px; margin-top: 2rem; }
.site-home-hero__search .wp-block-search__inside-wrapper { border: 1px solid #b9c1b9; background: #fff; padding: 6px; box-shadow: 0 5px 12px rgba(23, 45, 53, 0.03); }
.site-home-hero__search .wp-block-search__input { border: 0; padding: 0.8rem 0.9rem; font-size: 0.95rem; background: transparent; }
.site-home-hero__search .wp-block-search__button { margin: 0; border: 0; background: var(--c-green); color: #fff; min-width: 52px; }
.site-home-hero__search .wp-block-search__button:hover { background: var(--c-ink); }
.site-home-hero__quick { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 1rem; font-size: 0.82rem; }
.site-home-hero__quick span { color: var(--c-muted); }
.site-home-hero__quick a { text-decoration: none; border-bottom: 1px solid #c4c9bd; }
.site-home-hero__quick a:hover { border-color: var(--c-green); color: var(--c-green); }

.site-home-hero__visual { box-shadow: 18px 18px 0 #eee9de; overflow: visible !important; }
.site-home-hero__visual .wp-block-cover__inner-container { width: auto !important; }
.site-float-card {
	margin: 0 0 -1px -3rem; padding: 1.4rem 1.6rem; background: #fffdf7; color: var(--c-ink); box-shadow: var(--site-shadow); max-width: 320px;
}
.site-float-card > * { margin: 0; }
.site-float-card .site-kicker { font-size: 0.62rem; margin-bottom: 0.4rem; color: var(--c-ink); }
.site-float-card__title { font-family: var(--wp--preset--font-family--serif); font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.9rem !important; }
.site-dots { display: flex; gap: 0.5rem; }
.site-dots a { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--dot); border: 3px solid #fff; outline: 1px solid var(--c-line); transition: transform 0.2s var(--site-ease); }
.site-dots a:hover { transform: scale(1.15); }
@media (max-width: 781px) {
	.site-float-card { margin-left: 0; }
	.site-home-hero__visual { min-height: 380px !important; }
}

.site-strip { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.site-strip__inner { gap: 1rem 2rem; padding: 1.4rem 0; font-size: 0.85rem; }
.site-strip__inner p { margin: 0; color: var(--c-muted); }
.site-strip__title { font-family: var(--wp--preset--font-family--serif); font-size: 1.35rem !important; color: var(--c-ink) !important; }
.site-strip__link { margin-left: auto !important; font-weight: 700; }
.site-strip__link a { text-decoration: none; color: var(--c-ink); }

.site-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.site-section__head { margin-bottom: var(--wp--preset--spacing--50); gap: 1rem 3rem; }
.site-section__head h2 { margin: 0; font-size: var(--wp--preset--font-size--xx-large); }
.site-section__aside { max-width: 16em; margin: 0; font-size: 0.9rem; color: var(--c-muted); }
.site-section__aside a { color: var(--c-ink); font-weight: 700; text-decoration: none; }

.site-band { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.site-band .wp-block-columns { gap: var(--wp--preset--spacing--60); }
.site-band h2 { font-size: var(--wp--preset--font-size--xx-large); margin-top: 0; }

/* Moodboard: afwisselende hoogtes, bijschrift als label */
.site-mosaic.wp-block-gallery, .is-style-mosaic.wp-block-gallery { gap: 0.9rem !important; }
.site-mosaic .wp-block-image, .is-style-mosaic .wp-block-image { position: relative; margin: 0 !important; }
.site-mosaic.columns-2 > .wp-block-image { width: calc(50% - 0.45rem) !important; flex-grow: 0 !important; }
.site-mosaic.columns-3 > .wp-block-image { width: calc(33.333% - 0.6rem) !important; flex-grow: 0 !important; }
.site-mosaic .wp-block-image img { width: 100%; height: 100% !important; object-fit: cover; }
.site-mosaic.columns-3 .wp-block-image { aspect-ratio: 4 / 5; }
@media (max-width: 600px) { .site-mosaic.columns-3 > .wp-block-image { width: 100% !important; } }
.site-mosaic.columns-2 .wp-block-image:nth-child(4n+1), .site-mosaic.columns-2 .wp-block-image:nth-child(4n+4) { aspect-ratio: 4 / 5; }
.site-mosaic.columns-2 .wp-block-image:nth-child(4n+2), .site-mosaic.columns-2 .wp-block-image:nth-child(4n+3) { aspect-ratio: 4 / 3.2; }
.site-mosaic .wp-block-image figcaption, .is-style-mosaic .wp-block-image figcaption {
	position: absolute; left: 0.9rem; bottom: 0.9rem; right: auto !important; width: auto !important;
	margin: 0; padding: 0.35rem 0.75rem !important; background: #fffdf7 !important; color: var(--c-ink) !important;
	font-size: 0.72rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.site-mosaic .wp-block-image figcaption::before, .is-style-mosaic .wp-block-image figcaption::before { display: none; }

.site-swatch-cards { gap: 1rem !important; }
.site-swatch-card { padding: 1.8rem; min-height: 230px; display: flex; flex-direction: column; border-bottom: 4px solid #b8bfaf; }
.site-swatch-card > * { margin: 0; }
.site-swatch-card__code { font-family: var(--wp--preset--font-family--serif); font-size: clamp(2.6rem, 4.5vw, 3.8rem); line-height: 1; }
.site-swatch-card__name { margin-top: auto !important; font-family: var(--wp--preset--font-family--serif); font-size: 1.45rem; }
.site-swatch-card__name a { text-decoration: none; }
.site-swatch-card__name a::after { content: ""; position: absolute; inset: 0; }
.site-swatch-card { position: relative; transition: transform 0.25s var(--site-ease); }
.site-swatch-card:hover { transform: translateY(-4px); }
.site-swatch-card__meta { font-size: 0.75rem; margin-top: 0.4rem !important; }

.site-split { gap: 0; margin-top: var(--wp--preset--spacing--60); margin-bottom: var(--wp--preset--spacing--60); }
.site-split .wp-block-media-text__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.site-split .wp-block-media-text__content { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.site-split h2 { font-size: var(--wp--preset--font-size--xx-large); margin-top: 0; }

.site-cta { gap: 1.5rem; margin: var(--wp--preset--spacing--60) 0; padding: 2.5rem 3rem; background: var(--wp--preset--color--sand); }
.site-cta__text { gap: 2rem; }
.site-cta__text p { margin: 0; color: var(--c-muted); font-size: 0.9rem; }
.site-cta__text .site-kicker { color: var(--c-ink); margin-bottom: 0.3rem; font-size: 0.7rem; }
.site-cta__symbol { padding-right: 2rem; border-right: 1px solid #cfc6b6; font-family: var(--wp--preset--font-family--serif); font-size: 3rem !important; color: var(--c-ink) !important; line-height: 1; }
.site-cta__title { margin: 0 0 0.25rem; font-size: 1.9rem; }
@media (max-width: 640px) { .site-cta { padding: 2rem 1.5rem; } .site-cta__symbol { display: none; } }

/* ---------------------------------------------------------------- patterns */

.site-banner { color: #fff; }
.site-banner h2 { font-size: var(--wp--preset--font-size--xx-large); max-width: 14em; }
.site-banner .wp-block-cover__inner-container { max-width: 1240px !important; }
.site-banner em { color: #fff; }

.site-swatches { gap: 1rem !important; }
.site-swatch > * { margin: 0; }
.site-swatch__name { margin-top: 0.8rem !important; font-family: var(--wp--preset--font-family--serif); font-size: 1.25rem; }
.site-swatch__code { font-size: 0.8rem; color: var(--c-muted); }

.site-video, .site-video-section .wp-block-embed { margin: 2rem 0; }
.site-video .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; background: var(--c-ink); }
.site-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-video-section { padding: var(--wp--preset--spacing--50) 0; }

.site-before-after .wp-block-image { position: relative; margin: 0; }
.site-before-after .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.site-before-after figcaption { position: absolute; top: 1rem; left: 1rem; margin: 0; padding: 0.3rem 0.8rem; background: var(--c-ink); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.site-pullquote { padding: 2rem 0; text-align: left; }
.site-pullquote cite { font-family: var(--wp--preset--font-family--sans); font-size: 0.8rem; font-style: normal; color: var(--c-muted); }

.is-style-offset img { box-shadow: 18px 18px 0 #eee9de; }

.is-style-steps { list-style: none; padding: 0; counter-reset: step; }
.is-style-steps > li { counter-increment: step; position: relative; padding: 1.25rem 0 1.25rem 4.5rem; border-top: 1px solid var(--c-line); }
.is-style-steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0.9rem; font-family: var(--wp--preset--font-family--serif); font-size: 2rem; line-height: 1; color: var(--c-green); }

.is-style-note { border-left: 2px solid var(--c-green); background: var(--wp--preset--color--sage-soft); padding: 1.4rem 1.6rem; }
.is-style-note > :first-child { margin-top: 0; }
.is-style-note > :last-child { margin-bottom: 0; }
.is-style-note .site-kicker { color: var(--c-green); margin-bottom: 0.4rem; }

.is-style-check-list, .is-style-cross-list { list-style: none; padding-left: 0; }
.is-style-check-list li::before, .is-style-cross-list li::before { display: inline-block; width: 1.4em; font-weight: 700; }
.is-style-check-list li::before { content: "✓"; color: var(--wp--preset--color--positive); }
.is-style-cross-list li::before { content: "✕"; color: var(--wp--preset--color--negative); }

.wp-block-table table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--c-line); padding: 0.75em 0.75em; text-align: left; }
.wp-block-table thead th { border-bottom: 2px solid var(--c-ink); }
@media (max-width: 600px) { .wp-block-table { overflow-x: auto; } }

.wp-block-button.is-style-outline .wp-block-button__link { border: 1px solid var(--c-ink); background: transparent; color: var(--c-ink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--c-ink); color: #fff; }

/* ---------------------------------------------------------------- verfcalculator */

.site-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--50); margin: var(--wp--preset--spacing--50) 0; }
.site-calc__form { display: grid; gap: 1.25rem; }
.site-calc__field { display: grid; gap: 0.35rem; }
.site-calc__label { font-weight: 700; font-size: 0.9rem; }
.site-calc__field input { width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; border: 1px solid #b9c1b9; background: #fff; font: inherit; }
.site-calc__field small { font-size: 0.78rem; color: var(--c-muted); }
.site-calc__button { justify-self: start; border: 0; padding: 1rem 1.6rem; background: var(--c-ink); color: #fff; font: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.site-calc__button:hover { background: var(--c-green); }
.site-calc__error { margin: 0; color: var(--wp--preset--color--negative); font-size: 0.85rem; }
.site-calc__error:empty { display: none; }
.site-calc__result { align-self: start; position: sticky; top: 130px; padding: 2rem; background: var(--wp--preset--color--sage-soft); }
.site-calc__result-label { margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.site-calc__liters { margin: 0.75rem 0; font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; }
.site-calc__detail { color: var(--c-muted); font-size: 0.9rem; }
.site-calc__formula { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid #cfd6c9; font-size: 0.82rem; color: var(--c-muted); }
@media (max-width: 782px) { .site-calc { grid-template-columns: 1fr; } .site-calc__result { position: static; } }

/* ---------------------------------------------------------------- zoekresultaten */

.site-page-title { margin-top: var(--wp--preset--spacing--40); }
.site-results__list { list-style: none; padding: 0; }
.site-results .wp-block-post { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--c-line); }
.site-results .wp-block-post > :not(.site-results__image) { grid-column: 2; }
.site-results .wp-block-post:not(:has(.site-results__image)) > * { grid-column: 1 / -1; }
.site-results__image { grid-row: span 3; margin: 0; }
.site-results .wp-block-post-title { margin: 0; }
.site-results .wp-block-post-title a { text-decoration: none; }
.site-results .wp-block-post-excerpt { margin-top: 0.4rem; color: var(--c-muted); }
@media (max-width: 600px) { .site-results .wp-block-post { grid-template-columns: 1fr; } .site-results .wp-block-post > * { grid-column: 1 !important; } }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--c-ink); color: #c9d3d2; padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); font-size: 0.85rem; }
.site-footer a { color: #f5f3e9; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__cols { gap: var(--wp--preset--spacing--50); }
.site-footer__brand { margin: 0 0 1rem; }
.site-footer__brand a { color: #f5f3e9 !important; }
.site-footer__about { max-width: 24ch; line-height: 1.7; }
.site-footer__title { margin: 0 0 1rem; font-weight: 700; color: #fff; }
.site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { margin: 0.55rem 0; }
.site-footer__bottom { margin-top: var(--wp--preset--spacing--50); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.75rem; color: #9fb0b0; }
.site-footer__bottom p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* Secties op de homepage sluiten op elkaar aan; elke sectie heeft zijn eigen ruimte. */
.site-main--home > * { margin-block-start: 0; margin-block-end: 0; }

/* Galerij in een artikel: bijschrift als label in de hoek */
.site-content .wp-block-gallery .wp-block-image figcaption {
	left: 0.75rem; bottom: 0.75rem; right: auto; width: auto; max-height: none; margin: 0; padding: 0.3rem 0.7rem;
	background: #fffdf7; color: var(--c-ink); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.site-content .wp-block-gallery .wp-block-image figcaption::before { display: none; }
@media (max-width: 600px) { .site-swatch-card { padding: 1.2rem; min-height: 190px; } .site-swatch-card__name { font-size: 1.15rem; } }