/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  GeneratePress child theme — Bob de Jong Verhuur (FUNDAMENT design system, hercolored)
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      1.0.0
*/

/* ==========================================================================
   1. Fonts — Archivo, self-hosted (variable, 100–900)
   ========================================================================== */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/archivo-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/archivo-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design-token shorthands (aliases to theme.json presets)
   ========================================================================== */

:root {
	--mk-surface: var(--wp--preset--color--surface, #FBF6F9);
	--mk-surface-alt: var(--wp--preset--color--surface-alt, #E9C4DE);
	--mk-card: var(--wp--preset--color--surface-card, #FFFFFF);
	--mk-ink: var(--wp--preset--color--ink, #141414);
	--mk-ink-soft: var(--wp--preset--color--ink-soft, #33282E);
	--mk-muted: var(--wp--preset--color--muted, #5A4852);
	--mk-hairline: var(--wp--preset--color--hairline, rgba(20,20,20,0.18));
	--mk-accent: var(--wp--preset--color--accent, #BF4D76);
	--mk-accent-hover: var(--wp--preset--color--accent-hover, #A23E63);
	--mk-accent-ink: var(--wp--preset--color--accent-ink, #8E3455);
	--mk-mono: ui-monospace, SFMono-Regular, 'Roboto Mono', Menlo, monospace;
	--mk-pad-x: clamp(20px, 5vw, 64px);
}

/* ==========================================================================
   3. Global
   ========================================================================== */

body {
	font-family: 'Archivo', Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Archivo', Helvetica, Arial, sans-serif;
	color: var(--mk-ink);
}

h1 { font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 28px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 24px; line-height: 1.3; font-weight: 600; }

/* ==========================================================================
   4. Header + navigation (GeneratePress chrome)
   ========================================================================== */

.site-header {
	background: var(--mk-surface);
	border-bottom: 1px solid var(--mk-hairline);
	position: relative;
	z-index: 10;
}

.site-header .inside-header {
	padding: 20px var(--mk-pad-x);
}

.mk-brand a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mk-ink);
	text-decoration: none;
}

.mk-brand svg {
	height: 1.85em;
	width: 1.85em;
	flex: 0 0 auto;
	fill: var(--mk-accent);
}

/* FAZ cookiebanner — knopvorm en hover-states.
 * De kléuren staan in FAZ Cookie > Cookie Banner (achtergrond / tekst / rand
 * per knop). Alleen randbreedte en hover hebben daar geen veld: het
 * Custom CSS-veld is in FAZ 1.13.11 uit de plugin-UI verwijderd. Daarom
 * staan die hier, waar ze een plugin-update en elke FAZ-save overleven. */
:root {
	--faz-accept-button-border-width: 1px;
	--faz-reject-button-border-width: 1px;
	--faz-settings-button-border-width: 1px;
}

/* Alleen de hoofd-CTA krijgt een eigen hover; de plugin doet de rest met
 * opacity, en terracotta op 80% oogt verwassen. */
#faz-consent .faz-btn-accept:hover,
#faz-consent .faz-btn-accept:focus-visible {
	background-color: var(--mk-accent-ink);
	border-color: var(--mk-accent-ink);
	opacity: 1;
}

/* Ankernavigatie — vloeiend springen, met respect voor reduced motion.
 * scroll-margin voorkomt dat de sectiekop tegen de bovenrand plakt. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

[id] {
	scroll-margin-top: 24px;
}

/* Hero met foto: het mediavlak hield een tekstplaceholder vast (flex + padding).
 * Met een foto erin moet het vlak zelf leeg zijn en de afbeelding het 21:9-kader
 * vullen. De bron is 16:9, dus er verdwijnt ongeveer een kwart van de hoogte.
 * Op 12% komt daar bijna niets van bovenaf: dat houdt kopruimte boven Marco en
 * snijdt vooral de drukke voorgrond weg. Lagere waarde = meer bovenkant. */
.mk-hero__media.mk-has-photo {
	padding: 0;
	display: block;
	overflow: hidden;
}

.mk-hero__media.mk-has-photo figure {
	margin: 0;
	height: 100%;
}

.mk-hero__media.mk-has-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* Bijschrift onder de foto in plaats van erboven: de marge draait mee. */
.mk-figure .mk-figcaption.mk-figcaption-below {
	margin: 24px 0 0;
}

/* Foto in het figuurkader (sectie met bijschrift).

 * De 900px-cap op .mk-figure blijft staan voor het cyanotype-patroon; alleen
 * het fotokader loopt door tot de volle containerbreedte. */
.mk-figure.mk-figure-wide {
	max-width: none;
}

.mk-figure .mk-figure__img {
	margin: 0;
}

.mk-figure .mk-figure__img img {
	display: block;
	width: 100%;
	height: auto;
}

/* Gelaagd fotokader (sectie 'Mijn rol'). Het kader is 4:5 en de bron is
 * 817 × 1022 — dezelfde verhouding, dus 'cover' snijdt hier feitelijk niets weg.
 * De rand blijft staan: die hoort bij het ontwerp. */
.mk-layered__photo.mk-has-photo {
	padding: 0;
	display: block;
	overflow: hidden;
}

.mk-layered__photo.mk-has-photo figure {
	margin: 0;
	height: 100%;
}

.mk-layered__photo.mk-has-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* De contactpagina-H1 telt 21 tekens en botst met de max-width van 16ch op
 * .mk-h1, waardoor 'voor' als wees op een eigen regel belandt. Ruimer
 * uitlijnen, en de laatste twee woorden aan elkaar knopen met een vaste
 * spatie in de content — dan blijven ze ook op mobiel bij elkaar. */
.mk-h1.mk-h1-wide {
	max-width: 24ch;
}

/* Sectieafstanden op de contactpagina. Geketende selectors, zodat ze op
 * specificiteit winnen van de basisklassen en niet op volgorde in dit bestand.
 *
 * 'Wat er daarna gebeurt' → 'Uw aanmelding': 208px (96 + 112) wordt 104px.
 * 'Uw aanmelding' → 'Liever eerst een korte vraag?': 96px wordt 68px (−30%). */
.mk-s-fasen.mk-s-flush-bottom {
	padding-bottom: 40px;
}

.mk-s-cta.mk-s-tight-top {
	padding-top: 64px;
}

.mk-s-cta.mk-s-flush-bottom {
	padding-bottom: 34px;
}

.mk-s-band.mk-s-tight {
	padding-top: 34px;
}

/* Fluent Forms — intakeformulier in de huisstijl. */
.mk-form {
	max-width: 640px;
}

.mk-form .ff-el-group {
	margin-bottom: 32px;
}

.mk-form .ff-el-input--label label {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mk-ink);
	margin-bottom: 8px;
}

.mk-form .ff-el-input--label .ff-el-is-required.asterisk-right:after {
	color: var(--mk-accent);
}

.mk-form .ff-el-help-message {
	font-family: var(--mk-mono);
	font-size: 12px;
	letter-spacing: 0.03em;
	line-height: 1.5;
	color: var(--mk-muted);
	margin: 4px 0 10px;
}

.mk-form .ff-el-form-control {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: var(--mk-ink);
	background: var(--mk-card);
	border: 1px solid var(--mk-hairline);
	border-radius: 2px;
	box-shadow: none;
}

.mk-form .ff-el-form-control:focus {
	outline: 2px solid var(--mk-ink);
	outline-offset: 1px;
	border-color: var(--mk-ink);
}

.mk-form textarea.ff-el-form-control {
	resize: vertical;
}

.mk-form .ff-el-form-check {
	padding: 10px 0;
	border-top: 1px solid var(--mk-hairline);
}

.mk-form .ff-el-form-check:last-of-type {
	border-bottom: 1px solid var(--mk-hairline);
}

.mk-form .ff-el-form-check-label {
	font-size: 16px;
	line-height: 1.5;
	color: var(--mk-ink-soft);
	cursor: pointer;
}

.mk-form input[type="radio"] {
	accent-color: var(--mk-accent);
	width: 18px;
	height: 18px;
	margin-right: 10px;
}

.mk-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--mk-accent);
}

.mk-form .text-danger,
.mk-form .error {
	font-family: var(--mk-mono);
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--mk-accent-ink);
}

.mk-form .mk-form-privacy {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mk-muted);
	border-top: 1px solid var(--mk-hairline);
	padding-top: 16px;
}

.mk-form .mk-form-privacy a {
	color: var(--mk-accent);
}

.mk-form .ff-btn-submit {
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 28px;
	color: #FFFFFF;
	background: var(--mk-accent);
	border: 1px solid var(--mk-accent);
	border-radius: 2px;
	cursor: pointer;
}

.mk-form .ff-btn-submit:hover,
.mk-form .ff-btn-submit:focus-visible {
	background: var(--mk-accent-hover);
	border-color: var(--mk-accent-hover);
}

.mk-form .ff-message-success {
	padding: 24px;
	background: var(--mk-surface-alt);
	border: 1px solid var(--mk-ink);
	color: var(--mk-ink);
}

/* Geen scheidingslijn direct na een figuurblok: het bijschrift sluit de sectie
 * al af, een streep erbovenop is dubbelop. Alleen waar .mk-s-fasen op
 * .mk-s-figure volgt — elders blijft de lijn staan. */
.mk-s-figure + .mk-s-fasen {
	border-top: none;
}

/* Vertrouwensbalk boven de header. Donker vlak, mono, rechts uitgelijnd:
 * zichtbaar genoeg om te bevestigen, te klein om af te leiden van het menu. */
.mk-topbar {
	background: var(--mk-ink);
	color: #FFFFFF;
}

.mk-topbar__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px var(--mk-pad-x);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	font-family: var(--mk-mono);
	font-size: 12px;
	letter-spacing: 0.03em;
	line-height: 1;
}

