/* =========================================================================
   HENK BOVEE HORST – klant-overrides bovenop MM Basis
   -------------------------------------------------------------------------
   Het ontwerp wijkt op een paar punten af van de standaard van MM Basis:
   1. Donkere site: zwart/donkerrood als basis, crème panelen (afgeronde vlakken)
   2. Header ligt transparant over de hero, logo in het midden van het hoofdmenu
   3. Pilvormige knoppen; kaarten/tegels met een pil-knop over de onderrand van de foto
   4. Sliders met pijltjes en bolletjes linksboven, beeldmerk "HB" rechts naast de kop
   5. FAQ in twee kolommen, reviews gecentreerd, CTA als crème paneel over de footer
   Kleuren en maten komen uit tokens.css; zie de oplevernotitie voor kandidaten voor MM Basis.
   ========================================================================= */

/* ---------- 0. Sectie-tokens: voor- en achtergrondkleur per vlak ---------- */
:root, .mm-bg-white, .mm-imgtext--light { --hbh-bg: var(--hbh-black); --hbh-fg: var(--hbh-cream); }
.mm-bg-dark, .mm-imgtext--dark, .mm-cta--dark, .mm-hero, .mm-footer, .mm-topbar { --hbh-bg: var(--hbh-darkred); --hbh-fg: var(--hbh-cream); }
/* Crème panelen: donkere tekst */
.mm-bg-grey > .mm-container, .mm-imgtext--grey .mm-imgtext__grid, .mm-cta--grey .mm-cta__inner {
	--hbh-bg: var(--hbh-cream);
	--hbh-fg: var(--hbh-black);
	--mm-black: var(--hbh-black);
	--mm-text: var(--hbh-black);
	--mm-text-muted: #3b302b;
	--mm-grey: #3b302b;
	--mm-heading: var(--hbh-black);
	--mm-line: rgba(12, 10, 0, .18);
	--mm-grey-mid: rgba(12, 10, 0, .5);
	--mm-link: #B81E25;
	color: var(--hbh-black);
}
body { position: relative; font-variation-settings: var(--mm-font-variation); }
:root { --hbh-topbar-offset: 0px; --hbh-panel-pad: clamp(1.5rem, 5.5vw, 4.5rem); }
body:has(.mm-topbar) { --hbh-topbar-offset: var(--mm-topbar-height); }
html { scroll-padding-top: calc(var(--mm-header-height) + 1rem); }

/* ---------- 1. Basis en typografie ---------- */
strong, b { font-weight: 650; }
.mm-bg-dark, .mm-hero, .mm-imgtext--dark, .mm-imgtext--light, .mm-cta--dark, .mm-contact__card { color: var(--hbh-cream); }
.mm-bg-dark p, .mm-bg-dark .mm-text-muted, .mm-imgtext--dark .mm-imgtext__text, .mm-hero__text { color: var(--hbh-cream-muted); }
.mm-imgtext--light { background: var(--hbh-black); }
.mm-prose a, .mm-imgtext__text a { color: inherit; text-decoration-color: var(--hbh-red); }
.mm-prose a:hover, .mm-imgtext__text a:hover { color: var(--hbh-red); }
.mm-kicker__slash { display: none; }

