/*
 * bvdh — hoofdstijl
 *
 * De maten komen uit de bestaande site: container 1170px, secties 100px lucht,
 * hero 72px, sectiekop 38px, lopende tekst 16px/1.5 in #787878.
 */

/*
 * Kleuren komen uit het themapalet (theme.json). Wijzig je daar de steunkleur — of
 * in de site-editor onder Weergave → Editor → Stijlen → Kleuren — dan werkt dat
 * meteen door in de hele site: knoppen, tijdlijn, links, streepjes en accenten.
 * De waarde achter de komma is alleen de terugvaloptie.
 */
:root {
	--bvdh-bg: var(--wp--preset--color--bg, #ffffff);
	--bvdh-surface: var(--wp--preset--color--surface, #f7f7f7);
	--bvdh-ink: var(--wp--preset--color--ink, #1f1f1f);
	--bvdh-accent: var(--wp--preset--color--accent, #d2232a);
	--bvdh-muted: var(--wp--preset--color--muted, #787878);
	--bvdh-line: var(--wp--preset--color--line, #eeeeee);
	--bvdh-on-dark: #c4c4c4;
	--bvdh-container: 1170px;
	--bvdh-gutter: 15px;
	--bvdh-section: 100px;
	--bvdh-nav-height: 90px;
}

/* Neutraliseer alleen browser-defaults; component-regels moeten altijd winnen. */
:where(body) {
	margin: 0;
	background: var(--bvdh-bg);
	color: var(--bvdh-muted);
	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 15px;
	color: var(--bvdh-ink);
	font-weight: 600;
	line-height: 1.3;
}

:where(p) { margin: 0 0 15px; }
:where(img) { max-width: 100%; height: auto; display: block; }
:where(a) { color: inherit; text-decoration: none; transition: color .25s ease; }
:where(a:hover) { color: var(--bvdh-accent); }

/*
 * Tekengewichten uit het oude thema. De grote tekstregels op deze site staan op 200
 * (extra licht) — dat is de lichte kop die de site zijn rust geeft.
 */
.bvdh-fw-200, .bvdh-fw-200 :where(h1, h2, h3, h4, p) { font-weight: 200; }
.bvdh-fw-300, .bvdh-fw-300 :where(h1, h2, h3, h4, p) { font-weight: 300; }
.bvdh-fw-400, .bvdh-fw-400 :where(h1, h2, h3, h4, p) { font-weight: 400; }
.bvdh-fw-500, .bvdh-fw-500 :where(h1, h2, h3, h4, p) { font-weight: 500; }
.bvdh-fw-600, .bvdh-fw-600 :where(h1, h2, h3, h4, p) { font-weight: 600; }

/* Dezelfde varianten als blokstijl, te kiezen in de editor. */
.is-style-bvdh-fw-200 { font-weight: 200; }
.is-style-bvdh-fw-300 { font-weight: 300; }
.is-style-bvdh-fw-400 { font-weight: 400; }
.is-style-bvdh-fw-600 { font-weight: 600; }

.is-style-bvdh-upper {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.bvdh-cursive, .bvdh-cursive :where(h1, h2, h3, h4, p) {
	font-weight: 400;
	letter-spacing: 0;
}

/* Een grote, lichte tekstregel: in de bron een alinea, geen kop. */
.bvdh-display {
	margin-bottom: 25px;
	color: var(--bvdh-ink);
	line-height: 1.2;
}

.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;
}

.bvdh-container {
	width: 100%;
	max-width: var(--bvdh-container);
	/* min-width: 0 houdt de container binnen zijn flex-ouder; zonder dit rekt de
	   inhoud hem op smalle schermen buiten beeld. */
	min-width: 0;
	margin-inline: auto;
	padding-inline: var(--bvdh-gutter);
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ knoppen */

.bvdh-button,
.wp-block-button__link {
	display: inline-block;
	padding: 15px 35px;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: var(--bvdh-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.bvdh-button:hover,
.wp-block-button__link:hover {
	background: var(--bvdh-ink);
	color: #fff;
}

.bvdh-button--light {
	color: #fff;
	border-color: rgba(255, 255, 255, .7);
}

.bvdh-button--light:hover {
	background: #fff;
	color: var(--bvdh-ink);
}

/* ----------------------------------------------------------------- loader */

/*
 * Het donkere vlak met het tekenende zeshoekje bij het openen van de site. De laag
 * is standaard weg en wordt alleen door het script aangezet, zodat een bezoeker
 * zonder JavaScript nooit naar een blijvend zwart scherm kijkt.
 */
.bvdh-loader { display: none; }

.bvdh-loader-active .bvdh-loader {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	background: var(--bvdh-ink);
	transition: opacity .5s ease, visibility .5s;
}

.bvdh-loader.is-done {
	opacity: 0;
	visibility: hidden;
}

.bvdh-loader__icon { width: 64px; height: 76px; }

.bvdh-loader__path {
	fill: none;
	stroke: #fff;
	stroke-width: 1;
	stroke-linejoin: round;
	stroke-dasharray: 70 32;
	animation: bvdh-preloader 1s infinite ease;
}

@keyframes bvdh-preloader {
	0% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -102; }
}

@media (prefers-reduced-motion: reduce) {
	.bvdh-loader__path { animation: none; }
}

/* --------------------------------------------------------------- navigatie */

.navbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 200;
	background: #fff;
	box-shadow: 0 5px 15px rgba(31, 31, 31, .07);
	transition: background-color .3s ease, box-shadow .3s ease;
}

.navbar .container {
	display: flex;
	align-items: center;
	gap: 25px;
	width: 100%;
	max-width: var(--bvdh-container);
	margin-inline: auto;
	padding-inline: var(--bvdh-gutter);
	min-height: var(--bvdh-nav-height);
	box-sizing: border-box;
}

.navbar .logo { flex: 0 0 auto; }
.navbar .logo img { width: 278px; height: auto; }
.navbar .logo-light { display: none; }

/* Boven aan de pagina zweeft de balk transparant over het beeld. */
.navbar--overlay:not(.is-scrolled) {
	background: transparent;
	box-shadow: none;
}

.navbar--overlay:not(.is-scrolled) .logo-light { display: block; }
.navbar--overlay:not(.is-scrolled) .logo-dark { display: none; }
.navbar--overlay:not(.is-scrolled) .navigation-menu > li > a { color: #fff; }
.navbar--overlay:not(.is-scrolled) .header-socials a { color: #fff; }
.navbar--overlay:not(.is-scrolled) .menu-toggle { color: #fff; }

/* Boven een lichte kop blijven logo en menu donker. */
.navbar--overlay-light:not(.is-scrolled) .logo-light { display: none; }
.navbar--overlay-light:not(.is-scrolled) .logo-dark { display: block; }
.navbar--overlay-light:not(.is-scrolled) .navigation-menu > li > a { color: var(--bvdh-ink); }
.navbar--overlay-light:not(.is-scrolled) .header-socials a { color: var(--bvdh-muted); }
.navbar--overlay-light:not(.is-scrolled) .menu-toggle { color: var(--bvdh-ink); }
.navbar--overlay-light:not(.is-scrolled) .menu-extras { border-left-color: rgba(31, 31, 31, .12); }

.navigation {
	order: 3;
	margin-left: auto;
}

.navigation-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.navigation-menu li { position: relative; }

/* De menu-items staan in gewone schrijfwijze, zoals op de bestaande site. */
.navigation-menu > li > a {
	display: block;
	padding: 10px 0;
	color: var(--bvdh-ink);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
}

.navigation-menu .current-menu-item > a,
.navigation-menu .current_page_item > a { color: var(--bvdh-accent); }

.navigation-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -20px;
	min-width: 190px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.navigation-menu li:hover > .sub-menu,
.navigation-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.navigation-menu .sub-menu a {
	display: block;
	padding: 8px 20px;
	color: var(--bvdh-ink);
	font-size: 14px;
}

/* De sociale kanalen staan rechts, achter een dunne scheidingslijn. */
.menu-extras {
	order: 4;
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 20px;
	margin-left: 30px;
	padding-left: 25px;
	border-left: 1px solid rgba(31, 31, 31, .12);
}

.navbar--overlay:not(.is-scrolled) .menu-extras { border-left-color: rgba(255, 255, 255, .3); }

.header-socials,
.social-list {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-socials a,
.social-list a {
	display: block;
	color: var(--bvdh-muted);
}

.header-socials svg,
.social-list svg { fill: currentColor; display: block; }

.menu-toggle {
	display: none;
	padding: 10px;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.hamburger,
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
}

.hamburger { position: relative; height: 18px; background: none; }
.hamburger-inner { position: absolute; top: 8px; }
.hamburger-inner::before { content: ""; position: absolute; top: -8px; }
.hamburger-inner::after { content: ""; position: absolute; top: 8px; }

/* ------------------------------------------------------------- paginakop */

/*
 * De kop boven Bureau, Contact, Projecten, Nieuws, Vacatures en Ebooks: een beeld
 * met een donkere sluier en de titel eroverheen. In het oude thema 550px hoog.
 */
.bvdh-page-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 550px;
	overflow: hidden;
	color: #fff;
}

.bvdh-page-hero--small { min-height: 380px; }
.bvdh-page-hero--large { min-height: 100vh; }

.bvdh-page-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.bvdh-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(31, 31, 31, .7);
}

.bvdh-page-hero--plain { background: var(--bvdh-ink); }
.bvdh-page-hero--plain .bvdh-page-hero__overlay { display: none; }

.bvdh-page-hero__inner {
	position: relative;
	width: 100%;
	padding-top: var(--bvdh-nav-height);
}

.bvdh-page-hero--center { text-align: center; }
.bvdh-page-hero--right { text-align: right; }

.bvdh-page-hero__title {
	margin: 0;
	color: #fff;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.bvdh-page-hero__subtitle {
	margin: 15px 0 0;
	color: rgba(255, 255, 255, .85);
	font-size: 18px;
	font-weight: 300;
}

/* ------------------------------------------------------------------ slider */

.bvdh-slider { position: relative; overflow: hidden; }
.bvdh-slider__track { position: relative; height: 100vh; min-height: 560px; }

/*
 * De dia's liggen op elkaar en wisselen met een rustige overvloeier. De uitgaande
 * dia blijft even staan (langere fade-out dan fade-in), zodat er geen moment is
 * waarop je door het beeld heen kijkt. Dat was de harde sprong.
 */
.bvdh-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s ease-in-out;
	pointer-events: none;
}

.bvdh-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
	transition: opacity 1.2s ease-in-out;
}

/*
 * Zonder JavaScript blijft de eerste dia zichtbaar. Zodra het script draait, zet het
 * `is-ready` en neemt `is-active` het over. Deze regel mocht dus niet blijven staan:
 * dia 1 bleef dan altijd op volle sterkte onder de rest liggen, waardoor de sprong
 * van de laatste dia terug naar de eerste hard aanvoelde — er was niets om naartoe
 * te vloeien.
 */
.bvdh-slider:not(.is-ready) .bvdh-slider__track > .bvdh-slide:first-child { opacity: 1; }

.bvdh-slide__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.04);
	transition: transform 8s linear;
}

.bvdh-slide.is-active .bvdh-slide__bg { transform: scale(1); }

/* Een lichte sluier met donkere tekst erover. */
.bvdh-slide--overlay-white .bvdh-slide__bg::after {
	background: rgba(255, 255, 255, .55);
}

.bvdh-slide--overlay-white .bvdh-slide__title,
.bvdh-slide--overlay-white .bvdh-slide__subtitle { color: var(--bvdh-ink); }

.bvdh-slide--overlay-white .bvdh-button--light {
	color: var(--bvdh-ink);
	border-color: rgba(31, 31, 31, .5);
}

.bvdh-slide--overlay-white .bvdh-button--light:hover {
	background: var(--bvdh-ink);
	color: #fff;
}

.bvdh-slide__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(31, 31, 31, .45) 0%, rgba(31, 31, 31, .15) 45%, rgba(31, 31, 31, .55) 100%);
}

.bvdh-slide__inner {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	color: #fff;
}

.bvdh-slide--valign-top .bvdh-slide__inner { align-items: flex-start; padding-top: 160px; }
.bvdh-slide--valign-bottom .bvdh-slide__inner { align-items: flex-end; padding-bottom: 90px; }
.bvdh-slide--align-center .bvdh-slide__inner { text-align: center; }
.bvdh-slide--align-right .bvdh-slide__inner { text-align: right; }
.bvdh-slide--align-center .bvdh-slide__subtitle { margin-inline: auto; }

/* Zonder sluier blijft alleen een lichte verdonkering onderaan staan, zodat de
   witte tekst leesbaar blijft zonder het beeld te dempen. */
.bvdh-slide--no-overlay .bvdh-slide__bg::after {
	background: linear-gradient(to top, rgba(31, 31, 31, .5), rgba(31, 31, 31, 0) 40%);
}

.bvdh-slide__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 72px;
	font-weight: 400;
	line-height: 1.25;
	text-transform: uppercase;
}

.bvdh-slide__subtitle {
	margin: 0 0 35px;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	max-width: 34em;
}

/* Streepjes onderaan het midden, zoals op de bestaande site. */
.bvdh-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 35px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 2;
}

.bvdh-slider__dots button {
	width: 34px;
	height: 2px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	font-size: 0;
	transition: background-color .25s ease;
}

.bvdh-slider__dots button.is-active { background: #fff; }

/* Pijlen links, gestapeld in donkere vierkanten. */
.bvdh-slider__nav {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	z-index: 2;
}

.bvdh-slider__nav button {
	width: 50px;
	height: 50px;
	border: 0;
	background: rgba(31, 31, 31, .85);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s ease;
}

.bvdh-slider__nav button:hover { background: var(--bvdh-ink); }
.bvdh-slider__nav button + button { border-top: 1px solid rgba(255, 255, 255, .15); }

/* ------------------------------------------------------------- sectiekoppen */

.bvdh-section-title { margin-bottom: 40px; }
.bvdh-section-title--left { text-align: left; }
.bvdh-section-title--center { text-align: center; }
.bvdh-section-title--right { text-align: right; }

.bvdh-section-title__title {
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -1px;
}

.bvdh-section-title--upper .bvdh-section-title__title {
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Elk kopniveau had in het oude thema zijn eigen maat. Een h6 is daar geen kleine
   kop maar een label: 13px, hoofdletters, gespatieerd. */
.bvdh-section-title--h1 .bvdh-section-title__title { font-size: 72px; font-weight: 400; line-height: 1.25; }
.bvdh-section-title--h3 .bvdh-section-title__title { font-size: 24px; }
.bvdh-section-title--h4 .bvdh-section-title__title { font-size: 18px; }
.bvdh-section-title--h5 .bvdh-section-title__title { font-size: 15px; font-weight: 600; letter-spacing: 0; }

.bvdh-section-title--h6 .bvdh-section-title__title {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Bij zo'n label staat het streepje er strak onder. */
.bvdh-section-title--h6.bvdh-section-title--rule .bvdh-section-title__title::after { margin-top: 12px; }

.bvdh-section-title--sub-upper .bvdh-section-title__subtitle {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13px;
	font-weight: 500;
}

.bvdh-section-title--display .bvdh-section-title__title {
	font-size: 72px;
	font-weight: 400;
	line-height: 1.25;
}

/* Het streepje uit de oude site: 40px breed, 1px, in de tekstkleur. */
.bvdh-section-title--rule .bvdh-section-title__title::after {
	content: "";
	display: block;
	width: 40px;
	height: 0;
	margin: 20px 0 15px;
	border-top: 1px solid var(--bvdh-ink);
}

.bvdh-section-title--center.bvdh-section-title--rule .bvdh-section-title__title::after { margin-inline: auto; }
.bvdh-section-title--right.bvdh-section-title--rule .bvdh-section-title__title::after { margin-inline: auto 0; }

/* Op een donkere grond keert het streepje mee om. */
.bvdh-dark .bvdh-section-title--rule .bvdh-section-title__title::after,
.has-ink-background-color .bvdh-section-title--rule .bvdh-section-title__title::after,
.bvdh-parallax .bvdh-section-title--rule .bvdh-section-title__title::after { border-top-color: #fff; }

.bvdh-section-title__subtitle {
	margin-top: 15px;
	color: var(--bvdh-muted);
	font-size: 16px;
	line-height: 1.6;
}

.bvdh-section-title__subtitle p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- projecten */

/* De filterrij staat direct onder de paginakop en heeft daar lucht boven nodig. */
.bvdh-project-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 25px;
	margin: 0 0 40px;
	padding-top: 60px;
}

.bvdh-project-filters button {
	padding: 0 0 4px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	color: var(--bvdh-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease;
}

.bvdh-project-filters button.is-active,
.bvdh-project-filters button:hover {
	color: var(--bvdh-ink);
	border-bottom-color: var(--bvdh-accent);
}

/*
 * Het aantal kolommen loopt via een variabele. Zo hoeft elke maat maar één regel
 * te zetten en kan de responsieve versie het aantal verlagen zonder een keuze uit
 * de editor te overschrijven.
 */
.bvdh-project-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(var(--bvdh-kolommen, 3), 1fr);
}

.bvdh-project-grid--cols-1 { --bvdh-kolommen: 1; }
.bvdh-project-grid--cols-2 { --bvdh-kolommen: 2; }
.bvdh-project-grid--cols-3 { --bvdh-kolommen: 3; }
.bvdh-project-grid--cols-4 { --bvdh-kolommen: 4; }
.bvdh-project-grid--tight { gap: 0; }

/* Eén tegel over de volle breedte wordt als vierkant onwerkbaar hoog. */
.bvdh-project-grid--cols-1 .bvdh-project__link img { aspect-ratio: 16 / 9; }

.bvdh-project.is-hidden { display: none; }

.bvdh-project__link {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--bvdh-ink);
}

.bvdh-project__link img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform .6s ease, opacity .4s ease;
}

.bvdh-project__link:hover img {
	transform: scale(1.06);
	opacity: .55;
}

.bvdh-project__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 25px;
	background: linear-gradient(to top, rgba(31, 31, 31, .75), rgba(31, 31, 31, 0) 55%);
	opacity: 0;
	transition: opacity .4s ease;
}

.bvdh-project__link:hover .bvdh-project__overlay { opacity: 1; }

.bvdh-project__title {
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.bvdh-project__cats {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, .75);
	font-size: 14px;
}

.bvdh-project-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 70vh;
	padding-bottom: 60px;
	background-size: cover;
	background-position: center;
	color: #fff;
}

