/* ---------------------------------------------------------------------------
   Beleefkracht — layout.

   Alle maten komen uit Peters artboards (1920 x 5600, 1 pt = 1 px). Bij >=1200px
   staat de site 1-op-1 op het ontwerp; daar meet tools/visual-check.sh.
   Tokens staan in ../../style.css.

   Leidraad bij wijzigen: verander een getal hier niet zonder het in het ontwerp
   na te meten. Wat "een beetje scheef" lijkt is meestal precies goed.
   ------------------------------------------------------------------------- */

/* --- basis -------------------------------------------------------------- */

body {
	font-family: var(--bk-font);
	font-size: var(--bk-body);
	font-weight: var(--bk-body-gew);
	line-height: var(--bk-body-lh);
	color: var(--bk-tekst);
	background: var(--bk-wit);
}

/* Regelafstand overal expliciet: Figtree's ascender/descender wijken af van
   Museo Sans, en met `normal` drijven blokhoogtes weg van het ontwerp. */
h1, h2, h3, h4, p, li {
	margin: 0;
	line-height: var(--bk-body-lh);
}

p + p {
	margin-top: var(--bk-alinea);
}

/* Astra zet zijn eigen koptypografie in dynamische CSS die INLINE in de head
   staat, dus ná dit bestand. Op gelijke specificiteit wint dan Astra: onze h2
   van 48px werd er 30. Daarom scopen we op onze eigen secties — `:is()` telt
   als klasse, dus (0,1,1) tegen Astra's (0,1,0).

   Niet oplossen met !important: dan kan Beryl in de Customizer niets meer
   bijstellen zonder dat het stilletjes wordt genegeerd. */
:is(.bk-hero, .bk-intro, .bk-inhoud, .bk-kaart, .bk-golf, .bk-footer, .bk-kaarten) :is(h1, h2, h3, h4, p, li) {
	line-height: var(--bk-body-lh);
}

/* Koppen stonden op Astra's #1e293b: een koudere, blauwere tint dan ons navy
   #404058. Dat valt los niet op maar staat naast de kaarten en de footer, die
   wél op #404058 staan. De omkeringen in de footer en op de kaarten staan
   verderop in dit bestand en winnen op volgorde. */
:is(.bk-hero, .bk-intro, .bk-inhoud, .bk-golf, .bk-kaarten) :is(h1, h2, h3, h4) {
	color: var(--bk-tekst);
}

:is(.bk-hero, .bk-intro, .bk-inhoud, .bk-kaart, .bk-golf, .bk-footer, .bk-kaarten) h1 {
	font-size: var(--bk-hero); line-height: var(--bk-hero-lh); font-weight: var(--bk-hero-gew);
}
:is(.bk-hero, .bk-intro, .bk-inhoud, .bk-kaart, .bk-golf, .bk-footer, .bk-kaarten) h2 {
	font-size: var(--bk-h2); line-height: var(--bk-h2-lh); font-weight: var(--bk-h2-gew);
}
:is(.bk-hero, .bk-intro, .bk-inhoud, .bk-kaart, .bk-golf, .bk-footer, .bk-kaarten) h3 {
	font-size: var(--bk-kaarttitel); line-height: var(--bk-h2-lh); font-weight: var(--bk-kaart-gew);
}

h1 { font-size: var(--bk-hero);       line-height: var(--bk-hero-lh); font-weight: var(--bk-hero-gew); }
h2 { font-size: var(--bk-h2);         line-height: var(--bk-h2-lh);   font-weight: var(--bk-h2-gew); }
h3 { font-size: var(--bk-kaarttitel); line-height: var(--bk-h2-lh);   font-weight: var(--bk-kaart-gew); }

/* --- raster ------------------------------------------------------------- */

/* Astra's eigen container staat op 1200 (Customizer > Container). Deze klasse
   is voor secties die buiten de reguliere contentflow vallen. */
.bk-wrap {
	width: min(var(--bk-content), calc(100% - 2 * var(--bk-ritme)));
	margin-inline: auto;
}

/* Twee kolommen van 565 met 70 ertussen — het raster waar portret,
   dienstenkaarten en tekstkolommen alle drie op liggen. */
.bk-twee {
	display: grid;
	grid-template-columns: var(--bk-kolom) var(--bk-kolom);
	gap: var(--bk-goot);
}

@media (max-width: 1271px) {
	.bk-twee { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
	.bk-twee { grid-template-columns: 1fr; gap: var(--bk-alinea); }
}

/* Secties die van rand tot rand lopen, ook binnen Astra's container. */
.bk-vol {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --- header ------------------------------------------------------------- */

.bk-header {
	background: var(--bk-creme);
	min-height: var(--bk-header-h);
	display: flex;
	align-items: center;
}

.bk-header-binnen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bk-goot);
}

/* Niet laten krimpen. Het logo is een flex-item en mocht standaard meegeven;
   omdat het actieve menu-item vet is (en vet breder), werd het logo per pagina
   1 tot 6px smaller. Dat las als "het logo verschuift". */
.bk-logo-link       { flex: 0 0 auto; }
.bk-header .bk-logo { width: var(--bk-logo-b); height: auto; display: block; }

/* Het menu staat in het ontwerp op de hoogte van 'kracht', niet op het midden
   van het logo: logo-inkt begint op y=41, de menu-basislijn ligt op 156. Het
   item begint dus op 156 - 21 (ascender) - 7 (halve regelafstand) = 128,
   oftewel 87 onder de bovenkant van het logo.

   De header lijnt daarom van boven uit in plaats van te centreren. Met
   align-items:center werd de binnenkant van de header zelf al gecentreerd,
   waardoor elke marge maar half doorwerkte en het getal in deze regel niets
   zei over waar het menu terechtkwam. */