.mk-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.mk-topbar__link:hover,
.mk-topbar__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: inherit;
}

.mk-topbar__g {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.mk-topbar__stars {
	display: inline-flex;
	gap: 1px;
}

.mk-topbar__star {
	width: 13px;
	height: 13px;
	fill: #FBBC05;
}

.mk-topbar__score {
	font-weight: 700;
}

.mk-topbar__sep {
	opacity: 0.35;
}

.mk-topbar__count {
	opacity: 0.75;
}

/* GTranslate-vlaggen in de balk. De plugin plaatst een eigen float-widget;
 * die staat uit, de shortcode rendert hier inline. */
.mk-topbar__lang {
	display: flex;
	align-items: center;
	margin-left: 8px;
	padding-left: 12px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.mk-topbar__lang .gtranslate_wrapper {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mk-topbar__lang a {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.mk-topbar__lang a:hover,
.mk-topbar__lang a:focus-visible {
	opacity: 1;
}

.mk-topbar__lang img {
	display: block;
	width: 16px;
	height: 16px;
}

/* GTranslate plaatst daarnaast automatisch een widget onderaan de <body>.
 * Alleen die kopie verbergen; de instantie in de balk blijft staan. */
body > .gtranslate_wrapper,
body > .gt_float_switcher {
	display: none;
}

@media (max-width: 600px) {
	.mk-topbar__inner {
		justify-content: center;
	}
}

/* Knoppenrij: hoofd-CTA en ghost-knop naast elkaar, onder elkaar op smal. */
.mk-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.mk-btn-row .mk-btn {
	margin-top: 0;
}

/* Ghost-knop: alleen omlijning, vult zich bij hover. Selectors zijn geketend
 * zodat ze op specificiteit winnen van .mk-btn en niet op volgorde. */
.mk-btn.mk-btn-ghost,
.entry-content a.mk-btn.mk-btn-ghost {
	background: transparent;
	color: var(--mk-accent);
	box-shadow: inset 0 0 0 1px var(--mk-accent);
}

.mk-btn.mk-btn-ghost:hover,
.mk-btn.mk-btn-ghost:focus-visible,
.entry-content a.mk-btn.mk-btn-ghost:hover {
	background: var(--mk-accent);
	color: #FFFFFF;
}

/* Contact in de navigatie als CTA. */
.main-navigation .main-nav ul li.mk-nav-cta > a {
	background: var(--mk-accent);
	color: #FFFFFF;
	font-weight: 600;
	line-height: 1.4;
	padding: 10px 20px;
	margin: 0 0 0 12px;
	align-self: center;
}

.main-navigation .main-nav ul li.mk-nav-cta > a:hover,
.main-navigation .main-nav ul li.mk-nav-cta.current-menu-item > a,
.main-navigation .main-nav ul li.mk-nav-cta[class*="current-menu-"] > a {
	background: var(--mk-accent-ink);
	color: #FFFFFF;
	text-decoration: none;
}

/* Kruimelpad — mono, muted links, ink voor de huidige pagina. */
.mk-breadcrumbs {
	background: var(--mk-surface);
	padding: 12px var(--mk-pad-x);
	font-family: var(--mk-mono);
	font-size: 12px;
	letter-spacing: 0.03em;
	line-height: 1.5;
	color: var(--mk-ink);
}

.mk-breadcrumbs a {
	color: var(--mk-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.mk-breadcrumbs a:hover,
.mk-breadcrumbs a:focus-visible {
	color: var(--mk-ink);
	border-bottom-color: var(--mk-ink);
}

.mk-breadcrumbs .separator {
	color: var(--mk-muted);
	margin: 0 8px;
}

.main-navigation,
.main-navigation .main-nav ul li a {
	font-size: 15px;
}

.main-navigation .main-nav ul li a {
	text-decoration: none;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Dropdown: flat panel, hairline border, no shadow */
.main-navigation ul ul {
	background: var(--mk-card);
	border: 1px solid var(--mk-hairline);
	box-shadow: none;
	width: 200px;
	top: 100%;
}

.main-navigation ul ul li a {
	padding: 10px 20px;
	font-size: 15px;
}

.main-navigation ul ul li a:hover {
	background: var(--mk-surface-alt);
	text-decoration: none;
}

/* ==========================================================================
   5. Homepage canvas — sections own their width
   ========================================================================== */

body.home .site.grid-container,
body.home .site-content {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

body.home .site-main {
	margin: 0;
}

body.home .entry-content {
	margin-top: 0;
}

/* ==========================================================================
   6. Layout primitives
   ========================================================================== */

.mk-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mk-pad-x);
	padding-right: var(--mk-pad-x);
}

.mk-narrow { max-width: 720px; }

.mk-band {
	background: var(--mk-surface-alt);
	position: relative;
}

/* Blueprint grid-paper texture, fading out below the top quarter */
.mk-grid-paper::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(20,20,20,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20,20,20,0.05) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(to bottom, black, black 25%, transparent 60%);
	mask-image: linear-gradient(to bottom, black, black 25%, transparent 60%);
	pointer-events: none;
}

.mk-grid-paper--fine::before {
	background-image:
		linear-gradient(rgba(20,20,20,0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20,20,20,0.07) 1px, transparent 1px);
	background-size: 24px 24px;
}

.mk-grid-paper > * {
	position: relative;
	z-index: 1;
}

/* Split rows (flex-wrap, stack in source order on mobile) */
.mk-split {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 80px);
}

.mk-split__a { flex: 1 1 380px; min-width: 0; }
.mk-split__b { flex: 1 1 420px; min-width: 0; }
.mk-split__a--narrow { flex: 1 1 320px; }
.mk-split__b--wide { flex: 1 1 480px; }

/* ==========================================================================
   7. Type atoms
   ========================================================================== */

.mk-kicker {
	font-size: 15px;
	color: var(--mk-muted);
	letter-spacing: 0.04em;
	margin: 0 0 20px;
}

.mk-kicker--tight { margin-bottom: 16px; }

.mk-h1 {
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 28px;
	max-width: 16ch;
	color: var(--mk-ink);
}

.mk-h2 {
	font-size: 36px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	color: var(--mk-ink);
}

.mk-h2--sm {
	font-size: clamp(24px, 2.6vw, 28px);
	line-height: 1.25;
}

.mk-h3-card {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--mk-ink);
}

.mk-lead {
	font-size: 18px;
	line-height: 1.6;
	color: var(--mk-ink-soft);
	margin: 0;
}

.mk-lead strong { color: var(--mk-ink); }

.mk-text {
	font-size: 18px;
	line-height: 1.6;
	color: var(--mk-ink);
	margin: 0;
}

.mk-small strong { color: var(--mk-ink-soft); font-weight: 700; }

.mk-small {
	font-size: 15px;
	line-height: 1.6;
	color: var(--mk-muted);
	margin: 0;
}

.mk-mono {
	font-family: var(--mk-mono);
	font-size: 12px;
	color: var(--mk-ink);
	line-height: 1.5;
	letter-spacing: 0.03em;
	margin: 0;
}

.mk-mono--muted { color: var(--mk-muted); }

/* Margin utilities (design-explicit rhythm) */
.mk-mb-0 { margin-bottom: 0 !important; }
.mk-mb-16 { margin-bottom: 16px !important; }
.mk-mb-20 { margin-bottom: 20px !important; }
.mk-mb-24 { margin-bottom: 24px !important; }
.mk-mb-32 { margin-bottom: 32px !important; }
.mk-mb-40 { margin-bottom: 40px !important; }
.mk-mb-56 { margin-bottom: 56px !important; }
.mk-mb-64 { margin-bottom: 64px !important; }

/* Measure utilities */
.mk-max-14ch { max-width: 14ch; }
.mk-max-22ch { max-width: 22ch; }
.mk-max-44ch { max-width: 44ch; }
.mk-max-52ch { max-width: 52ch; }
.mk-max-56ch { max-width: 56ch; }
.mk-max-60ch { max-width: 60ch; }

/* ==========================================================================
   8. Interactive components
   ========================================================================== */

.mk-btn,
.entry-content a.mk-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 14px 28px;
	background: var(--mk-accent);
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0;
}

.mk-btn:hover,
.mk-btn:focus-visible,
.entry-content a.mk-btn:hover {
	background: var(--mk-accent-hover);
	color: #FFFFFF;
	text-decoration: none;
}

.mk-btn:focus-visible {
	outline: 2px solid var(--mk-ink);
	outline-offset: 2px;
}

.mk-arrow-link,
.entry-content a.mk-arrow-link {
	font-size: 16px;
	color: var(--mk-accent-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mk-arrow-link:hover {
	color: var(--mk-ink);
}

/* Contactkanaal-link met lijn-icoon */
.mk-contact-link,
.entry-content a.mk-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	color: var(--mk-accent-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mk-contact-link:hover {
	color: var(--mk-ink);
}

.mk-contact-link .gb-shape {
	display: inline-flex;
	flex: 0 0 auto;
}

.mk-contact-link .gb-shape svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* ==========================================================================
   9. Content patterns
   ========================================================================== */

/* Numbered rows (01/02/03 problem list) */
.mk-numlist { border-top: 1px solid var(--mk-hairline); }

.mk-numrow {
	display: flex;
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--mk-hairline);
}

.mk-numrow:last-child { border-bottom: 0; }

.mk-numrow__n {
	font-size: 18px;
	color: var(--mk-ink-soft);
	flex: 0 0 40px;
	margin: 0;
}

.mk-numrow__t {
	font-size: 18px;
	line-height: 1.5;
	margin: 0;
	color: var(--mk-ink);
}

/* Hairline lists */
ul.mk-lines {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 18px;
	line-height: 1.6;
	color: var(--mk-ink-soft);
}

ul.mk-lines li {
	padding: 10px 0;
	border-top: 1px solid var(--mk-hairline);
	margin: 0;
}

ul.mk-lines li:last-child { border-bottom: 1px solid var(--mk-hairline); }

ul.mk-lines--roomy li { padding: 16px 0; color: var(--mk-ink); }

/* Blockquote as typographic element */
.mk-quote {
	margin: 0 0 64px;
	border-top: 1px solid var(--mk-ink);
	padding-top: 40px;
	max-width: 60ch;
}

.mk-quote__text {
	font-size: 24px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: var(--mk-ink);
}

.mk-quote__attr {
	font-size: 15px;
	color: var(--mk-muted);
	margin: 0;
}

/* Deliverables: 3-up hairline columns */
.mk-cols3 {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 48px);
}

.mk-cols3__item {
	flex: 1 1 260px;
	min-width: 0;
	border-top: 1px solid var(--mk-hairline);
	padding-top: 16px;
}

/* Labels (HET DOEL / HET RESULTAAT) */
.mk-label {
	font-size: 13px;
	color: var(--mk-muted);
	letter-spacing: 0.03em;
	margin: 0 0 4px;
}

.mk-value {
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 20px;
	color: var(--mk-ink);
}

.mk-value:last-child { margin-bottom: 0; }

/* ==========================================================================
   10. Sections
   ========================================================================== */

/* Hero */
.mk-hero { padding: 0; }

.mk-hero__stage { position: relative; }

.mk-hero__media {
	width: 100%;
	aspect-ratio: 21 / 9;
	background: var(--mk-surface-alt);
	border-top: 1px solid var(--mk-ink);
	border-bottom: 1px solid var(--mk-ink);
	display: flex;
	align-items: flex-start;
	padding: 20px var(--mk-pad-x);
}

.mk-hero__overlay {
	position: absolute;
	inset: 0;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--mk-pad-x);
	pointer-events: none;
}

.mk-hero__card {
	position: absolute;
	left: var(--mk-pad-x);
	bottom: -64px;
	max-width: 600px;
	padding: 32px;
	background: var(--mk-surface);
	border-bottom: 1px solid var(--mk-ink);
	pointer-events: auto;
}

@media (max-width: 768px) {
	.mk-hero__card { border-bottom: 0; }
}

.mk-hero__card .mk-btn { margin-top: 28px; }

.mk-hero__spacer { height: 112px; }

@media (max-width: 768px) {
	.mk-hero__overlay { position: static; padding: 0; pointer-events: auto; }
	.mk-hero__card { position: static; max-width: none; padding: 24px var(--mk-pad-x) 0; }
	.mk-hero__spacer { height: 48px; }
}

/* Section paddings */
.mk-s-problem { padding: 40px 0; }

/* Opener: de eerste sectie van een pagina is compacter dan tussensecties,
   zodat de rand van sectie 2 boven de vouw zichtbaar blijft (scroll-cue). */
.entry-content > .mk-s-rol:first-child {
	padding: clamp(32px, 4vw, 48px) 0 clamp(40px, 5vw, 56px);
}

/* Openerfoto: helft van de rij, gelijk verdeeld met de tekstkolom. */
.entry-content > .mk-s-rol:first-child .mk-split__a,
.entry-content > .mk-s-rol:first-child .mk-split__b {
	flex: 1 1 340px;
}

.entry-content > .mk-s-rol:first-child .mk-photo--11 {
	max-width: none;
	aspect-ratio: 2 / 1;
}
.mk-s-band { padding: 80px 0; }
.mk-s-rol { padding: 96px 0; }
.mk-s-figure { padding: 0 0 96px; }
.mk-s-fasen { padding: 80px 0 96px; border-top: 1px solid var(--mk-hairline); }
.mk-s-cta { padding: 112px 0; }

/* Rol: layered photo + text */
.mk-layered {
	position: relative;
	margin-bottom: 56px;
}

.mk-layered__photo {
	position: absolute;
	bottom: 0;
	right: 0;
	width: min(360px, 44%);
	aspect-ratio: 4 / 5;
	background: var(--mk-surface-alt);
	border: 1px solid var(--mk-ink);
	display: flex;
	align-items: flex-end;
	padding: 16px;
	z-index: 0;
}

.mk-layered__text {
	position: relative;
	z-index: 1;
	max-width: 56%;
}

.mk-layered__text .mk-lead { margin-bottom: 40px; }

@media (max-width: 820px) {
	.mk-layered__photo { position: static; width: 100%; max-width: 360px; margin-top: 32px; }
	.mk-layered__text { max-width: none; }
	.mk-layered__text .mk-lead { margin-bottom: 0; }
}

/* Figure (cyanotype moment) */
.mk-figure {
	margin: 0;
	position: relative;
	background: var(--mk-surface-alt);
	padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
	max-width: 900px;
}

.mk-figure figcaption,
.mk-figure .mk-figcaption {
	font-family: var(--mk-mono);
	font-size: 12px;
	color: var(--mk-muted);
	letter-spacing: 0.03em;
	margin: 0 0 24px;
}

.mk-figure svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Fasen grid */
.mk-fasen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 48px);
	align-items: start;
}

