/*
Theme Name:  Hoefsmid Meivogel
Theme URI:   https://hoefsmidmeivogel.nl/
Author:      Numanski
Author URI:  https://numanski.nl/
Description: Statisch, snel en SEO-geoptimaliseerd thema voor Hoefsmid Meivogel. Semantische HTML5, geen frameworks, geen externe requests. Paginasjablonen worden per WordPress-pagina gekoppeld.
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hoefsmid-meivogel
Tags:        one-column, custom-colors, accessibility-ready
*/

/* ==========================================================================
   1. Design tokens
   Palet "Smidse". Alle tekstcombinaties zijn gecontroleerd op WCAG 2.1:
   minimaal AA (4.5:1), de meeste AAA (7:1).
   ========================================================================== */

:root {
	/* Kleuren */
	--hm-ink:          #1C1917; /* houtskool - donkere basis */
	--hm-ink-2:        #2A2523; /* warm donker - afwisselende secties */
	--hm-ink-3:        #3A332F; /* randen op donker */
	--hm-gold:         #C9A227; /* goud - CTA-vlak, accent op donker (7.23:1) */
	--hm-gold-soft:    #E0C15A; /* goud licht - hover, kleine tekst (9.95:1) */
	--hm-bronze:       #8A6D3B; /* brons - decoratieve randen en iconen */
	--hm-bronze-ink:   #6B5327; /* brons voor tekst op licht (6.45:1) */
	--hm-cream:        #F5F1EA; /* lichte paginabasis */
	--hm-cream-2:      #EDE7DC; /* subtiel afwijkende lichte sectie */
	--hm-text:         #1C1917; /* tekst op licht (15.53:1) */
	--hm-text-muted:   #57504A; /* gedempte tekst op licht (7.03:1) */
	--hm-on-ink:       #F5F1EA; /* tekst op donker */
	--hm-on-ink-muted: #C9C2B8; /* gedempte tekst op donker (9.90:1) */
	--hm-alert:        #8C2F1D; /* waarschuwing (spoed) */
	--hm-alert-bg:     #FBEDE9;

	/* Typografie - system stack, nul externe requests.
	   Wil je dichter bij het origineel? Zie assets/fonts/LEESMIJ.txt */
	--hm-font-display: Georgia, "Iowan Old Style", "Times New Roman", "Liberation Serif", serif;
	--hm-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Fluid type scale */
	--hm-fs-xs:   0.8125rem;
	--hm-fs-sm:   0.9375rem;
	--hm-fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--hm-fs-lg:   clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
	--hm-fs-xl:   clamp(1.375rem, 1.24rem + 0.68vw, 1.75rem);
	--hm-fs-2xl:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
	--hm-fs-3xl:  clamp(2.25rem, 1.75rem + 2.5vw, 4rem);

	/* Ritme */
	--hm-space-1: 0.25rem;
	--hm-space-2: 0.5rem;
	--hm-space-3: 0.75rem;
	--hm-space-4: 1rem;
	--hm-space-6: 1.5rem;
	--hm-space-8: 2rem;
	--hm-space-12: 3rem;
	--hm-space-16: 4rem;
	--hm-section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

	--hm-maxw: 72rem;
	--hm-maxw-prose: 42rem;
	--hm-radius: 2px;
	--hm-radius-lg: 4px;
	--hm-border: 1px solid rgba(138, 109, 59, 0.28);
	--hm-shadow: 0 1px 2px rgba(28, 25, 23, 0.06), 0 8px 24px rgba(28, 25, 23, 0.08);
}

/* ==========================================================================
   2. Reset / basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem; /* compenseert sticky header bij ankers */
}

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

