/*
Theme Name: Maak Zelf Kleding
Theme URI: https://maakzelfkleding.nl
Author: Michelle van den Akker (Saku Studio)
Description: Thema voor Maak Zelf Kleding. Van inspiratie naar je eigen creatie.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 8.1
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maakzelfkleding
Tags: warm, blog-mogelijkheden, naailessen, informatieblokken
*/

/* =========================================================================
   Alle waarden komen uit theme.json. In dit bestand staan uitsluitend
   verwijzingen naar die tokens, geen losse kleur- of maatwaarden die ook
   een token hadden kunnen zijn.
   ========================================================================= */

/* --- Basis ------------------------------------------------------------- */

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

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

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Tekstballans op koppen, zoals in het ontwerp. */
h1, h2, h3 {
	text-wrap: pretty;
}

/* --- Blokafstand -------------------------------------------------------- */

/*
 * Het ontwerp bepaalt elke afstand zelf. De standaard blokafstand uit
 * theme.json blijft daarom alleen staan binnen de berichttekst, waar de
 * klant zelf alinea's en koppen toevoegt.
 */
.wp-site-blocks > * + *,
.wp-block-group > * + *,
.wp-block-post-content:not(.mzk-berichttekst) > * + *,
.wp-block-post-template > * + *,
.wp-block-buttons > * + * {
	margin-block-start: 0;
}

/* --- Zichtbare focus --------------------------------------------------- */

/*
 * Let op: geen :where() om de selector heen. :where() telt niet mee voor de
 * specificiteit, waardoor een willekeurige regel uit de kern deze omlijning
 * zou kunnen overschrijven. Uitgeschreven selectors houden de focusstijl
 * overeind.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/*
 * Formuliervelden krijgen geen losse omlijning maar een terracotta rand van
 * 1px plus een ring van 1px: samen de 2px uit de toegankelijkheidseisen,
 * zonder dat het veld verspringt.
 */
.mzk-formulier input:focus-visible,
.mzk-formulier textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--terracotta);
	box-shadow: 0 0 0 1px var(--wp--preset--color--terracotta);
}

/* Focus op een donkere achtergrond moet zichtbaar blijven. */
.mzk-vlak--espresso a:focus-visible,
.mzk-vlak--espresso button:focus-visible,
.mzk-vlak--espresso .wp-block-button__link:focus-visible,
.mzk-prijsblok a:focus-visible,
.mzk-footer a:focus-visible,
.mzk-footer button:focus-visible {
	outline-color: var(--wp--preset--color--on-dark-accent);
}

/* WordPress plaatst zelf een skiplink boven aan de pagina; deze regels geven
   hem de opmaak van het thema. */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--on-dark);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--custom--font-size--card);
	text-decoration: none;
}

.skip-link:focus {
	left: var(--wp--preset--spacing--60);
	top: var(--wp--preset--spacing--60);
}

/* --- Header ------------------------------------------------------------ */

.mzk-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * Iets minder lucht tussen de header en de eerste sectie dan de 80/88px
 * uit het ontwerp (wens van de klant). De paddingklasse op het blok zelf
 * blijft staan, zodat dezelfde klasse verderop op de pagina ongewijzigd is.
 */
main > :first-child[class*="mzk-pt-"],
main > .wp-block-post-content > :first-child[class*="mzk-pt-"] {
	padding-top: var(--wp--preset--spacing--200);
}

.mzk-header__binnen {
	padding-top: var(--wp--preset--spacing--140);
	padding-bottom: var(--wp--preset--spacing--50);
}

.mzk-logo a,
.mzk-logo {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.mzk-tagline {
	font-family: var(--wp--preset--font-family--caveat);
	font-size: var(--wp--custom--font-size--tagline);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--terracotta);
	margin-top: 2px;
}

/* Navigatie */
.mzk-nav .wp-block-navigation__container,
.mzk-nav ul.wp-block-navigation__container {
	gap: var(--wp--preset--spacing--10);
	justify-content: center;
	flex-wrap: wrap;
}

.mzk-nav .wp-block-navigation-item__content {
	display: block;
	padding: 11px 20px 8px;
	border-radius: var(--wp--custom--radius--tab);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	line-height: var(--wp--custom--line-height--tight);
}

.mzk-nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--sand-hover);
	color: var(--wp--preset--color--ink);
}

/*
 * Actief menu-item: terracotta streepje onder de tekst.
 * WordPress zet current-menu-item op de huidige pagina en
 * current_page_parent op het blogitem bij berichten (zie functions.php).
 */
.mzk-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.mzk-nav .wp-block-navigation-item.current_page_parent > .wp-block-navigation-item__content::after,
.mzk-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after {
	content: "";
	display: block;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--terracotta);
	margin-top: var(--wp--preset--spacing--10);
}

.mzk-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
}

/* Overlaymenu (hamburger) onder 900px */
.wp-block-navigation.mzk-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--130);
}

.mzk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--custom--font-size--tagline);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
}

.mzk-nav .wp-block-navigation__responsive-container-open,
.mzk-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/* --- Footer ------------------------------------------------------------ */

.mzk-footer {
	margin-top: var(--wp--preset--spacing--290);
	padding-top: var(--wp--preset--spacing--200);
	padding-bottom: var(--wp--preset--spacing--200);
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--on-dark-soft);
	font-size: var(--wp--custom--font-size--small);
}

.mzk-footer p {
	color: var(--wp--preset--color--on-dark-soft);
}

.mzk-footer__naam {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: var(--wp--custom--font-size--footer-title);
	color: var(--wp--preset--color--on-dark) !important;
	line-height: var(--wp--custom--line-height--tight);
	margin-bottom: var(--wp--preset--spacing--10);
}

.mzk-footer a {
	color: var(--wp--preset--color--on-dark-accent);
}

.mzk-footer a:hover {
	color: var(--wp--preset--color--on-dark);
}

/* --- Terugkerende tekstelementen --------------------------------------- */

