/*
Theme Name: Woodstyl
Theme URI: https://woodstyl.nl
Author: Feeling Content
Author URI: https://feelingcontent.nl
Description: Blokthema (FSE) voor woodstyl.nl, de tafelgids van Woody van Es. Werkbank-karakter: creme papier, houtolie-amber, bosgroen en een houtbruine voet. Bevat de complete Tafelgids (CPT ws_product, taxonomie ws_product_cat, filters, keuzehulp, swipe en bewaarlijst).
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: woodstyl
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors, custom-menu
*/

/* ==========================================================================
   1. Basis
   ========================================================================== */

:root {
	--ws-header-h: 74px;
	--ws-radius: 14px;
	--ws-radius-s: 10px;
}

@media (max-width: 781px) {
	:root { --ws-header-h: 62px; }
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* clip in plaats van hidden: hidden maakt van body een scroll-container,
	   waardoor position:sticky op de header stopt met werken. */
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img { max-width: 100%; height: auto; }

/* Zichtbare focus, ook op knoppen en kaarten. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Skiplink van WordPress in de huisstijl. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 999px;
	padding: 0.6rem 1.1rem;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.85rem;
	z-index: 200;
}

/* Selectie in de huisstijl. */
::selection { background: #F6E3C4; color: var(--wp--preset--color--kop); }

/* ==========================================================================
   2. Header
   ========================================================================== */

.ws-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 247, 240, 0.94);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	backdrop-filter: saturate(1.4) blur(8px);
}

/* Dunne houtnerf bovenaan: het herkenningsteken van de site. */
.ws-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--wp--preset--gradient--nerf);
}

.ws-header__balk {
	min-height: var(--ws-header-h);
}

.ws-logo img,
.ws-logo .custom-logo {
	max-height: 40px;
	width: auto;
	display: block;
}

@media (max-width: 781px) {
	.ws-logo img,
	.ws-logo .custom-logo { max-height: 32px; }
}

/* Woordmerk als tekst, voor het geval het logo niet is ingesteld. */
.ws-woordmerk {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
	color: var(--wp--preset--color--kop);
}

/* Navigatie */
.ws-nav .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.ws-nav .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.ws-nav .current-menu-item > .wp-block-navigation-item__content,
.ws-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Submenu's: crème paneel met houtnerf-rand. */
.ws-nav .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--ws-radius);
	box-shadow: 0 20px 44px -28px rgba(41, 25, 1, 0.5);
	padding: 0.5rem;
	min-width: 15rem;
}
.ws-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: none;
	border-radius: var(--ws-radius-s);
	padding: 0.42rem 0.7rem;
	font-size: 0.9rem;
	font-weight: 500;
}
.ws-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--zacht);
	color: var(--wp--preset--color--accent);
}

/* Mobiel overlay-menu */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--bg) !important;
	color: var(--wp--preset--color--ink) !important;
	padding: 1.6rem clamp(1.1rem, 5vw, 2rem) 3rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: none;
	box-shadow: none;
	background: transparent;
	padding-left: 0.4rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	border-bottom: none;
	font-size: 1.05rem;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--kop);
}

/* Zoekicoon en mandje rechts in de header */
.ws-zoek .wp-block-search__button {
	background: transparent;
	border: 1px solid var(--wp--preset--color--lijn);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 0.42rem 0.55rem;
	min-width: 38px;
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ws-zoek .wp-block-search__button:hover {
	background: var(--wp--preset--color--zacht);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.ws-zoek .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 999px;
	padding: 0.42rem 0.9rem;
	background: var(--wp--preset--color--wit);
	font-size: 0.88rem;
	max-width: 12rem;
}
@media (max-width: 900px) {
	.ws-zoek .wp-block-search__input { display: none; }
}

/* Bewaarlijst-mandje met teller. Zelfde markup en data-attribuut als bewaar.js verwacht. */
.ws-mand-wrap { display: inline-flex; align-items: center; }
.ws-mand {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background: var(--wp--preset--color--wit);
	transition: border-color 0.15s ease, color 0.15s ease;
}
.ws-mand:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.ws-mand__tel {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
.ws-mand__tel[hidden] { display: none; }

/* ==========================================================================
   3. Voorpagina en secties
   ========================================================================== */

.ws-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--gradient--werkbank);
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}

/* Zaagsnede-patroon: heel lichte verticale nerven, als een werkblad. */
.ws-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(154, 105, 15, 0.05) 0 1px,
		transparent 1px 34px
	);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 78%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 78%);
}