/* Lijsten in teksten: rode vinkjes */
.mm-imgtext__text ul, .mm-prose ul { list-style: none; padding-left: 0; }
.mm-imgtext__text ul li, .mm-prose ul li { position: relative; padding-left: 2.1rem; margin-bottom: .7rem; }
.mm-imgtext__text ul li::before, .mm-prose ul li::before {
	content: ""; position: absolute; left: 0; top: .42em; width: 1.05rem; height: .85rem; background: var(--hbh-red);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 16'%3E%3Cpath d='M2 8.5l5.6 5.5L19 2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 16'%3E%3Cpath d='M2 8.5l5.6 5.5L19 2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Tabellen (openingstijden) */
.mm-text .mm-prose h2 { font-size: var(--mm-fs-title); }
.mm-prose table { max-width: 30rem; font-size: var(--mm-fs-base); }
.mm-prose th, .mm-prose td { border: 0; border-bottom: 1px solid var(--mm-line); padding: .7rem 0; }
.mm-prose th { background: none; font-weight: 650; color: var(--hbh-red-text); }

/* ---------- 2. Knoppen: pilvorm, zonder pijl ---------- */
.mm-btn { min-height: 2.75rem; padding: .7em 1.6em; font-weight: 600; font-size: var(--mm-fs-sm); letter-spacing: 0; }
.mm-btn::before { border-width: 1px; }
.mm-btn:hover::before, .mm-btn:focus-visible::before { transform: none; }
.mm-btn .mm-arrow { display: none; }
.mm-btn--secondary, .mm-btn--secondary-light { --btn-bg: transparent; --btn-fg: var(--hbh-fg); --btn-border: var(--hbh-fg); }
.mm-btn--secondary:hover, .mm-btn--secondary-light:hover { --btn-bg: var(--hbh-fg); --btn-fg: var(--hbh-bg); --btn-border: var(--hbh-fg); }
.mm-buttons { gap: .9rem 1.1rem; margin-top: 2.25rem; }

/* Pil over de onderrand van een foto (kaarten en tegels) */
.mm-card .mm-link, .mm-slider__caption .mm-link {
	order: -1; align-self: center; position: relative; z-index: 1;
	min-height: 2.4rem; margin: -1.2rem 0 0; padding: .45em 1.7em;
	background: var(--hbh-bg); color: var(--hbh-fg); border: 1px solid var(--hbh-fg); border-radius: 999px;
	font-size: var(--mm-fs-xs); font-weight: 600; justify-content: center;
	transition: background .2s var(--mm-ease), color .2s var(--mm-ease);
}
.mm-card .mm-link:hover, .mm-slider__caption .mm-link:hover { background: var(--hbh-fg); color: var(--hbh-bg); }
.mm-card .mm-link .mm-arrow, .mm-slider__caption .mm-link .mm-arrow { display: none; }

/* ---------- 3. Topbalk (secundair menu) met telefoon- en mailicoon ---------- */
.mm-topbar { position: relative; z-index: 101; font-size: var(--mm-fs-sm); font-weight: 600; }
.mm-topbar__inner { position: relative; justify-content: center; width: min(100% - 2 * var(--mm-gutter), var(--mm-container-wide)); }
.mm-topbar__list { gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.mm-topbar__list a:hover, .mm-topbar__list .current-menu-item > a { color: var(--hbh-red); text-decoration: none; }
.mm-topbar__list li:has(> a[href^="tel:"]), .mm-topbar__list li:has(> a[href^="mailto:"]) { position: absolute; top: 0; }
.mm-topbar__list li:has(> a[href^="tel:"]) { right: 2.6rem; }
.mm-topbar__list li:has(> a[href^="mailto:"]) { right: 0; }
.mm-topbar__list a[href^="tel:"], .mm-topbar__list a[href^="mailto:"], .mm-nav__secondary a[href^="tel:"], .mm-nav__secondary a[href^="mailto:"] {
	display: inline-flex; align-items: center; justify-content: center; width: 2rem; min-height: 2rem; font-size: 0; color: var(--hbh-red);
}
.mm-topbar__list a[href^="tel:"]::before, .mm-topbar__list a[href^="mailto:"]::before,
.mm-nav__secondary a[href^="tel:"]::before, .mm-nav__secondary a[href^="mailto:"]::before { content: ""; width: 1.3rem; height: 1.3rem; background: currentColor; }
.mm-topbar__list a[href^="tel:"]::before, .mm-nav__secondary a[href^="tel:"]::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.mm-topbar__list a[href^="mailto:"]::before, .mm-nav__secondary a[href^="mailto:"]::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm.8 2 8.2 6.2L20.2 7H3.8zM20 9.2l-8 6-8-6V17h16V9.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm.8 2 8.2 6.2L20.2 7H3.8zM20 9.2l-8 6-8-6V17h16V9.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- 4. Header: transparant over de hero, logo in het midden ---------- */
.mm-header, .admin-bar .mm-header { position: absolute; top: var(--hbh-topbar-offset); left: 0; right: 0; background: var(--mm-header-bg); box-shadow: none; }
.mm-header__inner { gap: 1rem; }
.mm-header .mm-container { width: min(100% - 2 * var(--mm-gutter), var(--mm-container-wide)); }
.mm-header__logo .mm-logo { display: block; }
.mm-nav__list a { color: var(--hbh-cream); font-weight: 600; font-size: .9375rem; border-bottom: 0; }
.mm-nav__list > li > a:hover, .mm-nav__list > li.current-menu-item > a, .mm-nav__list > li.current-menu-ancestor > a, .mm-nav__list > li.current_page_parent > a { color: var(--hbh-red); }
.mm-nav__list .sub-menu { background: var(--hbh-darkred); border-top-color: var(--hbh-red); border-radius: 0 0 var(--mm-radius) var(--mm-radius); }
.mm-nav__list .sub-menu a:hover, .mm-nav__list .sub-menu .current-menu-item > a { background: rgba(253, 241, 234, .08); }
.mm-header__cta { --btn-bg: transparent; --btn-fg: var(--hbh-cream); --btn-border: var(--hbh-cream); }
.mm-header__cta:hover { --btn-bg: var(--hbh-cream); --btn-fg: var(--hbh-black); --btn-border: var(--hbh-cream); }
.mm-burger span { background: var(--hbh-cream); }

@media (min-width: 1025px) {
	.mm-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
	.mm-header__logo { grid-column: 2; grid-row: 1; position: relative; z-index: 2; }
	.mm-nav { grid-column: 1 / -1; grid-row: 1; }
	.mm-header__actions { grid-column: 3; grid-row: 1; justify-self: end; position: relative; z-index: 2; }
	.mm-nav__list { gap: clamp(1.25rem, 2.6vw, 2.5rem); padding-right: clamp(12rem, 16vw, 15rem); }
	.mm-nav__list > li:nth-child(3) { margin-right: auto; } /* na het 3e menu-item staat het logo */
}
@media (max-width: 1024px) {
	.mm-topbar { display: none; }
	body:has(.mm-topbar) { --hbh-topbar-offset: 0px; }
	.mm-nav { inset: var(--mm-header-height) 0 0 0; background: var(--hbh-darkred); }
	.admin-bar .mm-nav { inset-block-start: calc(var(--mm-header-height) + 46px); }
	.mm-nav__list > li { border-bottom-color: var(--hbh-line); }
	.mm-submenu-toggle::before { border-color: var(--hbh-cream); }
	.mm-nav__mobile-extra { display: flex; }
	.mm-nav__mobile-extra .mm-btn { display: inline-flex; }
	.mm-nav__secondary { color: var(--hbh-cream); font-size: var(--mm-fs-md); gap: .5rem 1.5rem; }
	.mm-nav__secondary li:has(> a[href^="tel:"]), .mm-nav__secondary li:has(> a[href^="mailto:"]) { display: inline-flex; }
}
@media (max-width: 600px) { .mm-header__cta { display: none; } }

/* Moderne browsers: header blijft bovenin staan en krijgt bij scrollen een donkerrode achtergrond */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.mm-header, .admin-bar .mm-header {
			position: fixed;
			animation: hbh-header-bg linear both, hbh-header-top linear both;
			animation-timeline: scroll(root), scroll(root);
			animation-range: 0 14rem, 0 var(--hbh-topbar-offset);
		}
		.admin-bar .mm-header { margin-top: 32px; }
		@media (max-width: 782px) { .admin-bar .mm-header { margin-top: 46px; } }
	}
}
@keyframes hbh-header-bg { from { background-color: transparent; } to { background-color: var(--mm-header-bg-scrolled); box-shadow: 0 8px 30px rgba(0, 0, 0, .25); } }
@keyframes hbh-header-top { from { top: var(--hbh-topbar-offset); } to { top: 0; } }