.bk-header { align-items: flex-start; }
.bk-header-binnen { padding-top: calc(41 * var(--bk-u)); }
.bk-header .bk-menu { margin-top: calc(87 * var(--bk-u)); }

.bk-menu-lijst {
	display: flex;
	gap: 52px;
	white-space: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bk-menu-lijst .current-menu-item > a { font-weight: 700; }

/* Elk menu-item houdt de breedte van zijn vette variant, ook als het niet
   actief is. Zonder dit verspringen de items onderling zodra je navigeert:
   het actieve item wordt vet en duwt de rest opzij. De schaduwtekst staat er
   onzichtbaar onder en bepaalt de breedte. */
.bk-menu-lijst a { position: relative; display: block; }

.bk-menu-lijst a::after {
	content: attr(data-tekst);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 700;
	pointer-events: none;
}
.bk-header nav a {
	font-size: var(--bk-menu);
	font-weight: var(--bk-menu-gew);
	color: var(--bk-navy);
	text-decoration: none;
}
.bk-header nav a[aria-current="page"] { font-weight: 700; }

/* --- hero --------------------------------------------------------------- */

/* `cover`, zonder inzoomen. Peter leverde de banners op bandmaat aan
   (1920x870 en 1920x500), precies de hoogtes uit het ontwerp, dus de uitsnede
   is al gemaakt. Hiervoor stond hier 175%: dat was een gezochte benadering om
   met een te kleine telefoonfoto (1303px) toch bij de kadrering van het ontwerp
   uit te komen. Die zoektocht is nu overbodig — de nieuwe foto meet 0,179 tegen
   de fotolaag van het ontwerp, de oude haalde met de beste uitsnede 0,257. */
.bk-hero {
	position: relative;
	min-height: var(--bk-hero-h);
	display: flex;
	align-items: flex-start;
	background: var(--bk-navy) center center no-repeat;
	background-size: cover;
	color: var(--bk-tekst-omkeer);
	box-sizing: border-box;

	/* Boven: de eerste tekstregel staat in het ontwerp op y=491, de band begint
	   op 209. Onder: ruimte vrijhouden waar het portret overheen komt, zodat de
	   herotekst daar nooit onder kan schuiven — ook niet als de band krimpt. */
	padding-top: var(--bk-hero-tekst-y);
	padding-bottom: var(--bk-portret-over);
}

.bk-hero h1 { max-width: calc(1100 * var(--bk-u)); }
.bk-hero .bk-wrap { width: min(var(--bk-content), calc(100% - 2 * var(--bk-ritme))); }

/* Astra zet op pagina's een content-container met eigen padding; de hero staat
   daarbuiten en moet van rand tot rand. */
.bk-hero, .bk-fotoband, .bk-footer, .bk-header { width: 100%; }

/* Binnenpagina's hebben een lagere banner met alleen de paginatitel. */
/* Binnenpagina's: lagere banner, maar de titel is even groot als op de
   voorpagina — gemeten 84px op x=360, y=491, precies dezelfde plek. Er komt
   geen portret overheen, dus geen ruimte onderaan vrijhouden. */
.bk-hero--sub {
	min-height: var(--bk-hero-sub-h);
	padding-bottom: 0;
}
.bk-hero.bk-hero--sub h1 {
	font-size: var(--bk-hero);
	line-height: var(--bk-hero-lh);
	font-weight: var(--bk-hero-gew);
}

/* --- intro met overstekend portret -------------------------------------- */

/* Het portret begint op y=787, terwijl de crème-sectie pas op 1082 start: het
   steekt dus 295px omhoog de hero in. Vandaar de negatieve marge; z-index
   houdt het boven de hero-foto. */
.bk-intro.wp-block-group {
	background: var(--bk-creme);
	padding: 0 0 102px;      /* gemeten: laatste regel op 2057, sectie eindigt 2159 */
}

.bk-intro .bk-portret { margin: calc(-1 * var(--bk-portret-over)) 0 0; }

.bk-intro .bk-portret img {
	margin-top: 0;
	position: relative;
	z-index: 2;
	width: var(--bk-portret-b);
	max-width: 100%;
	aspect-ratio: 572 / 909;
	object-fit: cover;
	border-radius: var(--bk-radius);
	box-shadow: var(--bk-schaduw);
	display: block;
}

/* Het intro-raster is niet 565/565 maar 572 links en de tekstkolom rechts:
   het portret is in het ontwerp iets breder dan een gewone kolom. */
.bk-intro .bk-wrap.bk-twee { grid-template-columns: var(--bk-portret-b) var(--bk-kolom); gap: calc(63 * var(--bk-u)); }
.bk-intro .bk-tekst > * + * { margin-top: var(--bk-alinea); }
.bk-intro .bk-tekst h2 { margin-bottom: 0; }

/* De tekstkolom begint op de hoogte van de crème-rand, niet van het portret. */
/* De kop staat in het ontwerp op y=1169, de crème-sectie begint op 1082.
   Astra legt op elke wp-block-group 66px vulling; die moet er hier af, anders
   staat de tekst 66px te laag. */
.bk-intro .bk-tekst.wp-block-group { padding: calc(87 * var(--bk-u)) 0 0; }
/* Stond eerst als losse regel op `.bk-intro .bk-tekst`, maar die verloor van
   de padding: 0 hierboven (0,3,0 tegen 0,2,0). De kop plakte daardoor tegen de
   hero en de hele pagina stond 77px te hoog. Peter merkte het op (#340). */

@media (max-width: 767px) {
	.bk-intro .bk-portret { margin-top: -120px; }
	.bk-intro .bk-tekst   { padding-top: var(--bk-alinea); }
}

/* --- dienstenkaarten ---------------------------------------------------- */

/* De kaarten steken onderaan de golfband in (2220-3346 tegenover een band die
   op 2931 begint). Ze staan dus bewust boven de golf, niet ernaast. */
.bk-kaarten { position: relative; z-index: 2; background: transparent; }

/* WordPress zet standaard 24px tussen blokken (`--wp--style--block-gap`) op
   elk tweede kind van een groep. In een raster dat wij zelf uitmeten is dat
   een extra marge die de tweede kaart 24px omlaag duwde. Waar wij het raster
   bepalen, bepaalt de gap de ruimte — niet WordPress. */
.bk-twee > * + *,
.bk-intro .bk-wrap.bk-twee > * + *,
.bk-kaarten .bk-wrap > * + *,
.bk-footer .bk-wrap > * + * { margin-block-start: 0; }

/* Beide kaarten even hoog: het raster rekt ze op, de body vult de rest.
   Zonder align-self/height:100% houdt een kaart met minder tekst zijn eigen
   hoogte en staan de onderranden niet gelijk. */
.bk-kaarten .bk-wrap.bk-twee { align-items: stretch; }

.bk-kaart {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--bk-radius);
	overflow: hidden;
	box-shadow: var(--bk-schaduw);
	background: var(--bk-navy);
	color: var(--bk-tekst-omkeer);
}