/* Zonder uitgelicht beeld valt de kop terug op een donker vlak. */
.bvdh-project-hero--plain { background: var(--bvdh-ink); min-height: 55vh; }

.bvdh-project-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(31, 31, 31, .7), rgba(31, 31, 31, .1));
}

.bvdh-project-hero .bvdh-container { position: relative; }

.bvdh-project-hero__title {
	margin: 0;
	color: #fff;
	font-size: 72px;
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
}

.bvdh-project-hero__cats {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
}

.bvdh-project-nav {
	border-top: 1px solid var(--bvdh-line);
	padding: 40px 0;
}

.bvdh-project-nav .bvdh-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
}

.bvdh-project-nav a {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--bvdh-ink);
}

.bvdh-project-nav span {
	display: block;
	color: var(--bvdh-muted);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1px;
}

.bvdh-project-nav__next { text-align: right; }

/* ---------------------------------------------------------------- iconenband */

/* De kolom draagt de ruimte al (65px/50px uit de oorspronkelijke opmaak); het
   blok zelf voegt niets toe, anders wordt de tekstkolom onnodig smal. */
.bvdh-icon-box { padding: 0; }
.bvdh-icon-box--center { text-align: center; }
.bvdh-icon-box--left { text-align: left; }
.bvdh-icon-box--right { text-align: right; }