@media (max-width: 1024px) {
	.mk-fasen { grid-template-columns: 1fr; }
}

.mk-fase {
	min-width: 0;
	border-top: 1px solid var(--mk-ink);
	padding-top: 20px;
}

.mk-fase__n {
	font-size: 36px;
	font-weight: 700;
	color: var(--mk-ink-soft);
	margin: 0 0 12px;
}

.mk-fase__sub {
	font-size: 15px;
	color: var(--mk-muted);
	margin: 0 0 20px;
}

.mk-fase__body {
	font-size: 18px;
	line-height: 1.6;
	color: var(--mk-ink-soft);
	margin: 0 0 24px;
}

.mk-fase__facts { margin-bottom: 24px; }

/* Losstaande foto-placeholder, expliciete beeldverhouding per variant */
.mk-photo {
	background: var(--mk-surface-alt);
	border: 1px solid var(--mk-ink);
	display: flex;
	align-items: flex-end;
	padding: 16px;
}

.mk-photo--45 { aspect-ratio: 4 / 5; max-width: 400px; }
.mk-photo--11 { aspect-ratio: 1 / 1; max-width: 420px; }

/* Signaalpaar — uitsluitend functioneel (werkt wel / werkt niet) */
.mk-works--ok strong { color: var(--wp--preset--color--signal-ok, #3A7D5C); }
.mk-works--niet strong { color: var(--wp--preset--color--signal-error, #B54A3F); }

/* FAQ — details/summary als hairline-rijen */
.mk-faq { border-bottom: 1px solid var(--mk-hairline); }

.mk-faq details { border-top: 1px solid var(--mk-hairline); }

.mk-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 16px 0;
	font-size: 18px;
	font-weight: 500;
	color: var(--mk-ink);
}

.mk-faq summary::-webkit-details-marker { display: none; }

.mk-faq summary::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 18px;
	color: var(--mk-muted);
}

.mk-faq details[open] summary::after { content: '−'; }

.mk-faq details p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--mk-ink-soft);
	margin: 0;
	padding: 0 0 20px;
	max-width: 56ch;
}
.mk-photo--1610 { aspect-ratio: 16 / 10; }
.mk-photo--219 { aspect-ratio: 21 / 9; }

