/* =========================================================================
 * Mallekote Verhuizingen: stylesheet
 *
 * Dit bestand is de enige bron van opmaak op de site. WordPress levert geen
 * eigen CSS meer aan: block-library, global-styles en de layout-stijlen zijn
 * uitgezet in functions.php. Alles hieronder is dus van ons, en er is nergens
 * een !important nodig om ergens overheen te komen.
 *
 * Volgorde: tokens → fonts → reset → layout → componenten → berichtinhoud.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 1. Designtokens
 * ---------------------------------------------------------------------- */

:root {
	/* Kleuren */
	--mk-yellow: #ffce16;
	--mk-yellow-dark: #c69f0b;
	--mk-dark: #222222;
	--mk-dark-soft: #333333;
	--mk-panel: #444444;
	--mk-body: #444444;
	--mk-muted: #767676;
	--mk-line: #e6e6e6;
	--mk-surface: #f7f7f5;
	--mk-white: #ffffff;

	/* WhatsApp: de eigen huisstijl van de dienst, want daar herkent
	   de bezoeker de knop aan. */
	--mk-whatsapp: #25d366;
	--mk-whatsapp-dark: #1da851;

	/* Tekst op een donkere ondergrond */
	--mk-on-dark: #ffffff;
	--mk-on-dark-soft: rgba(255, 255, 255, 0.7);
	--mk-on-dark-muted: rgba(255, 255, 255, 0.6);
	--mk-on-dark-line: rgba(255, 255, 255, 0.15);

	/* Lettertypen */
	--mk-font-display: "Anton SC", Impact, "Arial Narrow", sans-serif;
	--mk-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Tekstgroottes. Alles wat meeschaalt gebruikt clamp(). */
	--mk-text-xs: 12px;
	--mk-text-sm: 14px;
	--mk-text-15: 15px;
	--mk-text-base: 16px;
	--mk-text-md: 18px;
	--mk-text-lg: clamp(18px, 1.6vw, 24px);
	--mk-text-h4: clamp(20px, 2vw, 22px);
	--mk-text-h3: clamp(24px, 2.6vw, 30px);
	--mk-text-h2: clamp(32px, 4.4vw, 48px);
	--mk-text-h1: clamp(34px, 5vw, 58px);
	--mk-text-hero: clamp(38px, 4.6vw, 66px);

	/* Ruimte */
	--mk-space-2xs: 8px;
	--mk-space-xs: 12px;
	--mk-space-sm: 16px;
	--mk-space-md: 24px;
	--mk-space-lg: 40px;
	--mk-space-xl: 64px;

	/* Sectiehoogte */
	--mk-section: clamp(80px, 10vw, 120px);
	--mk-section-sm: clamp(56px, 8vw, 80px);

	/* Breedtes */
	--mk-container: 1200px;
	--mk-container-wide: 1440px;
	--mk-container-text: 720px;
	--mk-container-prose: 800px;
	--mk-gutter: 20px;

	/* Vormen */
	--mk-radius-sm: 8px;
	--mk-radius: 12px;
	--mk-radius-lg: 16px;
	--mk-radius-xl: 20px;

	/* Schaduwen */
	--mk-shadow-card: 0 2px 8px rgba(34, 34, 34, 0.06);
	--mk-shadow-raised: 0 12px 32px rgba(34, 34, 34, 0.1);
	--mk-shadow-header: 0 0 10px rgba(109, 109, 109, 0.2);
	--mk-shadow-header-stuck: 0 4px 24px rgba(34, 34, 34, 0.16);

	/* Hoogte van de zwevende header, voor scroll-offsets en paginaruimte. */
	--mk-header-space: 104px;

	/* Afstand van de zwevende balk tot de vensterrand. De hero gebruikt
	   dezelfde waarde, zodat het paneel eronder er precies mee uitlijnt. */
	--mk-header-inset: 24px;
}

@media (max-width: 781px) {
	:root {
		--mk-gutter: 16px;
		--mk-header-space: 88px;
		--mk-header-inset: 12px;
	}
}

/* -------------------------------------------------------------------------
 * 2. Lettertypen
 * WordPress laadde deze via theme.json. Nu doen we het zelf.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: "Anton SC";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-sc-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: "Anton SC";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-sc-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;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/inter-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: Inter;
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/inter-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;
}

/* -------------------------------------------------------------------------
 * 3. Reset en basis
 * ---------------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--mk-white);
	color: var(--mk-body);
	font-family: var(--mk-font-body);
	font-size: var(--mk-text-base);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--mk-dark);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
}

h1, h2, h3 {
	font-family: var(--mk-font-display);
	text-transform: uppercase;
}

h1 { font-size: var(--mk-text-h1); letter-spacing: 0.5px; }
h2 { font-size: var(--mk-text-h2); letter-spacing: 0.2px; }
h3 { font-size: var(--mk-text-h3); letter-spacing: 0.5px; }

h4 {
	font-size: var(--mk-text-h4);
	font-weight: 700;
	line-height: 1.25;
}

h5 { font-size: var(--mk-text-md); font-weight: 600; line-height: 1.3; }
h6 { font-size: var(--mk-text-base); font-weight: 600; line-height: 1.4; }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--mk-yellow-dark);
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

ul, ol {
	margin: 0;
	padding-left: 1.25em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

hr {
	border: 0;
	border-top: 1px solid var(--mk-line);
	margin: 0;
}

strong { font-weight: 700; }

/* Zichtbare focus voor toetsenbordgebruikers, in de huisstijl. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--mk-yellow-dark);
	outline-offset: 2px;
}

:target {
	scroll-margin-top: 120px;
}

/* Skip-link: buiten beeld tot hij focus krijgt. */
.mk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background-color: var(--mk-white);
	color: var(--mk-dark);
	font-weight: 600;
}

.mk-skip-link:focus {
	left: 0;
}

.screen-reader-text:focus {
	position: absolute;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	z-index: 100000;
	background-color: var(--mk-white);
	color: var(--mk-dark);
	font-weight: 600;
}

/* Vangnet voor de standaardklasse die WordPress en plugins gebruiken. */
.screen-reader-text,
.mk-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

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

/* -------------------------------------------------------------------------
 * 4. Layout
 * Eén container en één sectie. Meer heeft de site niet nodig.
 * ---------------------------------------------------------------------- */

.mk-container {
	width: 100%;
	max-width: var(--mk-container);
	margin-inline: auto;
	padding-inline: var(--mk-gutter);
}

.mk-container--wide {
	max-width: var(--mk-container-wide);
}

.mk-container--text {
	max-width: calc(var(--mk-container-text) + var(--mk-gutter) * 2);
}

.mk-container--prose {
	max-width: calc(var(--mk-container-prose) + var(--mk-gutter) * 2);
}

.mk-section {
	padding-block: var(--mk-section);
}

.mk-section--sm {
	padding-block: var(--mk-section-sm);
}

.mk-section--dark {
	background-color: var(--mk-dark);
	color: var(--mk-on-dark);
}

.mk-section--dark h1,
.mk-section--dark h2,
.mk-section--dark h3,
.mk-section--dark h4 {
	color: var(--mk-on-dark);
}

.mk-section--surface {
	background-color: var(--mk-surface);
}

.mk-section--yellow {
	background-color: var(--mk-yellow);
}

/* Rasters. auto-fit vult de rij zelf op; de minimumbreedte bepaalt hoeveel
   kolommen er passen. */