body {
	margin: 0;
	background-color: var(--hm-cream);
	color: var(--hm-text);
	font-family: var(--hm-font-body);
	font-size: var(--hm-fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
img { background-color: var(--hm-cream-2); }

h1, h2, h3, h4 {
	font-family: var(--hm-font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 var(--hm-space-4);
	text-wrap: balance;
}

h1 { font-size: var(--hm-fs-3xl); }
h2 { font-size: var(--hm-fs-2xl); }
h3 { font-size: var(--hm-fs-xl); }
h4 { font-size: var(--hm-fs-lg); }

p, ul, ol, dl { margin: 0 0 var(--hm-space-4); }
p { max-width: 68ch; text-wrap: pretty; }

a { color: var(--hm-bronze-ink); text-underline-offset: 0.2em; }
a:hover { color: var(--hm-ink); }

:focus-visible {
	outline: 3px solid var(--hm-gold);
	outline-offset: 3px;
	border-radius: var(--hm-radius);
}

hr {
	border: 0;
	border-top: var(--hm-border);
	margin: var(--hm-space-8) 0;
}

/* Screenreader-only, maar focusbaar */
.hm-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hm-skip-link {
	position: absolute;
	left: var(--hm-space-4);
	top: -100px;
	z-index: 999;
	background: var(--hm-gold);
	color: var(--hm-ink);
	padding: var(--hm-space-3) var(--hm-space-6);
	font-weight: 600;
	text-decoration: none;
	transition: top 0.15s ease;
}
.hm-skip-link:focus { top: var(--hm-space-4); }

/* ==========================================================================
   3. Layout
   ========================================================================== */

.hm-wrap {
	width: 100%;
	max-width: var(--hm-maxw);
	margin-inline: auto;
	padding-inline: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
}

.hm-section { padding-block: var(--hm-section-y); }
.hm-section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }

.hm-section--ink    { background-color: var(--hm-ink);   color: var(--hm-on-ink); }
.hm-section--ink-2  { background-color: var(--hm-ink-2); color: var(--hm-on-ink); }
.hm-section--cream-2{ background-color: var(--hm-cream-2); }

.hm-section--ink h1, .hm-section--ink h2, .hm-section--ink h3,
.hm-section--ink-2 h1, .hm-section--ink-2 h2, .hm-section--ink-2 h3 { color: var(--hm-on-ink); }

.hm-prose { max-width: var(--hm-maxw-prose); }

.hm-grid { display: grid; gap: var(--hm-space-6); }
@media (min-width: 40rem)  { .hm-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem)  { .hm-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 56rem)  { .hm-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 40rem)  { .hm-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem)  { .hm-grid--sidebar { grid-template-columns: 1.6fr 1fr; gap: var(--hm-space-12); align-items: start; } }

/* Kicker: kleine bovenkop boven een h2 */
.hm-kicker {
	display: block;
	font-family: var(--hm-font-body);
	font-size: var(--hm-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hm-bronze-ink);
	margin-bottom: var(--hm-space-3);
}
.hm-section--ink .hm-kicker,
.hm-section--ink-2 .hm-kicker { color: var(--hm-gold-soft); }

.hm-lead {
	font-size: var(--hm-fs-lg);
	color: var(--hm-text-muted);
	max-width: 60ch;
}
.hm-section--ink .hm-lead,
.hm-section--ink-2 .hm-lead { color: var(--hm-on-ink-muted); }

/* ==========================================================================
   4. Header & navigatie
   ========================================================================== */

.hm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--hm-ink);
	border-bottom: 1px solid var(--hm-ink-3);
}

.hm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hm-space-4);
	min-height: 4.5rem;
}

.hm-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--hm-space-3);
	text-decoration: none;
	color: var(--hm-on-ink);
	font-family: var(--hm-font-display);
	line-height: 1.05;
}
.hm-brand:hover { color: var(--hm-gold-soft); }
.hm-brand__mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; }
.hm-brand__name { display: block; font-size: 1.05rem; font-weight: 700; }
.hm-brand__name em { display: block; font-style: normal; color: var(--hm-gold); font-size: 0.86em; letter-spacing: 0.02em; }