/*
 * Tekst naast het icoon. De uitlijning bepaalt hier waar het icoon staat:
 * links en midden zetten het icoon voorop, rechts zet het erachter.
 */
.bvdh-icon-box--side {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	text-align: left;
}

.bvdh-icon-box--side .bvdh-icon-box__icon { flex: 0 0 auto; margin-bottom: 0; }
.bvdh-icon-box--side .bvdh-icon-box__body { flex: 1 1 auto; min-width: 0; }
.bvdh-icon-box--side.bvdh-icon-box--center { justify-content: center; }

.bvdh-icon-box--side.bvdh-icon-box--right {
	flex-direction: row-reverse;
	text-align: right;
}

/* Een cirkel van 100px verdringt de tekstkolom; ernaast is kleiner genoeg. */
.bvdh-icon-box--side.bvdh-icon-box--boxed .bvdh-icon-box__icon { width: 72px; height: 72px; }
.bvdh-icon-box--side.bvdh-icon-box--boxed .bvdh-icon-box__icon svg { width: 36px; height: 36px; }

.bvdh-icon-box__icon {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--bvdh-accent);
}

.bvdh-icon-box--boxed .bvdh-icon-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.bvdh-icon-box__title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.bvdh-icon-box__text { font-size: 16px; line-height: 1.5; }
.bvdh-icon-box__text p:last-child { margin-bottom: 0; }