.mk-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.mk-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* Twee brede kolommen: het 2x2-raster bij "Waarom Mallekote Verhuizingen". */
.mk-grid--half {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

.mk-grid--narrow {
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* Het dienstenraster heeft een eigen ritme: de kolommen dicht op elkaar zodat
   de kaarten als één blok lezen, de rijen juist ruimer zodat de tekst van de
   ene kaart niet tegen het beeld van de volgende aan komt te staan. */
.mk-grid--diensten {
	gap: 40px 20px;
}

/* De blograsters. Deze kaarten hebben een eigen rand en witte body, dus ze
   blijven ook dicht op elkaar als losse kaarten leesbaar. */
.mk-grid--blog {
	gap: 20px;
}

/* Twee kolommen met een vaste verhouding. Onder 900px onder elkaar. */
.mk-split {
	display: grid;
	gap: 48px 64px;
	grid-template-columns: var(--mk-split, 1fr 1fr);
	align-items: start;
}

.mk-split--center {
	align-items: center;
}

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

/* Een kolom die meeloopt met de pagina, zoals het offertepaneel naast de
   inhoud van een dienst. Alleen zolang er twee kolommen naast elkaar staan:
   daaronder staat alles onder elkaar en zit meelopen alleen in de weg. */
@media (min-width: 901px) {
	.mk-sticky {
		position: sticky;
		top: calc(var(--mk-header-space) + var(--mk-space-md));
	}

	/* De adminbalk van WordPress staat er voor ingelogde gebruikers boven. */
	body.admin-bar .mk-sticky {
		top: calc(var(--mk-header-space) + var(--mk-space-md) + 32px);
	}
}

/* Verticale stapel met één afstand, in plaats van marges per element. */
.mk-stack {
	display: flex;
	flex-direction: column;
	gap: var(--mk-stack-gap, var(--mk-space-sm));
	align-items: flex-start;
}

.mk-stack--center {
	align-items: center;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 5. Header en navigatie
 * Zwevende witte balk die over de hero heen ligt.
 * ---------------------------------------------------------------------- */

.mk-header {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: calc(100% - var(--mk-header-inset) * 2);
	max-width: var(--mk-container-wide);
	padding: 14px 24px;
	border-radius: var(--mk-radius-lg);
	background-color: var(--mk-white);
	box-shadow: var(--mk-shadow-header);
	transition: box-shadow 0.3s ease;
}

.mk-header.is-stuck {
	box-shadow: var(--mk-shadow-header-stuck);
}

/* De adminbalk van WordPress staat er voor ingelogde gebruikers overheen.
   Omdat onze balk fixed is, schuift hij niet vanzelf mee. */
body.admin-bar .mk-header {
	top: 52px;
}

.mk-header--landing {
	border-bottom: 1px solid var(--mk-line);
}

.mk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mk-space-md);
}

.mk-header__brand {
	display: flex;
	align-items: center;
	gap: var(--mk-space-xs);
	flex: 0 0 auto;
	color: var(--mk-dark);
	font-family: var(--mk-font-display);
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
}

.mk-header__brand:hover {
	color: var(--mk-dark);
}

.mk-header__logo {
	width: 52px;
	height: auto;
	flex: 0 0 auto;
}

.mk-header__actions {
	display: flex;
	align-items: center;
	gap: var(--mk-space-sm);
	flex: 0 0 auto;
}

.mk-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.mk-header__phone-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--mk-yellow-dark);
}

/* Navigatie. De onderstreping groeit vanuit het midden uit. */
.mk-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-nav__link {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.mk-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 50%;
	bottom: 0;
	height: 2px;
	background-color: var(--mk-yellow);
	transition: inset-inline 0.3s ease;
}

.mk-nav__link:hover::after,
.mk-nav__link:focus-visible::after,
.mk-nav__link[aria-current="page"]::after {
	inset-inline: 0;
}

/* Uitklapmenu bij Diensten.
   Op de balk klapt het open bij hover en bij toetsenbordfocus; in het
   ingeklapte mobiele menu staat het gewoon als ingesprongen lijst. */
.mk-nav__item {
	position: relative;
}

.mk-nav__item--sub > .mk-nav__link {
	padding-right: 14px;
}

.mk-nav__item--sub > .mk-nav__link::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.25s ease;
}

.mk-nav__item--sub:hover > .mk-nav__link::before,
.mk-nav__item--sub:focus-within > .mk-nav__link::before {
	transform: translateY(-30%) rotate(-135deg);
}

.mk-nav__submenu {
	position: absolute;
	left: -16px;
	top: 100%;
	z-index: 10;
	min-width: 240px;
	margin-top: 14px;
	padding: 8px 0;
	list-style: none;
	border-radius: var(--mk-radius);
	background-color: var(--mk-white);
	box-shadow: 0 12px 28px rgba(34, 34, 34, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

/* Onzichtbare brug over de tussenruimte, zodat het menu niet dichtklapt als
   je de muis van de link naar de lijst beweegt. */
.mk-nav__submenu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -14px;
	height: 14px;
}

.mk-nav__item--sub:hover > .mk-nav__submenu,
.mk-nav__item--sub:focus-within > .mk-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mk-nav__submenu a {
	display: block;
	padding: 9px 20px;
	color: var(--mk-dark);
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.mk-nav__submenu a:hover,
.mk-nav__submenu a:focus-visible {
	background-color: var(--mk-surface);
	color: var(--mk-yellow-dark);
	padding-left: 26px;
}

/* De offerteknop in het uitklapmenu en de hamburger verschijnen allebei pas
   als de balk te smal wordt. De selector is bewust specifieker dan .mk-btn,
   want die zet zelf display:inline-flex. */
.mk-nav__list .mk-nav__cta {
	display: none;
}

.mk-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--mk-radius-sm);
	background: none;
	color: var(--mk-dark);
	cursor: pointer;
}

.mk-nav__toggle span,
.mk-nav__toggle span::before,
.mk-nav__toggle span::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.mk-nav__toggle span::before,
.mk-nav__toggle span::after {
	content: "";
	position: relative;
}

.mk-nav__toggle span::before { top: -7px; }
.mk-nav__toggle span::after { top: 5px; }

.mk-nav__toggle[aria-expanded="true"] span {
	background-color: transparent;
}

.mk-nav__toggle[aria-expanded="true"] span::before {
	transform: translateY(7px) rotate(45deg);
}

.mk-nav__toggle[aria-expanded="true"] span::after {
	transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 1023px) {
	.mk-nav__toggle {
		display: flex;
		order: 3;
	}

	.mk-header__actions .mk-btn {
		display: none;
	}

	/* Uitgeklapt menu: over de hele balk heen, onder de logoregel. */
	.mk-nav__list {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mk-space-2xs);
		margin-top: 12px;
		padding: 24px;
		border-radius: var(--mk-radius-lg);
		background-color: var(--mk-white);
		box-shadow: var(--mk-shadow-raised);
	}

	.mk-nav__list.is-open {
		display: flex;
	}

	.mk-nav__link {
		font-family: var(--mk-font-display);
		font-size: 22px;
		letter-spacing: 0.5px;
		text-transform: uppercase;
	}

	/* In het uitgeklapte menu is de streep alleen ruis. */
	.mk-nav__link::after {
		display: none;
	}

	.mk-nav__item {
		width: 100%;
	}

	/* Geen zwevend paneel meer, maar een ingesprongen lijst onder Diensten. */
	.mk-nav__submenu {
		position: static;
		min-width: 0;
		margin-top: 0;
		padding: 6px 0 10px 16px;
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.mk-nav__submenu::before {
		display: none;
	}

	.mk-nav__submenu a {
		padding: 6px 0;
		font-size: 16px;
	}

	.mk-nav__submenu a:hover,
	.mk-nav__submenu a:focus-visible {
		background: none;
		padding-left: 0;
	}

	.mk-nav__item--sub > .mk-nav__link::before {
		display: none;
	}

	.mk-nav__list .mk-nav__cta {
		display: inline-flex;
		margin-top: var(--mk-space-xs);
	}
}

@media (max-width: 781px) {
	.mk-header {
		top: 12px;
		padding: 12px 16px;
	}

	body.admin-bar .mk-header {
		top: 58px;
	}

	.mk-header__phone {
		display: none;
	}

	.mk-header__brand {
		font-size: 20px;
	}

	.mk-header__logo {
		width: 40px;
	}
}

/* De header zweeft over de pagina heen, op elke pagina. De bovenste sectie
   loopt er dus onderdoor en reserveert zelf de ruimte voor de balk, zodat er
   nergens een witte strook boven het beeld staat. Zit die sectie in een
   wikkel, zoals het <article> van een blogbericht, dan geldt hetzelfde: de
   wikkel krijgt geen extra ruimte, de sectie eronder regelt het zelf. */
.mk-main > :first-child:not(.mk-banner):not(.mk-hero):not(:has(> .mk-banner:first-child, > .mk-hero:first-child)) {
	padding-top: calc(var(--mk-header-space) + var(--mk-space-lg));
}

/* -------------------------------------------------------------------------
 * 5b. Entree-animaties
 *
 * De klasse mk-reveal wordt door theme.js gezet, niet door de HTML. Zonder
 * JavaScript verschijnt er dus niets in beeld met opacity 0, en blijft de
 * pagina gewoon leesbaar. --mk-reveal-i is de plek in de rij, zodat kaarten
 * in een raster kort na elkaar binnenkomen in plaats van allemaal tegelijk.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.mk-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: calc(var(--mk-reveal-i, 0) * 70ms);
		will-change: opacity, transform;
	}

	.mk-reveal.is-in {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 6. Knoppen
 * ---------------------------------------------------------------------- */

.mk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: 2px solid transparent;
	border-radius: var(--mk-radius-sm);
	background-color: var(--mk-yellow);
	color: var(--mk-dark);
	font-family: var(--mk-font-display);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		transform 0.18s ease,
		box-shadow 0.25s ease;
}

.mk-btn:hover,
.mk-btn:focus-visible {
	background-color: var(--mk-yellow-dark);
	color: var(--mk-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.18);
}

/* Kort indrukken bij een klik, zodat de knop voelt als een knop. */
.mk-btn:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
	transition-duration: 0.06s;
}

.mk-btn--outline {
	background-color: transparent;
	border-color: var(--mk-dark);
	color: var(--mk-dark);
}

.mk-btn--outline:hover,
.mk-btn--outline:focus-visible {
	background-color: var(--mk-dark);
	border-color: var(--mk-dark);
	color: var(--mk-white);
}

.mk-btn--dark {
	background-color: var(--mk-dark);
	color: var(--mk-white);
}