.ws-hero > * { position: relative; z-index: 1; }

.ws-oogmerk {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.9rem;
}
.ws-oogmerk::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	display: inline-block;
}

.ws-hero__kop {
	max-width: 15ch;
	margin-block: 0 0.9rem;
}

.ws-hero__sub {
	max-width: 46ch;
	color: #4A3520;
}

/* Kerf onder een kop: het handtekeningdetail van de site. */
.is-style-kerf,
.ws-kerf {
	position: relative;
	padding-bottom: 0.6rem;
}
.is-style-kerf::after,
.ws-kerf::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 46px;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--accent);
}
.has-text-align-center.is-style-kerf::after,
.has-text-align-center.ws-kerf::after {
	left: 50%;
	transform: translateX(-50%);
}

.ws-sectie { border-top: 1px solid var(--wp--preset--color--lijn); }
.ws-sectie--zacht { background: var(--wp--preset--color--zacht); }

/* Woody-blok op de voorpagina */
.ws-woody-blok {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 20px;
	overflow: hidden;
}
.ws-woody-blok img {
	border-radius: 999px;
	width: 132px;
	height: 132px;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--zacht);
}
@media (max-width: 640px) {
	.ws-woody-blok img { width: 96px; height: 96px; }
}

/* ==========================================================================
   4. Blog: kaarten, archieven, artikel
   ========================================================================== */

.ws-postgrid .wp-block-post {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.16s ease, border-color 0.16s ease;
}
.ws-postgrid .wp-block-post:hover {
	transform: translateY(-3px);
	border-color: #E1C7A6;
}
.ws-postgrid .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.ws-postgrid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ws-postgrid .ws-kaart__body {
	padding: 1.05rem 1.15rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}
.ws-postgrid .wp-block-post-title {
	font-size: 1.1rem;
	line-height: 1.25;
	margin: 0;
}
.ws-postgrid .wp-block-post-excerpt__excerpt {
	font-size: 0.9rem;
	color: #55432E;
	margin: 0;
}

/* Beeld-eerst: grotere kaarten met een uitgelichte eerste post. */
.ws-postgrid--beeld .wp-block-post-featured-image { aspect-ratio: 3 / 2; }
.ws-postgrid--beeld .wp-block-post-title { font-size: 1.2rem; }
.ws-postgrid--beeld .ws-kaart__body { padding: 1.15rem 1.25rem 1.4rem; }

.ws-postgrid--uitgelicht .wp-block-post:first-child { grid-column: span 2; }
.ws-postgrid--uitgelicht .wp-block-post:first-child .wp-block-post-featured-image { aspect-ratio: 21 / 9; }
.ws-postgrid--uitgelicht .wp-block-post:first-child .wp-block-post-title { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.ws-postgrid--uitgelicht .wp-block-post:first-child .ws-kaart__body { padding: 1.5rem 1.7rem 1.8rem; }
.ws-postgrid--uitgelicht .wp-block-post:first-child .wp-block-post-excerpt__excerpt { font-size: 1rem; max-width: 60ch; }

@media (max-width: 900px) {
	.ws-postgrid--uitgelicht .wp-block-post:first-child { grid-column: auto; }
	.ws-postgrid--uitgelicht .wp-block-post:first-child .wp-block-post-featured-image { aspect-ratio: 3 / 2; }
}

/* Metaregel: categorie en datum */
.ws-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-size: 0.78rem;
	color: var(--wp--preset--color--grijs);
	font-family: var(--wp--preset--font-family--kop);
	letter-spacing: 0.02em;
}
.ws-meta .wp-block-post-terms a,
.ws-meta a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
}
.ws-meta .wp-block-post-terms a:hover,
.ws-meta a:hover { text-decoration: underline; }
.ws-meta .wp-block-post-date { font-variant-numeric: tabular-nums; }

/* Artikelkop */
.ws-artikelkop { border-bottom: 1px solid var(--wp--preset--color--lijn); }
/* Geen eigen max-width op de kop. De leeskolom van 760px komt uit de
   constrained-layout van WordPress, die een smaller kind met margin auto
   (!important) centreert. Een kortere regellengte zou de kop dus laten
   inspringen ten opzichte van de eyebrow en de auteurregel. */