/* Photo placeholder label */
.mk-ph-label {
	font-family: var(--mk-mono);
	font-size: 12px;
	color: var(--mk-ink);
	line-height: 1.5;
	margin: 0;
}

/* Projectkaarten — plat, hairline-top, logo + label + statement + metrics */
.mk-cases {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

@media (max-width: 820px) {
	.mk-cases { grid-template-columns: 1fr; }
}

.mk-case {
	min-width: 0;
	border-top: 1px solid var(--mk-ink);
	padding-top: 24px;
}

.mk-case__logo {
	height: 44px;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.mk-case__logo img {
	height: 100%;
	width: auto;
	max-width: 260px;
}

.mk-case__label { margin-bottom: 12px; }

.mk-case__metrics {
	display: flex;
	gap: clamp(24px, 4vw, 48px);
	border-top: 1px solid var(--mk-hairline);
	margin-top: 24px;
	padding-top: 16px;
}

.mk-metric { min-width: 0; }

.mk-metric__v {
	font-size: 36px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--mk-ink-soft);
	margin: 0 0 4px;
}

.mk-metric__l {
	font-size: 13px;
	color: var(--mk-muted);
	letter-spacing: 0.03em;
	margin: 0;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

.mk-footer {
	border-top: 1px solid var(--mk-hairline);
	padding: 64px 0 32px;
	background: var(--mk-surface);
}

.mk-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 48px);
	padding-bottom: 48px;
}