.mk-btn--dark:hover,
.mk-btn--dark:focus-visible {
	background-color: #000000;
	color: var(--mk-white);
}

/* Pictogram in een knop. De knop is al inline-flex met een gat van 8px, dus
   het icoon hoeft alleen een maat te krijgen. De kleur erft het van de knop. */
.mk-btn__icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
}

.mk-btn--sm {
	padding: 12px 20px;
	font-size: 15px;
}

.mk-btn--lg {
	padding: 18px 26px;
	font-size: 18px;
}

.mk-btn--block {
	width: 100%;
}

/* Op een donkere ondergrond keert de omlijnde knop om. */
.mk-section--dark .mk-btn--outline,
.mk-hero .mk-btn--outline.mk-btn--on-dark {
	border-color: var(--mk-white);
	color: var(--mk-white);
}

.mk-section--dark .mk-btn--outline:hover,
.mk-section--dark .mk-btn--outline:focus-visible {
	background-color: var(--mk-white);
	color: var(--mk-dark);
}

.mk-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-space-sm);
}

.mk-btns--stack {
	flex-direction: column;
	align-items: stretch;
}

/* -------------------------------------------------------------------------
 * 7. Sectiekop en labels
 * ---------------------------------------------------------------------- */

/* Het label boven een kop. Bewust de bodyletter en niet de displayletter:
   Anton SC heeft maar een gewicht en dat is te zwaar naast de kop eronder. */
.mk-eyebrow {
	display: inline-block;
	margin: 0;
	color: var(--mk-muted);
	font-family: var(--mk-font-body);
	font-size: var(--mk-text-sm);
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-transform: uppercase;
}

.mk-section--dark .mk-eyebrow,
.mk-banner:not(.mk-banner--surface) .mk-eyebrow {
	color: var(--mk-yellow);
}

/* Het matglazen paneel in de hero laat de foto erdoorheen schemeren. Grijs
   valt daar weg, dus daar krijgt het label dezelfde kleur als de kop. */
.mk-hero .mk-eyebrow {
	color: var(--mk-dark);
}

.mk-banner:not(.mk-banner--surface) .mk-eyebrow a {
	color: inherit;
}

/* Het kruimelpad staat op de plek van het label boven de kop en krijgt daarom
   dezelfde maat en vorm. De markup komt van Rank Math:
   <nav class="rank-math-breadcrumb"><p>...</p></nav>. */
.mk-crumbs {
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
	font-weight: 600;
	letter-spacing: 1.5px;
	line-height: 1.2;
	text-transform: uppercase;
}

.mk-crumbs a {
	color: inherit;
	text-decoration: none;
}

.mk-crumbs a:hover,
.mk-crumbs a:focus-visible {
	text-decoration: underline;
}

.mk-crumbs .separator {
	opacity: 0.5;
}

/* Op de donkere banner: de weg terug in het geel, de pagina waar je nu bent
   rustiger, zodat het pad in een oogopslag te lezen is. */
.mk-banner:not(.mk-banner--surface) .mk-crumbs {
	color: var(--mk-yellow);
}

.mk-banner:not(.mk-banner--surface) .mk-crumbs .last {
	color: var(--mk-on-dark-muted);
}

/* De sectiekop: label, titel en inleiding, altijd links uitgelijnd. */
.mk-intro {
	max-width: 680px;
	margin-bottom: var(--mk-space-xl);
}

.mk-intro > * + * {
	margin-top: var(--mk-space-xs);
}

.mk-intro__lead {
	margin-top: var(--mk-space-sm);
	font-size: var(--mk-text-lg);
}

.mk-section--dark .mk-intro__lead {
	color: var(--mk-on-dark-soft);
}

/* Variant met een knop rechts naast de kop. */
.mk-intro-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mk-space-lg);
	margin-bottom: var(--mk-space-xl);
}

.mk-intro-row .mk-intro {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 8. Hero
 * ---------------------------------------------------------------------- */

.mk-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* 85 procent van het venster, maar nooit hoger dan 800px: op een groot
	   scherm wordt de hero anders een lege vlakte. svh telt de adresbalk van
	   een mobiele browser niet mee, zodat de hero daar niet buiten beeld valt.
	   vh blijft als terugval staan. */
	min-height: min(85vh, 800px);
	min-height: min(85svh, 800px);
	/* Boven genoeg ruimte voor de zwevende header, onder de afstand tot het
	   paneel. Blijft ruim onder die 800px, anders zou de padding de hoogte
	   bepalen in plaats van andersom. */
	padding: calc(var(--mk-header-space) + var(--mk-space-lg)) 0 100px;
	overflow: hidden;
	isolation: isolate;
}

.mk-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.mk-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(34, 34, 34, 0.4);
	z-index: -1;
}

/* Sam rechts op de onderrand van de hero. Staat na de waas in de HTML en op
   dezelfde z-index, dus hij komt er bovenop en wordt niet mee verdonkerd. Het
   paneel ligt weer over hem heen, want dat is niet negatief gestapeld. */
.mk-hero__portrait {
	position: absolute;
	/* Lijn zijn rechterkant uit met de rechterkant van het gecentreerde kader.
	   Op een breed scherm is dat de halve overloop plus de binnenmarge; is het
	   venster smaller dan het kader, dan blijft alleen die binnenmarge over. */
	right: max(
		var(--mk-header-inset),
		calc(50% - var(--mk-container-wide) / 2 + var(--mk-header-inset))
	);
	bottom: 0;
	z-index: -1;
	width: clamp(260px, 26vw, 420px);
}

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

/* Op een smaller scherm loopt het tekstpaneel over de volle breedte en zou
   Sam er half achter verdwijnen. Dan liever helemaal niet. */
@media (max-width: 900px) {
	.mk-hero__portrait {
		display: none;
	}
}

.mk-hero > .mk-container {
	padding-inline: var(--mk-header-inset);
}

.mk-hero__panel {
	max-width: 620px;
	padding: 32px;
	border-radius: var(--mk-radius-xl);
	background-color: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

/* Browsers zonder backdrop-filter krijgen een dekkender paneel,
   anders wordt de tekst onleesbaar boven de foto. */
@supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
	.mk-hero__panel {
		background-color: rgba(255, 255, 255, 0.85);
	}
}

.mk-hero__title {
	margin-top: 6px;
	font-size: var(--mk-text-hero);
}

.mk-hero__title em {
	color: var(--mk-yellow);
	font-style: normal;
}

.mk-hero__text {
	margin-top: 18px;
	color: var(--mk-dark);
	font-size: var(--mk-text-md);
}

.mk-hero__buttons {
	margin-top: 26px;
}

@media (max-width: 781px) {
	.mk-hero {
		min-height: min(85vh, 800px);
		min-height: min(85svh, 800px);
		padding: calc(var(--mk-header-space) + var(--mk-space-md)) 0 64px;
	}

	.mk-hero__panel {
		padding: 24px;
	}
}

/* Compacte banner bovenaan een dienst-, landings- of blogpagina. */
.mk-banner {
	position: relative;
	padding-top: calc(var(--mk-header-space) + var(--mk-section-sm));
	padding-bottom: var(--mk-section-sm);
	background-color: var(--mk-dark);
	color: var(--mk-on-dark);
	overflow: hidden;
	isolation: isolate;
}

.mk-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.35;
	z-index: -1;
}

/* Dezelfde afstand als in .mk-intro, zodat het label overal even dicht op
   de kop staat. */
.mk-banner h1 {
	margin-top: var(--mk-space-xs);
	color: var(--mk-on-dark);
}

.mk-banner__lead {
	max-width: 720px;
	margin-top: 24px;
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--mk-text-lg);
}

.mk-banner--surface {
	background-color: var(--mk-surface);
	color: var(--mk-body);
}

.mk-banner--surface h1 {
	color: var(--mk-dark);
}

.mk-banner--surface .mk-banner__lead {
	color: var(--mk-body);
}

/* -------------------------------------------------------------------------
 * 9. USP-balk
 * ---------------------------------------------------------------------- */

.mk-usp {
	display: grid;
	gap: 32px 40px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.mk-usp__title {
	margin-bottom: 6px;
	color: var(--mk-yellow);
	font-family: var(--mk-font-display);
	font-size: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.mk-usp__text {
	color: var(--mk-on-dark-soft);
	font-size: var(--mk-text-15);
}

/* -------------------------------------------------------------------------
 * 10. Kaarten
 * ---------------------------------------------------------------------- */

.mk-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background-color: var(--mk-white);
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mk-card:hover {
	transform: translateY(-4px);
	border-color: var(--mk-yellow);
	box-shadow: var(--mk-shadow-raised);
	color: inherit;
}

.mk-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--mk-surface);
}

.mk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mk-card:hover .mk-card__media img {
	transform: scale(1.04);
}

.mk-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mk-space-xs);
	padding: 28px;
}

.mk-card__title {
	font-family: var(--mk-font-body);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.mk-card__text {
	font-size: var(--mk-text-15);
}

.mk-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	color: var(--mk-muted);
	font-size: var(--mk-text-xs);
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Dienstkaart: randloos, het staande beeld draagt de kaart. */
.mk-service-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mk-service-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: var(--mk-radius-xl);
	background-color: var(--mk-surface);
}

