/*
 * Mariska Meulman Osteopathie — componentstijlen.
 * Kleuren, fonts en lettergroottes komen uit theme.json (--wp--preset--*).
 * Opbouw volgt de Webflow-site: verspringende vlakken, 18px tussenruimte, geen afronding, geen schaduw.
 */

:root {
	--mm-ruimte: 18px;
	--mm-vlak-binnen: clamp(21px, 12.4px + 2.2vw, 38px);
	--mm-vlak-hoog: clamp(54px, 40.6px + 3.43vw, 90px);
	--mm-rand: max(var(--mm-ruimte), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; hyphens: manual; overflow-wrap: break-word; }
img { height: auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
/* Een zichtbare scrollbalk maakt 100vw breder dan de pagina; clip vangt dat af
   en laat, anders dan hidden, de sticky header met rust. */
body { overflow-x: clip; }
main { margin-block-end: var(--mm-ruimte); }

/* ------------------------------------------------------------------------
 * Header: vaste witte balk, logo, menu, knop
 * --------------------------------------------------------------------- */
/* Sticky op de <header>-wrapper van het template-part: die heeft de hele pagina als ruimte */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
/* Onder 782px staat de WordPress-adminbalk niet vast, dus daar geen ruimte voor reserveren */
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
	.admin-bar .wp-block-navigation__responsive-container.is-menu-open { top: 0 !important; }
}
.mm-header {
	background: var(--wp--preset--color--wit);
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}
/* De header mag breder zijn dan de content: acht menu-items plus knop passen niet in 1080px */
.mm-header > .wp-block-group,
.mm-header__binnen { max-width: min(1200px, calc(100vw - 36px)) !important; }
.mm-header__binnen { min-height: var(--wp--custom--header-hoogte); gap: 24px; padding-block: 10px; }
.mm-header .wp-block-site-logo img,
.mm-header .mm-logo img { width: 124px; }
.mm-header .wp-block-navigation__container { gap: 18px; flex-wrap: nowrap; }
.mm-header .wp-block-navigation-item__content { padding-block: 6px; border-bottom: 1px solid transparent; }
.mm-header .wp-block-navigation-item__content:hover,
.mm-header .current-menu-item > .wp-block-navigation-item__content { text-decoration: none; border-bottom-color: currentColor; }
.mm-header .wp-block-buttons { flex-shrink: 0; }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--wit) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--kop-4);
	font-weight: 200;
	letter-spacing: 0;
	text-transform: none;
}
/* Uitklapmenu onder een menu-item (desktop) */
.mm-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--wp--preset--color--lijn);
	padding: 8px 0;
	min-width: 230px;
}
.mm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 18px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	border-bottom: 0;
}
.mm-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--grijs); }
/* In het mobiele menu klapt het submenu gewoon open onder het item */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: none !important;
	border: 0 !important;
	padding: 6px 0 0 !important;
	gap: 8px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--intro);
	opacity: .85;
	padding: 0;
}

/* Onder 1024px: hamburgermenu in plaats van de balk (WordPress schakelt standaard pas bij 600px) */
@media (max-width: 1023.98px) {
	.mm-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.mm-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

/* Mobiel: logo, compacte knop, hamburger. Knop blijft zichtbaar, want dat is de belangrijkste actie. */
@media (max-width: 1023.98px) {
	.mm-header__binnen { gap: 12px; min-height: 76px; padding-block: 8px; }
	.mm-header .wp-block-site-logo img, .mm-header .mm-logo img { width: 104px; }
	.mm-header .wp-block-navigation { order: 2; }
	.mm-header .wp-block-buttons { order: 1; }
	.mm-header .wp-block-button__link { padding: 11px 16px; font-size: 12px; letter-spacing: .05em; }
}
@media (max-width: 380px) {
	.mm-header .wp-block-button__link { padding: 10px 12px; font-size: 11px; }
}

/* Uitklapmenu op mobiel: balk met "Menu" en kruisje, dan een subtiele lijn, dan de items.
   De uitlijning van het navigatieblok zelf is rechts, vandaar de !important-regels. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}
/* De balk bovenin: het woord Menu links, het kruisje staat er los overheen rechts */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "Menu";
	display: flex;
	align-items: center;
	height: 72px;
	padding: 0 24px;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
	color: var(--wp--preset--color--wit);
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	flex: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100%;
	flex: 1;
	padding: clamp(28px, 5vh, 48px) 24px 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: center;
	width: 100%;
	gap: clamp(14px, 2.8vh, 24px);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; align-items: center !important; justify-content: center !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--kop-3);
	font-weight: 200;
	letter-spacing: .01em;
	text-transform: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}
/* Knop onderin het uitklapmenu; in de gewone balk staat de knop er al, dus daar verbergen we hem */
.mm-header .mm-menu-knop { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .mm-menu-knop { display: flex !important; margin-top: clamp(14px, 3vh, 26px); }
.wp-block-navigation__responsive-container.is-menu-open .mm-menu-knop .wp-block-navigation-item__content {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--zwart);
	padding: 14px 30px;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .mm-menu-knop .wp-block-navigation-item__content:hover { border-bottom: 0; opacity: .9; }

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	border-bottom-color: rgba(255, 255, 255, .7);
	text-decoration: none;
}
/* Kruisje op dezelfde hoogte als het woord Menu, met dezelfde marge als de balk */
.wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	z-index: 2;
	height: 72px;
	padding: 0 24px;
	display: flex;
	align-items: center;
}
.wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------------------
 * Hero: foto, kop wit onderin het midden
 * --------------------------------------------------------------------- */