.bk-kaart .bk-kaart-body { flex: 1 1 auto; }

.bk-kaart img {
	width: 100%;
	aspect-ratio: 565 / 467;   /* fotodeel: y 2220-2686 */
	object-fit: cover;
	display: block;
}

.bk-kaart .bk-kaart-body { padding: 44px 40px 48px; }
/* Titel en ondertitel horen bij elkaar: geen witregel ertussen (Peter, #340). */
.bk-kaart h3            { color: var(--bk-tekst-omkeer); margin-bottom: 0; }
.bk-kaart .bk-sub       { font-weight: 700; margin-top: 0; }
.bk-kaart ul            { margin: var(--bk-ritme) 0 0; padding-left: 1.2em; }

/* --- golfband ----------------------------------------------------------- */

/* 1920x402-strip die verticaal herhaalt (horizontaal is het patroon uniek).
   background-size 100% auto laat hem meeschalen met de viewport, zodat de golf
   op elke breedte dezelfde verhouding houdt. */
.bk-golf {
	background: var(--bk-wit) url('../img/golf-strip.png') repeat-y center top;
	background-size: 100% auto;
}

/* --- testimonial -------------------------------------------------------- */

.bk-citaat {
	font-family: var(--bk-font-citaat);
	font-style: italic;
	font-weight: 300;
	font-size: var(--bk-citaat);
	line-height: var(--bk-citaat-lh);
	text-align: center;
	max-width: 1100px;
	margin-inline: auto;
}

.bk-citaat-teller {
	text-align: center;
	font-size: var(--bk-body);
	margin-top: var(--bk-alinea);
}

/* --- fotoband met streepovergang ---------------------------------------- */

/* De streepband is géén los beeld: het zijn navy balken met openingen waar
   dezelfde foto doorheen komt. Daarom een gradient over de foto heen, met de
   stops zoals gemeten (balk 30, tussenruimte 15, drie keer). */
.bk-fotoband {
	position: relative;
	min-height: 895px;               /* y 4014-4908, streep inbegrepen */
	background: var(--bk-navy) center / cover no-repeat;
}

.bk-fotoband::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: var(--bk-streep-h);
	background: linear-gradient(
		to bottom,
		var(--bk-navy)  0,    var(--bk-navy)  30px,
		transparent    30px,  transparent    45px,
		var(--bk-navy) 45px,  var(--bk-navy)  75px,
		transparent    75px,  transparent    90px,
		var(--bk-navy) 90px,  var(--bk-navy) 120px,
		transparent   120px,  transparent   100%
	);
}

@media (max-width: 1271px) {
	.bk-fotoband { min-height: clamp(320px, 47vw, 895px); }
	.bk-fotoband::after {
		background: linear-gradient(
			to bottom,
			var(--bk-navy) 0, var(--bk-navy) 16px,
			transparent 16px, transparent 24px,
			var(--bk-navy) 24px, var(--bk-navy) 40px,
			transparent 40px, transparent 48px,
			var(--bk-navy) 48px, var(--bk-navy) 64px,
			transparent 64px, transparent 100%
		);
	}
}

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

/* De footer is bréder dan de contentkolom (inkt x 360-1626) en heeft ongelijke
   kolommen: 481 links, 627 rechts, 158 ertussen. Met het gewone 565/565-raster
   brak de kop "Je hoeft nog niet precies..." af, terwijl die in het ontwerp op
   één regel staat. */
.bk-footer {
	background: var(--bk-navy);
	color: var(--bk-tekst-omkeer);
	min-height: var(--bk-footer-h);
	padding-block: calc(96 * var(--bk-u));
}

.bk-footer .bk-wrap {
	width: min(var(--bk-footer-content), calc(100% - 2 * var(--bk-ritme)));
}

/* Als verhouding en niet als vaste maat: de wrap wordt onder 1272px afgekapt
   op de contentbreedte (1200), terwijl 481+158+627 = 1266 vraagt. Met fr en een
   procentuele tussenruimte past het op elke breedte, en op de ontwerpbreedte
   komen er weer exact 481 en 627 uit. */
.bk-footer .bk-wrap.bk-twee {
	grid-template-columns: minmax(0, 481fr) minmax(0, 627fr);
	column-gap: calc(158 / 1266 * 100%);
	row-gap: var(--bk-alinea);
}

/* De knop niet meekleuren: die heeft in het ontwerp navy tekst op goud, en
   .bk-footer a (0,1,1) won het anders van .bk-knop (0,1,0). */