/* Pijltje rechtsonder in het beeld, alleen bij aanwijzen. Puur een hint dat de
   kaart een link is, dus zit het in de CSS en niet in de markup. Het beeld
   heeft overflow: hidden, dus het schuift netjes van onder in beeld. */
.mk-service-card__media::after {
	content: "";
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--mk-yellow);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.mk-service-card:hover .mk-service-card__media::after,
.mk-service-card:focus-visible .mk-service-card__media::after {
	opacity: 1;
	transform: translateY(0);
}

.mk-service-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.mk-service-card:hover .mk-service-card__media img,
.mk-service-card:focus-visible .mk-service-card__media img {
	transform: scale(1.04);
}

.mk-service-card:hover .mk-service-card__title {
	color: var(--mk-yellow-dark);
}

.mk-service-card__title {
	margin-bottom: 8px;
	transition: color 0.25s ease;
	font-family: var(--mk-font-body);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.mk-service-card__text {
	font-size: var(--mk-text-15);
}

/* Beeldkader met een vaste verhouding. De verhouding zelf komt mee als
   --mk-ratio, zodat hetzelfde kader overal bruikbaar is. */
.mk-figure {
	aspect-ratio: var(--mk-ratio, 4 / 3);
	overflow: hidden;
	border-radius: var(--mk-radius-lg);
	background-color: var(--mk-surface);
}

.mk-figure > img,
.mk-figure > .mk-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Uitgelicht blok met foto en bijschrift. */
.mk-feature {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	margin-top: var(--mk-space-xl);
	padding: 40px;
	overflow: hidden;
	border-radius: var(--mk-radius-xl);
	isolation: isolate;
}

.mk-feature img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.mk-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(34, 34, 34, 0.3);
	z-index: -1;
}

.mk-feature h2 {
	color: var(--mk-white);
	font-size: clamp(24px, 3vw, 40px);
}

/* -------------------------------------------------------------------------
 * 11. Redenen (donkere 2×2)
 * ---------------------------------------------------------------------- */

.mk-reason {
	padding: 32px;
	border-radius: var(--mk-radius-lg);
	background-color: var(--mk-panel);
}

.mk-reason--highlight {
	background-color: var(--mk-white);
}

/* Het pictogram in een geel rondje boven de titel. De lijntekening erft de
   tekstkleur, dus die wordt hier op donker gezet: geel op geel leest niet. */
.mk-reason__icon {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: var(--mk-space-sm);
	padding: 10px;
	border-radius: 50%;
	background-color: var(--mk-yellow);
	color: var(--mk-dark);
}

.mk-reason__title {
	margin-bottom: 10px;
	color: var(--mk-white);
	font-family: var(--mk-font-body);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.mk-reason--highlight .mk-reason__title {
	color: var(--mk-dark);
}

.mk-reason__text {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--mk-text-15);
}

.mk-reason--highlight .mk-reason__text {
	color: var(--mk-body);
}

/* -------------------------------------------------------------------------
 * 12. Stappen ("Zo werkt het")
 * ---------------------------------------------------------------------- */

.mk-steps {
	display: grid;
	gap: 36px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mk-step;
}

.mk-step {
	display: flex;
	flex-direction: column;
	gap: var(--mk-space-sm);
	align-items: flex-start;
}

.mk-step::before {
	counter-increment: mk-step;
	content: counter(mk-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--mk-yellow);
	color: var(--mk-dark);
	font-family: var(--mk-font-display);
	font-size: 24px;
	line-height: 1;
}

.mk-step__title {
	font-size: 22px;
}

.mk-step__text {
	font-size: var(--mk-text-15);
}

/* -------------------------------------------------------------------------
 * 13. Veelgestelde vragen
 * Genummerde regels met een dunne scheidingslijn, geen kaders.
 * ---------------------------------------------------------------------- */

.mk-faq__list {
	counter-reset: mk-faq;
}

.mk-faq__item {
	padding: 22px 0;
	border-bottom: 1px solid var(--mk-line);
	counter-increment: mk-faq;
}

.mk-faq__question {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--mk-dark);
	font-size: var(--mk-text-md);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

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

/* Het nummer (01, 02, …) in de huisstijlkleur. */
.mk-faq__question::before {
	content: counter(mk-faq, decimal-leading-zero);
	flex: 0 0 auto;
	color: var(--mk-yellow);
	font-family: var(--mk-font-display);
	font-size: 32px;
	line-height: 1;
}

.mk-faq__question span {
	flex: 1 1 auto;
}

/* Een plus die een min wordt. */
.mk-faq__question::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background:
		linear-gradient(var(--mk-dark), var(--mk-dark)) center / 16px 2px no-repeat,
		linear-gradient(var(--mk-dark), var(--mk-dark)) center / 2px 16px no-repeat;
	transition: transform 0.3s ease, background-size 0.3s ease;
}

.mk-faq__item[open] .mk-faq__question::after {
	transform: rotate(90deg);
	background:
		linear-gradient(var(--mk-dark), var(--mk-dark)) center / 16px 2px no-repeat,
		linear-gradient(var(--mk-dark), var(--mk-dark)) center / 0 16px no-repeat;
}

/* Het antwoord uitlijnen met de vraag, niet met het nummer. */
.mk-faq__answer {
	padding-left: 52px;
	margin-top: 12px;
	font-size: var(--mk-text-base);
}

@media (max-width: 600px) {
	.mk-faq__question {
		gap: 12px;
	}

	.mk-faq__question::before {
		font-size: 24px;
	}

	.mk-faq__answer {
		padding-left: 0;
	}
}

/* -------------------------------------------------------------------------
 * 14. Reviews
 * ---------------------------------------------------------------------- */

.mk-stars {
	display: block;
	color: var(--mk-yellow-dark);
	font-size: 18px;
	letter-spacing: 3px;
	line-height: 1;
}

.mk-section--dark .mk-stars {
	color: var(--mk-yellow);
}

.mk-review {
	display: flex;
	flex-direction: column;
	gap: var(--mk-space-sm);
	padding: 32px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background-color: var(--mk-white);
}

.mk-section--dark .mk-review {
	border-color: var(--mk-on-dark-line);
	background-color: transparent;
}

.mk-review__quote {
	font-size: 17px;
	line-height: 1.6;
}

.mk-section--dark .mk-review__quote {
	color: rgba(255, 255, 255, 0.9);
}

.mk-review__quote p + p {
	margin-top: var(--mk-space-xs);
}

.mk-review__name {
	margin-top: var(--mk-space-2xs);
	font-family: var(--mk-font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.mk-section--dark .mk-review__name {
	color: var(--mk-white);
}

.mk-review__meta {
	display: block;
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
}

.mk-section--dark .mk-review__meta {
	color: var(--mk-on-dark-muted);
}

/* De sterren en de herkomst op één regel, aan weerszijden van de kaart. */
.mk-review__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mk-space-2xs);
}