.mm-hero.wp-block-cover {
	min-height: max(420px, 52vh);
	margin-block: var(--mm-ruimte) 0;
	padding: 0 var(--mm-vlak-binnen) clamp(32px, 4vw, 56px);
	align-items: flex-end;
}
/* Verloop onderaan in plaats van een schaduw achter de letters: rustiger en werkt op elke foto */
.mm-hero .wp-block-cover__background {
	background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .42) 40%, rgba(0, 0, 0, .18) 75%, rgba(0, 0, 0, .08) 100%) !important;
	opacity: 1 !important;
}
.mm-hero .wp-block-cover__inner-container > * + * { margin-top: 14px; }
.mm-hero p {
	color: var(--wp--preset--color--wit);
	text-align: center;
	max-width: 620px;
	margin-inline: auto;
	text-wrap: balance;
}
.mm-hero .wp-block-buttons { margin-top: clamp(18px, 2vw, 26px); }
.mm-hero .wp-block-button__link { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--zwart); }
.mm-hero .wp-block-button__link:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--wit); }
.mm-hero .wp-block-cover__inner-container { width: 100%; }
.mm-hero h1,
.mm-hero .wp-block-post-title {
	color: var(--wp--preset--color--wit);
	text-align: center;
	margin: 0;
}
.mm-hero--artikel .wp-block-cover__background { background: linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .63)) !important; opacity: 1 !important; }
.mm-hero--artikel .wp-block-post-title { font-size: clamp(28px, 23.5px + 1.14vw, 40px); text-shadow: none; text-wrap: balance; }
.mm-datumlabel {
	display: table;
	margin: 12px auto 0;
	padding: 0 12px;
	border-block: 1px solid currentColor;
	color: var(--wp--preset--color--wit);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 300;
	line-height: 25px;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.mm-kop-eenvoudig { margin-block-start: var(--mm-ruimte); padding-block: var(--mm-vlak-hoog) calc(var(--mm-vlak-hoog) / 2); }

/* ------------------------------------------------------------------------
 * Vlakken en raster
 * --------------------------------------------------------------------- */
.mm-raster.wp-block-columns { gap: var(--mm-ruimte); margin-block: var(--mm-ruimte) 0; align-items: stretch; }
.mm-raster > .wp-block-column { display: flex; flex-direction: column; gap: var(--mm-ruimte); }
/* WordPress zet zelf al blockGap tussen de vlakken; samen met de gap hierboven werd dat 36px */
.mm-raster > .wp-block-column > * { margin-block: 0; }
.mm-vlak { padding: var(--mm-vlak-hoog) var(--mm-vlak-binnen); display: flex; flex-direction: column; justify-content: center; }
.mm-vlak > * { width: 100%; max-width: 520px; }
.mm-vlak.has-text-align-right > *,
.mm-vlak.mm-rechts > * { margin-left: auto; }
.mm-vlak > :last-child { margin-bottom: 0; }
.mm-vlak h2, .mm-vlak h3 { color: inherit; }
.mm-vlak:not(.has-grijs-background-color):not(.mm-intro) :is(h2, h3) { color: var(--wp--preset--color--accent); }
.mm-vlak.mm-intro .has-intro-font-size,
.mm-intro p { color: var(--wp--preset--color--tekst); font-weight: 300; }
/* Vlakken in de linkerkolom: inhoud staat rechts in het vlak, maar alle tekst lijnt links uit */
.mm-vlak.mm-rechts { text-align: left; }
.mm-vlak.mm-rechts .wp-block-buttons { justify-content: flex-start; }
.mm-vlak .wp-block-list:not(.is-style-cirkels) { list-style: none; padding-left: 0; }
.mm-vlak .wp-block-list li { margin-bottom: 2px; }
.mm-vlak :is(p, li) a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mm-vlak .wp-block-list.is-style-kaal a { color: var(--wp--preset--color--accent); text-decoration: none; }

.wp-block-group.is-style-patroon {
	background-image: url(../img/patroon.svg);
	background-size: 420px;
	background-position: center;
	background-repeat: repeat;
}
.mm-vlak-breed { margin-block: var(--mm-ruimte) 0; padding: var(--mm-vlak-hoog) var(--mm-vlak-binnen); }

/*
 * Raster zoals Webflow (alleen brede schermen):
 * - beide kolommen beginnen bovenaan; het verspringen komt uit de hoogtes van de vlakken
 * - grijze kop (mm-o-1) sluit aan op de grijze intro (mm-o-2): één L-vormig grijs vlak
 * - het onderste grijze vlak (mm-o-9) loopt door onder de rechterkolom; de vlakken rechts
 *   houden met een witte schaduw links en onder hun 18px witruimte
 * - staat er rechtsonder ook een grijs vlak (mm-o-10), dan vormen die twee samen één band
 */
@media (min-width: 782px) {
	.mm-raster.wp-block-columns { align-items: stretch; }
	.mm-raster > .wp-block-column:last-child { position: relative; z-index: 2; }
	.mm-raster > .wp-block-column:first-child { position: relative; z-index: 1; }
	.mm-raster .mm-o-1 { margin-right: calc(-1 * var(--mm-ruimte)); padding-right: calc(var(--mm-ruimte) + var(--mm-vlak-binnen)); padding-left: 30%; min-height: clamp(300px, 26vw, 400px); }
	.mm-raster .mm-o-2 { min-height: clamp(400px, 38vw, 560px); }
	/* Het laatste vlak van beide kolommen groeit mee, zodat het raster onderaan
	   vlak afsluit en er naast de langste kolom geen gat overblijft. */
	.mm-raster > .wp-block-column > :last-child { flex-grow: 1; }
	/* Onderrij: de grijze vlakken onderaan, met dezelfde 18px eromheen als de rest */
	.mm-onderrij .mm-o-9 { margin-right: calc(-1 * var(--mm-ruimte)); padding-right: calc(var(--mm-ruimte) + var(--mm-vlak-binnen)); }
	.mm-onderrij > .wp-block-column:only-child .mm-o-9 { margin-right: 0; padding-right: var(--mm-vlak-binnen); }
}

/* Tot de schermrand doorlopen, alleen op brede schermen */
@media (min-width: 782px) {
	.mm-rand-links { margin-left: calc(-1 * (var(--mm-rand) - var(--mm-ruimte)) - var(--mm-ruimte)); padding-left: calc(var(--mm-rand) - var(--mm-ruimte) + var(--mm-vlak-binnen)); }
	.mm-rand-rechts { margin-right: calc(-1 * (var(--mm-rand) - var(--mm-ruimte)) - var(--mm-ruimte)); padding-right: calc(var(--mm-rand) - var(--mm-ruimte) + var(--mm-vlak-binnen)); }
}
@media (max-width: 781px) {
	/* Mobiel: de twee kolommen vervallen, vlakken volgen de leesvolgorde uit de mm-o-*-klassen */
	.mm-raster.wp-block-columns { display: flex; flex-direction: column; }
	.mm-raster > .wp-block-column { display: contents; }
	.mm-o-1 { order: 1; } .mm-o-2 { order: 2; } .mm-o-3 { order: 3; } .mm-o-4 { order: 4; } .mm-o-5 { order: 5; }
	.mm-o-6 { order: 6; } .mm-o-7 { order: 7; } .mm-o-8 { order: 8; } .mm-o-9 { order: 9; } .mm-o-10 { order: 10; }
	.mm-vlak, .mm-vlak.mm-rechts { text-align: center; }
	.mm-vlak > *, .mm-vlak.mm-rechts > * { margin-inline: auto; }
	.mm-vlak .wp-block-buttons, .mm-vlak.mm-rechts .wp-block-buttons { justify-content: center; }
}

/* ------------------------------------------------------------------------
 * Knoppen en lijsten
 * --------------------------------------------------------------------- */
.wp-block-button.is-style-pijl .wp-block-button__link {
	position: relative;
	background: none;
	color: var(--wp--preset--color--zwart);
	padding: 0 0 0 54px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	font-weight: 300;
}
.wp-block-button.is-style-pijl .wp-block-button__link::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 40px; height: 40px;
	transform: translateY(-50%);
	background: var(--wp--preset--color--grijs) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / 20px no-repeat;
	transition: background-color .2s;
}
.wp-block-button.is-style-pijl .wp-block-button__link:hover { background: none; text-decoration: underline; }
.wp-block-button.is-style-pijl .wp-block-button__link:hover::before { background-color: var(--wp--preset--color--wit); }
.wp-block-button.is-style-lijn .wp-block-button__link { background: none; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.wp-block-button.is-style-lijn .wp-block-button__link:hover { background: var(--wp--preset--color--zwart); color: var(--wp--preset--color--wit); }

.wp-block-list.is-style-kaal { list-style: none; padding-left: 0; }
.wp-block-list.is-style-cirkels { list-style: none; padding-left: 0; }
.wp-block-list.is-style-cirkels li { position: relative; padding-left: 28px; margin-bottom: 4px; }
.wp-block-list.is-style-cirkels li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; }