/* Handgeschreven accentregel boven de koppen. */
.mzk-accentregel {
	font-family: var(--wp--preset--font-family--caveat);
	font-size: var(--wp--custom--font-size--accent);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--terracotta) !important;
}

.mzk-accentregel--op-donker {
	color: var(--wp--preset--color--on-dark-accent) !important;
}

/* Uppercase label / meta. */
.mzk-label {
	font-size: var(--wp--custom--font-size--meta);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--muted-light) !important;
}

.mzk-label--wijd {
	letter-spacing: var(--wp--custom--letter-spacing--label-wide);
}

.mzk-label--terracotta {
	color: var(--wp--preset--color--terracotta) !important;
}

/* Leesbreedtes uit het ontwerp. */
.mzk-maat-hero      { max-width: var(--wp--custom--measure--hero); }
.mzk-maat-kop       { max-width: var(--wp--custom--measure--heading); }
.mzk-maat-kop-breed { max-width: var(--wp--custom--measure--heading-wide); }
.mzk-maat-paginakop { max-width: var(--wp--custom--measure--page-heading); }
.mzk-maat-blogkop   { max-width: var(--wp--custom--measure--blog-heading); }
.mzk-maat-intro     { max-width: var(--wp--custom--measure--intro); }
.mzk-maat-intro-smal { max-width: var(--wp--custom--measure--intro-narrow); }
.mzk-maat-intro-blog { max-width: var(--wp--custom--measure--intro-blog); }
.mzk-maat-intro-lis { max-width: var(--wp--custom--measure--intro-liselotte); }
.mzk-maat-tekst     { max-width: var(--wp--custom--measure--body); }
.mzk-maat-breed     { max-width: var(--wp--custom--measure--body-wide); }
.mzk-maat-quote     { max-width: var(--wp--custom--measure--quote); }
.mzk-maat-quote-klein { max-width: var(--wp--custom--measure--quote-sm); }
.mzk-maat-contact   { max-width: var(--wp--custom--measure--contact); }
.mzk-maat-samenvatting { max-width: var(--wp--custom--measure--post-excerpt); }

/* Gecentreerde secties centreren hun eigen leesbreedtes. */
.has-text-align-center .mzk-maat-kop,
.has-text-align-center .mzk-maat-intro,
.mzk-sectie--gecentreerd :where([class*="mzk-maat-"]) {
	margin-left: auto;
	margin-right: auto;
}

/* --- Knoppen ----------------------------------------------------------- */

/* Secundaire knop: transparant met rand. */
.wp-block-button.is-style-mzk-secundair .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line-strong);
	color: var(--wp--preset--color--ink);
	font-weight: 400;
}

.wp-block-button.is-style-mzk-secundair .wp-block-button__link:hover,
.wp-block-button.is-style-mzk-secundair .wp-block-button__link:focus {
	background: transparent;
	border-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--terracotta);
}

/* Tekstlink-knop: alleen een onderrand. */
.wp-block-button.is-style-mzk-tekstlink .wp-block-button__link {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--terracotta);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--card);
	font-weight: 400;
	padding: var(--wp--preset--spacing--10) 0;
}

.wp-block-button.is-style-mzk-tekstlink .wp-block-button__link:hover,
.wp-block-button.is-style-mzk-tekstlink .wp-block-button__link:focus {
	background: transparent;
	color: var(--wp--preset--color--terracotta);
}

/* Primaire knop op espresso krijgt een lichtere hover. */
.mzk-oproep .wp-block-button__link:hover,
.mzk-oproep .wp-block-button__link:focus {
	background: var(--wp--preset--color--terracotta-light);
}

/* Knop op volle breedte in de feitenlijst. */
.wp-block-buttons.mzk-knop-vol,
.mzk-knop-vol .wp-block-button {
	width: 100%;
}

.mzk-knop-vol .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--110);
	font-size: var(--wp--custom--font-size--small);
}

/* --- Fotovakken -------------------------------------------------------- */

/*
 * Een fotovak houdt zijn verhouding en valt niet leeg-wit weg wanneer de
 * klant nog geen afbeelding heeft gekozen: de zandkleur blijft staan.
 */
.mzk-fotovak {
	position: relative;
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--lg);
}

/*
 * Zodra er een echte foto in zit, verdwijnt de zandkleur van het vak. Anders
 * zou die achter een bijschrift doorlopen. Zonder foto blijft het vlak staan,
 * zodat een leeg fotovak niet wit wegvalt.
 */
.mzk-fotovak:has(img) {
	background: transparent;
}

.mzk-fotovak .wp-block-image,
.mzk-fotovak .wp-block-post-featured-image {
	margin: 0;
}

.mzk-fotovak :where(.wp-block-image, .wp-block-post-featured-image) a {
	display: block;
}

/*
 * De hoogte staat op de afbeelding, niet op het vak. Zo snijdt de foto netjes
 * bij én kan een bijschrift eronder gewoon meegroeien. Stond de hoogte op het
 * vak, dan viel het bijschrift buiten beeld.
 */
.mzk-fotovak img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

.mzk-fotovak figcaption {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--card);
	color: var(--wp--preset--color--muted-light);
	text-align: left;
}

.mzk-fotovak--hero     { min-height: var(--wp--custom--photo--hero-height); }
.mzk-fotovak--portret  { min-height: var(--wp--custom--photo--portrait-height); }
.mzk-fotovak--breed    { min-height: var(--wp--custom--photo--wide-height); }
.mzk-fotovak--bericht  { min-height: var(--wp--custom--photo--post-height); border-radius: var(--wp--custom--radius--md); }

.mzk-fotovak--hero img     { height: var(--wp--custom--photo--hero-height); }
.mzk-fotovak--portret img  { height: var(--wp--custom--photo--portrait-height); }
.mzk-fotovak--breed img    { height: var(--wp--custom--photo--wide-height); }
.mzk-fotovak--bericht img  { height: var(--wp--custom--photo--post-height); border-radius: var(--wp--custom--radius--md); }