.mk-review__source {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.mk-section--dark .mk-review__source {
	color: var(--mk-on-dark-soft);
}

.mk-google-logo {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* Logo, sterren en score boven een reviewlijst. Een wit kaartje, ook op een
   donkere sectie: het logo hoort op wit te staan. */
.mk-google-score {
	display: inline-flex;
	align-items: center;
	gap: var(--mk-space-xs);
	padding: 12px 20px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	background-color: var(--mk-white);
	box-shadow: var(--mk-shadow-card);
}

.mk-google-score .mk-google-logo {
	width: 26px;
	height: 26px;
}

/* Als link naar het reviewsarchief blijft het kaartje een kaartje: geen streep
   onder de tekst, alleen de rand en de schaduw reageren op hover en focus. */
a.mk-google-score {
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.mk-google-score:hover,
a.mk-google-score:focus-visible {
	border-color: var(--mk-yellow-dark);
	box-shadow: 0 6px 18px rgba(34, 34, 34, 0.12);
	transform: translateY(-2px);
}

.mk-google-score__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Staat na .mk-section--dark .mk-stars, want het kaartje is altijd wit. */
.mk-google-score .mk-stars {
	color: var(--mk-yellow-dark);
	font-size: 15px;
	letter-spacing: 2px;
}

.mk-google-score__text {
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
	line-height: 1.2;
}

.mk-intro .mk-google-score,
.mk-banner .mk-google-score {
	margin-top: var(--mk-space-md);
}

/* Op een landingspagina hangt het kaartje half over de onderrand van de foto,
   in het midden. De banner heeft eronder genoeg ruimte staan, dus er wordt
   niets afgesneden. */
.mk-banner__media {
	position: relative;
}

.mk-banner__media .mk-google-score {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: max-content;
	max-width: calc(100% - 32px);
	margin-top: 0;
	transform: translate(-50%, 50%);
}

/* -------------------------------------------------------------------------
 * 15. Contactgegevens
 * ---------------------------------------------------------------------- */

.mk-contact-list {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: var(--mk-space-lg);
}

.mk-contact-list__label {
	margin-bottom: 4px;
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mk-contact-list__value {
	font-size: var(--mk-text-md);
	line-height: 1.5;
}

.mk-contact-list__value--big {
	font-size: 22px;
	font-weight: 700;
}

.mk-contact-list__value a {
	text-decoration: none;
}

/* Kaartpaneel om een formulier heen. */
.mk-panel {
	padding: 40px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius-lg);
	background-color: var(--mk-white);
}

.mk-panel--plain {
	border-color: transparent;
}

.mk-panel__title {
	margin-bottom: 8px;
}

.mk-panel__intro {
	margin-bottom: var(--mk-space-md);
}

/* De uitgesneden foto van Sam onder in het offertepaneel. Hij staat op de
   onderrand van het paneel, dus de negatieve marge is precies de padding. */
.mk-panel--sam {
	overflow: hidden;
}

.mk-panel__portret {
	margin-top: var(--mk-space-md);
	margin-bottom: -40px;
	text-align: center;
}

.mk-panel__portret img {
	display: inline-block;
	width: min(190px, 62%);
	height: auto;
	vertical-align: bottom;
}

@media (max-width: 600px) {
	.mk-panel {
		padding: 24px;
	}

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

/* Donker blok met telefoonnummer. */
.mk-callout {
	margin-top: var(--mk-space-lg);
	padding: 28px;
	border-radius: var(--mk-radius);
	background-color: var(--mk-dark);
	color: var(--mk-on-dark);
}

.mk-callout__label {
	margin-bottom: var(--mk-space-xs);
	color: var(--mk-yellow);
	font-family: var(--mk-font-display);
	font-size: var(--mk-text-md);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.mk-callout__phone {
	font-size: 26px;
	font-weight: 700;
}

.mk-callout__phone a {
	color: var(--mk-white);
	text-decoration: none;
}

.mk-callout__hours {
	margin-top: var(--mk-space-xs);
	color: var(--mk-on-dark-muted);
	font-size: var(--mk-text-sm);
}

/* Feitenblok op de over-onspagina. */
.mk-facts {
	margin-top: var(--mk-space-xl);
	padding: var(--mk-space-lg);
	border-radius: var(--mk-radius-lg);
	background-color: var(--mk-surface);
}

.mk-fact__number {
	font-family: var(--mk-font-display);
	font-size: 36px;
	line-height: 1;
}

.mk-fact__label {
	margin-top: 4px;
	color: var(--mk-muted);
	font-size: var(--mk-text-15);
}

/* -------------------------------------------------------------------------
 * 16. Vinkjeslijst
 * ---------------------------------------------------------------------- */

.mk-checklist {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.mk-checklist li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 34px;
}

.mk-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 9px;
	height: 16px;
	border-right: 3px solid var(--mk-yellow);
	border-bottom: 3px solid var(--mk-yellow);
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
 * 17. Formulieren
 * ---------------------------------------------------------------------- */

.mk-form input[type="text"],
.mk-form input[type="email"],
.mk-form input[type="tel"],
.mk-form input[type="date"],
.mk-form input[type="number"],
.mk-form input[type="search"],
.mk-form select,
.mk-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius-sm);
	background-color: var(--mk-white);
	color: var(--mk-dark);
	font-family: var(--mk-font-body);
	font-size: 16px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mk-form input:focus,
.mk-form select:focus,
.mk-form textarea:focus {
	border-color: var(--mk-yellow);
	box-shadow: 0 0 0 3px rgba(255, 206, 22, 0.25);
	outline: none;
}

.mk-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--mk-dark);
	font-size: var(--mk-text-sm);
	font-weight: 600;
}

.mk-form__field {
	margin-bottom: 20px;
}

.mk-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media (max-width: 600px) {
	.mk-form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.mk-form__fieldset {
	margin-bottom: 20px;
	padding: 0;
	border: 0;
}

.mk-form__legend {
	margin-bottom: 10px;
	font-size: var(--mk-text-sm);
	font-weight: 600;
}

.mk-form__choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 10px;
}

.mk-form__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0;
	font-weight: 400;
}

.mk-form__choice input {
	width: auto;
}

.mk-form__notice {
	margin-bottom: 24px;
	padding: 14px 18px;
	border-radius: var(--mk-radius-sm);
	font-size: var(--mk-text-15);
}

.mk-form__notice--ok {
	border: 1px solid #b7dfb7;
	background-color: #eef8ee;
	color: #1e5e1e;
}

.mk-form__notice--error {
	border: 1px solid #f0b7b7;
	background-color: #fdeeee;
	color: #8a1f1f;
}

.mk-form__fineprint {
	margin-top: 16px;
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
}

/* Honeypot: onzichtbaar voor mensen, invulbaar voor bots. */
.mk-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Gravity Forms.
 *
 * De kleuren en randen komen uit de gform_default_styles-filter in
 * inc/formulieren.php, want die zet Gravity Forms zelf in een style-blok met
 * een id in de selector. Wat hieronder staat is de rest: de knop, de
 * typografie en de ruimte, zodat een formulier van het plugin er hetzelfde
 * uitziet als de rest van de site. De selectors zijn bewust specifiek: de CSS
 * van Gravity Forms wordt na deze laag ingeladen. */
.mk-form .gform_wrapper {
	font-family: var(--mk-font-body);
}

.mk-form .gform_wrapper .gform_fields {
	row-gap: 20px;
}

.mk-form .gform_wrapper .gfield_label,
.mk-form .gform_wrapper legend.gfield_label {
	margin-bottom: 6px;
	color: var(--mk-dark);
	font-size: var(--mk-text-sm);
	font-weight: 600;
}

/* Het sterretje bij een verplicht veld: hetzelfde geel als de rest, en niet
   het alarmrood van het plugin. */
.mk-form .gform_wrapper .gfield_required {
	color: var(--mk-yellow-dark);
}

.mk-form .gform_wrapper .gfield_description {
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
}

/* Keuzelijstjes krijgen dezelfde regelafstand als de vinkjes in het thema. */
.mk-form .gform_wrapper .gfield_checkbox,
.mk-form .gform_wrapper .gfield_radio {
	display: grid;
	gap: 10px;
}

.mk-form .gform_wrapper .gchoice label {
	margin-bottom: 0;
	font-weight: 400;
}

/* De verzendknop is dezelfde knop als overal op de site.
 *
 * De maten en de letter staan op !important omdat Gravity Forms zijn eigen
 * knopregels scopet op het id van het formulier. Daar komt geen enkele
 * selector met klassen overheen, hoe specifiek ook. De kleuren zijn de
 * uitzondering: die komen netjes uit de filter in inc/formulieren.php. */
.mk-form .gform_wrapper .gform_footer {
	margin-top: var(--mk-space-md);
	padding: 0;
}

.mk-form .gform_wrapper .gform_footer input[type="submit"],
.mk-form .gform_wrapper .gform_footer .gform_button,
.mk-form .gform_wrapper .gform_page_footer .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto !important;
	padding: 14px 26px !important;
	border: 2px solid transparent;
	border-radius: var(--mk-radius-sm);
	background-color: var(--mk-yellow);
	color: var(--mk-dark);
	font-family: var(--mk-font-display) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		transform 0.18s ease;
}

.mk-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.mk-form .gform_wrapper .gform_footer .gform_button:hover,
.mk-form .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.mk-form .gform_wrapper .gform_footer .gform_button:focus-visible {
	background-color: var(--mk-yellow-dark);
	color: var(--mk-dark);
	transform: translateY(-2px);
}

/* Een foutmelding leest als de meldingen van het thema zelf. */
.mk-form .gform_wrapper .gform_validation_errors {
	border-radius: var(--mk-radius-sm);
	background-color: #fdeeee;
	color: #8a1f1f;
}

/* Zoekformulier. */
.mk-search {
	display: flex;
	gap: 10px;
	max-width: 480px;
}

.mk-search input[type="search"] {
	flex: 1 1 auto;
}

/* -------------------------------------------------------------------------
 * 18. Paginering en berichtnavigatie
 * ---------------------------------------------------------------------- */

.mk-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: var(--mk-space-xl);
}

.mk-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius-sm);
	font-size: var(--mk-text-15);
	text-decoration: none;
}

.mk-pagination .page-numbers:hover {
	border-color: var(--mk-yellow);
	color: var(--mk-dark);
}

.mk-pagination .page-numbers.current {
	border-color: var(--mk-yellow);
	background-color: var(--mk-yellow);
	color: var(--mk-dark);
	font-weight: 600;
}

.mk-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--mk-space-md);
	margin-top: var(--mk-space-xl);
	padding-top: var(--mk-space-lg);
	border-top: 1px solid var(--mk-line);
}

.mk-post-nav a {
	max-width: 45%;
	text-decoration: none;
}