/* Pagina zonder hero (bijv. 404): header in een donkerrode balk */
body:not(:has(.mm-hero)) .mm-main { padding-top: var(--mm-header-height); }
body:not(:has(.mm-hero)) .mm-header { background: var(--hbh-darkred); animation: none; }

/* Broodkruimels: niet tonen boven een eigen hero; elders rustig */
body.has-own-hero .mm-breadcrumbs { display: none; }
.mm-breadcrumbs { border-bottom-color: var(--hbh-line); }

/* ---------- 5. Hero ---------- */
.mm-hero { min-height: clamp(34rem, 92vh, 54rem); padding-top: calc(var(--hbh-topbar-offset) + var(--mm-header-height) + clamp(2rem, 5vw, 4rem)); padding-bottom: clamp(5rem, 11vw, 10rem); }
.mm-hero--medium { min-height: clamp(26rem, 62vh, 36rem); }
.mm-hero--compact { min-height: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.mm-hero__content { max-width: 36rem; }
.mm-hero__title { font-size: var(--mm-fs-h1); line-height: 1.1; margin-bottom: .45em; }
.mm-hero--medium .mm-hero__title, .mm-hero--compact .mm-hero__title { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); }
.mm-hero .mm-buttons { margin-top: 1.5rem; }
.mm-hero.no-image { background: var(--hbh-darkred); }