/*
 * Het uitgelichte bericht is de uitzondering: dat vak moet de hoogte van de
 * tekstkolom ernaast volgen. Daar blijft de afbeelding dus absoluut staan.
 * Een bijschrift is daar niet aan de orde.
 */
.mzk-fotovak--uitgelicht {
	min-height: var(--wp--custom--photo--featured-min-height);
	border-radius: 0;
	overflow: hidden;
}

.mzk-fotovak--uitgelicht .wp-block-image,
.mzk-fotovak--uitgelicht .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
}

.mzk-fotovak--uitgelicht img {
	height: 100%;
	border-radius: 0;
}

.mzk-kaart {
	border-radius: var(--wp--custom--radius--md);
	padding: 38px 34px;
	text-align: center;
}

.mzk-kaart--zand {
	background: var(--wp--preset--color--sand);
}

.mzk-kaart--creme {
	background: var(--wp--preset--color--cream-card);
	border: 1px solid var(--wp--preset--color--line);
}

.mzk-kaart__dag {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: var(--wp--custom--font-size--card-heading);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--ink) !important;
	margin: 0;
}

/* Op Naailessen (crème kaarten) is de dagnaam 30px, op Home 28px. */
.mzk-kaart--creme .mzk-kaart__dag {
	font-size: var(--wp--custom--font-size--day);
}

.mzk-kaart__tijd {
	font-size: var(--wp--custom--font-size--time);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--terracotta) !important;
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* --- Grote vlakken ----------------------------------------------------- */

.mzk-vlak {
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--210) var(--wp--preset--spacing--200);
}

.mzk-vlak--zand {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink-soft);
}

.mzk-vlak--zand p {
	color: var(--wp--preset--color--ink-soft);
}

.mzk-vlak--espresso {
	background: var(--wp--preset--color--espresso);
}

.mzk-vlak--espresso :where(h1, h2, h3) {
	color: var(--wp--preset--color--on-dark);
}

.mzk-vlak--espresso p {
	color: var(--wp--preset--color--on-dark-soft);
}

/* --- Stappen (01 / 02 / 03) -------------------------------------------- */

.mzk-stap__nummer {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: var(--wp--custom--font-size--block-heading);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--gold) !important;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.mzk-stap__kop {
	font-family: var(--wp--preset--font-family--source-sans-3) !important;
	font-size: var(--wp--custom--font-size--step-title);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.mzk-stap__tekst {
	font-size: var(--wp--custom--font-size--card);
	line-height: var(--wp--custom--line-height--body);
	margin: 0;
}

/* --- Feitenlijst en benodigdhedenlijst --------------------------------- */

.mzk-lijst {
	font-size: var(--wp--custom--font-size--card);
	color: var(--wp--preset--color--ink-soft);
}

.mzk-lijst__regel {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--preset--color--line-sand);
	padding-bottom: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

.mzk-lijst__regel--laatste {
	border-bottom: 0;
	padding-bottom: 0;
}

.mzk-lijst__regel > * {
	margin: 0;
}

.mzk-lijst__waarde {
	font-weight: 600;
	white-space: nowrap;
}

/* Lesavonden staan onder elkaar binnen één regel. */
.mzk-lijst__avonden {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--30);
	font-weight: 600;
}

.mzk-lijst__avond {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.mzk-lijst__avond > * {
	margin: 0;
}

/* Benodigdheden: item links, status rechts. */
.mzk-benodigd__regel {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--80);
	padding: var(--wp--preset--spacing--60) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mzk-benodigd__regel > * {
	margin: 0;
}

.mzk-benodigd__item {
	font-size: var(--wp--preset--font-size--text);
	color: var(--wp--preset--color--ink) !important;
}

/* --- Handige links ------------------------------------------------------ */

.mzk-linklijst {
	margin-top: var(--wp--preset--spacing--60);
}

/* De tekstlink onderin het blok "Patronen en stoffen" staat los van de tekst. */
.mzk-plaatshouder .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--90);
}

.mzk-linklijst__regel {
	margin: 0;
	padding: var(--wp--preset--spacing--60) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--text);
	line-height: var(--wp--custom--line-height--snug);
}

/*
 * De regel zelf is de scheiding, zoals bij de benodigdhedenlijst. De link
 * krijgt daarom geen eigen onderstreping - dat zou twee lijnen onder elkaar
 * geven - maar wel bij hover en focus.
 */
.mzk-linklijst__regel a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.mzk-linklijst__regel a:hover,
.mzk-linklijst__regel a:focus-visible {
	color: var(--wp--preset--color--terracotta);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mzk-benodigd__status {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted-light) !important;
	white-space: nowrap;
}

/* --- Gestippelde plaatshouder ------------------------------------------ */

.mzk-plaatshouder {
	border: 1px dashed var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--140);
}

/* --- Prijsblok --------------------------------------------------------- */

.mzk-prijs {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: var(--wp--custom--font-size--section-md);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--on-dark) !important;
	margin: 0;
}

.mzk-prijs__periode {
	font-size: var(--wp--custom--font-size--small);
	line-height: var(--wp--custom--line-height--tight);
	color: var(--wp--preset--color--on-dark-soft) !important;
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* Links in lopende tekst krijgen een zachte onderstreping. */
.mzk-tekstlink,
.mzk-vlak--zand p a,
.mzk-tekst a {
	border-bottom: 1px solid var(--wp--preset--color--link-underline);
}

/* --- Contactformulier -------------------------------------------------- */

.mzk-formulier {
	background: var(--wp--preset--color--cream-card);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--150);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
}

.mzk-formulier__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--80);
}

.mzk-formulier__veld {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.mzk-formulier__label {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	color: var(--wp--preset--color--ink-soft);
	line-height: var(--wp--custom--line-height--snug);
}

.mzk-formulier__verplicht {
	color: var(--wp--preset--color--terracotta);
}

.mzk-formulier input[type="text"],
.mzk-formulier input[type="email"],
.mzk-formulier textarea {
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--custom--font-size--card);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line-sand);
	border-radius: var(--wp--custom--radius--sm);
	padding: 13px;
	width: 100%;
}