/* ------------------------------------------------------------------------
 * Blog: artikel en labels
 * --------------------------------------------------------------------- */

.wp-block-post-terms.is-style-labels { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; }
.wp-block-post-terms.is-style-labels .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms.is-style-labels a {
	background: rgba(215, 194, 144, .8);
	color: var(--wp--preset--color--zwart);
	padding: 2px 7px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Witte achtergrond: het artikel leest als gewone tekst op de pagina */
.mm-artikel { margin-block: var(--mm-ruimte) 0; padding: clamp(32px, 3.4vw, 48px) 0 clamp(32px, 3.4vw, 44px); }
/* Ritme in het artikel: kop dicht op zijn eigen tekst, ruimte ervóór */
.mm-artikel .wp-block-post-content :is(h2, h3) { margin-top: 1.5em; margin-bottom: .4em; line-height: 1.25; }
.mm-artikel .wp-block-post-content p { line-height: 1.75; }
.mm-artikel .wp-block-post-content > p:first-child { line-height: 1.6; margin-bottom: 1.3em; }
.mm-artikel .wp-block-post-content > p:first-child,
.mm-artikel .mm-intro-tekst { font-size: var(--wp--preset--font-size--intro); color: var(--wp--preset--color--tekst); }
.mm-artikel .wp-block-post-content a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------------
 * Footer: koperverloop, 4 kolommen, copyrightbalk
 * --------------------------------------------------------------------- */
.mm-footer { margin-top: clamp(36px, 22.6px + 3.43vw, 72px); color: var(--wp--preset--color--wit); }
.mm-footer a { color: var(--wp--preset--color--wit); }
.mm-footer a:hover { text-decoration: underline; }
.mm-footer :is(h2, h3, h4):not(.wp-block-post-title) { color: var(--wp--preset--color--wit); font-size: var(--wp--preset--font-size--klein); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.mm-footer p, .mm-footer li { font-size: 15px; line-height: 1.6; margin-bottom: .4em; }
.mm-footer li a { display: inline-block; padding-block: 5px; }
.mm-footer .wp-block-button__link { padding: 12px 22px; }
.mm-footer .wp-block-button.is-style-lijn .wp-block-button__link:hover { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--koper); }
.mm-footer .mm-logo img { width: 130px; }
.mm-footer__kolommen { gap: clamp(28px, 4vw, 54px); }
.mm-footer__blogs .wp-block-post-template { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.mm-footer__blogs .wp-block-post-template > li { margin: 0; }
.mm-footer__blogs .wp-block-post-date { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin: 0 0 2px; }
.mm-footer__blogs .wp-block-post-title { font-size: 15px; font-weight: 300; line-height: 1.4; margin: 0; }
.mm-footer__blogs .wp-block-post-title a { color: var(--wp--preset--color--wit); }
.mm-footer__balk { border-top: 1px solid rgba(255, 255, 255, .3); font-size: 13px; }
.mm-footer__balk p { font-size: 13px; margin: 0; }
/* Op mobiel staan de drie regels onder elkaar; gecentreerd zweven ze los van de
   kolommen erboven, dus lijnen ze links uit met de rest van de footer. */
@media (max-width: 781px) {
	.mm-footer__balk {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		text-align: left;
	}
}

/* ------------------------------------------------------------------------
 * Formulieren (Gravity Forms)
 *
 * Gravity Forms tekent zijn velden en knoppen met eigen --gf-variabelen op
 * .gform-theme--framework, en die stylesheet laadt NA de onze. Losse regels met
 * onze kleuren verliezen het daardoor: de knop bleef standaard blauw. Daarom
 * zetten we de variabelen zelf, op een selector met meer gewicht. Zo blijft de
 * rest van het formulierthema intact en is nergens !important nodig.
 * --------------------------------------------------------------------- */
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme.gform-theme--framework,
.gform_wrapper.gform-theme.gform-theme--framework .gform_fields,
.gform_wrapper.gform-theme.gform-theme--framework .gfield,
.gform_wrapper.gform-theme.gform-theme--framework :is(input, textarea, select, .gform-theme-field-control) {
	--gf-font-family-base: inherit;

	/* velden */
	--gf-ctrl-radius: 0;
	--gf-ctrl-size: 52px;
	--gf-ctrl-font-size: 16px;
	--gf-ctrl-bg-color: var(--wp--preset--color--wit);
	--gf-ctrl-border-color: var(--wp--preset--color--lijn);
	--gf-ctrl-border-color-hover: #c6bdb8;
	--gf-ctrl-border-color-focus: var(--wp--preset--color--accent);
	--gf-ctrl-border-color-error: var(--wp--preset--color--koper);

	/* ruimte tussen de velden: 40px is te luchtig voor vier velden onder elkaar */
	--gf-form-gap-y: 24px;
	--gf-form-gap-x: 16px;
	--gf-label-space-y-secondary: 6px;

	/* knop, gelijk aan de knoppen in de rest van de site */
	--gf-ctrl-btn-radius: 0;
	/* Gravity Forms kiest per knop een maatvariant (-sm, -md, -lg), dus die moeten
	   allemaal mee, anders blijft de knop op zijn standaardhoogte van 38px staan. */
	--gf-ctrl-btn-size: 52px;
	--gf-ctrl-btn-size-sm: 52px;
	--gf-ctrl-btn-size-md: 52px;
	--gf-ctrl-btn-size-lg: 52px;
	--gf-ctrl-btn-padding-x: 32px;
	--gf-ctrl-btn-padding-x-sm: 32px;
	--gf-ctrl-btn-padding-x-md: 32px;
	--gf-ctrl-btn-padding-x-lg: 32px;
	--gf-ctrl-btn-font-size: var(--wp--preset--font-size--klein);
	--gf-ctrl-btn-font-size-sm: var(--wp--preset--font-size--klein);
	--gf-ctrl-btn-font-size-md: var(--wp--preset--font-size--klein);
	--gf-ctrl-btn-font-size-lg: var(--wp--preset--font-size--klein);
	--gf-ctrl-btn-font-weight: 400;
	--gf-ctrl-btn-letter-spacing: .06em;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--accent);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--koper);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--koper);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-border-color-focus-primary: var(--wp--preset--color--koper);
}

.gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.gform_wrapper textarea,
.gform_wrapper select {
	font: inherit;
	font-size: 16px;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 0;
	padding: 12px 14px;
	background: var(--wp--preset--color--wit);
}
.gform_wrapper.gform-theme textarea,
.gform_wrapper.gform-theme select {
	border: 1px solid var(--wp--preset--color--lijn);
}
.gform_wrapper.gform-theme textarea:hover,
.gform_wrapper.gform-theme select:hover,
.gform_wrapper.gform-theme input:hover { border-color: #c6bdb8; }

.gform_wrapper.gform-theme textarea:focus,
.gform_wrapper.gform-theme select:focus,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	outline: 1px solid var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}
.gform_wrapper textarea { min-height: 160px; }

/* Labels rustig houden: het formulier is de inhoud, niet de opmaak eromheen. */
.gform_wrapper .gfield_label {
	font-weight: 400;
	font-size: 15px;
	margin-bottom: 8px;
}
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_text {
	color: var(--wp--preset--color--gedempt);
	font-size: 13px;
}
.gform_wrapper .gfield_description,
.gform_wrapper .gform_required_legend {
	color: var(--wp--preset--color--gedempt);
	font-size: 14px;
}
.gform_wrapper .gform_footer { margin-top: 24px; padding-top: 0; padding-bottom: 0; }
.gform_wrapper .gfield_description { margin-top: 6px; }

.gform_wrapper .gform_validation_errors {
	border-radius: 0;
	border-color: var(--wp--preset--color--koper);
}

/* De knopregel van Gravity Forms weegt vier klassen en laadt na ons, dus komt er
   een elementnaam bij om hem te verslaan. Hoofdletters en spatiëring lopen via de
   variabelen hierboven, de kleur en de vorm via deze regel. */
.gform_wrapper.gform-theme.gform-theme--framework .gform_footer button.gform_button,
.gform_wrapper.gform-theme.gform-theme--framework .gform_footer .gform_button,
.gform_wrapper.gform-theme .gform_footer .gform_button,
.gform_wrapper .gform_button,
.gform_wrapper input[type=submit] {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--wit);
	border: 0;
	border-radius: 0;
	padding: 14px 32px;
	font: inherit;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.gform_wrapper.gform-theme.gform-theme--framework .gform_footer button.gform_button:hover,