.mk-footer__col { flex: 1 1 240px; min-width: 0; }

.mk-footer__col h4 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--mk-ink);
}

.mk-footer__col h4 a {
	color: var(--mk-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mk-footer__col h4 a:hover {
	color: var(--mk-ink-soft);
}

.mk-footer__col p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--mk-muted);
	margin: 0;
}

.mk-footer__bar {
	border-top: 1px solid var(--mk-hairline);
	padding-top: 24px;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.mk-footer__legal {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 13px;
}

.mk-footer__legal a {
	color: var(--mk-muted);
	text-decoration: none;
}

.mk-footer__legal a:hover { text-decoration: underline; }

.mk-footer__copy {
	font-size: 13px;
	color: var(--mk-muted);
	margin: 0;
}

/* Foto in het losstaande fotokader. Zelfde behandeling als het hero- en
 * gelaagde kader: het vlak is leeg, de afbeelding vult het kader.
 * Geen nieuwe stijl, alleen dezelfde regel op een bestaand kader. */
.mk-photo.mk-has-photo {
	padding: 0;
	display: block;
	overflow: hidden;
}

.mk-photo.mk-has-photo figure {
	margin: 0;
	height: 100%;
}

.mk-photo.mk-has-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Prijstabel. Zebra in plaats van lijnen: rijen scheiden op kleur, niet op rand.
 * Geen randen, ook niet die van core/GeneratePress — die worden hier expliciet
 * uitgezet. Bedragen rechts, tabular-nums staat globaal al aan. */
.mk-table {
	margin: 0;
	overflow-x: auto;
}

.mk-table table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: 17px;
	line-height: 1.5;
}