.ws-artikel .wp-block-post-content > * { margin-block: 1.15rem; }
.ws-artikel .wp-block-post-content h2 {
	margin-top: 2.4rem;
	padding-bottom: 0.5rem;
	position: relative;
}
.ws-artikel .wp-block-post-content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
}
.ws-artikel .wp-block-post-content h3 { margin-top: 1.9rem; }
.ws-artikel .wp-block-post-content img { border-radius: var(--ws-radius); }
.ws-artikel .wp-block-post-featured-image img { border-radius: 20px; }

/* FAQ-accordeons uit de gidsartikelen */
.ws-artikel .wp-block-post-content details,
.entry-content details {
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--ws-radius-s);
	background: var(--wp--preset--color--wit);
	padding: 0.85rem 1.05rem;
	margin-block: 0.65rem;
}
.ws-artikel .wp-block-post-content details > summary,
.entry-content details > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
	color: var(--wp--preset--color--kop);
	list-style: none;
	position: relative;
	padding-right: 1.6rem;
}
.ws-artikel .wp-block-post-content details > summary::-webkit-details-marker,
.entry-content details > summary::-webkit-details-marker { display: none; }
.ws-artikel .wp-block-post-content details > summary::after,
.entry-content details > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}
.ws-artikel .wp-block-post-content details[open] > summary::after,
.entry-content details[open] > summary::after { content: "\2212"; }

/* Auteurbox */
.ws-auteurbox {
	background: var(--wp--preset--color--zacht);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 20px;
}
.ws-auteurbox img {
	border-radius: 999px;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--wit);
}
.ws-auteurbox .wp-block-post-author__name {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
}

/* Paginering */
.wp-block-query-pagination {
	margin-top: 2.6rem;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.88rem;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .current,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.6rem;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 999px;
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.wp-block-query-pagination .current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}
.wp-block-query-pagination-numbers .dots { border: none; background: none; }

/* Zoekresultaten en 404 */
.ws-zoekblok .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 999px;
	padding: 0.75rem 1.1rem;
	background: var(--wp--preset--color--wit);
	font-size: 1rem;
}
.ws-zoekblok .wp-block-search__button {
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	border: none;
	padding: 0.75rem 1.4rem;
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 600;
}
.ws-zoekblok .wp-block-search__button:hover { background: var(--wp--preset--color--accent-diep); }

.ws-404-cijfer {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	line-height: 0.86;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--lijn);
	margin: 0;
}

/* Pagina's met gids-shortcodes (keuzehulp, swipe, bewaarlijst, vergelijken)
   mogen de volle 1200px gebruiken in plaats van de leeskolom van 760px. */
.ws-gidspagina .wp-block-post-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

/* ==========================================================================
   4b. Stijlscenes: de tafels in een interieur
   ========================================================================== */

.ws-heroband { background: var(--wp--preset--color--bg); }

.ws-scenes { display: grid; gap: 1.1rem; }

/* Kaart */
.ws-scene {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: var(--wp--preset--color--zacht);
	color: var(--wp--preset--color--creme);
	text-decoration: none;
	isolation: isolate;
}
.ws-scene:hover { text-decoration: none; color: var(--wp--preset--color--creme); }

.ws-scene__beeld {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.ws-scene__beeld img,
.ws-scene__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ws-scene:hover .ws-scene__img { transform: scale(1.035); }

/* Verloop onderaan, zodat crème tekst op elk beeld leesbaar blijft. */
.ws-scene__overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.5rem 1.4rem 1.25rem;
	background: linear-gradient(to top, rgba(20, 12, 2, 0.86) 0%, rgba(20, 12, 2, 0.62) 42%, rgba(20, 12, 2, 0) 100%);
	z-index: 1;
}
.ws-scene__eyebrow {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #F0C97C;
}
.ws-scene__kop {
	font-family: var(--wp--preset--font-family--kop);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	margin: 0.1rem 0 0.25rem;
	font-size: clamp(1.9rem, 4.2vw, 3.1rem);
	max-width: 16ch;
}
.ws-scene__sub {
	font-size: 0.98rem;
	line-height: 1.5;
	color: #EFE2CE;
	max-width: 44ch;
	margin-bottom: 0.35rem;
}
.ws-scene__chip {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #1A0E00;
	background: rgba(255, 247, 240, 0.92);
	border-radius: 999px;
	padding: 0.24rem 0.62rem;
	margin-bottom: 0.15rem;
}
.ws-scene__titel {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.25;
	color: #FFFFFF;
}
.ws-scene--groot .ws-scene__titel { font-size: 1.1rem; }
.ws-scene__meta {
	font-size: 0.82rem;
	color: #DCCBB2;
}