/* Introband: de foto steekt omhoog de hero in */
.mm-hero + .mm-imgtext.is-boxed { position: relative; z-index: 1; }
.mm-hero + .mm-imgtext.is-boxed .mm-imgtext__media { margin-top: calc(-1 * clamp(4.5rem, 12vw, 11rem)); }
.mm-hero + .mm-imgtext.is-boxed .mm-imgtext__body { align-self: start; padding-top: clamp(0rem, 3vw, 3rem); }

/* ---------- 6. Afbeelding + tekst ---------- */
.mm-imgtext.is-boxed .mm-imgtext__grid { gap: clamp(2rem, 7vw, 6.5rem); align-items: center; }
.mm-imgtext.is-boxed .mm-imgtext__media { border-radius: var(--mm-radius); }
.mm-imgtext__title { font-size: var(--mm-fs-title); line-height: 1.18; margin-bottom: 1.1em; }
.mm-imgtext__content { max-width: 31rem; }
.mm-imgtext__highlight { font-size: var(--mm-fs-base); font-weight: 650; line-height: 1.7; }
.mm-imgtext .mm-imgtext__media.has-collage { margin-inline: 4%; }

/* Crème paneel (Afbeelding + tekst met kleurstelling "Crème") */
.mm-imgtext--grey { background: transparent; }
.mm-imgtext--grey .mm-imgtext__grid {
	width: min(100% - 2 * var(--mm-gutter), var(--mm-container) + 2 * var(--hbh-panel-pad));
	padding: clamp(2.5rem, 6vw, 5rem) var(--hbh-panel-pad);
	background: var(--hbh-cream); border-radius: var(--mm-radius-panel);
}

/* ---------- 7. Panelen (crème = "Lichtgrijs"; donkerrood bij USP-blokken) ---------- */
.mm-bg-grey, .mm-usps.mm-bg-dark { background: transparent; }
.mm-bg-grey > .mm-container, .mm-usps.mm-bg-dark > .mm-container {
	position: relative;
	width: min(100% - 2 * var(--mm-gutter), var(--mm-container) + 2 * var(--hbh-panel-pad));
	padding: clamp(2.5rem, 6vw, 5rem) var(--hbh-panel-pad);
	border-radius: var(--mm-radius-panel);
}
.mm-bg-grey > .mm-container { background: var(--hbh-cream); }
.mm-usps.mm-bg-dark > .mm-container { background: var(--hbh-darkred); }
/* Paneel over de overgang donkerrood → zwart (zoals in het ontwerp) */
:is(.mm-bg-dark:not(.mm-usps), .mm-imgtext--dark, .mm-hero) + :is(.mm-bg-grey, .mm-imgtext--grey) { background: linear-gradient(var(--hbh-darkred) 50%, var(--hbh-black) 50%); }