.gform_wrapper.gform-theme.gform-theme--framework .gform_footer .gform_button:hover,
.gform_wrapper.gform-theme .gform_footer .gform_button:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type=submit]:hover { background: var(--wp--preset--color--koper); }

:root {
	--mm-icoon-telefoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--mm-icoon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7.5 10 6 10-6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------
 * Telefoon- en mailicoon
 *
 * Als achtergrond met mask, zodat het icoon de tekstkleur volgt en er geen
 * extra HTML nodig is: elke tel:- of mailto:-link in de footer, de infovlakken
 * en de topbar krijgt hem vanzelf. Blijft dus ook staan als de klant de tekst
 * later aanpast.
 * --------------------------------------------------------------------- */
:is(.mm-footer, .mm-vlak, .mm-praktijkkaart, .mm-contact) a[href^="tel:"]::before,
:is(.mm-footer, .mm-vlak, .mm-praktijkkaart, .mm-contact) a[href^="mailto:"]::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 8px;
	vertical-align: -2px;
	background-color: currentColor;
	opacity: .85;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
:is(.mm-footer, .mm-vlak, .mm-praktijkkaart, .mm-contact) a[href^="tel:"]::before {
	-webkit-mask-image: var(--mm-icoon-telefoon);
	mask-image: var(--mm-icoon-telefoon);
}
:is(.mm-footer, .mm-vlak, .mm-praktijkkaart, .mm-contact) a[href^="mailto:"]::before {
	-webkit-mask-image: var(--mm-icoon-mail);
	mask-image: var(--mm-icoon-mail);
}

/* ------------------------------------------------------------------------
 * Topbar
 *
 * Smalle balk boven de header met de praktijkregel en de contactgegevens.
 * Zit binnen het sticky headerblok, dus hij blijft bij het scrollen staan.
 * Op mobiel verborgen: daar staan telefoon en afspraak al in de balk en het menu,
 * en de regel zou over twee regels breken.
 * --------------------------------------------------------------------- */
.mm-topbar {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--gedempt);
	border-bottom: 1px solid var(--wp--preset--color--lijn);
	font-size: 13px;
	line-height: 1.4;
}
.mm-topbar > .wp-block-group,
.mm-topbar__binnen { max-width: min(1200px, calc(100vw - 36px)) !important; }
.mm-topbar__binnen {
	gap: 24px;
	padding-block: 9px;
	align-items: center;
}
.mm-topbar p { margin: 0; font-size: 13px; }
.mm-topbar__contact { display: flex; gap: 22px; align-items: center; }
.mm-topbar a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit;
	text-decoration: none;
}
.mm-topbar a:hover { color: var(--wp--preset--color--accent); }
.mm-topbar a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.mm-topbar__icoon {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--wp--preset--color--accent);
}

@media (max-width: 860px) {
	.mm-topbar { display: none; }
}

/* ------------------------------------------------------------------------
 * Afsluitende oproep met beeld (twee varianten, in beoordeling)
 * --------------------------------------------------------------------- */

/* A: foto over de volle breedte, tekst eroverheen. */
.mm-cta--beeld { margin-top: 18px; }
.mm-cta--beeld :is(h2, p) { color: var(--wp--preset--color--wit); }
.mm-cta--beeld .wp-block-button__link {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--tekst);
}
.mm-cta--beeld .wp-block-button__link:hover {
	background: var(--wp--preset--color--perzik);
	color: var(--wp--preset--color--tekst);
}

/* B: beeld links, oproep rechts. Het beeld vult zijn kolom volledig; een img met
   height:100% in een rij die zelf meegroeit valt terug op zijn eigen hoogte, dus
   absoluut positioneren binnen een kader. */
.mm-cta--duo { margin-top: 18px; align-items: stretch; }
.mm-cta--duo .wp-block-column { display: flex; }
.mm-cta--duo .mm-cta__beeld {
	position: relative;
	margin: 0;
	width: 100%;
	min-height: 320px;
	overflow: hidden;
}
.mm-cta--duo .mm-cta__beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mm-cta--duo .mm-cta__tekst {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 4vw, 48px);
}
.mm-cta--duo .mm-cta__tekst :is(h2, p) { text-align: center; color: var(--wp--preset--color--tekst); }
.mm-cta--duo .mm-cta__tekst h2 { margin-bottom: 8px; }
.mm-cta--duo .mm-cta__tekst .wp-block-buttons { justify-content: center; }

@media (max-width: 781px) {
	.mm-cta--duo .mm-cta__beeld { min-height: 220px; }
}

/* ------------------------------------------------------------------------
 * 404
 * --------------------------------------------------------------------- */
/* 404: evenveel lucht boven het vlak als eronder naar de footer. WordPress zet de
   bovenmarge van het eerste blok met !important op 0, vandaar ook hier. */