.hm-nav { display: flex; align-items: center; gap: var(--hm-space-2); }
.hm-nav__list {
	display: flex;
	align-items: center;
	gap: var(--hm-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}
.hm-nav__list a {
	display: block;
	padding: var(--hm-space-2) var(--hm-space-3);
	color: var(--hm-on-ink);
	text-decoration: none;
	font-size: var(--hm-fs-sm);
	font-weight: 500;
	border-radius: var(--hm-radius);
}
.hm-nav__list a:hover { color: var(--hm-gold-soft); background-color: rgba(201, 162, 39, 0.1); }
.hm-nav__list .current-menu-item > a,
.hm-nav__list [aria-current="page"] { color: var(--hm-gold); }

.hm-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--hm-space-2);
	background: transparent;
	border: 1px solid var(--hm-ink-3);
	color: var(--hm-on-ink);
	font: inherit;
	font-size: var(--hm-fs-sm);
	padding: var(--hm-space-2) var(--hm-space-3);
	border-radius: var(--hm-radius);
	cursor: pointer;
}
.hm-nav-toggle:hover { border-color: var(--hm-bronze); }

@media (max-width: 61.99rem) {
	.hm-nav-toggle { display: inline-flex; }
	.hm-nav {
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		background-color: var(--hm-ink);
		border-bottom: 1px solid var(--hm-ink-3);
		padding: var(--hm-space-4) clamp(1rem, 0.5rem + 2.5vw, 2.5rem) var(--hm-space-6);
		gap: var(--hm-space-4);
	}
	.hm-nav[hidden] { display: none; }
	.hm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.hm-nav__list a { padding: var(--hm-space-3) 0; border-bottom: 1px solid var(--hm-ink-3); }
	.hm-header__inner { position: relative; }
}

/* ==========================================================================
   5. Knoppen & CTA
   ========================================================================== */

.hm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hm-space-2);
	padding: 0.85em 1.6em;
	font-family: var(--hm-font-body);
	font-size: var(--hm-fs-base);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--hm-radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	min-height: 48px; /* tapdoel */
}

.hm-btn--primary { background-color: var(--hm-gold); color: var(--hm-ink); border-color: var(--hm-gold); }
.hm-btn--primary:hover { background-color: var(--hm-gold-soft); border-color: var(--hm-gold-soft); color: var(--hm-ink); }

/* Omlijnde knop. Standaard voor een LICHTE ondergrond: donkere tekst.
   Binnen een donkere sectie draait de tekstkleur om. Zonder deze splitsing
   staat er crème tekst op een crème vlak en is de knop onzichtbaar. */
.hm-btn--ghost {
	background-color: transparent;
	color: var(--hm-text);
	border-color: var(--hm-bronze-ink);
}
.hm-btn--ghost:hover { background-color: var(--hm-gold); border-color: var(--hm-gold); color: var(--hm-ink); }

.hm-hero .hm-btn--ghost,
.hm-pagehead .hm-btn--ghost,
.hm-section--ink .hm-btn--ghost,
.hm-section--ink-2 .hm-btn--ghost,
.hm-cta-band .hm-btn--ghost,
.hm-card--ink .hm-btn--ghost {
	color: var(--hm-on-ink);
	border-color: var(--hm-bronze);
}

.hm-btn--dark { background-color: var(--hm-ink); color: var(--hm-on-ink); border-color: var(--hm-ink); }
.hm-btn--dark:hover { background-color: var(--hm-ink-2); border-color: var(--hm-ink-2); color: var(--hm-gold-soft); }

.hm-btn--lg { font-size: var(--hm-fs-lg); padding: 1em 2em; }
.hm-btn__icon { flex: 0 0 auto; width: 1.15em; height: 1.15em; fill: currentColor; }

.hm-btn-row { display: flex; flex-wrap: wrap; gap: var(--hm-space-4); }