.bk-footer a:not(.bk-knop),
.bk-footer h1, .bk-footer h2, .bk-footer h3,
.bk-kaart h1, .bk-kaart h2, .bk-kaart h3,
.bk-hero h1, .bk-hero h2 { color: var(--bk-tekst-omkeer); }
.bk-footer .bk-logo { width: calc(300 * var(--bk-u)); height: auto; display: block; }

.bk-footer-merk    { padding-left: calc(24 * var(--bk-u)); }
.bk-footer .bk-contact {
	font-style: normal;
	margin-top: calc(56 * var(--bk-u));
}
.bk-footer .bk-contact a { text-decoration: none; }
.bk-footer .bk-contact a:hover { text-decoration: underline; }

.bk-socials {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: var(--bk-alinea) 0 0;
	padding: 0;
}
/* Peters eigen iconen (#340): goud, met het kader al in de PNG. Daarom hier
   geen rand meer, anders staat er een dubbel kader. */
.bk-socials a {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	transition: opacity .2s ease;
}
.bk-socials img { display: block; width: 100%; height: 100%; }
.bk-socials a:hover { opacity: .75; }

.bk-footer .bk-footer-cta h2 {
	font-size: var(--bk-body);
	line-height: var(--bk-body-lh);
	font-weight: 700;
	margin-bottom: var(--bk-alinea);
}
/* Knop staat in het ontwerp 13px onder de laatste tekstregel (tekst-ink
   eindigt op 5441, knop begint op 5454). */
.bk-footer-cta .bk-cta-knop { margin-top: calc(13 * var(--bk-u)); }
.bk-footer .bk-payoff {
	color: var(--bk-goud);
	font-size: 18px;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: calc(8 * var(--bk-u)) 0 0;
	padding-left: calc(84 * var(--bk-u));   /* lijnt uit onder 'kracht' */
}

/* --- knop --------------------------------------------------------------- */

/* Gemeten uit het ontwerp: 240x51, hoekradius ~6, gouden vlak met navy tekst
   (174,154,100 en 64,64,88 — geen zwart, maar zo donker dat het zo oogt). */
.bk-knop,
.wp-block-button__link {
	display: inline-block;
	background: var(--bk-goud);
	color: var(--bk-navy);
	font-size: var(--bk-body);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: calc(13 * var(--bk-u)) calc(26 * var(--bk-u));
	border: 0;
	border-radius: calc(6 * var(--bk-u));
}