.mm-404 { margin-top: clamp(36px, 22.6px + 3.43vw, 72px) !important; }
/* 404: onderregel iets losser van de kop */
.mm-404 .wp-block-heading { margin-bottom: 10px; }
.mm-404 .has-intro-font-size { color: var(--wp--preset--color--tekst); margin-bottom: clamp(22px, 2.4vw, 30px); }
.mm-404 .wp-block-search__input { border: 1px solid #cfcfcf; border-radius: 0; padding: 12px 14px; font: inherit; }
.mm-404 .wp-block-search__button { border-radius: 0; }

/* Logo wit in de footer */
.mm-logo--wit img { filter: brightness(0) invert(1); }

/* ------------------------------------------------------------------------
 * Reviews (Trustindex)
 * --------------------------------------------------------------------- */
.mm-reviews { margin-block: var(--mm-ruimte) 0; padding: clamp(36px, 29.3px + 1.71vw, 54px) var(--mm-vlak-binnen); }
/* Is dit de laatste sectie, dan geeft de marge boven de footer al ruimte: eigen binnenruimte eronder weg */
.mm-reviews:last-child { padding-bottom: 0; }
.mm-reviews .wp-block-heading { margin-bottom: clamp(24px, 2.6vw, 36px); }
/* Trustindex zet zelf marges om de widget; die halen we weg zodat boven en onder gelijk is */
.mm-reviews .ti-widget,
.mm-reviews .ti-widget-container { margin: 0 !important; }
.mm-reviews .ti-widget .ti-footer { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* ------------------------------------------------------------------------
 * Tegels: volgende stap naar de doelgroeppagina's
 * --------------------------------------------------------------------- */
.mm-vlak .mm-tegels.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-ruimte);
	margin-top: clamp(24px, 2.6vw, 36px);
	width: 100%;
	max-width: none;
	text-align: left;
}
.mm-vlak .mm-tegels .wp-block-column { display: flex; flex: 1 1 240px; min-width: 0; }
.mm-tegel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: none;
	padding: clamp(20px, 2.2vw, 28px);
	transition: transform .2s ease;
}
.mm-tegel:hover { transform: translateY(-3px); }
.mm-tegel .wp-block-heading { margin: 0; }
.mm-tegel .wp-block-heading a { color: var(--wp--preset--color--accent); text-decoration: none; }
.mm-tegel p { margin: 0; color: var(--wp--preset--color--tekst); }
.mm-tegel__pijl { margin-top: auto !important; padding-top: 12px; }
.mm-tegel__pijl a { color: var(--wp--preset--color--zwart); text-decoration: none; font-size: var(--wp--preset--font-size--klein); letter-spacing: .04em; text-transform: uppercase; }
.mm-tegel:hover .mm-tegel__pijl a { text-decoration: underline; }
@media (max-width: 781px) {
	.mm-vlak .mm-tegels.wp-block-columns { flex-wrap: wrap; }
	.mm-tegel { text-align: center; }
	.mm-tegel__pijl { margin-top: 8px !important; }
}

/* ------------------------------------------------------------------------
 * Blogkaarten: homepage, blogoverzicht en de blogband op pagina’s
 * --------------------------------------------------------------------- */
/* Staat de band direct onder een hero, dan draagt de hero de kop en houdt de
   band alleen de 18px naad boven en de 72px naar de footer eronder. */
.mm-hero + .mm-blogband { padding-top: 0; }
/* Sluit de band de pagina af, dan draagt de vaste 72px naar de footer de
   ruimte; eigen padding eronder zou daar bovenop komen. */
.mm-blogband:last-child { padding-bottom: 0; }
/* Geen ruimte opzij: de kaarten lopen tot de rand van de wrapper, gelijk met
   de hero en met het blokkenraster op de pagina's. */
.mm-blogband,
.mm-blogs-home { margin-block: var(--mm-ruimte) 0; padding: clamp(36px, 29.3px + 1.71vw, 54px) 0; }
.mm-blogband > .wp-block-heading,
.mm-blogs-home > .wp-block-heading { margin-bottom: 6px; }
.mm-blogband > .has-intro-font-size,
.mm-blogs-home > .has-intro-font-size {
	color: var(--wp--preset--color--gedempt);
	/* WordPress zet de lettergrootte van zijn eigen klasse met !important, vandaar ook hier */
	font-size: 16px !important;
	font-weight: 300;
	margin-bottom: clamp(28px, 3vw, 40px);
}
.mm-blogband > .wp-block-buttons,
.mm-blogs-home > .wp-block-buttons { margin-top: clamp(24px, 2.4vw, 36px); }
.mm-blogkaarten2 .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Zelfde naad als het blokkenraster en de tegels: overal 18px */
	gap: var(--mm-ruimte);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 900px) {
.mm-blogkaarten2 .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
.mm-blogkaarten2 .wp-block-post-template { grid-template-columns: 1fr; } }
.mm-blogkaart2 {
	/* De titel-link ligt over de hele kaart, zie hieronder */
	position: relative;
	/* Rondom evenveel ruimte: opzij, boven de datum en onder de pijl */
	--mm-kaart-ruimte: clamp(20px, 1.7vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	background: var(--wp--preset--color--roze);
	transition: background-color .25s, transform .25s;
}
.mm-blogkaart2:hover { background: var(--wp--preset--color--taupe); transform: translateY(-4px); }
.mm-blogkaart2 > :not(.wp-block-post-featured-image) { padding-inline: var(--mm-kaart-ruimte); }
/* De flex-gap van 10px telt mee boven de datum, die trekken we er hier af */
.mm-blogkaart2 > .wp-block-post-date { padding-top: calc(var(--mm-kaart-ruimte) - 10px); }
.mm-blogkaart2 > .mm-blogkaart2__pijl { padding-bottom: var(--mm-kaart-ruimte); }
.mm-blogkaart2 .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.mm-blogkaart2 .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mm-blogkaart2:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.mm-blogkaart2 .wp-block-post-date { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--gedempt); }
.mm-blogkaart2 .wp-block-post-title { margin: 0; font-weight: 200; line-height: 1.25; }
.mm-blogkaart2 .wp-block-post-title a { color: var(--wp--preset--color--zwart); }
/* Hele kaart aanklikbaar: één link, over de kaart heen gelegd */
.mm-blogkaart2 .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.mm-blogkaart2:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }
.mm-blogkaart2 .wp-block-post-excerpt { margin: 0; }
.mm-blogkaart2 .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--tekst); font-size: 16px; line-height: 1.55; }
.wp-block-query-pagination {
	margin-top: clamp(28px, 3vw, 40px);
	gap: 6px;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers { color: var(--wp--preset--color--gedempt); padding: 8px 10px; text-decoration: none; }
.wp-block-query-pagination a:hover { color: var(--wp--preset--color--accent); }
.wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--zwart); border-bottom: 1px solid var(--wp--preset--color--accent); }
.mm-blogkaart2__pijl { margin: auto 0 0 !important; padding-top: 6px; font-size: var(--wp--preset--font-size--klein); letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------------------
 * Praktisch, veelgestelde vragen en de afsluiter op de homepage
 * --------------------------------------------------------------------- */
.mm-praktisch-band { margin-block: var(--mm-ruimte) 0; padding: clamp(36px, 29.3px + 1.71vw, 54px) var(--mm-vlak-binnen); }
.mm-praktisch-band > .wp-block-heading { margin-bottom: clamp(24px, 2.6vw, 36px); }
.mm-praktisch.wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--mm-ruimte); }
.mm-praktisch > .wp-block-column { display: flex; flex: 1 1 260px; min-width: 0; }
.mm-praktisch__kaart { width: 100%; padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 6px; }
.mm-praktisch__kaart .wp-block-heading { margin: 0 0 6px; color: var(--wp--preset--color--accent); }
.mm-praktisch__kaart p { margin: 0; }