.mk-table th,
.mk-table td,
.wp-block-table.mk-table th,
.wp-block-table.mk-table td {
	border: 0;
}

.mk-table thead th {
	text-align: left;
	font-family: var(--mk-mono);
	font-size: 12px;
	letter-spacing: 0.03em;
	font-weight: 400;
	color: var(--mk-muted);
	padding: 0 16px 10px;
	background: transparent;
}

.mk-table tbody td {
	padding: 15px 16px;
	color: var(--mk-ink);
	vertical-align: top;
}

.mk-table th + th,
.mk-table td + td {
	text-align: right;
	white-space: nowrap;
}

/* Zebra: witte rij, dan een zachte tint van de roze band. */
.mk-table tbody tr:nth-child(odd) {
	background: var(--mk-card);
}

.mk-table tbody tr:nth-child(even) {
	background: rgba(233, 196, 222, 0.32);
}

.mk-table tbody tr:hover {
	background: rgba(233, 196, 222, 0.55);
}

/* De huurprijs is de beslissing: die staat vet in inkt.
 * De nieuwprijs is context: muted, kleiner, en daarom minder zwaar. */
.mk-table tbody td:nth-child(2) {
	font-weight: 700;
}

.mk-table tbody td:nth-child(3) {
	color: var(--mk-muted);
	font-size: 15px;
}