/* ---------- 8. USP-blok als vinkjeslijst ---------- */
.mm-usps .mm-section-header { grid-template-columns: 1fr; }
.mm-usps .mm-section-header__title { font-size: var(--mm-fs-title); }
.mm-usps.mm-bg-dark .mm-section-header, .mm-usps.mm-bg-grey .mm-section-header { padding-right: 6rem; }
.mm-usps__grid { column-gap: clamp(2rem, 7vw, 6rem); row-gap: 2rem; }
.mm-usps__item, .mm-bg-white .mm-usps__item, .mm-bg-dark .mm-usps__item { position: relative; padding: 0 0 0 2.5rem; background: none; border: 0; border-radius: 0; }
.mm-usps__icon { position: absolute; left: 0; top: .15rem; width: 1.4rem; height: 1.4rem; margin: 0; background: none; color: var(--hbh-red); }
.mm-usps__icon .mm-icon { width: 1.4rem; height: 1.4rem; stroke-width: 2; transform: scale(1.75); }
.mm-usps__icon .mm-icon--check circle { display: none; }
.mm-usps__title { margin-bottom: .2rem; font-size: var(--mm-fs-base); font-weight: 650; letter-spacing: 0; }
.mm-usps__text, .mm-bg-dark .mm-usps__text { font-size: .9375rem; color: inherit; }
@media (min-width: 901px) {
	.mm-usps.mm-bg-dark > .mm-container::after, .mm-usps.mm-bg-grey > .mm-container::after {
		content: ""; position: absolute; right: var(--hbh-panel-pad); top: clamp(2.25rem, 5.5vw, 4.5rem);
		width: clamp(4rem, 6vw, 5.5rem); aspect-ratio: 1; background: url("../img/beeldmerk.svg") no-repeat center / contain;
	}
}

/* ---------- 9. Sectiekoppen, overzichten en sliders ---------- */
.mm-section-header { margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.mm-section-header__aside { color: var(--mm-text-muted); font-size: var(--mm-fs-base); }
.mm-overview .mm-section-header, .mm-slider-section .mm-section-header { grid-template-columns: 1fr; }
.mm-overview .mm-section-header__aside, .mm-slider-section .mm-section-header__aside { max-width: 40rem; padding: 0; }
.mm-slider-section .mm-section-header__title { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem); }
/* Beeldmerk "HB" rechts naast de kop */
.mm-overview:not(:has(.mm-overview__footer)) .mm-section-header, .mm-slider-section--slides .mm-section-header:has(.mm-section-header__title) { position: relative; padding-right: 7rem; }
.mm-overview:not(:has(.mm-overview__footer)) .mm-section-header::after, .mm-slider-section--slides .mm-section-header:has(.mm-section-header__title)::after {
	content: ""; position: absolute; right: 0; top: 0; width: clamp(3.5rem, 6vw, 5.5rem); aspect-ratio: 1;
	background: url("../img/beeldmerk-wit.svg") no-repeat center / contain;
}

/* Slider-bediening: links boven de slides */
.mm-slider { display: flex; flex-direction: column; }
.mm-slider .mm-slider__controls { order: -1; justify-content: flex-start; gap: .75rem; margin: 0 0 2.25rem; }
.mm-slider__btn, .mm-bg-dark .mm-slider__btn { width: 2.4rem; height: 2.4rem; border: 1px solid var(--hbh-cream); border-radius: 50%; color: var(--hbh-cream); background: transparent; transform: none; }
.mm-slider__btn > svg { transform: none; }
.mm-slider__btn--next, .mm-bg-dark .mm-slider__btn--next { background: var(--hbh-red); border-color: var(--hbh-red); }
.mm-slider__btn:hover, .mm-bg-dark .mm-slider__btn:hover { background: var(--hbh-cream); border-color: var(--hbh-cream); color: var(--hbh-black); }
.mm-slider__btn:disabled { opacity: .35; background: transparent; border-color: var(--hbh-cream); color: var(--hbh-cream); }
.mm-slider__dots { order: 2; margin-left: .75rem; gap: 0; }
.mm-slider__btn--next { order: 1; }
.mm-slider__dots button::before { width: .45rem; height: .45rem; background: rgba(253, 241, 234, .35); }
.mm-slider__dots button[aria-selected="true"]::before { background: var(--hbh-cream); }
/* Kaartenslider die in één beeld past: ruimte voor de knop rechts behouden */
.mm-slider--cards[data-single] .mm-slider__controls { display: flex; visibility: hidden; }
.mm-hero__slider .mm-slider__controls { order: 0; margin: 0 auto; }