/* Op een donkere band draait de tekstkleur om. Koppen krijgen hun kleur uit
   theme.json en erven dus niet mee; die moeten hier expliciet wit worden. */
.bvdh-dark :where(h1, h2, h3, h4, h5, h6),
.has-ink-background-color :where(h1, h2, h3, h4, h5, h6),
.bvdh-dark .bvdh-section-title__title,
.has-ink-background-color .bvdh-section-title__title { color: #fff; }

/* dt en dd horen hier ook bij: zonder die twee blijven de waarden in de
   projectdetails donkere tekst op een donkere grond, en lijkt de lijst leeg. */
.bvdh-dark :where(p, li, td, th, dt, dd),
.has-ink-background-color :where(p, li, td, th, dt, dd) { color: #fff; }

.bvdh-dark .bvdh-specs__value,
.has-ink-background-color .bvdh-specs__value { color: #fff; }

.bvdh-dark a:not(.wp-block-button__link):not(.bvdh-button),
.has-ink-background-color a:not(.wp-block-button__link):not(.bvdh-button) { color: #fff; }

.bvdh-dark .bvdh-section-title__subtitle,
.has-ink-background-color .bvdh-section-title__subtitle { color: var(--bvdh-on-dark, #c4c4c4); }

.has-ink-background-color .bvdh-icon-box__title,
.bvdh-dark .bvdh-icon-box__title { color: #fff; }

.has-ink-background-color .bvdh-icon-box__text,
.bvdh-dark .bvdh-icon-box__text { color: #c4c4c4; }

.has-ink-background-color .bvdh-icon-box__icon,
.bvdh-dark .bvdh-icon-box__icon { color: #fff; }

/* -------------------------------------------------------------------- nieuws */

.bvdh-news-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(var(--bvdh-kolommen, 4), 1fr);
}

.bvdh-news-grid--cols-1 { --bvdh-kolommen: 1; }
.bvdh-news-grid--cols-2 { --bvdh-kolommen: 2; }
.bvdh-news-grid--cols-3 { --bvdh-kolommen: 3; }
.bvdh-news-grid--cols-4 { --bvdh-kolommen: 4; }

.bvdh-news-grid--cols-1 .bvdh-news__link img { aspect-ratio: 16 / 9; }

/*
 * Het nieuwsitem: een beeld op 4:3 met een dunne rand, en daarover linksboven een
 * witte plaat met de datum en de titel. Bij hover wordt die plaat donker met witte
 * tekst en verschijnt er een loep in het midden — de knopstaat van de oude site.
 */
.bvdh-news__link {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid #f2f2f2;
	background: var(--bvdh-ink);
}

.bvdh-news__media { display: block; }

.bvdh-news__link img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s ease;
}

.bvdh-news__link:hover img { transform: scale(1.04); }

.bvdh-news__plate {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	padding: 20px 25px;
	background: rgba(255, 255, 255, .9);
	transition: background-color .35s ease;
}

.bvdh-news__link:hover .bvdh-news__plate { background: rgba(0, 0, 0, .25); }

.bvdh-news__date {
	display: block;
	margin-bottom: 6px;
	color: var(--bvdh-ink);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color .35s ease;
}

.bvdh-news__title {
	display: block;
	color: var(--bvdh-ink);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.5px;
	transition: color .35s ease;
}

.bvdh-news__link:hover .bvdh-news__date,
.bvdh-news__link:hover .bvdh-news__title { color: #fff; }

.bvdh-news__zoom {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	color: #fff;
	opacity: 0;
	transform: scale(.8);
	transition: opacity .35s ease, transform .35s ease;
}

.bvdh-news__link:hover .bvdh-news__zoom {
	opacity: 1;
	transform: scale(1);
}

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

.bvdh-results {
	display: grid;
	gap: 40px 30px;
	grid-template-columns: repeat(3, 1fr);
}

.bvdh-results--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bvdh-results--cols-4 { grid-template-columns: repeat(4, 1fr); }

.bvdh-result__link { display: block; }

.bvdh-result__media {
	display: block;
	overflow: hidden;
	margin-bottom: 18px;
	background: var(--bvdh-surface);
}

.bvdh-result__link img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s ease;
}

.bvdh-result__link:hover img { transform: scale(1.04); }

/* Een resultaat zonder beeld krijgt een rustig vlak, zodat het raster niet hapert. */
.bvdh-result__blank {
	display: block;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--bvdh-surface), #e9e9e9);
}

.bvdh-result__kind {
	display: block;
	margin-bottom: 6px;
	color: var(--bvdh-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bvdh-result__title {
	display: block;
	margin-bottom: 8px;
	color: var(--bvdh-ink);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
}

.bvdh-result__excerpt {
	display: block;
	color: var(--bvdh-muted);
	font-size: 15px;
	line-height: 1.55;
}

.bvdh-search-empty {
	max-width: 40em;
	margin-inline: auto;
	text-align: center;
	font-size: 17px;
}

.bvdh-search-empty a { text-decoration: underline; }

/* Het zoekveld in de donkere kop en op de 404-pagina. */
.bvdh-search-form {
	max-width: 520px;
	margin: 30px auto 0;
}

.bvdh-search-form .wp-block-search__input {
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 0;
	background: transparent;
	color: #fff;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 15px;
}

.bvdh-search-form .wp-block-search__input::placeholder { color: rgba(255, 255, 255, .5); }

.bvdh-search-form .wp-block-search__button {
	border: 1px solid #fff;
	border-radius: 0;
	background: transparent;
	color: #fff;
	padding: 14px 28px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease;
}

.bvdh-search-form .wp-block-search__button:hover { background: #fff; color: var(--bvdh-ink); }

.bvdh-search-head .wp-block-query-title { margin-bottom: 0; color: #fff; }

/* ----------------------------------------------------------------- 404 */

.bvdh-404 .bvdh-parallax__inner { text-align: center; }
.bvdh-404 .wp-block-buttons { margin-top: 30px; }

@media (max-width: 782px) {
	.bvdh-results,
	.bvdh-results--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.bvdh-results,
	.bvdh-results--cols-2,
	.bvdh-results--cols-4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- paginering */

.bvdh-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 50px;
}

.bvdh-pagination__item {
	min-width: 38px;
	padding: 9px 6px;
	border: 1px solid var(--bvdh-line);
	color: var(--bvdh-ink);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.bvdh-pagination__item:hover,
.bvdh-pagination__item.is-active {
	background: var(--bvdh-ink);
	border-color: var(--bvdh-ink);
	color: #fff;
}

/* -------------------------------------------------------------------- voet */

/*
 * De voet staat vast onderaan het venster; de pagina schuift eroverheen en laat hem
 * bij het einde vrij. Dat is het parallax-effect van de oude site.
 *
 * Het werkt met drie dingen: de voet is `fixed` met een lage z-index, de inhoud
 * staat erboven met een hogere z-index, en aan het einde van de pagina staat een
 * spacer die precies zo hoog is als de voet. Het script meet die hoogte.
 *
 * Zolang de spacer geen hoogte heeft (script nog niet gedraaid, of gereduceerde
 * beweging), staat de voet gewoon onder de inhoud — dan is er niets kapot.
 */
.bvdh-footer-reveal #footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}

/* De inhoud schuift eroverheen en moet dus dekkend zijn. */
.bvdh-footer-reveal .wp-site-blocks > main {
	position: relative;
	z-index: 2;
	background: var(--bvdh-bg);
}

.bvdh-footer-reveal .wp-site-blocks > header { position: relative; z-index: 200; }

.footer-spacer { display: block; }

.site-footer {
	background: var(--bvdh-ink);
	color: #929292;
	font-size: 14px;
}

.site-footer .container,
.site-footer .bvdh-container {
	width: 100%;
	max-width: var(--bvdh-container);
	margin-inline: auto;
	padding-inline: var(--bvdh-gutter);
	box-sizing: border-box;
}

.footer-widgets { padding: 70px 0 50px; }

/* De voet is opgebouwd uit gewone blokken (Weergave → Editor → Voet), dus de
   kolommen komen van het kolommenblok. */
.footer-columns { gap: 40px; }
.footer-columns > .wp-block-column { min-width: 0; }

.footer-logo-wrap { margin: 0 0 20px; }
.footer-logo { width: 300px; max-width: 100%; filter: invert(1) grayscale(1) brightness(2); }

.footer-heading {
	margin: 0 0 20px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #929292; }
.footer-links a:hover { color: #fff; }

.newsletter-form input[type="email"],
.newsletter-form input[type="text"],
.footer-search input[type="search"] {
	width: 100%;
	margin-bottom: 10px;
	padding: 12px 15px;
	border: 1px solid #3a3a3a;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	box-sizing: border-box;
}

.newsletter-form input::placeholder,
.footer-search input::placeholder { color: #787878; }

.newsletter-honeypot { position: absolute; left: -5000px; }

.newsletter-form .button {
	margin-top: 5px;
	padding: 12px 25px;
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.newsletter-form .button:hover { background: #fff; color: var(--bvdh-ink); }

.footer-search { display: flex; gap: 10px; }
.footer-search input { margin-bottom: 0; }

.footer-search button {
	flex: 0 0 auto;
	padding: 0 15px;
	border: 1px solid #3a3a3a;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.footer-search svg { fill: currentColor; }

.footer-copy {
	border-top: 1px solid #2c2c2c;
	padding: 25px 0;
}

.footer-copy .container,
.footer-copy .bvdh-container,
.footer-copy__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* Het zoekveld van het core-blok in dezelfde stijl als de rest van de voet. */
.footer-search-block .wp-block-search__inside-wrapper {
	border: 1px solid #3a3a3a;
	border-radius: 0;
}

.footer-search-block .wp-block-search__input {
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	padding: 12px 15px;
	font-family: inherit;
	font-size: 14px;
}

.footer-search-block .wp-block-search__input::placeholder { color: #787878; }

.footer-search-block .wp-block-search__button {
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	padding: 0 15px;
}

.footer-search-block .wp-block-search__button svg { fill: currentColor; }

.footer-links.wp-block-list { list-style: none; padding-left: 0; }

.footer-copy .social-list a { color: #929292; }
.footer-copy .social-list a:hover { color: #fff; }

.copy-text p {
	margin: 0;
	font-size: 10px;
	font-weight: 200;
	line-height: 1.5;
	color: var(--bvdh-muted);
}

.navbar-spacer { height: var(--bvdh-nav-height); }

/* WordPress zet standaard 25px tussen de onderdelen van de pagina. Tussen kop en
   inhoud hoort daar niets te staan: de secties dragen hun eigen ruimte. Zonder deze
   twee regels loopt er een witte streep tussen de paginakop en de eerste sectie. */
.wp-site-blocks > main { margin-block-start: 0; }
.wp-site-blocks > main > * + * { margin-block-start: 0; }

/* ------------------------------------------------------ scroll-animaties */

/*
 * Onderdelen die in het oude thema een `css_animation` hadden, komen rustig in
 * beeld zodra ze in het zicht schuiven.
 *
 * De beginstand staat achter `.bvdh-anim-ready`, een klasse die het script op
 * <html> zet. Draait het script niet, dan wordt er niets verborgen en staat de
 * pagina er gewoon.
 */
.bvdh-anim-ready .bvdh-reveal {
	opacity: 0;
	transition: opacity .8s ease, transform .8s ease;
	will-change: opacity, transform;
}

.bvdh-anim-ready .bvdh-reveal--up { transform: translateY(40px); }
.bvdh-anim-ready .bvdh-reveal--down { transform: translateY(-40px); }
.bvdh-anim-ready .bvdh-reveal--left { transform: translateX(-40px); }
.bvdh-anim-ready .bvdh-reveal--right { transform: translateX(40px); }

.bvdh-anim-ready .bvdh-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.bvdh-anim-ready .bvdh-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------- parallax */

.bvdh-parallax {
	position: relative;
	overflow: hidden;
	color: #fff;
}

.bvdh-parallax--full { min-height: 100vh; }

.bvdh-parallax__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/* Het beeld blijft staan terwijl de tekst eroverheen schuift. */
.bvdh-parallax--fixed .bvdh-parallax__bg { background-attachment: fixed; }

.bvdh-parallax__overlay { position: absolute; inset: 0; }

.bvdh-parallax__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: inherit;
	padding: 110px 0;
}

.bvdh-parallax--full .bvdh-parallax__inner { min-height: 100vh; }

.bvdh-parallax :where(h1, h2, h3, h4, h5, h6, p, li) { color: #fff; }

/* Op een aanraakscherm werkt een vaststaande achtergrond niet; dan gewoon mee scrollen. */
@media (hover: none) {
	.bvdh-parallax--fixed .bvdh-parallax__bg { background-attachment: scroll; }
}

/* ----------------------------------------------------- inhoudsslider */

/*
 * Pagina's die elkaar afwisselen. Zonder JavaScript staan ze gewoon onder elkaar;
 * het script legt ze pas op elkaar zodra het draait, zodat de inhoud nooit
 * onbereikbaar wordt.
 */
.bvdh-pageable__track { position: relative; }

/* De baan is klikbaar: links terug, rechts verder. De cursor laat dat zien. */
.bvdh-pageable.is-ready .bvdh-pageable__track { cursor: pointer; touch-action: pan-y; }
.bvdh-pageable.is-ready a,
.bvdh-pageable.is-ready button { cursor: pointer; }

/*
 * Alle pagina's liggen op elkaar in een baan met de hoogte van de langste. Zo
 * verspringt de rest van de pagina niet bij het wisselen, en staat de inhoud —
 * net als in de bron — verticaal gecentreerd.
 */
.bvdh-pageable.is-ready .bvdh-pageable__slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
}

.bvdh-pageable.is-ready .bvdh-pageable__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* De kolommen binnen een pagina lijnen op het midden uit. */
.bvdh-pageable__slide .wp-block-columns { align-items: center; }

.bvdh-pageable__slide + .bvdh-pageable__slide { margin-top: 50px; }
.bvdh-pageable.is-ready .bvdh-pageable__slide + .bvdh-pageable__slide { margin-top: 0; }

.bvdh-pageable__dots {
	display: none;
	justify-content: center;
	gap: 10px;
	margin-top: 35px;
}

.bvdh-pageable.is-ready .bvdh-pageable__dots { display: flex; }

.bvdh-pageable__dots button {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 1px solid var(--bvdh-ink);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	font-size: 0;
	transition: background-color .25s ease;
}

.bvdh-pageable__dots button.is-active { background: var(--bvdh-ink); }

/* Op een donkere grond keert de stip mee om. */
.bvdh-dark .bvdh-pageable__dots button,
.has-ink-background-color .bvdh-pageable__dots button { border-color: #fff; }

.bvdh-dark .bvdh-pageable__dots button.is-active,
.has-ink-background-color .bvdh-pageable__dots button.is-active { background: #fff; }

/* -------------------------------------------------------------- carrousel */

.bvdh-carousel { position: relative; }
.bvdh-carousel__viewport { overflow: hidden; }

.bvdh-carousel__track {
	display: flex;
	transition: transform .6s ease;
}

/* Geen witruimte tussen de beelden: de band loopt als één doorlopende strook. */
.bvdh-carousel__item {
	flex: 0 0 100%;
	box-sizing: border-box;
}

.bvdh-carousel--per-2 .bvdh-carousel__item { flex-basis: 50%; }
.bvdh-carousel--per-3 .bvdh-carousel__item { flex-basis: 33.3333%; }
.bvdh-carousel--per-4 .bvdh-carousel__item { flex-basis: 25%; }

/* Alle beelden op dezelfde hoogte, bijgesneden vanuit het midden, zodat de rij
   één rechte band vormt ongeacht de verhouding van het bronbeeld. */
.bvdh-carousel__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}

.bvdh-carousel--per-2 .bvdh-carousel__item img { aspect-ratio: 16 / 10; }
.bvdh-carousel--per-3 .bvdh-carousel__item img,
.bvdh-carousel--per-4 .bvdh-carousel__item img { aspect-ratio: 4 / 3; }

/* Tijdens het naadloos terugspringen mag er geen overgang zichtbaar zijn. */
.bvdh-carousel__track.is-jumping { transition: none; }

.bvdh-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	background: rgba(31, 31, 31, .55);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, background-color .25s ease;
}

.bvdh-carousel:hover .bvdh-carousel__nav,
.bvdh-carousel__nav:focus-visible { opacity: 1; }

.bvdh-carousel__nav:hover { background: var(--bvdh-ink); }
.bvdh-carousel__nav--prev { left: 15px; }
.bvdh-carousel__nav--next { right: 15px; }

@media (max-width: 782px) {
	.bvdh-carousel__item,
	.bvdh-carousel--per-2 .bvdh-carousel__item,
	.bvdh-carousel--per-3 .bvdh-carousel__item,
	.bvdh-carousel--per-4 .bvdh-carousel__item { flex-basis: 100%; }

	.bvdh-carousel__nav { opacity: 1; }
	.bvdh-parallax--full,
	.bvdh-parallax--full .bvdh-parallax__inner { min-height: 70vh; }
}

/* ---------------------------------------------------------------- tijdlijn */

/* De tijdlijn uit de oude site: dunne lijn op 10%, een stip per regel, en een rood
   datumvaantje met een punt naar links. Bij hover kleurt de stip rood en schuift
   het vaantje een paar pixels naar links. */
.bvdh-timeline {
	position: relative;
	margin: 0;
	padding: 100px 0;
	list-style: none;
}

/*
 * De lijn loopt van de eerste stip tot de laatste — niet daarboven of daaronder.
 * Daarom zit hij niet op de lijst zelf (die heeft 100px lucht boven en onder) maar
 * op elk item, met een verspringend begin- en eindpunt.
 */
.bvdh-timeline__item {
	position: relative;
	margin-left: 10%;
	margin-bottom: 35px;
}

.bvdh-timeline__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	/* doorlopen over de tussenruimte naar het volgende item */
	bottom: -35px;
	width: 1px;
	background: #e6e6e6;
}

/* Het eerste item begint bij het midden van zijn eigen stip. */
.bvdh-timeline__item:first-child::before { top: 15px; }

/* Het laatste item eindigt daar ook. */
.bvdh-timeline__item:last-child { margin-bottom: 0; }
.bvdh-timeline__item:last-child::before { bottom: auto; height: 15px; }

/* Eén regel heeft geen lijn nodig. */
.bvdh-timeline__item:first-child:last-child::before { display: none; }

.bvdh-timeline__content {
	position: relative;
	padding: 0 50px;
}

.bvdh-timeline__content::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: #e6e6e6;
	z-index: 2;
	transition: background-color .3s ease, box-shadow .3s ease;
}

.bvdh-timeline__item:hover .bvdh-timeline__content::before {
	background: var(--bvdh-accent);
	box-shadow: 0 0 0 1px var(--bvdh-accent);
}

.bvdh-timeline__date {
	position: relative;
	display: inline-block;
	height: 22px;
	margin: 0 0 15px -12px;
	padding: 0 12px;
	background: var(--bvdh-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	line-height: 22px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: margin-left .3s ease;
}

/* Het puntje links van het vaantje. */
.bvdh-timeline__date::before {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: -12px;
	border: 11px solid var(--bvdh-accent);
	border-left-color: transparent !important;
	z-index: -1;
}

.bvdh-timeline__item:hover .bvdh-timeline__date { margin-left: -16px; }

.bvdh-timeline__title { margin: 0 0 10px; font-size: 14px; font-weight: 700; }

.bvdh-timeline__place {
	display: block;
	margin: 0 0 5px;
	color: var(--bvdh-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bvdh-timeline__text { margin-top: 10px; }
.bvdh-timeline__text p:last-child { margin-bottom: 0; }

/* Op een donkere grond schuift de lijn mee naar donkergrijs. */
.bvdh-dark .bvdh-timeline__item::before,
.has-ink-background-color .bvdh-timeline__item::before { background: #393939; }

.bvdh-dark .bvdh-timeline__content::before,
.has-ink-background-color .bvdh-timeline__content::before {
	background: #393939;
	box-shadow: 0 0 0 1px #393939;
}

/* -------------------------------------------------------------- pdf & kaart */

.bvdh-pdf { margin: 0; }

.bvdh-pdf iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--bvdh-line);
}

.bvdh-pdf figcaption {
	margin-top: 15px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Het venster snijdt de onderste balk van de kaartdienst weg. */
.bvdh-map__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--bvdh-line);
	background: var(--bvdh-surface);
}

.bvdh-map__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* 32px extra hoogte: precies de balk die eronder wegvalt. */
	height: calc(100% + 32px);
	border: 0;
	filter: grayscale(1) contrast(1.05) brightness(1.02);
	/*
	 * De kaart staat vast. De speld is een eigen laag bovenop het beeld en schuift
	 * dus niet mee; zou je kunnen slepen, dan zou de speld ergens anders gaan
	 * aanwijzen. Verplaatsen en zoomen doe je via 'Grotere kaart bekijken'.
	 */
	pointer-events: none;
}

/* De speld staat op het middelpunt van de kaart. Het venster snijdt onderaan 32px
   weg, dus het optische midden ligt 16px hoger. */
.bvdh-map__pin {
	position: absolute;
	left: 50%;
	top: calc(50% - 16px);
	transform: translate(-50%, -100%);
	color: var(--bvdh-accent);
	pointer-events: none;
	filter: drop-shadow(0 2px 4px rgba(31, 31, 31, .35));
}

.bvdh-map__pin svg { display: block; }

/* Klikken op de kaart opent hem op ware grootte. */
.bvdh-map__open {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.bvdh-map__frame:hover .bvdh-map__pin { transform: translate(-50%, -108%); }
.bvdh-map__pin { transition: transform .25s ease; }

.bvdh-map__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 15px;
	margin-top: 12px;
}

.bvdh-map__link {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.bvdh-map__credit {
	color: var(--bvdh-muted);
	font-size: 11px;
}

/* ------------------------------------------------------------- team & logo's */

.bvdh-team-member img { margin-bottom: 15px; }
.bvdh-team-member h3 { margin-bottom: 4px; font-size: 18px; }
.bvdh-team-member p { font-size: 14px; }

.bvdh-clients {
	flex-wrap: wrap;
	gap: 40px;
	align-items: center;
}

.bvdh-clients img { max-height: 60px; width: auto; }

/* --------------------------------------------------- blokken in de content */

/*
 * Schermbreed betekent ook echt schermbreed.
 *
 * WordPress geeft een blok op «volledige breedte» een negatieve zijmarge ter grootte
 * van de paginamarge. Zit zo'n blok binnen een groep die zelf al schermbreed is, dan
 * moet die marge nog een keer worden opgeheven — anders staat het 15px ingesprongen.
 * Dit geldt voor elk blok, niet alleen voor de slider.
 */
.wp-block-group.alignfull.has-global-padding > .alignfull {
	margin-left: calc(var(--wp--style--root--padding-left, 15px) * -1);
	margin-right: calc(var(--wp--style--root--padding-right, 15px) * -1);
}

/*
 * Geen witruimte boven en onder een schermbrede band. De standaardafstand van 25px
 * tussen blokken hoort tussen tekst, niet tussen een foto en de rand van de sectie
 * eronder.
 */
.wp-site-blocks main .alignfull { margin-block: 0; }
.wp-site-blocks main .alignfull + :where(:not(.alignfull)) { margin-block-start: 50px; }

.entry-hero .wp-block-post-title { margin-top: 5px; }

.wp-block-columns { gap: 30px; }

/* Lijsten staan iets strakker dan losse alinea's. */
.wp-block-list li { margin-bottom: 6px; line-height: 1.45; }
.wp-block-list li:last-child { margin-bottom: 0; }
.wp-block-list ul,
.wp-block-list ol { margin-top: 6px; }

.wp-block-image figcaption {
	margin-top: 10px;
	color: var(--bvdh-muted);
	font-size: 13px;
	text-align: left;
}

/* Een schermbrede afbeelding rekt op tot de vensterbreedte, ook als het bestand
   zelf smaller is dan het scherm. Zonder width:100% stopt de afbeelding bij haar
   eigen resolutie en blijft er wit aan de zijkanten staan. */
.wp-block-image.alignfull,
.wp-block-image.alignwide { margin-block: 0; }

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

.wp-block-gallery.has-nested-images figure.wp-block-image { margin: 0; }

/* -------------------------------------------------------- gegevenslijst */

.bvdh-specs {
	margin: 0;
	--bvdh-spec-label: 200px;
}

.bvdh-specs__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 30px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bvdh-line);
}

.bvdh-specs__row:first-child { border-top: 1px solid var(--bvdh-line); }

.bvdh-specs__label {
	flex: 0 0 var(--bvdh-spec-label);
	margin: 0;
	color: var(--bvdh-muted);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.5;
}

.bvdh-specs__value {
	flex: 1 1 240px;
	margin: 0;
	color: var(--bvdh-ink);
}

/* Op een donkere band worden de scheidingslijnen wit — dat zijn de horizontale
   witte lijnen uit de oorspronkelijke projectdetails. */
.bvdh-dark .bvdh-specs__row,
.has-ink-background-color .bvdh-specs__row { border-bottom-color: rgba(255, 255, 255, .2); }

.bvdh-dark .bvdh-specs__row:first-child,
.has-ink-background-color .bvdh-specs__row:first-child { border-top-color: rgba(255, 255, 255, .2); }

.bvdh-dark .bvdh-specs__label,
.has-ink-background-color .bvdh-specs__label { color: var(--bvdh-on-dark); }

@media (max-width: 600px) {
	.bvdh-specs__label { flex-basis: 100%; margin-bottom: 2px; }
}

/* Tabellen uit de oorspronkelijke content: kolommen op inhoud, links uitgelijnd. */
.bvdh-raw table { border-collapse: collapse; }
.bvdh-raw td { padding: 6px 40px 6px 0; vertical-align: top; }
.bvdh-raw td:last-child { padding-right: 0; }

/* Formulieren van Contact Form 7 in dezelfde rechte stijl als de rest. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid var(--bvdh-line);
	border-radius: 0;
	background: var(--bvdh-bg);
	color: var(--bvdh-ink);
	font-family: inherit;
	font-size: 15px;
	box-sizing: border-box;
}

.wpcf7-form textarea { min-height: 160px; resize: vertical; }

.wpcf7-form input[type="submit"] {
	padding: 15px 35px;
	border: 1px solid var(--bvdh-ink);
	border-radius: 0;
	background: transparent;
	color: var(--bvdh-ink);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.wpcf7-form input[type="submit"]:hover { background: var(--bvdh-ink); color: #fff; }

.wpcf7-form p { margin-bottom: 15px; }

/* --------------------------------------------------------------- responsief */

@media (max-width: 1024px) {
	/* Alleen naar beneden bijstellen: één of twee kolommen blijven wat ze zijn. */
	.bvdh-news-grid--cols-3,
	.bvdh-news-grid--cols-4,
	.bvdh-project-grid--cols-3,
	.bvdh-project-grid--cols-4 { --bvdh-kolommen: 2; }
	.footer-columns { grid-template-columns: repeat(2, 1fr); }
	.bvdh-slide__title { font-size: 52px; }
}

@media (max-width: 782px) {
	:root { --bvdh-section: 60px; --bvdh-nav-height: 70px; }

	.menu-toggle { display: block; }

	/* Op een telefoon past het volle logo niet naast het menuknopje; de sociale
	   kanalen staan bovendien al in de voet. */
	.navbar .logo img { width: 190px; }
	.navbar .container { gap: 10px; }
	.header-socials { display: none; }

	.bvdh-slide__inner { padding-inline: 0; }
	.bvdh-slide__subtitle { max-width: none; }

	.navigation {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: #fff;
		box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
	}

	.navigation.is-open { display: block; }

	.navigation-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px 15px;
	}

	.navbar--overlay:not(.is-scrolled) .navigation-menu > li > a { color: var(--bvdh-ink); }

	.navigation-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding: 0 0 0 15px;
	}

	.bvdh-project-grid,
	.bvdh-news-grid { --bvdh-kolommen: 1; }

	.footer-columns { grid-template-columns: 1fr; }

	.bvdh-slide__title { font-size: 38px; }
	.bvdh-slide__subtitle { font-size: 16px; }
	.bvdh-section-title__title { font-size: 28px; }
	.bvdh-section-title--display .bvdh-section-title__title { font-size: 38px; }
	.bvdh-project-hero__title { font-size: 38px; }
	.bvdh-icon-box { padding: 40px 25px; }

	.footer-copy .container,
	.footer-copy .bvdh-container { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}

	.bvdh-slide__bg { transform: none; }
}