.bk-knop:hover,
.wp-block-button__link:hover { background: #9d8a58; color: var(--bk-navy); }

/* --- toegankelijkheid --------------------------------------------------- */

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

/* --- inhoudsblok van een binnenpagina ----------------------------------- */

/* De golfband hangt aan de ONDERKANT van het inhoudsblok, niet aan de bovenkant.
   Reden: hoeveel tekst erboven staat verschilt per pagina, maar de afstand tot
   de fotoband eronder is in het ontwerp overal gelijk. Zo blijft de golf op zijn
   plek zodra tekst anders afbreekt — en dat mag, zie bouwplan §6.2. */
.bk-inhoud.wp-block-group {
	position: relative;
	background: var(--bk-wit);
	/* 111px komt uit het ontwerp: sectie begint op 710, de eerste kop-inkt op
	   821. Expliciet 0 eronder, want Astra legt er anders zelf 66px bij die
	   nergens op slaat — samen met de 140px hieronder werd dat 206. */
	padding: 111px 0 0;
	overflow: hidden;
}

.bk-inhoud::before {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 1083px;          /* golfband: y 1967-3050 in het ontwerp */
	background: url('../img/golf-strip.png') repeat-y center top;
	background-size: 100% auto;
	z-index: 0;
}

.bk-inhoud > .bk-wrap { position: relative; z-index: 1; }

.bk-inhoud-kop {
	max-width: var(--bk-kolom);
	margin-bottom: var(--bk-alinea);   /* ontwerp: 96 inkt-tot-inkt = 60 regel + 36 */
}

/* Kernblokken van Gutenberg naar ons raster trekken. Boven 1200px exact
   565/70/565, daaronder gewoon twee gelijke kolommen. */
.bk-inhoud .wp-block-columns {
	gap: var(--bk-goot);
	align-items: flex-start;
}

@media (min-width: 1200px) {
	.bk-inhoud .wp-block-columns > .wp-block-column {
		flex-basis: var(--bk-kolom) !important;
		flex-grow: 0;
	}
}

.bk-inhoud .wp-block-column > * + * { margin-top: var(--bk-alinea); }

/* Opsommingen volgen het ritme van 36px, niet de browserstandaard — en niet de
   alinea-afstand van 72px hierboven: gemeten op "Waar we aan werken" sluit een
   lijst met één regel op de tekst erboven aan, terwijl er ná een lijst wél twee
   regels ruimte staat. */
.bk-inhoud .wp-block-column > ul { padding-left: 1.3em; }
/* Een lijst sluit direct aan op de regel erboven: gemeten 36 inkt-tot-inkt,
   en dat is de regelafstand zelf. Dus geen extra marge. */
.bk-inhoud .wp-block-column > * + ul { margin-top: 0; }
.bk-inhoud .wp-block-column > ul + p { margin-top: var(--bk-alinea); }
.bk-inhoud li { margin: 0; }

/* Een kop verderop in dezelfde kolom. Gemeten inkt-tot-inkt 99 en 105; daar
   gaat de regel zelf vanaf (36 boven de kop, 60 eronder). */
.bk-inhoud .wp-block-column > * + .bk-kop-tweede { margin-top: 63px; }
.bk-inhoud .bk-kop-tweede + * { margin-top: 45px !important; }

/* Beeld over de volle contentbreedte (1196x774 in het ontwerp van
   "Hoe ik je help"). */
/* Onder een breed beeld staat in het ontwerp ~52px: foto eindigt op 1806,
   eerste tekstregel op 1865. */
.bk-breedbeeld { margin: 0 0 calc(52 * var(--bk-u)); }
.bk-breedbeeld img {
	width: 100%;
	height: auto;
	aspect-ratio: 1196 / 774;
	object-fit: cover;
	border-radius: var(--bk-radius);
	box-shadow: var(--bk-schaduw);
	display: block;
}

/* Zijfoto's hebben in het ontwerp een vaste bak, niet de eigen verhouding van
   het fotobestand. Zonder dit wordt "Waar we aan werken" 178px te hoog, want
   portret-gras is veel langer dan het kader waarin de ontwerper hem zette.
   Gemeten: Wie ben ik? 568x952, Waar we aan werken 574x669. */
.bk-zijfoto img {
	width: 100%;
	height: auto;
	aspect-ratio: 568 / 952;
	object-fit: cover;
	border-radius: var(--bk-radius);
	box-shadow: var(--bk-schaduw);
	display: block;
}

.bk-zijfoto--liggend img { aspect-ratio: 574 / 669; }

.bk-ondertekening { margin-top: var(--bk-alinea); }

/* De inhoud eindigt strak tegen de fotoband: geen witte kier ertussen. */
/* Onderrand krap: de fotoband hoort direct te volgen. Gemeten tegen het
   ontwerp, niet gekozen — zie tools/visual-check.sh. */
/* Onder de laatste tekstregel houdt het ontwerp ~140px aan voor de fotoband. */
.bk-inhoud > .bk-wrap { padding-bottom: 140px; }

/* Astra zet 60px margin-top op .content-area en marges op de container. Onze
   secties bepalen hun eigen ruimte — die van Astra ertussen zet alles eronder
   60px te laag, wat het testharnas dan als afwijking meldt. */
.content-area, .content-area.primary { margin-block: 0 !important; }
.ast-container,
.site-content .ast-container,
.entry-content { margin-block: 0 !important; }
.site-content > .ast-container { padding-block: 0 !important; }
.entry-content > .alignfull:last-child { margin-bottom: 0; }

/* --- dienstenkaarten die de golfband in steken -------------------------- */

/* De kaarten zijn 1127px hoog (2220-3346) maar hun sectie loopt maar tot 2930.
   Ze steken dus 416px de golfband in. Vaste sectiehoogte + zichtbare overloop
   houdt de golf op zijn plek, ongeacht hoeveel tekst er in een kaart staat. */
.bk-kaarten.wp-block-group {
	position: relative;
	z-index: 2;
	height: 771px;          /* y 2160-2930 */
	padding: 0;
	background: var(--bk-wit);
}

.bk-kaarten .bk-wrap { padding-top: 60px; }   /* kaarten beginnen op 2220 */

/* --- golfband met de testimonial ---------------------------------------- */

/* Klasse + .wp-block-group nodig: op gelijke specificiteit wint Astra's
   inline dynamische CSS, en die zet hier 66px vulling. Het citaat kwam dan
   achter de dienstenkaarten te staan die 416px de golfband in steken. */
.bk-golf.wp-block-group {
	min-height: var(--bk-golf-h);
	/* Het citaat begint in het ontwerp op y=3507 en de golfband op 2931. Van de
	   576px ertussen gaat de halve regelafstand en het verschil tussen kader- en
	   inktbovenkant af: 557. Onderaan blijft dan vanzelf de ~200px over die het
	   ontwerp daar heeft.
	   Maar onze kaarten zijn hoger dan in het ontwerp (Figtree breekt anders),
	   dus hing het citaat 38px onder de kaarten in plaats van ~160px. Peter wilde
	   het lager (#340): 644 geeft de 161px uit het ontwerp. */
	padding: calc(644 * var(--bk-u)) 0 0;
	box-sizing: border-box;
}

.bk-slider {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 40px;
}

.bk-slider-spoor { grid-column: 2; }

/* Astra geeft blockquote een linkerrand en inspringing. Dat is hier een streep
   naast het citaat die niet in het ontwerp staat. */
.bk-slider .bk-citaat,
.bk-golf blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 0;
	background: none;
	quotes: none;
}
.bk-slider .bk-citaat p { font: inherit; margin: 0; }

/* Aanhalingstekens staan in het ontwerp los van de tekst, groot en in dezelfde
   cursief. Als ::before/::after zodat ze niet in de voorleesvolgorde komen. */
.bk-slider .bk-citaat p::before { content: '\201C'; }
.bk-slider .bk-citaat p::after  { content: '\201D'; }

.bk-slider-knop {
	background: none;
	border: 0;
	padding: 12px;
	color: var(--bk-navy);
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease;
}
.bk-slider-knop:hover, .bk-slider-knop:focus-visible { opacity: 1; }
.bk-slider-vorige   { grid-column: 1; }
.bk-slider-volgende { grid-column: 3; }

.bk-citaat-teller { grid-column: 1 / -1; }

@media (max-width: 767px) {
	.bk-kaarten { height: auto; }
	.bk-golf    { padding-top: var(--bk-alinea); min-height: 0; padding-bottom: var(--bk-alinea); }
	/* Slider-layout voor smalle schermen staat verderop, in het tweede
	   767px-blok; dat wint op volgorde. Hier dus niets over de slider. */
}