/* Projectenslider met knop rechts boven */
@media (min-width: 801px) {
	.mm-overview:has(.mm-slider--cards) .mm-container { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
	.mm-overview:has(.mm-slider--cards) .mm-section-header { grid-column: 1 / -1; }
	.mm-overview:has(.mm-slider--cards) .mm-slider { grid-column: 1 / -1; grid-row: 2; }
	.mm-overview:has(.mm-slider--cards) .mm-overview__footer { grid-column: 2; grid-row: 2; align-self: start; margin: 0; position: relative; z-index: 1; }
}
.mm-overview__footer { margin-top: 2rem; }
.mm-filter__item { border-radius: 999px; border-color: var(--hbh-line); color: var(--hbh-cream); }
.mm-filter__item.is-active { color: var(--hbh-cream); }

/* Kaarten (projecten, vacatures) */
.mm-card__media { aspect-ratio: 9 / 7; border-radius: var(--mm-radius); background: #2a1916; }
.mm-card__body { padding: 0; }
.mm-card__title { margin: 1.5rem 0 .9rem; font-size: var(--mm-fs-title); }
.mm-card__title a:hover { color: var(--hbh-red); }
.mm-card__excerpt { max-width: 27rem; font-size: .9375rem; color: var(--mm-text-muted); }
.mm-card__label { display: none; }

/* Tegels Keukens/Badkamers (slider met links): verspringend, tekst gecentreerd */
.mm-slider-section--slides:has(.mm-slider__caption .mm-link) .mm-slider__track { gap: clamp(1rem, 2.5vw, 2rem); }
.mm-slider-section--slides:has(.mm-slider__caption .mm-link) .mm-slider__media { aspect-ratio: 9 / 7; }
.mm-slider__caption { align-items: center; text-align: center; gap: .6rem; padding-top: 0; color: var(--mm-text-muted); }
.mm-slider__caption strong { margin-top: 1.25rem; font-size: var(--mm-fs-title); font-weight: 600; color: var(--hbh-cream); }
.mm-slider__caption span { max-width: 17rem; font-size: .9375rem; }
@media (min-width: 901px) {
	.mm-slider-section--slides:has(.mm-slider__caption .mm-link) .mm-slider__slide:nth-child(odd) { padding-top: clamp(2rem, 5vw, 4.5rem); }
}
/* Fotosliders zonder links: alleen beeld (de titel van een slide is de alt-tekst) */
.mm-slider__caption:not(:has(.mm-link)) { display: none; }
.mm-slider__media { aspect-ratio: 9 / 7; border-radius: var(--mm-radius); background: #2a1916; }
.mm-slider--logos .mm-slider__media { aspect-ratio: 3 / 2; background: rgba(253, 241, 234, .06); }
.mm-slider--logos .mm-slider__media--text { color: var(--hbh-cream-muted); }

/* ---------- 10. Reviews ---------- */
.mm-reviews .mm-section-header { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.mm-reviews .mm-section-header__title { font-size: var(--mm-fs-title); }
.mm-review, .mm-bg-white .mm-review, .mm-bg-dark .mm-review { align-items: center; padding: 0 clamp(0rem, 2vw, 1.5rem); text-align: center; background: none; border: 0; box-shadow: none; }
.mm-review__stars { justify-content: center; gap: .4rem; margin-bottom: 1.5rem; }
.mm-review__stars .is-on { color: var(--hbh-star); }
.mm-review__stars .mm-icon { width: 1.3rem; height: 1.3rem; }
.mm-review__title { display: none; }
.mm-review__quote p:not(.mm-review__title), .mm-bg-dark .mm-review__quote p { color: var(--hbh-cream); font-size: .9375rem; }
.mm-review__author { justify-content: center; }
.mm-review__author strong { font-weight: 650; }

/* ---------- 11. FAQ in twee kolommen ---------- */
.mm-faq__inner { max-width: var(--mm-container); }
.mm-faq .mm-section-header__title { font-size: var(--mm-fs-title); }
.mm-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 8vw, 6.5rem); row-gap: 0; align-items: start; }
.mm-faq__item, .mm-bg-dark .mm-faq__item { border: 0; border-bottom: 1px solid var(--hbh-line); border-radius: 0; background: none; }
.mm-faq__question { padding: 1.5rem 0; font-size: .9375rem; font-weight: 650; }
.mm-faq__toggle { width: 1.75rem; height: 1.75rem; border: 1px solid var(--hbh-cream); border-radius: 50%; }
.mm-faq__toggle::before, .mm-faq__toggle::after { background: var(--hbh-cream); }
.mm-faq__toggle::before { width: 45%; height: 1.5px; }
.mm-faq__toggle::after { width: 1.5px; height: 45%; }
.mm-faq__answer { padding: 0 3rem 1.5rem 0; }
@media (max-width: 800px) { .mm-faq__list { grid-template-columns: 1fr; } }

/* ---------- 12. CTA als crème paneel over de overgang naar de footer ---------- */
.mm-cta--grey { overflow: visible; padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); background: linear-gradient(var(--hbh-black) 50%, var(--hbh-darkred) 50%); }
.mm-bg-dark:not(.mm-usps) + .mm-cta--grey, .mm-imgtext--dark + .mm-cta--grey { background: var(--hbh-darkred); }
.mm-cta--grey .mm-cta__inner {
	width: min(100% - 2 * var(--mm-gutter), var(--mm-container) + 2 * var(--hbh-panel-pad));
	padding: clamp(2.5rem, 5vw, 4.25rem) var(--hbh-panel-pad);
	background: var(--hbh-cream); border-radius: var(--mm-radius-panel);
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr) minmax(0, .7fr);
	grid-template-areas: "title text photo" "title action contact";
	column-gap: clamp(2rem, 5vw, 5rem); row-gap: 1.5rem; align-items: start;
}
.mm-cta--grey .mm-cta__body { display: contents; }
.mm-cta--grey .mm-cta__title { grid-area: title; margin: 0; font-size: var(--mm-fs-title); }
.mm-cta--grey .mm-cta__text { grid-area: text; max-width: none; }
.mm-cta--grey .mm-cta__action { grid-area: action; padding: 0; }
.mm-cta--grey .mm-cta__media { grid-area: photo; justify-self: end; align-self: start; width: clamp(8rem, 12vw, 10.5rem); margin: calc(-1 * clamp(4rem, 8vw, 6.5rem)) 0 0; }
.mm-cta--grey .mm-cta__media img { aspect-ratio: 1; width: 100%; max-height: none; object-fit: cover; border-radius: 50%; border: 4px solid var(--hbh-cream); }
.mm-cta--grey .mm-cta__person, .mm-cta--grey .mm-cta__contact { grid-area: contact; align-self: end; justify-self: end; margin: 0; text-align: right; font-weight: 650; }
.mm-cta--grey .mm-contact-list li { justify-content: flex-end; }
.mm-cta--grey .mm-contact-list .mm-icon { color: var(--hbh-red); }
.mm-cta .mm-contact-list a:hover { color: var(--hbh-red); }
.mm-cta--grey .mm-cta__action .mm-btn--secondary { order: -1; }
@media (max-width: 900px) {
	.mm-cta--grey .mm-cta__inner { grid-template-columns: 1fr; grid-template-areas: "photo" "title" "text" "action" "contact"; }
	.mm-cta--grey .mm-cta__media { justify-self: start; width: 7rem; }
	.mm-cta--grey .mm-cta__person, .mm-cta--grey .mm-cta__contact { justify-self: start; text-align: left; }
	.mm-cta--grey .mm-contact-list li { justify-content: flex-start; }
}