.mm-faq { margin-block: var(--mm-ruimte) 0; padding: clamp(10px, 7px + 0.76vw, 18px) var(--mm-vlak-binnen); }
.mm-faq > .wp-block-heading { margin-bottom: clamp(16px, 1.8vw, 24px); }
.mm-faq .wp-block-details {
	background: var(--wp--preset--color--grijs);
	border: 0;
	padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
	margin-bottom: 12px;
	transition: background-color .2s;
}
.mm-faq .wp-block-details:last-of-type { margin-bottom: 0; }
.mm-faq .wp-block-details:hover { background: var(--wp--preset--color--perzik); }
.mm-faq .wp-block-details[open] { background: var(--wp--preset--color--perzik); }
.mm-faq .wp-block-details summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--kop-4);
	font-weight: 200;
	list-style: none;
	position: relative;
	padding-right: 40px;
}
.mm-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.mm-faq .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--accent);
	font-size: 20px;
	font-weight: 200;
	line-height: 1;
}
.mm-faq .wp-block-details[open] summary { color: var(--wp--preset--color--accent); }
.mm-faq .wp-block-details[open] summary::after { content: "–"; }
.mm-faq .wp-block-details p { margin: 12px 0 0; color: var(--wp--preset--color--tekst); }

/* Perzik in plaats van grijs: de oproep staat vaak onder een grijs vlak en
   moet zich daarvan losmaken. */
.mm-afsluiter { margin-block: var(--mm-ruimte) 0; padding: clamp(40px, 32px + 2vw, 64px) var(--mm-vlak-binnen); background: var(--wp--preset--color--perzik); text-align: center; }
.mm-afsluiter .wp-block-heading { margin-bottom: 8px; }
.mm-afsluiter .has-intro-font-size { color: var(--wp--preset--color--tekst); margin-bottom: clamp(20px, 2.4vw, 28px); }

/* ------------------------------------------------------------------------
 * Advertentiepagina (landingspagina zonder menu)
 * --------------------------------------------------------------------- */
.mm-adv-hero.wp-block-cover { min-height: max(520px, 70vh); padding: clamp(48px, 6vw, 96px) var(--mm-vlak-binnen); }
.mm-adv-hero :is(h1, p) { color: var(--wp--preset--color--wit); text-align: center; }
.mm-adv-hero .wp-block-button__link { background: var(--wp--preset--color--goud); color: var(--wp--preset--color--zwart); }
.mm-adv-hero .wp-block-button__link:hover { background: var(--wp--preset--color--wit); }

.mm-adv-blok { padding: clamp(48px, 5.5vw, 88px) var(--mm-vlak-binnen); }
.mm-adv-blok > .wp-block-heading { margin-bottom: 10px; }
.mm-adv-blok > .has-intro-font-size { color: var(--wp--preset--color--tekst); text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 3vw, 44px); }
.mm-adv-rij.wp-block-columns { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); margin-bottom: clamp(20px, 3vw, 40px); }
.mm-adv-rij > .wp-block-column { display: flex; flex: 1 1 280px; min-width: 0; }
.mm-adv-klacht, .mm-adv-uitleg__kaart, .mm-adv-ervaring { width: 100%; }
.mm-adv-klacht .wp-block-heading, .mm-adv-uitleg__kaart .wp-block-heading { color: var(--wp--preset--color--accent); margin: 0 0 6px; }
.mm-adv-klacht p, .mm-adv-uitleg__kaart p { margin: 0; }
.mm-adv-icoon { margin: 0 0 10px; }
.mm-adv-icoon img { width: 44px; height: auto; }

.mm-adv-formulier.wp-block-cover { padding: clamp(48px, 5.5vw, 88px) var(--mm-vlak-binnen); }
.mm-adv-formulier :is(h2, p) { color: var(--wp--preset--color--wit); text-align: center; }
.mm-adv-formulier .gform_wrapper { margin-top: 28px; }
.mm-adv-formulier .gform_wrapper .gfield_label { color: var(--wp--preset--color--wit); }
.mm-adv-formulier .gform_wrapper .gform_button { background: var(--wp--preset--color--goud); color: var(--wp--preset--color--zwart); }
.mm-adv-formulier .gform_wrapper .gform_button:hover { background: var(--wp--preset--color--wit); }