.mzk-formulier textarea {
	resize: vertical;
	line-height: var(--wp--custom--line-height--snug);
}

.mzk-formulier input:focus,
.mzk-formulier textarea:focus {
	border-color: var(--wp--preset--color--terracotta);
}

/* Honeypot: uit beeld, maar niet display:none — bots vullen hem dan niet. */
.mzk-formulier__val {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mzk-formulier__knop {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--source-sans-3);
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--on-dark);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 15px 34px;
	font-size: var(--wp--custom--font-size--card);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--tight);
	cursor: pointer;
}

.mzk-formulier__knop:hover,
.mzk-formulier__knop:focus {
	background: var(--wp--preset--color--terracotta-dark);
}

/* Meldingen */
.mzk-melding {
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--90);
	font-size: var(--wp--custom--font-size--card);
	line-height: var(--wp--custom--line-height--card);
}

.mzk-melding--gelukt {
	background: var(--wp--preset--color--sand);
	border: 1px solid var(--wp--preset--color--line-sand);
	color: var(--wp--preset--color--ink-soft);
}

.mzk-melding--fout {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--ink-soft);
}

.mzk-melding__kop {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: var(--wp--custom--font-size--post-title);
	line-height: var(--wp--custom--line-height--card-heading);
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.mzk-melding ul {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-left: var(--wp--preset--spacing--80);
}

.mzk-veldfout {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--terracotta);
}

.mzk-formulier input[aria-invalid="true"],
.mzk-formulier textarea[aria-invalid="true"] {
	border-color: var(--wp--preset--color--terracotta);
}

/* --- Blog -------------------------------------------------------------- */

.mzk-uitgelicht {
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.mzk-uitgelicht__tekst {
	padding: var(--wp--preset--spacing--170) var(--wp--preset--spacing--190) var(--wp--preset--spacing--170) 0;
}

.mzk-uitgelicht__titel a,
.mzk-berichtkaart__titel a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.mzk-uitgelicht__titel a:hover,
.mzk-berichtkaart__titel a:hover {
	color: var(--wp--preset--color--terracotta);
}

.mzk-leesverder {
	font-size: var(--wp--custom--font-size--card);
	color: var(--wp--preset--color--terracotta);
	border-bottom: 1px solid var(--wp--preset--color--link-underline);
	padding-bottom: 3px;
	text-decoration: none;
	display: inline-block;
}

.mzk-berichtkaart__titel {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: var(--wp--custom--font-size--post-title);
	line-height: var(--wp--custom--line-height--card-heading);
}

/* --- Losse berichten en 404 -------------------------------------------- */

/*
 * Geen max-width op deze wrapper: de leesbreedte wordt door de layout van het
 * post-content-blok zelf geregeld (557px, wat overeenkomt met de 64ch uit
 * templates.md bij 17,5px Source Sans 3). Zat de max-width hier, dan konden
 * "breed" en "volledige breedte" bij een afbeelding niets meer doen.
 *
 * Die 557px staat er bewust in pixels en niet in ch: ch rekent per element
 * tegen de eigen lettergrootte, waardoor een kop van 40px een veel bredere
 * kolom zou krijgen dan de alinea eronder.
 */
.mzk-berichttekst {
	font-size: var(--wp--preset--font-size--text);
	line-height: var(--wp--custom--line-height--body-loose);
	color: var(--wp--preset--color--ink-soft);
}

.mzk-berichttekst > * + * {
	margin-block-start: var(--wp--preset--spacing--90);
}

.mzk-berichttekst :where(h2, h3) {
	margin-top: var(--wp--preset--spacing--180);
}

/*
 * Alles hieronder is opmaak voor tekst die de klant zelf in een bericht typt.
 * Het ontwerp beschrijft die niet - er was maar één blogbericht van één alinea -
 * dus dit is de bestaande vormtaal doorgetrokken naar lijsten, citaten,
 * afbeeldingen en tabellen. Zonder deze regels valt WordPress terug op zijn
 * eigen standaardopmaak, en die past niet bij het ontwerp.
 */

.mzk-berichttekst ul,
.mzk-berichttekst ol {
	padding-left: var(--wp--preset--spacing--100);
}

.mzk-berichttekst li + li {
	margin-top: var(--wp--preset--spacing--30);
}

/* Een geneste lijst krijgt dezelfde ademruimte als een los item. */
.mzk-berichttekst li > ul,
.mzk-berichttekst li > ol {
	margin-top: var(--wp--preset--spacing--30);
}

/* Citaat: een zandvlak in plaats van de donkere streep van WordPress. */
.mzk-berichttekst blockquote,
.mzk-berichttekst .wp-block-quote {
	background: var(--wp--preset--color--sand);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--140) var(--wp--preset--spacing--160);
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--quote-sm);
	line-height: var(--wp--custom--line-height--quote-sm);
	color: var(--wp--preset--color--ink);
}

.mzk-berichttekst blockquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.mzk-berichttekst blockquote p + p {
	margin-top: var(--wp--preset--spacing--60);
}

.mzk-berichttekst blockquote cite,
.mzk-berichttekst blockquote .wp-block-quote__citation {
	display: block;
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-style: normal;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

/* Pullquote krijgt dezelfde behandeling als het gewone citaat. */
.mzk-berichttekst .wp-block-pullquote {
	background: var(--wp--preset--color--sand);
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--210) var(--wp--preset--spacing--200);
	text-align: center;
}

.mzk-berichttekst .wp-block-pullquote blockquote {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.mzk-berichttekst .wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-style: italic;
	font-size: var(--wp--custom--font-size--section-md);
	line-height: var(--wp--custom--line-height--quote);
	color: var(--wp--preset--color--ink);
	max-width: var(--wp--custom--measure--quote);
	margin-inline: auto;
}

/* Toetsaanslag leest als code. */
.mzk-berichttekst kbd {
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--sm);
	padding: 2px var(--wp--preset--spacing--30);
	font-size: var(--wp--custom--font-size--card);
}