/* layout=hero: een groot beeld met twee gestapeld ernaast. */
.ws-scenes--hero { grid-template-columns: 2fr 1fr; grid-auto-rows: 1fr; }
.ws-scenes--hero > .ws-scene:first-child { grid-row: span 2; }
.ws-scenes--hero > .ws-scene:first-child .ws-scene__beeld { aspect-ratio: auto; min-height: 26rem; }
.ws-scenes--hero > .ws-scene:first-child .ws-scene__overlay { padding: 2.4rem 2rem 1.9rem; }
.ws-scenes--hero > .ws-scene:not(:first-child) .ws-scene__beeld { aspect-ratio: 3 / 2; }
/* Als er maar een beeld is, blijft de hero over de volle breedte staan. */
.ws-scenes--hero > .ws-scene:first-child:last-child { grid-column: 1 / -1; grid-row: auto; }

/* layout=mozaiek: drie kolommen met wisselende hoogtes. */
.ws-scenes--mozaiek { grid-template-columns: repeat(3, 1fr); }
.ws-scenes--mozaiek > .ws-scene:nth-child(1) { grid-column: span 2; }
.ws-scenes--mozaiek > .ws-scene:nth-child(1) .ws-scene__beeld { aspect-ratio: 16 / 9; }
.ws-scenes--mozaiek > .ws-scene:nth-child(4) .ws-scene__beeld,
.ws-scenes--mozaiek > .ws-scene:nth-child(6) .ws-scene__beeld { aspect-ratio: 4 / 5; }

/* layout=rij: vier naast elkaar, op mobiel een veegrij. */
.ws-scenes--rij { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
	.ws-scenes--hero { grid-template-columns: 1fr; }
	.ws-scenes--hero > .ws-scene:first-child { grid-row: auto; }
	.ws-scenes--hero > .ws-scene:first-child .ws-scene__beeld { aspect-ratio: 4 / 3; min-height: 0; }
	.ws-scenes--mozaiek { grid-template-columns: repeat(2, 1fr); }
	.ws-scenes--mozaiek > .ws-scene:nth-child(1) { grid-column: span 2; }
	.ws-scenes--rij {
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 0.4rem;
		scrollbar-width: thin;
	}
	.ws-scenes--rij > .ws-scene { scroll-snap-align: start; }
}

@media (max-width: 600px) {
	.ws-scenes--mozaiek { grid-template-columns: 1fr; }
	.ws-scenes--mozaiek > .ws-scene:nth-child(1) { grid-column: auto; }
	.ws-scenes--mozaiek > .ws-scene .ws-scene__beeld { aspect-ratio: 3 / 2 !important; }
	.ws-scene__overlay { padding: 1.2rem 1.05rem 1rem; }
	.ws-scenes--hero > .ws-scene:first-child .ws-scene__overlay { padding: 1.5rem 1.15rem 1.2rem; }
}