/* ===========================================================================
   RESPONSIVE

   Kort, en dat is het punt. De meetkunde schaalt via --bk-u (zie style.css),
   dus vrijwel alles klopt vanzelf mee: header, hero, portret, kaarten, footer.
   Hier staat alleen wat NIET met schalen op te lossen is.

   Dit verving een laag vol losse clamp()-waarden per element. Die botsten op
   elkaar: op 1100px was het logo (34vw = 374px breed, dus 127 hoog) even hoog
   als de header (96px), en het portret werd met -14vw omhooggetrokken in een
   hero die inmiddels korter was dan de tekst erin — waardoor het portret over
   de herotekst schoof. Beide zijn nu onmogelijk, omdat alles dezelfde
   verhouding houdt.

   Er is geen mobiel ontwerp; onderstaande keuzes zijn van mij, niet van Peter.
   ========================================================================= */

/* --- menuknop ----------------------------------------------------------- */

/* Astra kleurt knoppen in :hover/:focus met zijn accentkleur — de sluitknop
   werd daardoor een blauw vlak zodra je hem had aangeklikt. Alle staten dus
   expliciet, met een eigen zichtbare focusring in plaats van Astra's vulling. */
.bk-header .bk-menu-knop,
.bk-header .bk-menu-knop:hover,
.bk-header .bk-menu-knop:focus,
.bk-header .bk-menu-knop:active {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--bk-navy);
}

.bk-header .bk-menu-knop:focus-visible {
	outline: 2px solid var(--bk-goud);
	outline-offset: 2px;
}

.bk-menu-knop {
	display: none;
	position: relative;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bk-navy);
	cursor: pointer;
}

/* Drie streepjes uit één element: de middelste is het element zelf. */
.bk-menu-streepjes,
.bk-menu-streepjes::before,
.bk-menu-streepjes::after {
	position: absolute;
	left: 11px;
	width: 30px;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}
.bk-menu-streepjes { top: 25px; }
.bk-menu-streepjes::before { content: ''; left: 0; top: -9px; }
.bk-menu-streepjes::after  { content: ''; left: 0; top:  9px; }

[aria-expanded="true"] .bk-menu-streepjes { background: transparent; }
[aria-expanded="true"] .bk-menu-streepjes::before { transform: translateY(9px) rotate(45deg); }
[aria-expanded="true"] .bk-menu-streepjes::after  { transform: translateY(-9px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.bk-menu-streepjes,
	.bk-menu-streepjes::before,
	.bk-menu-streepjes::after,
	.bk-header .bk-menu { transition: none; }
}

/* --- menu tussen 1290 en 1920 ------------------------------------------
   Met Contact erbij (#308) is het menu vijf items en ~1000px breed. Op een
   laptop (1366, 1440, 1536) liep het daardoor rechts het scherm uit. Letter
   en tussenruimte schalen nu mee van 18px/24 op 1290 naar 22px/52 op 1920,
   precies het ontwerp. Zo blijft er overal minstens 36px rechts over. */

@media (min-width: 1290px) {
	.bk-menu-lijst { gap: clamp(24px, calc(24px + (100vw - 1290px) * 28 / 630), 52px); }
	.bk-header nav a { font-size: clamp(18px, calc(18px + (100vw - 1290px) * 4 / 630), 22px); }
}

/* --- menu: eigen breekpunt op 1289 --------------------------------------
   Het ontwerp-menu is 769px breed en het logo 377; met de tussenruimte heeft
   de header 1216px nodig. Bij een viewport van 1200 geeft de contentkolom er
   maar 1128. Het menu klapt dus eerder in dan de rest van de layout. */

@media (max-width: 1289px) {

	.bk-menu-knop { display: block; }
	.bk-header { position: relative; }
	.bk-header .bk-menu { margin-top: 0; }

	/* Paneel onder de header. Geen `display:none` maar hoogte 0, zodat de
	   linkjes bereikbaar blijven voor wie met het toetsenbord navigeert zolang
	   het paneel open is. */
	.bk-header .bk-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 20;
		overflow: hidden;
		max-height: 0;
		background: var(--bk-creme);
		transition: max-height .25s ease;
	}
	.bk-menu-open .bk-header .bk-menu { max-height: 60vh; }

	.bk-menu-lijst {
		flex-direction: column;
		gap: 0;
		white-space: normal;
		padding: 8px 0 24px;
	}
	.bk-menu-lijst a { padding: 14px var(--bk-ritme); }
	.bk-menu-lijst a::after { display: none; }   /* schaduwtekst is hier onnodig */
}

/* --- tot 1271: de schaal doet het werk ---------------------------------- */

@media (max-width: 1271px) {

	/* De contentkolom is dan gelijk aan --bk-content (= 100vw - 72px). */
	.bk-wrap { width: var(--bk-content); }

	/* De golfband hangt aan de onderkant van het inhoudsblok; die hoogte is een
	   vast ontwerp-getal en moet dus meeschalen. */
	.bk-inhoud::before { height: var(--bk-golf-h); }
}

/* --- tot 767: stapelen --------------------------------------------------

   Hier stopt het schalen en begint het herschikken: twee kolommen van 27% van
   het ontwerp zijn onleesbaar, hoe netjes de verhoudingen ook kloppen. */