/* Vaste belbalk op mobiel - hoofdconversie */
.hm-callbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: none;
	padding: var(--hm-space-3);
	background-color: var(--hm-ink);
	border-top: 1px solid var(--hm-ink-3);
}
.hm-callbar .hm-btn { width: 100%; }
@media (max-width: 47.99rem) {
	.hm-callbar { display: block; }
	body { padding-bottom: 5.25rem; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hm-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(28rem, 22rem + 30vh, 40rem);
	background-color: var(--hm-ink);
	color: var(--hm-on-ink);
	text-align: center;
	overflow: hidden;
}
.hm-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* De huidige hero-foto is bijna vierkant (1109x993). In een breed
	   venster snijdt cover daar fors boven en onder vanaf. Met een
	   iets hoger zwaartepunt blijft het onderwerp beter in beeld.
	   Stel bij naar smaak: 'center 30%' toont meer van de bovenkant. */
	object-position: center 40%;
	z-index: 0;
}
.hm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(28,25,23,0.62) 0%, rgba(28,25,23,0.5) 45%, rgba(28,25,23,0.78) 100%);
}
.hm-hero__inner { position: relative; z-index: 2; padding-block: var(--hm-space-16); }
.hm-hero__kicker {
	font-size: var(--hm-fs-sm);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hm-gold);
	margin-bottom: var(--hm-space-4);
}
.hm-hero h1 { color: #fff; margin-bottom: var(--hm-space-6); }
.hm-hero h1 em { display: block; font-style: normal; color: var(--hm-gold); }
.hm-hero__sub {
	margin-inline: auto;
	margin-bottom: var(--hm-space-8);
	max-width: 46ch;
	font-size: var(--hm-fs-lg);
	color: var(--hm-on-ink-muted);
}
.hm-hero .hm-btn-row { justify-content: center; }

/* Compacte hero voor subpagina's */
.hm-pagehead {
	background-color: var(--hm-ink);
	color: var(--hm-on-ink);
	padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
	border-bottom: 3px solid var(--hm-gold);
}
.hm-pagehead h1 { color: #fff; }
.hm-pagehead .hm-lead { color: var(--hm-on-ink-muted); }

/* ==========================================================================
   7. Kaarten, lijsten, tabellen
   ========================================================================== */

.hm-card {
	background-color: #fff;
	border: var(--hm-border);
	border-radius: var(--hm-radius-lg);
	padding: var(--hm-space-6);
	height: 100%;
}
.hm-card h3 { margin-bottom: var(--hm-space-2); }
.hm-card p:last-child { margin-bottom: 0; }
.hm-card__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--hm-space-4);
	border-radius: 50%;
	background-color: var(--hm-cream-2);
	color: var(--hm-bronze-ink);
	font-size: 1.35rem;
}
.hm-card--ink {
	background-color: var(--hm-ink-2);
	border-color: var(--hm-ink-3);
	color: var(--hm-on-ink);
}
.hm-card--ink p { color: var(--hm-on-ink-muted); }
.hm-card--ink .hm-card__icon { background-color: var(--hm-ink); color: var(--hm-gold); }

/* Linkkaart: hele kaart klikbaar zonder de link te nesten */
.hm-card--link { position: relative; transition: border-color 0.15s ease, transform 0.15s ease; }
.hm-card--link:hover { border-color: var(--hm-bronze); }
.hm-card--link a::after { content: ""; position: absolute; inset: 0; }

.hm-list-check { list-style: none; margin: 0 0 var(--hm-space-4); padding: 0; }
.hm-list-check li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: var(--hm-space-3);
}
.hm-list-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	border: 2px solid var(--hm-bronze);
}
.hm-section--ink .hm-list-check li::before,
.hm-section--ink-2 .hm-list-check li::before { border-color: var(--hm-gold); }