/* Tabel op de roze band: zebra tussen wit en de grond, niet tussen wit en roze. */
.mk-table--on-band tbody tr:nth-child(even) {
	background: var(--mk-surface);
}

.mk-table--on-band tbody tr:hover {
	background: var(--mk-surface);
}

@media (max-width: 600px) {
	.mk-table table { font-size: 15px; }
	.mk-table thead th,
	.mk-table tbody td { padding-left: 12px; padding-right: 12px; }
	.mk-table tbody td:nth-child(3) { font-size: 13px; }
}

/* Ankernavigatie boven de tabellen. */
.mk-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 16px 0;
	border-top: 1px solid var(--mk-hairline);
	border-bottom: 1px solid var(--mk-hairline);
}

/* Linklijsten in de footer. Zelfde maat en kleur als de bestaande
 * footertekst, alleen zonder opsommingstekens. */
.mk-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mk-footer__links li {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.6;
}

.mk-footer__links li:last-child {
	margin-bottom: 0;
}

.mk-footer__links a {
	color: var(--mk-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.mk-footer__links a:hover,
.mk-footer__links a:focus-visible {
	color: var(--mk-ink);
	border-bottom-color: var(--mk-ink);
}

.mk-footer__col p + .mk-footer__links {
	margin-top: 12px;
}

/* De themafooter is vervangen door het patroon; de restanten eruit. */
.site-info,
.site-footer .footer-bar {
	display: none;
}

/* Logo. Het bestand is 169 x 296 en werd op ware grootte getoond, waardoor de
 * header bijna 300px hoog werd. Op 25 procent: 42 x 74. De width- en
 * height-attributen op de img blijven staan voor de layout-stabiliteit, de CSS
 * schaalt hem terug. */
.site-logo .header-image,
.site-header .header-image.is-logo-image {
	width: 42px;
	height: auto;
	max-width: 42px;
}

/* Merk in de header: logo en naam naast elkaar. De oude .mk-brand-regels
 * gingen over het FUNDAMENT-SVG-merk; dit is de standaard GeneratePress-opbouw
 * met een custom logo plus sitetitel, in dezelfde typografie. */
.site-branding-container {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-header .main-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

.site-header .main-title a {
	color: var(--mk-ink);
	text-decoration: none;
}

.site-header .main-title a:hover,
.site-header .main-title a:focus-visible {
	color: var(--mk-accent-ink);
}

/* Krappere sectieovergangen op de homepage. Zelfde utilities als elders
 * in het systeem (mk-s-tight-top / mk-s-flush-bottom), nu ook voor mk-s-rol
 * en de roze band. */
.mk-s-rol.mk-s-tight-top {
	padding-top: 32px;
}

.mk-s-rol.mk-s-flush-bottom {
	padding-bottom: 40px;
}

.mk-band.mk-s-band.mk-s-tight-top {
	padding-top: 40px;
}