/* Afbeeldingen krijgen dezelfde radius als de fotovakken. */
.mzk-berichttekst figure {
	margin: 0;
}

.mzk-berichttekst img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

.mzk-berichttekst figcaption {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--card);
	color: var(--wp--preset--color--muted-light);
	text-align: left;
}

/*
 * Scheidingslijn: alleen de kleur wordt gezet, niet de breedte. WordPress
 * biedt drie stijlen (kort, breed, stippen) en die keuze blijft zo staan.
 */
.mzk-berichttekst .wp-block-separator,
.mzk-berichttekst hr {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--line);
	margin-block: var(--wp--preset--spacing--180);
	opacity: 1;
}

/*
 * Een links of rechts uitgelijnde afbeelding hoort tegen de rand van de
 * tekstkolom te staan, niet tegen de rand van de pagina. Anders zweeft hij
 * los naast de tekst en loopt er niets omheen.
 */
.mzk-berichttekst > .alignleft {
	margin-left: max(0px, calc((100% - var(--wp--custom--measure--bericht)) / 2));
}

.mzk-berichttekst > .alignright {
	margin-right: max(0px, calc((100% - var(--wp--custom--measure--bericht)) / 2));
}

/* Tabel in de stijl van de feitenlijst. */
.mzk-berichttekst table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--custom--font-size--card);
}

/*
 * Iets specifieker dan de kern, anders wint de standaard tabelopmaak van
 * WordPress en krijg je doorzichtige randen en een grijze streepkleur die
 * niet in het palet zit.
 */
.mzk-berichttekst .wp-block-table th,
.mzk-berichttekst .wp-block-table td,
.mzk-berichttekst table th,
.mzk-berichttekst table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	text-align: left;
	vertical-align: top;
}

.mzk-berichttekst .wp-block-table th,
.mzk-berichttekst table th {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--line-strong);
}

/*
 * De kern zet een grijze lijn onder de tabel en een balk van 3px onder de
 * kolomkoppen. Het ontwerp werkt overal met haarlijnen van 1px in de
 * lijnkleur, dus die twee worden teruggebracht.
 */
.mzk-berichttekst .wp-block-table {
	border-bottom: 0;
}

.mzk-berichttekst .wp-block-table thead,
.mzk-berichttekst table thead {
	border-bottom: 1px solid var(--wp--preset--color--line-strong);
}

/* Gestreepte tabel in zandkleur in plaats van het grijs van de kern. */
.mzk-berichttekst .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--sand);
}

.mzk-berichttekst .wp-block-table.is-style-stripes th,
.mzk-berichttekst .wp-block-table.is-style-stripes td {
	border-bottom: 0;
}

/* Tabellen mogen op smalle schermen zelf schuiven. */
.mzk-berichttekst .wp-block-table {
	overflow-x: auto;
}

/* Code leesbaar houden zonder een nieuw lettertype te introduceren. */
.mzk-berichttekst code,
.mzk-berichttekst pre {
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--custom--font-size--card);
}

.mzk-berichttekst code {
	padding: 2px var(--wp--preset--spacing--30);
}

.mzk-berichttekst pre {
	padding: var(--wp--preset--spacing--90);
	overflow-x: auto;
}

.mzk-paginering {
	font-size: var(--wp--custom--font-size--card);
}

.mzk-paginering .wp-block-query-pagination-numbers,
.mzk-paginering a {
	color: var(--wp--preset--color--terracotta);
}

/* --- Responsive -------------------------------------------------------- */

/* Onder 900px worden tweekoloms secties één kolom. */
@media (max-width: 900px) {

	.mzk-twee-kolommen,
	.mzk-uitgelicht,
	.mzk-vlak--zand.mzk-twee-kolommen,
	.mzk-formulier__rij {
		grid-template-columns: 1fr !important;
	}

	.wp-block-columns.mzk-twee-kolommen {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.mzk-twee-kolommen > .wp-block-column {
		flex-basis: 100% !important;
	}

	.mzk-uitgelicht__tekst {
		padding: var(--wp--preset--spacing--150);
	}

	.mzk-vlak {
		padding: var(--wp--preset--spacing--180) var(--wp--preset--spacing--140);
	}

	/* Fotovakken houden hun verhouding in plaats van een vaste hoogte. */
	.mzk-fotovak--hero,
	.mzk-fotovak--portret,
	.mzk-fotovak--breed {
		min-height: 0;
	}

	.mzk-fotovak--hero img,
	.mzk-fotovak--portret img,
	.mzk-fotovak--breed img {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.mzk-fotovak--uitgelicht {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	/*
	 * Mobiel: sitenaam en hamburger blijven bovenaan staan tijdens het
	 * scrollen. Daarvoor wordt de header één compacte regel: naam en
	 * ondertitel links, menuknop rechts.
	 */
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 40;
	}

	/* De kern geeft een groep met achtergrond 1.25em verticale padding; hier
	   zit die ruimte al in .mzk-header__binnen. */
	.wp-block-group.mzk-header {
		padding-top: 0;
		padding-bottom: 0;
	}

	html {
		scroll-padding-top: var(--wp--preset--spacing--250);
	}

	.mzk-header__binnen {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: var(--wp--preset--spacing--60);
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--50);
	}

	.mzk-header__binnen > .wp-block-group {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mzk-logo.has-text-align-center,
	.mzk-tagline.has-text-align-center {
		text-align: left;
	}

	.mzk-logo {
		font-size: var(--wp--custom--font-size--card-heading);
	}

	.mzk-tagline {
		font-size: var(--wp--custom--font-size--step-title);
	}

	.mzk-nav {
		flex: 0 0 auto;
	}

	/* Onder 900px passen vier kaarten niet naast elkaar. */
	.mzk-grid-drie--4,
	.mzk-grid-drie--veel {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Onder 700px worden driekoloms rasters één kolom. */
@media (max-width: 700px) {

	.mzk-drie-kolommen {
		grid-template-columns: 1fr !important;
	}

	.wp-block-columns.mzk-drie-kolommen {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.mzk-drie-kolommen > .wp-block-column {
		flex-basis: 100% !important;
	}

	.mzk-kaart {
		padding: var(--wp--preset--spacing--120) var(--wp--preset--spacing--140);
	}

	.mzk-formulier {
		padding: var(--wp--preset--spacing--110);
	}

	.mzk-fotovak--hero img,
	.mzk-fotovak--portret img,
	.mzk-fotovak--breed img {
		aspect-ratio: 3 / 2;
	}

	.mzk-lijst__regel,
	.mzk-benodigd__regel,
	.mzk-footer__rij {
		flex-wrap: wrap;
	}
}

/* --- Print ------------------------------------------------------------- */

@media print {
	.mzk-nav,
	.mzk-formulier {
		display: none;
	}
}

/* =========================================================================
   Rasters. De verhoudingen komen één op één uit het ontwerp; de collapse
   naar één kolom staat bij de responsive regels hierboven.
   ========================================================================= */

.mzk-grid-hero,
.mzk-grid-liselotte,
.mzk-grid-voor-wie,
.mzk-grid-vol-prijs,
.mzk-grid-gelijk,
.mzk-grid-fotos,
.mzk-grid-contact,
.mzk-grid-uitgelicht,
.mzk-grid-drie,
.mzk-grid-stappen,
.mzk-grid-berichten {
	display: grid;
}

.mzk-grid-hero {
	grid-template-columns: 1fr 0.85fr;
	gap: var(--wp--preset--spacing--240);
	align-items: center;
}

.mzk-grid-liselotte {
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--wp--preset--spacing--240);
	align-items: center;
}

.mzk-grid-voor-wie {
	grid-template-columns: 1fr 0.75fr;
	gap: var(--wp--preset--spacing--220);
	align-items: center;
}

.mzk-grid-vol-prijs {
	grid-template-columns: 1.45fr 0.55fr;
	gap: var(--wp--preset--spacing--100);
}

.mzk-grid-gelijk {
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--240);
}

.mzk-grid-fotos {
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--100);
}

.mzk-grid-contact {
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--wp--preset--spacing--220);
}

.mzk-grid-uitgelicht {
	grid-template-columns: 0.95fr 1.05fr;
	gap: var(--wp--preset--spacing--190);
	align-items: stretch;
}

.mzk-grid-drie {
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--100);
}