/* Statblokken */
.hm-stats { display: grid; gap: var(--hm-space-6); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.hm-stat { border-left: 3px solid var(--hm-gold); padding-left: var(--hm-space-4); }
.hm-stat__value { display: block; font-family: var(--hm-font-display); font-size: var(--hm-fs-2xl); font-weight: 700; line-height: 1; }
.hm-stat__label {
	display: block;
	margin-top: var(--hm-space-2);
	font-size: var(--hm-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hm-text-muted);
}
.hm-section--ink .hm-stat__label,
.hm-section--ink-2 .hm-stat__label { color: var(--hm-on-ink-muted); }

/* Prijstabel */
.hm-table-wrap { overflow-x: auto; }
.hm-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	background-color: #fff;
	border: var(--hm-border);
}
.hm-table caption {
	caption-side: top;
	text-align: left;
	padding-bottom: var(--hm-space-3);
	font-size: var(--hm-fs-sm);
	color: var(--hm-text-muted);
}
.hm-table th, .hm-table td { padding: var(--hm-space-4); border-bottom: var(--hm-border); }
.hm-table thead th {
	background-color: var(--hm-ink);
	color: var(--hm-on-ink);
	font-size: var(--hm-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 0;
}
.hm-table tbody tr:last-child th, .hm-table tbody tr:last-child td { border-bottom: 0; }
.hm-table td.hm-price {
	font-family: var(--hm-font-display);
	font-size: var(--hm-fs-lg);
	font-weight: 700;
	white-space: nowrap;
	text-align: right;
}

/* Definitielijst voor contactgegevens */
.hm-dl { display: grid; gap: var(--hm-space-6); margin: 0; }
.hm-dl > div { border-left: 3px solid var(--hm-gold); padding-left: var(--hm-space-4); }
.hm-dl dt {
	font-size: var(--hm-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hm-bronze-ink);
	margin-bottom: var(--hm-space-1);
}
.hm-section--ink .hm-dl dt, .hm-section--ink-2 .hm-dl dt { color: var(--hm-gold-soft); }
.hm-dl dd { margin: 0; font-size: var(--hm-fs-lg); }
.hm-dl dd a { color: inherit; }

/* Openingstijden */
.hm-hours { width: 100%; border-collapse: collapse; }
.hm-hours th, .hm-hours td { padding: var(--hm-space-3) 0; border-bottom: 1px solid rgba(138,109,59,0.25); text-align: left; }
.hm-hours th { font-weight: 500; }
.hm-hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hm-section--ink .hm-hours th, .hm-section--ink .hm-hours td { border-color: var(--hm-ink-3); }

/* Citaat */
.hm-quote {
	margin: 0;
	padding: var(--hm-space-8) 0;
	text-align: center;
}
.hm-quote blockquote {
	margin: 0 auto;
	max-width: 34ch;
	font-family: var(--hm-font-display);
	font-size: var(--hm-fs-2xl);
	line-height: 1.25;
}
.hm-quote figcaption { margin-top: var(--hm-space-4); font-size: var(--hm-fs-sm); color: var(--hm-text-muted); }
.hm-section--ink .hm-quote figcaption { color: var(--hm-on-ink-muted); }

/* Waarschuwingsblok */
.hm-alert {
	display: flex;
	gap: var(--hm-space-4);
	padding: var(--hm-space-6);
	background-color: var(--hm-alert-bg);
	border-left: 4px solid var(--hm-alert);
	border-radius: var(--hm-radius);
	color: #4A1A10;
}
.hm-alert p:last-child { margin-bottom: 0; }
.hm-alert strong { color: var(--hm-alert); }

/* Figuur met bijschrift */
.hm-figure { margin: 0 0 var(--hm-space-6); }
.hm-figure img { border-radius: var(--hm-radius-lg); border: var(--hm-border); width: 100%; }

/* Afbeeldingen uit de mediabibliotheek: nooit opblazen boven hun eigen
   resolutie. Een 480px-brede foto uitgerekt naar 700px oogt zichtbaar
   zachter dan dezelfde foto op ware grootte. */
.hm-figure .hm-media { width: auto; max-width: 100%; margin-inline: auto; }
.hm-figure figcaption {
	margin-top: var(--hm-space-3);
	font-size: var(--hm-fs-sm);
	color: var(--hm-text-muted);
	max-width: 60ch;
}
.hm-section--ink .hm-figure figcaption { color: var(--hm-on-ink-muted); }

.hm-figure--placeholder img,
.hm-placeholder {
	display: grid;
	place-items: center;
	min-height: 14rem;
	background: repeating-linear-gradient(45deg, var(--hm-cream-2), var(--hm-cream-2) 10px, #E4DCCD 10px, #E4DCCD 20px);
	border: 1px dashed var(--hm-bronze);
	border-radius: var(--hm-radius-lg);
	color: var(--hm-bronze-ink);
	font-size: var(--hm-fs-sm);
	text-align: center;
	padding: var(--hm-space-4);
}

/* Breadcrumbs */
.hm-breadcrumbs { padding-block: var(--hm-space-4); font-size: var(--hm-fs-sm); }
.hm-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--hm-space-2); list-style: none; margin: 0; padding: 0; }
.hm-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: var(--hm-space-2); color: var(--hm-bronze); }
.hm-breadcrumbs [aria-current="page"] { color: var(--hm-text-muted); }