/* ---------- 13. Formulieren ---------- */
.mm-contact .mm-section-header__title { font-size: var(--mm-fs-title); color: var(--hbh-red); }
.mm-form input:not([type="checkbox"]), .mm-form select, .mm-form textarea {
	padding: .8rem 1.4rem; color: var(--hbh-cream); background: transparent; border: 1px solid var(--hbh-cream); border-radius: 999px;
}
.mm-form textarea { border-radius: var(--mm-radius); }
.mm-form select option { color: var(--hbh-black); }
.mm-form input:focus, .mm-form select:focus, .mm-form textarea:focus { border-color: var(--hbh-red); box-shadow: 0 0 0 2px var(--hbh-red); }
.mm-form__field label { font-weight: 600; }
.mm-form__check label { color: var(--hbh-cream-muted); }
.mm-alert--ok { background: rgba(31, 138, 76, .18); }
.mm-alert--error { background: rgba(224, 42, 48, .15); }
.mm-contact__card { border-radius: var(--mm-radius-panel); }
.mm-contact__card .mm-contact__who:has(strong:empty) { display: none; }
@media (min-width: 861px) {
	.mm-contact__grid:not(.has-details) .mm-contact__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(2rem, 7vw, 6.5rem); align-items: start; }
	.mm-contact__grid:not(.has-details) .mm-contact__form > * { grid-column: 2; }
	.mm-contact__grid:not(.has-details) .mm-contact__form > .mm-section-header { grid-column: 1; grid-row: 1 / span 6; }
}
/* Gravity Forms (Orbital-thema) in de huisstijl */
.mm-contact .gform-theme--framework, .mm-contact .gform_wrapper {
	--gf-color-primary: var(--hbh-red);
	--gf-color-primary-rgb: 224, 42, 48;
	--gf-color-primary-contrast: var(--hbh-cream);
	--gf-color-in-ctrl: var(--hbh-black);
	--gf-ctrl-bg-color: transparent;
	--gf-ctrl-color: var(--hbh-cream);
	--gf-ctrl-border-color: var(--hbh-cream);
	--gf-ctrl-label-color-primary: var(--hbh-cream);
	--gf-ctrl-label-color-secondary: var(--hbh-cream-muted);
	--gf-ctrl-desc-color: var(--hbh-cream-muted);
	--gf-ctrl-radius: 999px;
	--gf-ctrl-btn-radius: 999px;
	--gf-font-family-primary: var(--mm-font);
}
.mm-contact .gform_wrapper textarea { border-radius: var(--mm-radius); }
.mm-contact .gform_wrapper .gform_button { border-radius: 999px; background: var(--hbh-red); color: var(--hbh-cream); font-weight: 600; }