.mk-post-nav__label {
	display: block;
	color: var(--mk-muted);
	font-size: var(--mk-text-xs);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.mk-post-nav__title {
	font-weight: 600;
}

@media (max-width: 600px) {
	.mk-post-nav a {
		max-width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * 19. Plaatshouder voor ontbrekend beeld
 * Zolang een dienst of artikel nog geen foto heeft, houdt dit blok de
 * verhoudingen van het ontwerp overeind.
 * ---------------------------------------------------------------------- */

.mk-placeholder {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	padding: 20px;
	background:
		radial-gradient(circle at 70% 30%, rgba(255, 206, 22, 0.18), transparent 60%),
		var(--mk-dark);
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--mk-font-display);
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Paginainhoud uit de editor.
 *
 * Een pagina kan twee dingen bevatten: lopende tekst, of hele secties uit de
 * patterns. Tekst blijft in een leesbare kolom staan; een sectie breekt daar
 * uit en loopt over de volle breedte. Zo werkt hetzelfde sjabloon voor de
 * contactpagina en voor een pagina met alleen tekst. */
.mk-prose--page {
	padding-block: var(--mk-section-sm);
}

.mk-prose--page > * {
	width: 100%;
	max-width: calc(var(--mk-container-prose) + var(--mk-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--mk-gutter);
}

.mk-prose--page > section,
.mk-prose--page > .mk-section,
.mk-prose--page > .mk-banner {
	max-width: none;
	padding-inline: 0;
}

/* Een sectie brengt zijn eigen ruimte mee. Begint of eindigt de pagina met
   een sectie, dan is de ruimte van de pagina eromheen dubbelop. Zonder
   :has()-ondersteuning valt het terug op wat extra witruimte, meer niet. */
.mk-prose--page:has(> section:first-child) {
	padding-top: 0;
}

.mk-prose--page:has(> section:last-child) {
	padding-bottom: 0;
}

/* Volle breedte voor de paginasjabloon zonder container. */
.mk-prose--full > * {
	max-width: none;
}

/* -------------------------------------------------------------------------
 * 20. Afsluitbalk
 * De oproep tot actie onder aan iedere pagina, op de vervaagde heroafbeelding
 * met een donkere waas eroverheen. Sam is uitgesneden en staat rechts op de
 * onderrand van de balk: de negatieve marge haalt precies de sectiepadding
 * weg, zodat hij er niet zweeft en er niets uitsteekt.
 * ---------------------------------------------------------------------- */

.mk-cta {
	/* Krapper dan een gewone sectie. Door hier --mk-section opnieuw te zetten
	   krimpt de negatieve marge van Sam vanzelf mee, zodat hij op de onderrand
	   blijft staan. */
	--mk-section: var(--mk-section-sm);

	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Vervagen maakt de randen van een afbeelding doorzichtig. De negatieve inset
   trekt het beeld daarom ruim buiten de balk, zodat er niets doorschemert. */
.mk-cta__image {
	position: absolute;
	inset: -60px;
	width: calc(100% + 120px);
	height: calc(100% + 120px);
	object-fit: cover;
	filter: blur(10px);
	z-index: -2;
}

.mk-cta__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(34, 34, 34, 0.55);
	z-index: -1;
}

.mk-cta__inner {
	display: grid;
	grid-template-areas: "tekst portret";
	/* De kolom van Sam krimpt mee, zodat er tot de telefoonmaat geen extra
	   afbreekpunt nodig is. */
	grid-template-columns: 1fr clamp(220px, 28vw, 380px);
	gap: var(--mk-space-md) var(--mk-space-xl);
	align-items: center;
}

.mk-cta__body {
	grid-area: tekst;
}

.mk-cta__text {
	max-width: 62ch;
	margin-top: var(--mk-space-sm);
	color: var(--mk-on-dark);
	font-size: var(--mk-text-md);
}

.mk-cta__actions {
	margin-top: var(--mk-space-lg);
}

.mk-cta__note {
	margin-top: var(--mk-space-md);
	color: var(--mk-on-dark-soft);
	font-size: var(--mk-text-sm);
}

.mk-cta__portrait {
	grid-area: portret;
	align-self: end;
	margin-bottom: calc(var(--mk-section) * -1);
}

/* Telefoon: tekst en knoppen boven elkaar, met Sam als afsluiter op de
   onderrand. */
@media (max-width: 640px) {
	.mk-cta__inner {
		grid-template-areas:
			"tekst"
			"portret";
		grid-template-columns: 1fr;
	}

	/* De harde regelafbreking in de kop is voor de brede balk bedoeld.
	   Op een telefoon breekt de tekst vanzelf op de goede plek. */
	.mk-cta__body h2 br {
		display: none;
	}

	.mk-cta__actions .mk-btn {
		width: 100%;
	}

	.mk-cta__portrait {
		justify-self: center;
		width: min(300px, 82%);
		margin-top: var(--mk-space-md);
	}
}

/* -------------------------------------------------------------------------
 * 21. Footer
 * ---------------------------------------------------------------------- */

.mk-footer {
	padding-top: var(--mk-section-sm);
	padding-bottom: var(--mk-space-lg);
	background-color: var(--mk-dark);
	/* Een maat kleiner dan de rest van de site: de footer is naslag, geen
	   leestekst, en mag rustiger in beeld staan. */
	color: var(--mk-on-dark);
	font-size: var(--mk-text-15);
}

.mk-footer__grid {
	display: grid;
	gap: 48px;
	grid-template-columns: 34fr 22fr 22fr 22fr;
}

/* Met de regiokolom erbij zijn het er vijf; de merkkolom levert de ruimte. */
.mk-footer__grid--vijf {
	gap: 40px;
	grid-template-columns: 28fr 18fr 18fr 18fr 22fr;
}

@media (max-width: 1100px) {
	.mk-footer__grid--vijf {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.mk-footer__grid,
	.mk-footer__grid--vijf {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.mk-footer__grid,
	.mk-footer__grid--vijf {
		grid-template-columns: 1fr;
	}
}

.mk-footer__brand {
	color: var(--mk-white);
	font-family: var(--mk-font-display);
	font-size: 26px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.mk-footer__text {
	margin-top: 16px;
	color: var(--mk-on-dark-soft);
}

.mk-footer__note {
	margin-top: 24px;
	color: var(--mk-on-dark-muted);
	font-size: var(--mk-text-sm);
}

.mk-footer__reviews {
	margin-top: var(--mk-space-md);
}

/* De socialprofielen onder de reviewscore. Het raakvlak is met opzet groter
   dan het icoon zelf, zodat de knoppen ook met een duim te raken zijn. */
.mk-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: var(--mk-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.mk-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--mk-on-dark-line);
	border-radius: 50%;
	color: var(--mk-on-dark-soft);
	transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.mk-social__link:hover,
.mk-social__link:focus-visible {
	border-color: var(--mk-yellow);
	background-color: var(--mk-yellow);
	color: var(--mk-dark);
}

.mk-social__icon {
	width: 20px;
	height: 20px;
}

.mk-footer__title {
	margin-bottom: var(--mk-space-xs);
	color: var(--mk-white);
	font-family: var(--mk-font-display);
	font-size: var(--mk-text-base);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.mk-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2;
}

.mk-footer__list a,
.mk-footer__contact a {
	color: var(--mk-on-dark-soft);
	text-decoration: none;
}

.mk-footer__list a:hover,
.mk-footer__contact a:hover {
	color: var(--mk-yellow);
}

.mk-footer__contact {
	color: var(--mk-on-dark-soft);
	line-height: 2;
}

.mk-footer__hours {
	margin-top: 20px;
	color: var(--mk-on-dark-muted);
	font-size: var(--mk-text-sm);
}

.mk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--mk-space-sm);
	margin-top: var(--mk-space-xl);
	padding-top: var(--mk-space-lg);
	border-top: 1px solid var(--mk-on-dark-line);
	color: var(--mk-on-dark-muted);
	font-size: var(--mk-text-sm);
}

.mk-footer__bottom a {
	color: var(--mk-on-dark-muted);
}

.mk-footer__bottom a:hover {
	color: var(--mk-yellow);
}

/* -------------------------------------------------------------------------
 * 22. Zwevende WhatsApp-knop
 * Staat op elke pagina rechtsonder in beeld, boven de inhoud maar onder
 * de skip-link. Het label is een tekstballon die alleen verschijnt waar
 * er een muisaanwijzer is; op een telefoon is de cirkel genoeg.
 * ---------------------------------------------------------------------- */

.mk-whatsapp {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 200;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--mk-whatsapp);
	color: var(--mk-white);
	box-shadow: var(--mk-shadow-raised);
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.mk-whatsapp:hover,
.mk-whatsapp:focus {
	background-color: var(--mk-whatsapp-dark);
	color: var(--mk-white);
	transform: translateY(-2px);
}

.mk-whatsapp__icon {
	width: 30px;
	height: 30px;
}

.mk-whatsapp__label {
	display: none;
}

/* Alleen waar echt gehoverd kan worden: op aanraakschermen blijft een
   :hover-status hangen na de tik. */
@media (hover: hover) and (min-width: 782px) {
	.mk-whatsapp__label {
		display: block;
		position: absolute;
		right: calc(100% + 12px);
		padding: 8px 14px;
		border-radius: var(--mk-radius-sm);
		background-color: var(--mk-dark);
		color: var(--mk-white);
		font-size: var(--mk-text-sm);
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
		opacity: 0;
		transform: translateX(6px);
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.mk-whatsapp:hover .mk-whatsapp__label,
	.mk-whatsapp:focus-visible .mk-whatsapp__label {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (max-width: 781px) {
	.mk-whatsapp {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		width: 52px;
		height: 52px;
	}

	.mk-whatsapp__icon {
		width: 27px;
		height: 27px;
	}
}

@media print {
	.mk-whatsapp {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 23. Offertevenster
 *
 * Het offerteformulier op een dienst- en landingspagina staat in een dialog.
 * Die gaat bij het openen naar de bovenste laag van het venster, dus hij ligt
 * vanzelf over de zwevende header en de WhatsApp-knop heen; z-index doet hier
 * niets. Zonder JavaScript blijft de knop een gewone link naar de
 * offertepagina en blijft dit blok onzichtbaar.
 * ---------------------------------------------------------------------- */

.mk-modal {
	width: min(620px, calc(100vw - var(--mk-gutter) * 2));
	max-width: none;
	max-height: calc(100vh - var(--mk-space-lg));
	max-height: calc(100dvh - var(--mk-space-lg));
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--mk-radius-lg);
	background-color: var(--mk-white);
	color: var(--mk-body);
	box-shadow: var(--mk-shadow-raised);
}

.mk-modal::backdrop {
	background-color: rgba(34, 34, 34, 0.6);
}

/* Het paneel scrolt en niet het venster zelf, zodat het sluitknopje bij een
   lang formulier in beeld blijft staan. */
.mk-modal__panel {
	position: relative;
	max-height: inherit;
	padding: 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mk-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--mk-surface);
	color: var(--mk-dark);
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.mk-modal__close:hover,
.mk-modal__close:focus-visible {
	background-color: var(--mk-line);
}

.mk-modal__title {
	margin-right: 48px;
	font-size: var(--mk-text-h3);
}

.mk-modal__intro {
	margin-top: var(--mk-space-2xs);
	margin-bottom: var(--mk-space-md);
	color: var(--mk-muted);
	font-size: var(--mk-text-15);
}

/* De pagina eronder staat stil zolang het venster openstaat. */
html.mk-modal-open,
html.mk-modal-open body {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.mk-modal[open] {
		animation: mk-modal-in 0.25s ease;
	}

	.mk-modal[open]::backdrop {
		animation: mk-modal-fade 0.25s ease;
	}
}

@keyframes mk-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes mk-modal-fade {
	from {
		opacity: 0;
	}
}

@media (max-width: 600px) {
	.mk-modal__panel {
		padding: 24px;
	}

	.mk-modal__title {
		margin-right: 40px;
	}
}

/* -------------------------------------------------------------------------
 * 24. Berichtinhoud (.mk-prose)
 *
 * Alles wat via de blokeditor in een pagina of bericht wordt gezet, komt
 * hier terecht. WordPress levert daar geen CSS meer voor, dus de blokken
 * die redacteuren daadwerkelijk gebruiken worden hier opgemaakt.
 * ---------------------------------------------------------------------- */

.mk-prose > * + * {
	margin-top: var(--mk-space-md);
}

.mk-prose > h2 {
	margin-top: var(--mk-space-xl);
	font-size: var(--mk-text-h3);
}

.mk-prose > h3 {
	margin-top: var(--mk-space-lg);
	font-size: var(--mk-text-h4);
}

.mk-prose > h4,
.mk-prose > h5,
.mk-prose > h6 {
	margin-top: var(--mk-space-lg);
}

.mk-prose ul,
.mk-prose ol {
	padding-left: 1.25em;
}

.mk-prose li + li {
	margin-top: 6px;
}

/* Niet aan .mk-prose gekoppeld, zodat de blokeditor dezelfde vinkjes toont
   als de site. De klasse komt alleen in berichtinhoud voor. */
ul.is-style-checklist {
	padding-left: 0;
	list-style: none;
}

ul.is-style-checklist li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 34px;
}

ul.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 9px;
	height: 16px;
	border-right: 3px solid var(--mk-yellow);
	border-bottom: 3px solid var(--mk-yellow);
	transform: rotate(45deg);
}

.mk-prose figure {
	margin: 0;
}

.mk-prose img {
	border-radius: var(--mk-radius-lg);
}

.mk-prose figcaption {
	margin-top: 8px;
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
}

.mk-prose blockquote {
	padding-left: 24px;
	border-left: 4px solid var(--mk-yellow);
	font-size: var(--mk-text-md);
}

.mk-prose hr {
	margin-block: var(--mk-space-lg);
}

.mk-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mk-text-15);
}

.mk-prose th,
.mk-prose td {
	padding: 10px 12px;
	border: 1px solid var(--mk-line);
	text-align: left;
}

/* Onderstreepte links gelden voor lopende tekst, niet voor knoppen. Een
   pattern dat in een pagina staat valt ook binnen .mk-prose, en zonder deze
   uitzondering kreeg een knop daar een streep en op hover de gele tekstkleur,
   die op een gele knop niet te lezen is. */
.mk-prose a:not(.mk-btn) {
	color: var(--mk-dark);
	text-decoration: underline;
}

.mk-prose a:not(.mk-btn):hover {
	color: var(--mk-yellow-dark);
}

/* Een donker blok binnen die lopende tekst houdt zijn eigen linkkleur. De
   regel hierboven is specifieker dan de kleur van het blok zelf, en donker op
   donker leest niet: zo verdween het telefoonnummer in de zwarte balk op de
   offertepagina. */
.mk-prose .mk-callout a:not(.mk-btn),
.mk-prose .mk-section--dark a:not(.mk-btn) {
	color: var(--mk-on-dark);
	text-decoration: none;
}

/* De knopblokken en kolommen uit de editor. */
.mk-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-space-sm);
}

.mk-prose .wp-block-button__link,
.mk-prose .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border: 2px solid transparent;
	border-radius: var(--mk-radius-sm);
	background-color: var(--mk-yellow);
	color: var(--mk-dark);
	font-family: var(--mk-font-display);
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

.mk-prose .wp-block-button__link:hover,
.mk-prose .wp-element-button:hover {
	background-color: var(--mk-yellow-dark);
	color: var(--mk-dark);
}

.mk-prose .is-style-outline-dark .wp-block-button__link {
	border-color: var(--mk-dark);
	background-color: transparent;
}

.mk-prose .is-style-outline-dark .wp-block-button__link:hover {
	background-color: var(--mk-dark);
	color: var(--mk-white);
}

.mk-prose .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mk-space-lg);
}

.mk-prose .wp-block-column {
	flex: 1 1 260px;
	min-width: 0;
}

.mk-prose .wp-block-embed iframe,
.mk-prose iframe {
	max-width: 100%;
	border-radius: var(--mk-radius-lg);
}

/* Uitlijningsklassen uit de editor. */
.mk-prose .alignleft {
	float: left;
	margin: 0 var(--mk-space-md) var(--mk-space-sm) 0;
}

.mk-prose .alignright {
	float: right;
	margin: 0 0 var(--mk-space-sm) var(--mk-space-md);
}

.mk-prose .aligncenter {
	margin-inline: auto;
}

.mk-prose .has-text-align-center { text-align: center; }
.mk-prose .has-text-align-right { text-align: right; }
.mk-prose .has-text-align-left { text-align: left; }

/* Vangnet voor bestaande inhoud met kleurklassen uit de oude opzet. */
.has-primary-color { color: var(--mk-yellow); }
.has-primary-dark-color { color: var(--mk-yellow-dark); }
.has-dark-color { color: var(--mk-dark); }
.has-body-color { color: var(--mk-body); }
.has-muted-color { color: var(--mk-muted); }
.has-white-color { color: var(--mk-white); }
.has-primary-background-color { background-color: var(--mk-yellow); }
.has-dark-background-color { background-color: var(--mk-dark); }
.has-surface-background-color { background-color: var(--mk-surface); }
.has-white-background-color { background-color: var(--mk-white); }

/* -------------------------------------------------------------------------
 * 25. Blogartikel: kop, inhoudsopgave en het kaartje van Sam
 *
 * Het artikel staat in twee kolommen: de tekst links op leesbreedte, rechts
 * een kolom die tijdens het scrollen in beeld blijft. In de HTML staat die
 * kolom voor het artikel, zodat de inhoudsopgave op een telefoon boven de
 * tekst uitkomt; op een breed scherm zet het raster hem alsnog rechts.
 * ---------------------------------------------------------------------- */

.mk-artikel__layout {
	display: grid;
	gap: var(--mk-space-lg) 64px;
	grid-template-columns: minmax(0, 1fr) 320px;
	align-items: start;
}

/* Zonder zijkolom valt het artikel terug op een kolom op leesbreedte, zoals
   het er voorheen uitzag. */
.mk-artikel__layout--smal {
	max-width: var(--mk-container-prose);
	margin-inline: auto;
	grid-template-columns: minmax(0, 1fr);
}

.mk-artikel__inhoud {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.mk-artikel__zijbalk {
	position: sticky;
	top: calc(var(--mk-header-space) + var(--mk-space-md));
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--mk-space-md);
}

/* De uitgelichte afbeelding staat naast de titel, in dezelfde kolom als de
   inhoudsopgave die eronder begint. Zo loopt er een lijn door de pagina in
   plaats van twee. */
.mk-artikel__media {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
}

/* Zonder zijkolom is er maar een kolom, en zakt de afbeelding onder de kop. */
.mk-artikel__layout--smal .mk-artikel__media {
	grid-column: 1;
}

/* In de kop mag het beeld breder zijn dan de zijkolom eronder. De rechterrand
   blijft daarbij op dezelfde lijn als de inhoudsopgave; de afbeelding groeit
   alleen naar links. */
.mk-banner .mk-artikel__layout:not(.mk-artikel__layout--smal) {
	grid-template-columns: minmax(0, 1fr) 440px;
}

/* De samenvatting in de artikelkop mag rustiger dan de lead op een
   landingspagina: hij hoort bij de titel en moet niet als tweede kop lezen. */
.mk-artikel__kop .mk-banner__lead {
	margin-top: 20px;
	font-size: var(--mk-text-md);
}

/* Een kop waar de inhoudsopgave naartoe springt moet onder de zwevende
   header uitkomen, niet erachter. */
.mk-prose h2,
.mk-prose h3 {
	scroll-margin-top: calc(var(--mk-header-space) + var(--mk-space-md));
}

/* --- Kruimelpad ------------------------------------------------------- */

.mk-kruimels {
	color: var(--mk-muted);
	font-size: var(--mk-text-sm);
	line-height: 1.5;
}

.mk-kruimels p {
	margin: 0;
}

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

.mk-kruimels a:hover {
	color: var(--mk-dark);
	text-decoration: underline;
}

.mk-kruimels .last {
	color: var(--mk-body);
}

/* --- Kop van het artikel ---------------------------------------------- */

.mk-artikel__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	color: var(--mk-muted);
	font-size: var(--mk-text-15);
}