/* CTA-band
   Draagt ook .hm-section--ink-2, waardoor .hm-lead en .hm-kicker hun
   lichte varianten krijgen. Zonder die class vielen ze terug op de
   kleuren voor een lichte achtergrond en waren ze onleesbaar. */
.hm-cta-band { background-color: var(--hm-ink-2); color: var(--hm-on-ink); text-align: center; }
.hm-cta-band h2 { color: #fff; }                          /* kop */
.hm-cta-band .hm-kicker { color: var(--hm-gold-soft); }   /* bovenkopje "Direct contact" */
.hm-cta-band .hm-lead {                                   /* ondertekst */
	color: var(--hm-on-ink-muted);
	margin-inline: auto;
}
.hm-cta-band .hm-btn-row { justify-content: center; margin-top: var(--hm-space-8); }

/* ==========================================================================
   8. Footer
   ========================================================================== */

.hm-footer {
	background-color: var(--hm-ink);
	color: var(--hm-on-ink-muted);
	padding-block: var(--hm-space-16) var(--hm-space-8);
	font-size: var(--hm-fs-sm);
}
.hm-footer h2 { font-size: var(--hm-fs-lg); color: var(--hm-on-ink); }
.hm-footer a { color: var(--hm-on-ink); }
.hm-footer a:hover { color: var(--hm-gold-soft); }
.hm-footer__grid { display: grid; gap: var(--hm-space-8); }
@media (min-width: 48rem) { .hm-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--hm-space-12); } }
.hm-footer__list { list-style: none; margin: 0; padding: 0; }
.hm-footer__list li { margin-bottom: var(--hm-space-2); }
.hm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hm-space-4);
	justify-content: space-between;
	margin-top: var(--hm-space-12);
	padding-top: var(--hm-space-6);
	border-top: 1px solid var(--hm-ink-3);
	font-size: var(--hm-fs-xs);
}

/* ==========================================================================
   9. Cookiemelding (AVG - Consent Mode v2)
   ========================================================================== */

.hm-consent {
	position: fixed;
	inset: auto var(--hm-space-4) var(--hm-space-4) var(--hm-space-4);
	z-index: 200;
	max-width: 34rem;
	margin-inline: auto;
	padding: var(--hm-space-6);
	background-color: #fff;
	border: 2px solid var(--hm-ink);
	border-radius: var(--hm-radius-lg);
	box-shadow: var(--hm-shadow);
	font-size: var(--hm-fs-sm);
}
.hm-consent[hidden] { display: none; }
.hm-consent h2 { font-size: var(--hm-fs-lg); margin-bottom: var(--hm-space-2); }
.hm-consent p { margin-bottom: var(--hm-space-4); }
.hm-consent__actions { display: flex; flex-wrap: wrap; gap: var(--hm-space-3); }
.hm-consent .hm-btn { flex: 1 1 10rem; font-size: var(--hm-fs-sm); padding: 0.7em 1.2em; }
@media (max-width: 47.99rem) { .hm-consent { bottom: 5.5rem; } }

/* ==========================================================================
   10. Print
   ========================================================================== */

@media print {
	.hm-header, .hm-callbar, .hm-consent, .hm-cta-band, .hm-nav-toggle { display: none !important; }
	body { background: #fff; color: #000; padding-bottom: 0; }
	.hm-hero, .hm-pagehead, .hm-section--ink, .hm-section--ink-2 { background: #fff !important; color: #000 !important; }
	.hm-hero::after, .hm-hero__media { display: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}