/* ---------- 14. Footer ---------- */
.mm-footer { padding-block: clamp(3.5rem, 7vw, 6.5rem) 2rem; }
.mm-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; align-items: start; border-bottom-color: var(--hbh-line); }
.mm-footer__grid > :nth-child(4) { order: 1; }
.mm-footer__grid > :nth-child(2) { order: 2; }
.mm-footer__grid > :nth-child(3) { order: 3; }
.mm-footer__brand .mm-logo img { height: clamp(2rem, 2.6vw, 2.75rem); }
.mm-footer .mm-footer__heading { color: var(--hbh-red-text); font-weight: 650; }
.mm-footer a:hover { color: var(--hbh-red); text-decoration: none; }
.mm-contact-list--footer li { gap: 0; }
.mm-contact-list--footer .mm-icon { display: none; }
.mm-contact-list--footer a[href^="mailto:"] { color: var(--hbh-red-text); font-weight: 650; }
.mm-socials a { width: 2rem; height: 2rem; border: 0; color: var(--hbh-red); }
.mm-socials a:hover { color: var(--hbh-cream); }
.mm-socials .mm-icon { width: 1.35rem; height: 1.35rem; }
@media (max-width: 900px) { .mm-footer__grid { grid-template-columns: 1fr 1fr; } .mm-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .mm-footer__grid { grid-template-columns: 1fr; } }