/* Lesavonden: ontworpen voor drie kaarten, maar de klant kan er meer of
   minder instellen. Dan schalen de kolommen mee. */
.mzk-grid-drie--1 { grid-template-columns: 1fr; }
.mzk-grid-drie--2 { grid-template-columns: repeat(2, 1fr); }
.mzk-grid-drie--4 { grid-template-columns: repeat(4, 1fr); }
.mzk-grid-drie--veel { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/*
 * Handige links: onder 700px staan de groepjes onder elkaar en hebben ze meer
 * lucht nodig dan de 24px rasterafstand. Staat ná .mzk-grid-drie, anders wint
 * die met dezelfde specificiteit.
 */
@media (max-width: 700px) {
	.mzk-grid-links {
		row-gap: var(--wp--preset--spacing--190);
	}
}

.mzk-grid-stappen {
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--110);
}

.mzk-grid-berichten {
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--120);
}

/* De vol/prijs-kolommen zijn verticaal gecentreerde blokken. */
.mzk-vol {
	background: var(--wp--preset--color--sand);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--140) var(--wp--preset--spacing--160);
	display: flex;
	align-items: center;
}

.mzk-vol p {
	margin-bottom: 0;
	color: var(--wp--preset--color--ink-soft);
}

.mzk-prijsblok {
	background: var(--wp--preset--color--espresso);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--140) var(--wp--preset--spacing--130);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Blokken op Over Liselotte staan onder elkaar met 48px ertussen. */
.mzk-tekstblokken > * + * {
	margin-top: var(--wp--preset--spacing--190);
}

/* =========================================================================
   Secties. Elke sectie uit het ontwerp heeft alleen een afstand boven;
   de 32px zijmarge komt uit de root-padding in theme.json.
   ========================================================================= */

.mzk-pt-24  { padding-top: var(--wp--preset--spacing--100); }
.mzk-pt-56  { padding-top: var(--wp--preset--spacing--200); }
.mzk-pt-64  { padding-top: var(--wp--preset--spacing--220); }
.mzk-pt-72  { padding-top: var(--wp--preset--spacing--240); }
.mzk-pt-80  { padding-top: var(--wp--preset--spacing--250); }
.mzk-pt-88  { padding-top: var(--wp--preset--spacing--260); }
.mzk-pt-96  { padding-top: var(--wp--preset--spacing--270); }
.mzk-pt-104 { padding-top: var(--wp--preset--spacing--280); }

/*
 * Onder 700px zijn de 72–104px uit het ontwerp naar verhouding veel. Alles
 * daarboven gaat naar 64px; 24 en 56 blijven staan. Idem voor de ruimte boven
 * de footer. Staat ná de klassen hierboven, zodat hij ze overschrijft.
 */
@media (max-width: 700px) {
	.mzk-pt-72,
	.mzk-pt-80,
	.mzk-pt-88,
	.mzk-pt-96,
	.mzk-pt-104 {
		padding-top: var(--wp--preset--spacing--220);
	}

	.mzk-footer {
		margin-top: var(--wp--preset--spacing--250);
	}
}

/* --- Home: hero -------------------------------------------------------- */

.mzk-hero__titel {
	font-size: var(--wp--custom--font-size--hero-title);
	line-height: var(--wp--custom--line-height--hero-heading);
	letter-spacing: var(--wp--custom--letter-spacing--hero-heading);
	margin: 0;
}

.mzk-hero__intro {
	font-size: var(--wp--custom--font-size--lead-lg);
	line-height: var(--wp--custom--line-height--body-relaxed);
	margin: var(--wp--preset--spacing--120) 0 0;
}

.mzk-hero__knoppen {
	margin-top: var(--wp--preset--spacing--170);
}

.wp-block-buttons.mzk-hero__knoppen {
	gap: var(--wp--preset--spacing--50);
}

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