/* Woonstijlen */
.ws-stijlen {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
}
.ws-stijl {
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: #FFFFFF;
	background: var(--wp--preset--color--zacht);
}
.ws-stijl:hover { text-decoration: none; color: #FFFFFF; }
.ws-stijl__beeld { display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.ws-stijl__beeld img,
.ws-stijl__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ws-stijl:hover .ws-stijl__img { transform: scale(1.05); }
.ws-stijl--leeg .ws-stijl__beeld {
	background: linear-gradient(160deg, #F3E3CE 0%, #E6D2B6 100%);
}
.ws-stijl__naam,
.ws-stijl__tel {
	position: relative;
	display: block;
	padding-inline: 0.9rem;
}
.ws-stijl__naam {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.45rem;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.98rem;
	font-weight: 600;
	z-index: 1;
}
.ws-stijl__tel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.7rem;
	font-size: 0.74rem;
	color: #E1D0B7;
	z-index: 1;
}
.ws-stijl::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 62%;
	background: linear-gradient(to top, rgba(20, 12, 2, 0.85), rgba(20, 12, 2, 0));
}
.ws-stijl--leeg .ws-stijl__naam { color: #2A1D10; }
.ws-stijl--leeg .ws-stijl__tel { color: #6B573C; }
.ws-stijl--leeg::after { background: none; }

@media (max-width: 1000px) { .ws-stijlen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ws-stijlen { grid-template-columns: repeat(2, 1fr); } }

/* Sectiekoppen met een link rechts */
.ws-sectiekop { align-items: flex-end; }

/* Categorietegels met een scene als achtergrond */
.ws-soorten .ws-soort__beeld img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
.ws-soorten .ws-soort:hover .ws-soort__beeld img { transform: scale(1.05); }

/* ==========================================================================
   5. Eigen blokstijlen
   ========================================================================== */

.wp-block-group.is-style-kaart {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 18px;
	padding: 1.5rem;
}
.wp-block-group.is-style-werkbank {
	background: var(--wp--preset--color--zacht);
	border: 1px solid var(--wp--preset--color--lijn);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--ws-radius);
	padding: 1.4rem 1.5rem;
}
.wp-block-list.is-style-vinkjes { list-style: none; padding-left: 0; }
.wp-block-list.is-style-vinkjes li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.45rem;
}
.wp-block-list.is-style-vinkjes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--wp--preset--color--groen);
	border-bottom: 2px solid var(--wp--preset--color--groen);
	transform: rotate(-45deg);
}
.wp-block-image.is-style-ingelijst img {
	border-radius: var(--ws-radius);
	border: 1px solid var(--wp--preset--color--lijn);
	background: var(--wp--preset--color--wit);
	padding: 6px;
}
.wp-block-separator.is-style-nerf {
	height: 3px;
	border: none;
	background: var(--wp--preset--gradient--nerf);
	opacity: 0.6;
	max-width: 120px;
	margin-inline: 0;
}
.wp-block-quote.is-style-woody {
	background: var(--wp--preset--color--zacht);
	border-left: 3px solid var(--wp--preset--color--groen);
	border-radius: 0 var(--ws-radius) var(--ws-radius) 0;
	padding: 1.2rem 1.4rem;
	font-style: normal;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.ws-footer {
	background: var(--wp--preset--color--hout);
	color: var(--wp--preset--color--creme);
	position: relative;
}
.ws-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--wp--preset--gradient--nerf);
}
.ws-footer,
.ws-footer p,
.ws-footer li { color: var(--wp--preset--color--creme); }
.ws-footer h2,
.ws-footer h3,
.ws-footer h4,
.ws-footer .ws-footer__kop {
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	margin: 0 0 0.9rem;
}
.ws-footer a {
	color: var(--wp--preset--color--creme);
	text-decoration: none;
}
.ws-footer a:hover {
	color: #E7B15A;
	text-decoration: underline;
}
.ws-footer__merk {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	margin: 0 0 0.7rem;
}
.ws-footer__tekst {
	font-size: 0.9rem;
	line-height: 1.7;
	color: #DFCFB6;
	max-width: 34ch;
}
.ws-footer__lijst {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.42rem;
	font-size: 0.9rem;
}
.ws-footer__cats {
	border-bottom: 1px solid rgba(243, 231, 216, 0.16);
}
.ws-footcats__intro {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	margin: 0 0 1.3rem;
}
.ws-footcats__intro a { color: #E7B15A; }
.ws-footcats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.6rem 2rem;
}
.ws-footcats__kop {
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #C9B99F;
	margin: 0 0 0.6rem;
}
.ws-footcats__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	font-size: 0.82rem;
	line-height: 1.4;
}
.ws-footcats__lijst a { color: #DFCFB6; }
.ws-footcats__lijst a:hover { color: #E7B15A; }

@media (max-width: 900px) {
	.ws-footcats__grid { grid-template-columns: repeat(2, 1fr); }
}

.ws-footer__slot {
	border-top: 1px solid rgba(243, 231, 216, 0.18);
	font-size: 0.8rem;
	color: #C9B99F;
}
.ws-footer__slot a { color: #C9B99F; }

/* ==========================================================================
   7. Vangnet voor Spectra-blokken (wp:uagb)
   Spectra Legacy is verwijderd, dus de plugin-CSS (uag-css-*.css) is weg.
   Deze laag houdt de drie pagina's die Spectra gebruikten (home 144, contact 36,
   services 33) leesbaar en op raster. Verwijderen zodra die pagina's zijn
   omgebouwd naar gewone blokken.
   ========================================================================== */

.wp-block-uagb-container,
.uagb-container__outer-wrap {
	box-sizing: border-box;
	min-width: 0;
}

/* Een root-container staat op alignfull; hem terugbrengen naar de sitebreedte
   houdt hem in lijn met de rest van de pagina. */
.wp-block-uagb-container.uagb-is-root-container,
.uagb-container__outer-wrap {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Standaard is een container een gewone stapel. Spectra bewaarde de richting
   alleen in zijn eigen CSS, dus alles naast elkaar zetten maakte van lopende
   tekst een rij losse kolommen. Blokstroom is hier de veilige aanname. */
.uagb-container-inner-blocks-wrap {
	display: flow-root;
}
.uagb-container-inner-blocks-wrap > * { max-width: 100%; }
.uagb-container-inner-blocks-wrap > .wp-block-separator {
	margin-inline: 0;
	border-color: var(--wp--preset--color--lijn);
}

/* Alleen wanneer een container zelf weer containers bevat, was het een
   kolommenrij. Browsers zonder :has() houden de veilige stapel. */
.uagb-container-inner-blocks-wrap:has(> .wp-block-uagb-container) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 1.6rem;
}
.uagb-container-inner-blocks-wrap:has(> .wp-block-uagb-container) > .wp-block-uagb-container {
	flex: 1 1 15rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-inline: 0;
}

/* Lege decoratieve kolommen namen ruimte in zonder iets te tonen. */
.uagb-container-inner-blocks-wrap > .wp-block-uagb-container:not(:has(*)) {
	display: none;
}

/* Beeld */
.wp-block-uagb-image img,
.wp-block-uagb-image__figure img,
.uagb-image__figure img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--ws-radius);
}
.wp-block-uagb-image,
.wp-block-uagb-image__figure { margin: 0; }

/* Zonder plugin-CSS hebben de icoon-SVG's geen maat en vullen ze het scherm. */
.uagb-ifb-icon-wrap,
.uagb-iconbox-icon-wrap,
.uagb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.85rem;
}
.uagb-ifb-icon-wrap svg,
.uagb-iconbox-icon-wrap svg,
.uagb-icon svg {
	width: 30px;
	height: 30px;
	max-width: 30px;
	max-height: 30px;
	fill: currentColor;
}
.uagb-infobox-shape-circle {
	width: 58px;
	height: 58px;
	border-radius: 999px;
	background: var(--wp--preset--color--zacht);
}