/* De naam onder de titel wijst door naar de auteurspagina. Hij houdt de
   gedempte kleur van de regel: een link in de accentkleur zou hier meer
   aandacht trekken dan de kop erboven. */
.mk-artikel__auteur {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mk-artikel__auteur:hover,
.mk-artikel__auteur:focus-visible {
	color: var(--mk-dark);
}

/* De leestijd is geen derde stukje metadata maar een eigen gegeven, dus
   krijgt hij een eigen vorm in plaats van nog een middenpunt. */
.mk-artikel__leestijd {
	margin-left: var(--mk-space-2xs);
	padding: 5px 10px;
	border-radius: var(--mk-radius-sm);
	background-color: var(--mk-yellow);
	color: var(--mk-dark);
	font-size: var(--mk-text-xs);
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-transform: uppercase;
}

/* --- Inhoudsopgave ---------------------------------------------------- */

.mk-toc {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 22px 24px;
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius-lg);
	background-color: var(--mk-white);
}

.mk-toc__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mk-space-xs);
	color: var(--mk-dark);
	font-family: var(--mk-font-display);
	font-size: 17px;
	letter-spacing: 0.5px;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

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

.mk-toc__pijl {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--mk-muted);
	transition: transform 0.25s ease;
}

.mk-toc[open] .mk-toc__pijl {
	transform: rotate(180deg);
}