@media (max-width: 767px) {

	.bk-wrap,
	.bk-footer .bk-wrap { width: calc(100% - 40px); }

	.bk-intro .bk-wrap.bk-twee,
	.bk-kaarten .bk-wrap.bk-twee,
	.bk-footer .bk-wrap.bk-twee,
	.bk-inhoud .wp-block-columns {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--bk-alinea);
	}

	/* Geen overlap meer: op een smal scherm zou het portret de herotekst raken,
	   en dan blijft er van geen van beide iets over. De hero hoeft dus ook geen
	   ruimte meer vrij te houden. */
	/* Op een telefoon nam de hero met 62vh het halve scherm in beslag terwijl er
	   twee regels tekst in staan. 17vh is in de praktijk geen hoogte maar een
	   ondergrens: de tekst plus de ruimte eromheen bepaalt hem, en die komt
	   hoger uit. Zo blijft er meteen iets van de pagina zelf in beeld.

	   (De uitzondering voor background-size is vervallen: sinds Peters banners
	   op bandmaat staat `cover` overal, ook hier.) */
	.bk-hero {
		min-height: 17vh;
		align-items: center;
		padding-top: var(--bk-alinea);
		padding-bottom: var(--bk-alinea);
	}
	/* Voorpagina: Beryl staat al in de hero-foto, dus het portret eronder valt
	   weg en de hero wordt ~20% hoger (285 tegen 237px op 390 breed). Een
	   hoger kader op dezelfde breedte zoomt `cover` vanzelf in; de positie
	   houdt Beryl rechts in beeld. De tekst kleiner en bovenin, zodat hij links
	   van haar blijft in plaats van over haar heen te lopen (#349). */
	.bk-hero:not(.bk-hero--sub) {
		min-height: 73vw;
		align-items: flex-start;
		background-position: 68% 40%;
	}
	.bk-hero:not(.bk-hero--sub) h1 {
		font-size: 26px;
		max-width: 62%;
		/* Klein en dun wit over zonnig blad valt anders weg. */
		text-shadow: 0 1px 6px rgb(0 0 0 / .45);
	}
	/* Eén lang woord als paginatitel ("Samenwerkingspartners", 404px op 38px)
	   past niet op een telefoon en duwde de hele pagina opzij. Afbreken op
	   lettergrepen; html lang=nl-NL geeft de woordenlijst. */
	.bk-hero h1 { hyphens: auto; overflow-wrap: break-word; }
	/* Afbreken lukt niet in elke browser ("part / ners"); kleiner zetten zodat
	   het woord tot 320 breed op één regel past. 8vw = 31px op 390. Schaduw
	   als op Home: binnenpagina's hebben sinds 01-10 dezelfde lichte foto. */
	.bk-hero.bk-hero--sub h1 {
		font-size: min(38px, 8vw);
		text-shadow: 0 1px 6px rgb(0 0 0 / .45);
	}
	.bk-intro .bk-portret { display: none; }
	.bk-intro .bk-tekst.wp-block-group { padding-top: var(--bk-alinea); }

	.bk-kaarten.wp-block-group { height: auto; padding: 0 0 var(--bk-alinea); }
	.bk-kaarten .bk-wrap { padding-top: 0; }
	.bk-kaart .bk-kaart-body { padding: 28px 24px 32px; }

	.bk-golf.wp-block-group { min-height: 0; padding: var(--bk-alinea) 0; }

	/* Eén kolom, en dan moet de spoor-plaatsing mee: `grid-column: 2` maakte
	   anders een impliciete tweede kolom, waarna de teller (1 / -1, dus tot de
	   laatste EXPLICIETE lijn) in een kolom van 10px belandde en verticaal ging
	   staan. */
	/* De knoppen stonden hier op display:none zonder alternatief, waardoor de
	   slider op een telefoon op het eerste citaat bleef staan. Ze staan nu
	   onder het citaat met de teller ertussen; vegen werkt ook (menu.js). */
	.bk-slider { grid-template-columns: auto 1fr auto; column-gap: 8px; }
	.bk-slider-spoor    { grid-column: 1 / -1; grid-row: 1; }
	.bk-slider-vorige   { grid-column: 1; grid-row: 2; }
	.bk-citaat-teller   { grid-column: 2; grid-row: 2; margin-top: 0; align-self: center; }
	.bk-slider-volgende { grid-column: 3; grid-row: 2; }
	/* 44px is de kleinste knop die op een touchscreen betrouwbaar te raken is. */
	.bk-slider-knop { min-width: 44px; min-height: 44px; opacity: .8; padding: 8px; }
	.bk-slider-knop svg { width: 16px; height: 26px; }
	.bk-slider .bk-citaat p::before,
	.bk-slider .bk-citaat p::after { content: none; }

	.bk-inhoud.wp-block-group { padding: var(--bk-alinea) 0 0; }
	.bk-inhoud > .bk-wrap { padding-bottom: var(--bk-alinea); }
	.bk-inhoud .wp-block-columns > .wp-block-column { flex-basis: auto !important; }
	.bk-inhoud .bk-kop-tweede { margin-top: var(--bk-alinea); }
	.bk-inhoud .bk-kop-tweede + * { margin-top: var(--bk-ritme) !important; }

	.bk-zijfoto img,
	.bk-zijfoto--liggend img { aspect-ratio: 4 / 5; }
	.bk-breedbeeld img       { aspect-ratio: 3 / 2; }

	.bk-footer { padding-block: var(--bk-alinea); }
	.bk-footer-merk { padding-left: 0; }
	.bk-socials { justify-content: flex-start; }
}

/* --- contactformulier (Fluent Forms) ------------------------------------ */

/* Fluent Forms brengt zijn eigen vormgeving mee die niets met deze huisstijl
   te maken heeft. Hieronder alleen wat nodig is om het formulier in het raster
   en in de kleuren te trekken; de rest laten we met rust. */

.bk-inhoud .fluentform { --ff-radius: 2px; }

.bk-inhoud .fluentform .ff-el-input--label label {
	font-size: var(--bk-body);
	font-weight: 500;
	color: var(--bk-navy);
	margin-bottom: 8px;
}

.bk-inhoud .fluentform .ff-el-group { margin-bottom: var(--bk-alinea); }

.bk-inhoud .fluentform input[type="text"],
.bk-inhoud .fluentform input[type="email"],
.bk-inhoud .fluentform textarea {
	width: 100%;
	font-family: var(--bk-font);
	font-size: var(--bk-body);
	line-height: var(--bk-body-lh);
	font-weight: var(--bk-body-gew);
	color: var(--bk-navy);
	background: var(--bk-wit);
	border: 1px solid rgb(64 64 88 / .35);
	border-radius: var(--ff-radius);
	padding: 10px 14px;
	box-shadow: none;
}