/* Info-box als kaart */
.wp-block-uagb-info-box {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 18px;
	padding: 1.5rem;
	box-sizing: border-box;
}
/* Alleen een kaart die in zijn eentje een kolom vult mag meegroeien. Bij drie
   gestapelde kaarten zou height:100% ze over de footer heen duwen. */
.uagb-container-inner-blocks-wrap > .wp-block-uagb-container > .wp-block-uagb-info-box:only-child {
	flex: 1 1 auto;
}
.uagb-ifb-content { display: flex; flex-direction: column; gap: 0.55rem; }
.uagb-ifb-title-prefix {
	display: block;
	font-family: var(--wp--preset--font-family--kop);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0;
}
.uagb-ifb-title-wrap { margin: 0; }
.uagb-ifb-title {
	font-family: var(--wp--preset--font-family--kop);
	color: var(--wp--preset--color--kop);
	font-size: 1.12rem;
	line-height: 1.22;
	margin: 0;
}
.uagb-ifb-desc {
	color: #55432E;
	font-size: 0.93rem;
	line-height: 1.6;
	margin: 0;
}

/* Koppenblok */
.wp-block-uagb-advanced-heading { margin-block: 0 1.2rem; }
.wp-block-uagb-advanced-heading .uagb-heading-text {
	font-family: var(--wp--preset--font-family--kop);
	color: var(--wp--preset--color--kop);
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 1.16;
	margin: 0 0 0.5rem;
}
.wp-block-uagb-advanced-heading .uagb-desc-text {
	color: var(--wp--preset--color--grijs);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
}
.wp-block-uagb-advanced-heading .uagb-separator { display: none; }

/* Postcarrousel (staat alleen op home 144, die nu front-page.html gebruikt) */
.wp-block-uagb-post-carousel .uagb-post__inner-wrap {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 18px;
	overflow: hidden;
}
.wp-block-uagb-post-carousel .uagb-post__image img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   8. Responsive hulp
   ========================================================================== */

@media (max-width: 781px) {
	.ws-header__balk { gap: 0.6rem; }
	.ws-hero__kop { max-width: none; }
}

@media (max-width: 640px) {
	.wp-block-columns.ws-footer__kolommen { gap: 2.2rem; }
}

/* Tabellen in artikelen mogen nooit horizontaal doorschuiven. */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 32rem; }

/* Print: chrome weglaten. */
@media print {
	.ws-header, .ws-footer, .wp-block-query-pagination { display: none !important; }
	body { background: #fff; }
}