.mm-adv-ervaring { display: flex; flex-direction: column; gap: 4px; }
.mm-adv-portret { margin: 0 0 8px; }
.mm-adv-portret img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; }
.mm-adv-ervaring .wp-block-heading { margin: 0; }
.mm-adv-ervaring .has-label-font-size { letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--gedempt); margin: 0 0 6px; }
.mm-adv-ervaring p:last-child { margin: 0; font-style: italic; }

.mm-adv-voet { padding: 28px var(--mm-vlak-binnen); }
.mm-adv-voet p, .mm-adv-voet a { color: var(--wp--preset--color--wit); margin: 0; }

/* Geen ruimte opzij: de inhoud lijnt uit met de hero en met de wrapper, net als
   het blokkenraster en de blogkaarten. */
.mm-paginabody { padding: clamp(28px, 3vw, 44px) 0 clamp(40px, 4vw, 64px); }

/* ------------------------------------------------------------------------
 * Contactpagina
 * --------------------------------------------------------------------- */
.mm-contact-intro { margin-top: 10px; margin-bottom: clamp(20px, 2.2vw, 28px); color: var(--wp--preset--color--tekst); }
.mm-contact.wp-block-columns { display: flex; flex-wrap: wrap; gap: clamp(28px, 3.4vw, 54px); margin-top: clamp(28px, 3vw, 44px); }
.mm-contact > .wp-block-column { min-width: 0; }
.mm-contact > .wp-block-column:first-child { flex: 1 1 340px; }
.mm-contact > .wp-block-column:last-child { flex: 1 1 280px; }
.mm-contact .wp-block-heading { margin-bottom: 18px; }
.mm-contactkaart { padding: clamp(22px, 2.4vw, 30px); }
.mm-contactkaart .wp-block-heading { color: var(--wp--preset--color--accent); margin-bottom: 10px; }
.mm-contactkaart p { margin-bottom: 12px; }
.mm-contactkaart p:last-child { margin-bottom: 0; }
.mm-contactkaart a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mm-kaart { margin-top: clamp(36px, 4vw, 60px); }
.mm-kaart__frame { line-height: 0; background: var(--wp--preset--color--grijs); }
.mm-kaart__frame iframe { display: block; width: 100%; height: clamp(280px, 34vw, 420px); filter: grayscale(18%); }
/* Links in een hero staan op een donkere foto: wit met onderlijn leest beter */
.mm-hero a { color: var(--wp--preset--color--wit); text-decoration: underline; text-underline-offset: 3px; }
.mm-kaart > p { margin-top: 14px; }
/* De kaart loopt over de volle schermbreedte en sluit aan op de footer */
/* WordPress centreert blokken in een constrained layout met margin: auto !important,
   vandaar dat de uitbraak naar de schermrand hier ook !important nodig heeft. */
.mm-kaart--vol { max-width: none; margin-top: clamp(20px, 2vw, 28px);
	margin-inline: calc(-1 * var(--mm-rand)) !important; }
.mm-kaart--vol iframe { height: clamp(300px, 30vw, 420px); }
body.page-template-page-contact .mm-paginabody { padding-bottom: 0; margin-bottom: 0; }
/* De kaart sluit aan op de footer: ook de blockGap onder main eraf */
body.page-template-page-contact .wp-site-blocks > main { margin-bottom: 0; }
body.page-template-page-contact .mm-footer { margin-top: 0; }

/* Op een telefoon voldoende groot om aan te tikken */
@media (max-width: 781px) {
	.mm-footer a,
	.mm-footer li a,
	.mm-footer__blogs .wp-block-post-title a { display: inline-block; padding-block: 9px; }
	.mm-footer .wp-block-button__link { padding-block: 14px; }
	.mm-blogkaart2 .wp-block-post-title a { display: inline-block; padding-block: 8px; }
	.mm-contactkaart a,
	.mm-kaart a { display: inline-block; padding-block: 8px; }
	.wp-block-post-terms.is-style-labels a { padding: 5px 9px; }
	.mm-tegel__pijl a, .mm-blogkaart2__pijl { display: inline-block; padding-block: 6px; }
}


/* ------------------------------------------------------------------------
 * Onder een artikel: delen en de auteur
 * --------------------------------------------------------------------- */
.mm-artikelvoet { margin-block: 0; }
.mm-deel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block: clamp(20px, 2.2vw, 28px); border-block: 1px solid var(--wp--preset--color--lijn); }
.mm-deel__label { font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--gedempt); }
.mm-deel__knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-deel__knop { padding: 7px 14px; border: 1px solid var(--wp--preset--color--lijn); font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--tekst); text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.mm-deel__knop:hover { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--wit); }

.mm-auteur { display: flex; gap: clamp(18px, 2.2vw, 28px); align-items: center; margin-top: clamp(24px, 2.6vw, 36px); padding: clamp(22px, 2.4vw, 30px); }
.mm-auteur__foto { margin: 0; flex: 0 0 auto; }
.mm-auteur__foto img { width: clamp(84px, 9vw, 108px); height: clamp(84px, 9vw, 108px); border-radius: 50%; object-fit: cover; object-position: 50% 30%; display: block; }
.mm-auteur__tekst > * { margin-block: 0; }
.mm-auteur__label { font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--gedempt); }
.mm-auteur__tekst .wp-block-heading { margin-block: 2px 6px; }
.mm-auteur__tekst p:not(.mm-auteur__label):not(.mm-auteur__link) { font-size: 16px; line-height: 1.6; }
.mm-auteur__link { margin-top: 8px; font-size: var(--wp--preset--font-size--klein); letter-spacing: .05em; text-transform: uppercase; }
.mm-auteur__link a { color: var(--wp--preset--color--accent); text-decoration: none; }
.mm-auteur__link a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
	.mm-auteur { flex-direction: column; align-items: flex-start; text-align: left; }
}