/* De hoogte wordt hier begrensd en niet op .mk-toc: browsers stoppen de
   inhoud van een <details> in een eigen laag (::details-content), en daardoor
   krimpt die inhoud niet mee als het kader krimpt. Zonder deze grens loopt een
   lange lijst over het kaartje van Sam heen. --mk-toc-naast is wat de rest van
   de kolom inneemt: het kaartje van Sam, de tussenruimte en de kop van de
   lijst zelf. */
.mk-toc__paneel {
	min-height: 0;
	max-height: max(120px, calc(100vh - var(--mk-header-space) - var(--mk-space-lg) - var(--mk-toc-naast, 390px)));
	margin-top: var(--mk-space-sm);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mk-toc__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-toc__item a {
	display: block;
	padding: 7px 0 7px 14px;
	border-left: 2px solid var(--mk-line);
	color: var(--mk-body);
	font-size: var(--mk-text-15);
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.mk-toc__item a:hover {
	border-left-color: var(--mk-yellow-dark);
	color: var(--mk-dark);
}

/* De kop waar de lezer nu is. De klasse wordt door theme.js gezet. */
.mk-toc__item a.is-actief {
	border-left-color: var(--mk-yellow);
	color: var(--mk-dark);
	font-weight: 600;
}

.mk-toc__item--sub a {
	padding-left: 26px;
	font-size: var(--mk-text-sm);
}

/* --- Het kaartje van Sam ---------------------------------------------- */

.mk-sam {
	flex: 0 0 auto;
	padding: 24px;
	border-radius: var(--mk-radius-lg);
	background-color: var(--mk-dark);
	color: var(--mk-on-dark);
}

.mk-sam__persoon {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Een rond kadertje met de foto er ingezoomd in. Het portret is een staande
   foto van top tot heup; zonder inzoomen wordt het gezicht in een cirkel van
   76px te klein om iemand aan te herkennen. De drie waarden hieronder bepalen
   de uitsnede: bij een andere foto zijn dat de enige knoppen die om moeten. */
.mk-sam__portret {
	--mk-sam-zoom: 200%;
	--mk-sam-links: -50%;
	--mk-sam-boven: -71%;

	position: relative;
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border: 2px solid var(--mk-yellow);
	border-radius: 50%;
}

.mk-sam__foto {
	position: absolute;
	top: var(--mk-sam-boven);
	left: var(--mk-sam-links);
	width: var(--mk-sam-zoom);
	max-width: none;
	height: auto;
}

.mk-sam__naam {
	color: var(--mk-on-dark);
	font-weight: 600;
	line-height: 1.3;
}

.mk-sam__rol {
	display: block;
	color: var(--mk-on-dark-muted);
	font-size: var(--mk-text-sm);
	font-weight: 400;
}

.mk-sam__titel {
	margin-top: var(--mk-space-md);
	color: var(--mk-on-dark);
	font-family: var(--mk-font-display);
	font-size: 20px;
	letter-spacing: 0.5px;
	line-height: 1.15;
	text-transform: uppercase;
}

.mk-sam__tekst {
	margin-top: var(--mk-space-2xs);
	color: var(--mk-on-dark-soft);
	font-size: var(--mk-text-15);
}

.mk-sam .mk-btn {
	margin-top: var(--mk-space-sm);
}

/* De knop draagt het groen van WhatsApp, net als de zwevende knop. Met
   donkere letters, want wit op dit groen is niet te lezen. */
.mk-btn--whatsapp {
	border-color: var(--mk-whatsapp);
	background-color: var(--mk-whatsapp);
	color: var(--mk-dark);
}

.mk-btn--whatsapp:hover,
.mk-btn--whatsapp:focus-visible {
	border-color: var(--mk-whatsapp-dark);
	background-color: var(--mk-whatsapp-dark);
	color: var(--mk-dark);
}

/* --- Smallere schermen ------------------------------------------------ */

@media (min-width: 1024px) and (max-width: 1200px) {
	.mk-artikel__layout {
		gap: var(--mk-space-lg) 40px;
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.mk-banner .mk-artikel__layout:not(.mk-artikel__layout--smal) {
		grid-template-columns: minmax(0, 1fr) 380px;
	}
}

/* Onder de 1024px past er geen tweede kolom meer naast de tekst. De zijkolom
   valt uiteen: de inhoudsopgave boven het artikel, het kaartje van Sam
   eronder. Zwevend blijven heeft hier geen zin, want er is geen ruimte
   naast de tekst om in te blijven staan. */
@media (max-width: 1023px) {
	.mk-artikel__layout {
		display: flex;
		flex-direction: column;
		gap: var(--mk-space-lg);
	}

	.mk-artikel__zijbalk {
		display: contents;
	}

	.mk-artikel__kop,
	.mk-toc {
		order: 1;
	}

	.mk-toc__paneel {
		max-height: none;
	}

	.mk-artikel__inhoud {
		order: 2;
	}

	/* In de kop staat de afbeelding dan onder de titel. De bron is 720px
	   breed, dus verder oprekken maakt hem alleen maar waziger. */
	.mk-artikel__media {
		order: 2;
		width: 100%;
		max-width: 720px;
		/* Hier is de kolomrichting horizontaal, dus 'center' zou de afbeelding
		   uit de lijn van de tekst duwen. */
		align-self: start;
	}

	.mk-sam {
		order: 3;
	}
}

@media print {
	.mk-artikel__zijbalk {
		display: none;
	}
}
@media (max-width: 600px) {
	.mk-kruimels .last {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		vertical-align: bottom;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}