.bk-inhoud .fluentform input:focus,
.bk-inhoud .fluentform textarea:focus {
	border-color: var(--bk-goud);
	outline: 2px solid var(--bk-goud);
	outline-offset: 1px;
}

/* Fluent Forms tekent zijn tooltip-icoon in zijn eigen blauw (#1a7efb). Dat
   staat los van elk kleurschema hier. De hulptekst staat nu zichtbaar onder het
   label in plaats van erachter, maar mocht er ergens toch een tooltip opduiken,
   dan is hij tenminste goud. */
.bk-inhoud .fluentform .ff-el-tooltip svg,
.bk-inhoud .fluentform svg { fill: var(--bk-goud); }

.bk-inhoud .fluentform .ff-el-help-message {
	font-size: 17px;
	line-height: 1.5;
	color: rgb(64 64 88 / .75);
	margin-top: 6px;
}

/* De verzendknop volgt de gouden knop uit het ontwerp. */
.bk-inhoud .fluentform .ff-btn-submit,
.bk-inhoud .fluentform .ff-btn-submit:hover,
.bk-inhoud .fluentform .ff-btn-submit:focus {
	background: var(--bk-goud);
	color: var(--bk-navy);
	font-family: var(--bk-font);
	font-size: var(--bk-body);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 0;
	border-radius: var(--ff-radius);
	padding: 14px 28px;
	box-shadow: none;
}
.bk-inhoud .fluentform .ff-btn-submit:hover { background: #9d8a58; }

.bk-inhoud .fluentform .ff-message-success {
	font-size: var(--bk-body);
	line-height: var(--bk-body-lh);
	color: var(--bk-navy);
	background: var(--bk-creme);
	border: 0;
	border-left: 4px solid var(--bk-goud);
	padding: var(--bk-ritme);
}

/* Contactpagina: klein portret naast naam, adres, telefoon en mail (#308).
   Op een telefoon blijft dit naast elkaar staan; 120px portret plus het adres
   past op 350px. */
.bk-contactkaart.wp-block-group {
	display: grid;
	grid-template-columns: clamp(120px, calc(200 * var(--bk-u)), 200px) 1fr;
	gap: var(--bk-ritme);
	align-items: center;
	margin-top: var(--bk-ritme);
	padding: 0;
}
.bk-contactkaart > * + * { margin-block-start: 0; }
.bk-contact-portret { margin: 0; }
.bk-contact-portret img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--bk-radius);
	box-shadow: var(--bk-schaduw);
}
.bk-inhoud .bk-contact-adres a { color: var(--bk-navy); }

/* Nog in te vullen door de klant: zichtbaar markeren zolang het er staat. */
.bk-nog-in-te-vullen {
	border-left: 3px solid var(--bk-goud);
	padding-left: var(--bk-ritme);
	color: rgb(64 64 88 / .8);
}


/* --- Astra-onderdelen die niet in dit ontwerp passen -------------------- */

/* Astra's "naar boven"-knop is een blauwe pijl in zijn eigen accentkleur en
   breekt met het kleurschema. Uitzetten kan ook in de Customizer, maar dan
   staat het niet in git en komt het terug bij een verse installatie. */
#ast-scroll-top,
.ast-scroll-top-icon,
#ast-scroll-top-title { display: none !important; }

/* --- focus en skip-link ------------------------------------------------- */

/* Alles wat focus kan krijgen staat standaard op het browserblauw (rgb 4,107,210).
   Je ziet dat alleen bij toetsenbordnavigatie, dus het valt nooit op tijdens
   klikken — maar wie met Tab door de site loopt ziet niks anders dan blauw.
   Gevonden met tools/check-palet.js. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--bk-goud);
	outline-offset: 3px;
	border-radius: 2px;
}

.bk-logo-link { color: inherit; }

/* De overslaan-naar-inhoud-link: verborgen tot hij focus krijgt, en dan in de
   huisstijl in plaats van in WordPress' standaardblauw. */
.skip-link,
.skip-link.screen-reader-text:focus { color: var(--bk-navy); }

.skip-link.screen-reader-text:focus {
	background: var(--bk-creme);
	color: var(--bk-navy);
	box-shadow: none;
	border-radius: 0 0 var(--bk-knop-radius) 0;
	font-family: var(--bk-font);
	font-size: 18px;
	font-weight: 500;
	padding: 14px 22px;
	text-decoration: none;
	outline: 2px solid var(--bk-goud);
	outline-offset: -2px;
}


/* --- cookiebanner (Complianz) ------------------------------------------- */

/* Complianz brengt zijn eigen grijstinten mee: #333 op de knoppen en #101010
   op de sluitknop. De banner staat over de site heen, dus dat valt op, en
   check-palet.js struikelt er terecht over. Kleuren en teksten van de banner
   zelf staan in zijn instellingen; dit zijn de resten die daar niet in zitten. */
#cmplz-cookiebanner-container .cmplz-btn,
#cmplz-manage-consent .cmplz-manage-consent {
	color: var(--bk-tekst);
	font-family: inherit;
}

/* Focusringen goud, zoals overal op de site. */
#cmplz-cookiebanner-container .cmplz-btn,
#cmplz-cookiebanner-container .cmplz-close,
#cmplz-manage-consent .cmplz-manage-consent {
	outline-color: var(--bk-goud);
}

/* De accepteerknop heeft goud als achtergrond; daar hoort navy tekst op. */
#cmplz-cookiebanner-container .cmplz-accept { color: var(--bk-tekst); }