.mzk-sectiekop {
	margin: 0 auto var(--wp--preset--spacing--100);
}

.mzk-sectiekop--ruim {
	margin-bottom: var(--wp--preset--spacing--110);
}

.mzk-sectiekop--strak {
	margin-bottom: var(--wp--preset--spacing--80);
}

.mzk-accentregel {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.mzk-accentregel--krap {
	margin-bottom: var(--wp--preset--spacing--20);
}

.mzk-sectie-intro {
	line-height: var(--wp--custom--line-height--body-relaxed);
	margin: 0 auto;
}

.mzk-sectie-intro--strak {
	line-height: var(--wp--custom--line-height--body);
}

/* --- Home: lesavonden -------------------------------------------------- */

/*
 * Aanloopzin bij de kaarten: kleiner en gedempt, dicht op de kaarten, zodat
 * hij als bijschrift bij de kaarten leest en niet als tweede intro.
 */
.mzk-lesavonden__intro {
	font-size: var(--wp--custom--font-size--card);
	line-height: var(--wp--custom--line-height--card);
	color: var(--wp--preset--color--muted);
	margin: 0 auto var(--wp--preset--spacing--80);
}

/* --- Home: over Liselotte ---------------------------------------------- */

.mzk-quote-klein {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-style: italic;
	line-height: var(--wp--custom--line-height--quote-sm);
	color: var(--wp--preset--color--ink) !important;
	margin: 0 0 var(--wp--preset--spacing--100);
}

.mzk-blok-tekst {
	line-height: var(--wp--custom--line-height--body-relaxed);
	margin: 0 0 var(--wp--preset--spacing--120);
}

/* --- Home: oproep ------------------------------------------------------ */

.mzk-oproep {
	padding: var(--wp--preset--spacing--230) var(--wp--preset--spacing--210);
	text-align: center;
}

.mzk-oproep__kop {
	margin: 0 auto var(--wp--preset--spacing--70);
}

.mzk-oproep__tekst {
	line-height: var(--wp--custom--line-height--body);
	margin: 0 auto var(--wp--preset--spacing--150);
}

.mzk-oproep .wp-block-buttons {
	justify-content: center;
}

.mzk-oproep .wp-block-button__link {
	padding-left: var(--wp--preset--spacing--140);
	padding-right: var(--wp--preset--spacing--140);
}

/* --- Over Maak Zelf Kleding -------------------------------------------- */

.mzk-paginakop {
	margin: 0 auto var(--wp--preset--spacing--110);
}

.mzk-paginakop--krap {
	margin-bottom: var(--wp--preset--spacing--100);
}

.mzk-kop-gecentreerd {
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--180);
}

.mzk-voor-wie__kop {
	margin: 0 0 var(--wp--preset--spacing--90);
}

.mzk-voor-wie__tekst {
	line-height: var(--wp--custom--line-height--body-relaxed);
	color: var(--wp--preset--color--ink-soft) !important;
	margin: 0 0 var(--wp--preset--spacing--60);
}

.mzk-voor-wie__tekst--laatste {
	margin-bottom: 0;
}

/* --- Naailessen -------------------------------------------------------- */

/*
 * Kopgroottes buiten de standaard (h1 56, h2 40, h3 28). De editor toont
 * alleen vier tekstformaten; deze klassen dragen de overige groottes uit
 * het ontwerp.
 */
.mzk-kop-36 { font-size: var(--wp--custom--font-size--section-sm); }
.mzk-kop-38 { font-size: var(--wp--custom--font-size--section-md); }
.mzk-kop-42 { font-size: var(--wp--custom--font-size--section-lg); }

.mzk-blokkop {
	margin: 0 0 var(--wp--preset--spacing--100);
}

.mzk-benodigd__slot {
	font-size: var(--wp--custom--font-size--card);
	line-height: var(--wp--custom--line-height--card);
	color: var(--wp--preset--color--muted) !important;
	margin: var(--wp--preset--spacing--100) 0 0;
}

.mzk-benodigd__slot + .mzk-benodigd__slot {
	margin-top: var(--wp--preset--spacing--60);
}

/* Praktische lesinformatie, gecentreerd onder de twee kolommen. */
.mzk-praktisch {
	font-size: var(--wp--custom--font-size--card);
	max-width: var(--wp--custom--measure--praktisch);
	font-style: italic;
	line-height: var(--wp--custom--line-height--body);
	margin: 0 auto;
}

/*
 * De ruimte boven dit blok moet de blokgap-reset van de pagina-inhoud
 * overstemmen (die is even specifiek), vandaar de dubbele klasse.
 */
.wp-block-post-content > .mzk-praktisch {
	margin-block-start: var(--wp--preset--spacing--250);
}

.mzk-plaatshouder p {
	line-height: var(--wp--custom--line-height--body);
	margin-bottom: 0;
}

/*
 * Vakken die de klant zelf vult ("Patronen en stoffen", het vol-blok) hebben
 * weer normale afstand tussen opeenvolgende blokken nodig. Het thema zet de
 * standaard blokafstand uit voor het vaste ontwerp; zonder deze regel plakt
 * een tweede alinea tegen de eerste aan zodra iemand er tekst bij typt.
 */
.mzk-plaatshouder > *,
.mzk-vol > * {
	margin-top: 0;
}

.mzk-plaatshouder > * + *,
.mzk-vol > * + * {
	margin-top: var(--wp--preset--spacing--90);
}

/* Een lijstje met merken en winkels is precies waar dit vak voor bedoeld is. */
.mzk-plaatshouder ul,
.mzk-plaatshouder ol,
.mzk-vol ul,
.mzk-vol ol {
	padding-left: var(--wp--preset--spacing--100);
	margin-block-start: var(--wp--preset--spacing--90);
}

.mzk-plaatshouder li + li,
.mzk-vol li + li {
	margin-top: var(--wp--preset--spacing--30);
}

/* Links naar stoffenwinkels krijgen dezelfde zachte onderstreping als elders. */
.mzk-plaatshouder a,
.mzk-vol a {
	border-bottom: 1px solid var(--wp--preset--color--link-underline);
}

.mzk-plaatshouder__noot {
	font-size: var(--wp--custom--font-size--small);
	color: var(--wp--preset--color--muted-light) !important;
	margin-top: var(--wp--preset--spacing--60) !important;
}

.mzk-contact__tekst {
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink-soft) !important;
	margin: 0 0 var(--wp--preset--spacing--130);
}

.mzk-contact__gegevens > * + * {
	margin-top: var(--wp--preset--spacing--70);
}

.mzk-contact__gegevens p {
	margin: 0;
	font-size: var(--wp--custom--font-size--card);
	color: var(--wp--preset--color--ink-soft);
}

.mzk-contact__gegevens .mzk-label {
	font-size: var(--wp--custom--font-size--meta);
	margin-bottom: 4px;
}

/* --- Over Liselotte ---------------------------------------------------- */

.mzk-lis__tekst {
	line-height: var(--wp--custom--line-height--body-loose);
	color: var(--wp--preset--color--ink-soft) !important;
	margin: 0 0 var(--wp--preset--spacing--90);
}

.mzk-lis__tekst--laatste {
	margin-bottom: 0;
}

.mzk-quote-groot {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-style: italic;
	line-height: var(--wp--custom--line-height--quote);
	color: var(--wp--preset--color--ink) !important;
	margin: 0 auto;
}

.mzk-tekstblok__kop {
	font-size: var(--wp--custom--font-size--block-heading);
	margin: 0 0 var(--wp--preset--spacing--60);
}

/* --- Blog -------------------------------------------------------------- */

.mzk-uitgelicht__label {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.mzk-uitgelicht__titel {
	font-size: var(--wp--custom--font-size--section-sm);
	line-height: var(--wp--custom--line-height--post-heading);
	margin: 0 0 var(--wp--preset--spacing--60);
}

.mzk-uitgelicht__samenvatting {
	line-height: var(--wp--custom--line-height--body);
	margin: 0 0 var(--wp--preset--spacing--80);
}

.mzk-uitgelicht__samenvatting p {
	margin: 0;
}

.mzk-berichtkaart__label {
	margin: var(--wp--preset--spacing--80) 0 var(--wp--preset--spacing--30);
}

.mzk-berichtkaart__titel {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.mzk-berichtkaart__samenvatting,
.mzk-berichtkaart__samenvatting p {
	font-size: var(--wp--custom--font-size--card);
	line-height: var(--wp--custom--line-height--card);
	margin: 0;
}

/* --- Losse berichten / 404 --------------------------------------------- */

.mzk-bericht__datum {
	color: var(--wp--preset--color--muted-light) !important;
	margin: var(--wp--preset--spacing--50) 0 0;
}

.mzk-bericht__titel {
	line-height: var(--wp--custom--line-height--page-heading);
	margin: 0 auto;
}

.mzk-404__tekst {
	line-height: var(--wp--custom--line-height--body-relaxed);
	margin: 0 auto var(--wp--preset--spacing--170);
}

.mzk-404 .wp-block-buttons {
	justify-content: center;
}

/* --- Feitenlijst: het lesavondenblok ----------------------------------- */

.mzk-lijst__blok {
	border-bottom: 1px solid var(--wp--preset--color--line-sand);
	padding-bottom: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

.mzk-lijst__naam {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

.mzk-lijst p {
	color: var(--wp--preset--color--ink-soft);
}

.mzk-knop-vol {
	margin-top: var(--wp--preset--spacing--50);
}

/* Het quotevlak heeft afwijkende padding ten opzichte van andere zandvlakken. */
.mzk-quotevlak {
	padding: var(--wp--preset--spacing--230) var(--wp--preset--spacing--200);
	text-align: center;
}

/* --- Plaatshouder van het formulierblok in de editor -------------------- */

.mzk-formulier-plaatshouder {
	background: var(--wp--preset--color--cream-card);
	border: 1px dashed var(--wp--preset--color--line-strong);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--150);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--custom--font-size--card);
}

.mzk-formulier-plaatshouder__titel {
	font-family: var(--wp--preset--font-family--dm-serif-display);
	font-size: var(--wp--custom--font-size--post-title);
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* De paginering verschijnt pas zodra er meer berichten zijn dan op één
   pagina passen; WordPress laat hem anders zelf weg. */
.mzk-paginering {
	margin-top: var(--wp--preset--spacing--200);
	gap: var(--wp--preset--spacing--80);
}

.mzk-paginering .wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}

/* =========================================================================
   Hamburgermenu vanaf 900px.

   Het navigatieblok schakelt standaard pas onder 600px om naar een overlay;
   het ontwerp vraagt dat onder 900px. De regels hieronder verzetten dat punt
   met dezelfde klassen die WordPress zelf gebruikt, dus zonder eigen
   JavaScript. De selectors zijn iets specifieker dan die van de kern, zodat
   de volgorde van stylesheets niet uitmaakt.
   ========================================================================= */

@media (min-width: 600px) and (max-width: 900px) {

	.wp-block-navigation.mzk-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		width: auto;
	}

	.wp-block-navigation.mzk-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation.mzk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: block;
	}
}


/* --- Serverside gerenderde blokken ------------------------------------- */

/*
 * De blokken lesavonden, prijsblok en feitenlijst schrijven hun eigen HTML en
 * lopen dus niet door de alinea-opmaak van de blokeditor heen. Zonder deze
 * regel krijgen die alinea's de standaardmarges van de browser terug en worden
 * de kaarten hoger dan in het ontwerp.
 */
.mzk-kaart p,
.mzk-prijsblok p,
.mzk-lijst p {
	margin-bottom: 0;
}

/* --- Creditregel in de footer ------------------------------------------ */

.mzk-footer__credit {
	margin-top: var(--wp--preset--spacing--100);
	line-height: var(--wp--custom--line-height--card);
	color: var(--wp--preset--color--on-dark-soft) !important;
}