/*
Theme Name: Flowmasters
Theme URI: https://flowmasters.nl
Author: Coddin
Description: FSE-blokthema voor Flowmasters (verhuur van industriële slangen). Volledig Gutenberg-bewerkbaar; CPT's voor producten en artikelen, SCF voor extra velden, dynamische blokken voor query/SCF-gestuurde weergave. Ontwerp 1:1 uit het originele Base44-project.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flowmasters
Tags: full-site-editing, block-theme
*/

/*
 * De meeste opmaak komt uit theme.json en block styles. Hier staan alleen zaken
 * die daar niet kunnen: scroll-reveal begintoestand, sticky header, marquee,
 * gradient-tekst, hover-effecten en de opmaak van de dynamische blokken.
 * Bump FLOWMASTERS_VERSION in functions.php bij elke wijziging (cache-bust).
 */

img { max-width: 100%; height: auto; }

:root {
	--fm-primary: #273f45;
	--fm-primary-dark: #12292d;
	--fm-accent: #00a098;
	--fm-accent-dark: #008f88;
	--fm-bg: #f2f4f3;
	--fm-muted: #e8e8e8;
	--fm-muted-text: #5b6b6e;
	--fm-border: #cccccc;
	--fm-contrast: #212121;
	--fm-radius: 0.25rem;
	--fm-shadow: 0 20px 40px -15px rgba(0,0,0,0.12);
}

/* ---------- Scroll-reveal begintoestand ---------- */
html.dg-reveal-on .wp-block-post-content > *:not(.dg-in),
html.dg-reveal-on main.wp-block-group > .wp-block-group:not(.dg-in),
html.dg-reveal-on main .is-layout-grid > *:not(.dg-in),
html.dg-reveal-on main .wp-block-post-template > *:not(.dg-in),
html.dg-reveal-on main .fm-grid > *:not(.dg-in) {
	opacity: 0;
	transform: translateY(2rem);
}
@media (prefers-reduced-motion: reduce) {
	html.dg-reveal-on *:not(.dg-in) { opacity: 1 !important; transform: none !important; }
}

/* ---------- Sticky header ---------- */
.wp-site-blocks .site-header,
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow .3s ease, background-color .3s ease;
}
header.wp-block-template-part.is-scrolled {
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	backdrop-filter: blur(8px);
}

/* ---------- Header telefoon ---------- */
.fm-header-phone { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.85rem; color: var(--fm-contrast); text-decoration: none; }
.fm-header-phone:hover { color: var(--fm-accent); }
.fm-header-phone__icon { width: 2rem; height: 2rem; border-radius: 999px; background: var(--fm-muted); display: inline-flex; align-items: center; justify-content: center; color: var(--fm-accent); font-size: 0.9rem; }

/* Menu — tekst in accentkleur + underline die van links naar rechts inanimeert */
.site-header .wp-block-navigation-item__content { position: relative; color: var(--fm-contrast); text-decoration: none; transition: color .2s ease; }
.site-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 2px;
	background: #00a098;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s ease;
}
.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation-item__content[aria-current="page"] {
	color: #00a098;
}
.site-header .wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation-item__content:focus::after,
.site-header .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation-item__content::after { transition: none; }
}

/* ---------- Hero: knop (glas, full-width) ---------- */
.fm-hero-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	width: 100%; max-width: 22rem;
	border: 2px solid rgba(255,255,255,0.3);
	background: rgba(0,0,0,0.2);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	color: #fff; font-weight: 700; font-size: 1rem;
	padding: 1.15rem 2rem; border-radius: 0.25rem; text-decoration: none;
	transition: transform .3s ease, background-color .3s ease;
}
.fm-hero-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); color: #fff; }
/* Mobiel: rustige navbar (alleen logo + hamburger) en hero-knop vol-breed gecentreerd */
@media (max-width: 599px) {
	/* Alleen telefoon + "Huur direct" verbergen; de taalwisselaar blijft naast de hamburger staan */
	.fm-header-actions .fm-header-phone,
	.fm-header-actions .wp-block-buttons { display: none !important; }
	.fm-header-actions { gap: 0.5rem !important; order: 2 !important; }
	/* Hamburger uiterst rechts, vlag ervoor */
	.site-header .wp-block-navigation { order: 3 !important; }
	.fm-hero-btn { width: 80%; max-width: none; margin-left: auto; margin-right: auto; }
}

/* Telefoon + configurator-knop alleen in de mobiele overlay, niet in het inline-menu */
@media (min-width: 600px) {
	.fm-nav-phone, .fm-nav-cta { display: none !important; }
}

/* Mobiele hamburger-overlay als rechter paneel (hamburger verschijnt < 600px) */
@media (max-width: 599px) {
	/* Paneel altijd aanwezig, rechts off-screen — zodat open én sluiten kan animeren */
	.wp-block-navigation__responsive-container {
		display: block !important;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(22rem, 88vw);
		background-color: #fff !important;
		box-shadow: -20px 0 60px rgba(0,0,0,0.25);
		padding: 4.5rem 1.75rem 2rem !important;
		overflow-y: auto;
		z-index: 100;
		transform: translateX(100%);
		pointer-events: none;
		transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1) .5s; /* sluiten: wacht tot items zijn vervaagd */
		will-change: transform;
	}
	.wp-block-navigation__responsive-container.is-menu-open {
		left: auto;
		transform: translateX(0);
		pointer-events: auto;
		transition: transform .35s ease 0s; /* openen: schuift meteen in */
		animation: none !important;
	}

	/* Gefaseerd: items vervagen bij sluiten (eerst knoppen, dan links), verschijnen bij openen */
	.wp-block-navigation__responsive-container .wp-block-navigation-item {
		width: 100%;
		opacity: 0;
		transition-property: opacity;
		transition-duration: .22s;
		transition-timing-function: ease;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		opacity: 1;
	}
	/* Sluitknop (×) vast pinnen en mee laten faden i.p.v. abrupt verbergen */
	.wp-block-navigation__responsive-dialog { position: static !important; }
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
		display: block !important;
		position: absolute;
		top: 1.25rem;
		right: 1.25rem;
		z-index: 3;
		opacity: 0;
		transition: opacity .22s ease;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		opacity: 1;
	}
	/* Sluiten (basis-staat) — omgekeerde volgorde: laatste item (config-knop) eerst weg */
	.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-last-child(1) { transition-delay: 0s; }
	.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-last-child(2) { transition-delay: .05s; }
	.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-last-child(3) { transition-delay: .1s; }
	.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-last-child(4) { transition-delay: .15s; }
	.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-last-child(5) { transition-delay: .2s; }
	.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-last-child(6) { transition-delay: .25s; }
	.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-last-child(7) { transition-delay: .3s; }
	.wp-block-navigation__responsive-container .wp-block-navigation-item:nth-last-child(8) { transition-delay: .35s; }
	/* Openen — van boven naar beneden, nadat het paneel is ingeschoven */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { transition-delay: .18s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { transition-delay: .23s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { transition-delay: .28s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { transition-delay: .33s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { transition-delay: .38s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { transition-delay: .43s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(7) { transition-delay: .48s; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(8) { transition-delay: .53s; }
	/* Houd de witte achtergrond ook tijdens het sluiten (WP zet 'm anders op inherit) */
	.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
		background-color: #fff !important;
	}
	@media (prefers-reduced-motion: reduce) {
		.wp-block-navigation__responsive-container,
		.wp-block-navigation__responsive-container .wp-block-navigation-item { transition: none !important; }
		.wp-block-navigation__responsive-container .wp-block-navigation-item { opacity: 1; transform: none; }
	}
	.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
		width: 100% !important;
		padding: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation__container {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100% !important;
		gap: 1.5rem !important;
		padding-top: 0 !important;
	}
	.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 0;
		font-size: 1.2rem;
		font-weight: 700;
		color: var(--fm-contrast);
	}
	/* geen animerende underline in de overlay */
	.wp-block-navigation__responsive-container .wp-block-navigation-item__content::after { display: none; }

	/* Telefoon-blok */
	.wp-block-navigation__responsive-container .fm-nav-phone { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--fm-border); }
	.wp-block-navigation__responsive-container .fm-nav-phone .wp-block-navigation-item__content {
		background: rgba(0,160,152,0.1);
		color: var(--fm-accent) !important;
		border-radius: 0.5rem;
		padding: 1.5rem !important;
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.3;
		white-space: normal;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		gap: 0.75rem;
	}
	.wp-block-navigation__responsive-container .fm-nav-phone .wp-block-navigation-item__content::before {
		content: "";
		flex: none;
		width: 1.4em;
		height: 1.4em;
		background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a098' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	}
	/* Configurator-knop */
	.wp-block-navigation__responsive-container .fm-nav-cta { margin-top: 1rem; }
	.wp-block-navigation__responsive-container .fm-nav-cta .wp-block-navigation-item__content {
		background: var(--fm-accent);
		color: #fff !important;
		border-radius: 0.375rem;
		height: 3.5rem;
		padding: 0 1rem;
		font-size: 1.125rem;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		white-space: nowrap;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}
	.wp-block-navigation__responsive-container .fm-nav-cta .wp-block-navigation-item__content:hover { background: var(--fm-accent-dark); }
	.wp-block-navigation__responsive-container .fm-nav-cta .wp-block-navigation-item__content::after {
		content: "→";
		position: static;
		display: inline;
		width: auto;
		height: auto;
		background: none;
		transform: none;
		font-size: 1em;
		color: #fff;
	}
}
.fm-hero-btn__icon { flex: none; color: #00a098; }
/* Configurator-knop in de hero: alleen op mobiel (i.p.v. de wizard) */
.fm-hero-btn--config { display: none; }
@media (max-width: 781px) {
	.fm-hero .wp-block-column:has(.fm-hero-card) { display: none; }
	.fm-hero-btn--config { display: inline-flex; margin-top: 1rem; background: var(--fm-accent); border-color: var(--fm-accent); }
	.fm-hero-btn--config:hover { background: var(--fm-accent-dark); border-color: var(--fm-accent-dark); }
	.fm-hero-btn--config svg { flex: none; }
}

/* ---------- Hero: zachte overloop + aanvraagkaart ---------- */
.fm-hero { position: relative; }
/* Hero-kolommen even hoog; linkertekst verticaal gecentreerd binnen die hoogte */
.fm-hero .wp-block-columns { align-items: stretch; }
.fm-hero .wp-block-column { align-self: stretch; }
.fm-hero .wp-block-column:first-child { display: flex; flex-direction: column; justify-content: center; }
.fm-hero::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 120px;
	background: linear-gradient(to top, var(--fm-bg), transparent);
	pointer-events: none;
	z-index: 2;
}
.fm-hero-card {
	background: rgba(255,255,255,0.10);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	border: 1px solid rgba(255,255,255,0.20);
	border-radius: 1rem;
	padding: 1.75rem;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.fm-hero-card__eyebrow { color: var(--fm-accent); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.4rem; }
.fm-hero-card__title { color: #fff; font-weight: 800; font-size: 1.4rem; text-transform: none; letter-spacing: normal; margin: 0 0 1rem; }
.fm-hero-card__progress { display: flex; gap: 0.4rem; margin-bottom: 1.5rem; }
.fm-hero-card__progress span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.25); }
.fm-hero-card__progress span.is-active { background: var(--fm-accent); }
/* Gelijkmatige spacing tussen de veldgroepen (rijen sturen de ruimte, niet de losse velden). */
.fm-hero-card__form > .fm-field,
.fm-hero-card__form > .fm-hero-card__row { margin-bottom: 1.15rem; }
.fm-hero-card__form > .fm-field:last-of-type { margin-bottom: 1.15rem; }
.fm-hero-card__row .fm-field { margin-bottom: 0; min-width: 0; }
.fm-hero-card__form label { margin-bottom: 0.4rem; }
.fm-hero-card__form input, .fm-hero-card__form select { padding: 0.8rem; }
.fm-hero-card__form label { color: rgba(255,255,255,0.95); font-size: 0.72rem; font-weight: 700; }
.fm-hero-card__form input, .fm-hero-card__form select { background: rgba(255,255,255,0.95); border: none; padding: 0.7rem; box-sizing: border-box; width: 100%; }
.fm-hero-card__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.fm-hero-card__note { color: rgba(255,255,255,0.8); font-size: 0.8rem; text-align: center; margin: 0.75rem 0 0; }
.fm-hero-card__note a { color: #fff; font-weight: 700; }

/* ---------- Hero offerte-wizard (5 stappen) ---------- */
.fm-hero-step > .fm-field,
.fm-hero-step > .fm-hero-card__row { margin-bottom: 1.15rem; }
.fm-hero-step > .fm-field:last-child { margin-bottom: 0; }
.fm-hero-step__hint { color: rgba(255,255,255,0.75); font-size: 0.85rem; margin: 0.85rem 0 0; }
.fm-hero-step [data-acc-field] { margin-top: 1.25rem; }
.fm-hero-step__legend { color: rgba(255,255,255,0.95); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.9rem; }

.fm-hero-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fm-hero-toggle__label { color: rgba(255,255,255,0.95); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.fm-switch { position: relative; flex: none; width: 3rem; height: 1.6rem; }
.fm-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.fm-switch__slider { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.25); transition: background .25s ease; }
.fm-switch__slider::before { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform .25s ease; }
.fm-switch input:checked + .fm-switch__slider { background: var(--fm-accent); }
.fm-switch input:checked + .fm-switch__slider::before { transform: translateX(1.4rem); }

.fm-hero-check { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,0.25); border-radius: 0.6rem; color: rgba(255,255,255,0.95); font-size: 0.9rem; cursor: pointer; }
.fm-hero-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.fm-hero-check__box { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 0.35rem; border: 1px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; color: transparent; font-weight: 900; transition: all .2s ease; }
.fm-hero-check input:checked + .fm-hero-check__box { background: var(--fm-accent); border-color: var(--fm-accent); color: #fff; }

.fm-hero-slangen { display: flex; flex-direction: column; gap: 1.25rem; }
.fm-hero-slangen:not(:empty) { margin-top: 1.25rem; }
.fm-hero-slang { border: 1px solid rgba(255,255,255,0.2); border-radius: 0.75rem; padding: 1.1rem; background: rgba(255,255,255,0.05); }
.fm-hero-slang > .fm-field,
.fm-hero-slang > .fm-hero-card__row { margin-bottom: 1.15rem; }
.fm-hero-slang > .fm-field:last-child { margin-bottom: 0; }
.fm-hero-slang__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.fm-hero-slang__title { color: var(--fm-accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.fm-hero-slang__remove { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: rgba(255,255,255,0.8); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: all .2s ease; }
.fm-hero-slang__remove:hover { border-color: #ff6b6b; color: #ff6b6b; }
.fm-hero-add { margin-top: 1.25rem; width: 100%; padding: 0.85rem 1rem; border: 1px dashed rgba(255,255,255,0.4); border-radius: 0.6rem; background: transparent; color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all .2s ease; }
.fm-hero-add:hover { border-color: var(--fm-accent); color: var(--fm-accent); }

.fm-hero-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.fm-hero-option { padding: 0.9rem 1rem; border-radius: 0.6rem; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all .2s ease; }
.fm-hero-option:hover { border-color: rgba(255,255,255,0.6); }
.fm-hero-option.is-selected { background: var(--fm-accent); border-color: var(--fm-accent); }

.fm-hero-summary { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 0.6rem; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.fm-hero-summary__title { color: var(--fm-accent); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; }
.fm-hero-summary__row { display: flex; justify-content: space-between; gap: 1rem; color: rgba(255,255,255,0.7); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.15rem 0; }
.fm-hero-summary__row strong { color: #fff; text-align: right; }
.fm-hero-summary__slang { padding: 0.5rem 0; }
.fm-hero-summary__slang + .fm-hero-summary__slang { border-top: 1px solid rgba(255,255,255,0.15); }
.fm-hero-summary__slang-title { color: var(--fm-accent); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.35rem; }

.fm-hero-nav { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.fm-hero-nav .fm-btn { flex: 1; height: 3rem; font-size: 1rem; border-radius: 0.5rem; }
.fm-btn[hidden] { display: none; }
.fm-hero-card .fm-btn--outline { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; }
.fm-hero-card .fm-btn--outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }
.fm-hero-next.is-disabled, .fm-hero-next:disabled { opacity: 0.45; cursor: not-allowed; }

.fm-hero-success { text-align: center; padding: 1.5rem 0.5rem; }
.fm-hero-success__check { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(0,160,152,0.2); color: var(--fm-accent); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin: 0 auto 1rem; }
.fm-hero-success h4 { color: #fff; margin: 0 0 0.4rem; font-size: 1.2rem; }
.fm-hero-success p { color: rgba(255,255,255,0.8); margin: 0; font-size: 0.9rem; }

.fm-hero-card__form input.has-error { outline: 2px solid #ff6b6b; outline-offset: 0; }

/* ---------- Eyebrow / label ---------- */
.fm-eyebrow, .is-style-eyebrow {
	color: var(--fm-accent);
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	display: inline-block;
}
.fm-eyebrow.has-text-align-center,
.is-style-eyebrow.has-text-align-center {
	display: block;
}

/* Geen witruimte tussen full-width secties (elke sectie heeft eigen padding) */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}
/* Footer — geen bullets voor de links, geen underline */
.site-footer .wp-block-list { list-style: none; margin: 0; padding-left: 0; }
.site-footer .wp-block-list li { list-style: none; }
.site-footer a { text-decoration: none; color: #ffffffb3; }
.site-footer a:hover { color: var(--fm-accent); }
.site-footer h3.wp-block-heading { margin-bottom: 1.25rem; }

/* ---------- Gradient tekst (hero accent) ---------- */
.fm-gradient-text {
	background: linear-gradient(90deg, var(--fm-accent), #ffffff, var(--fm-accent));
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: fm-shimmer 4s linear infinite;
}
@keyframes fm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Accent-lijn (kaarten) ---------- */
.fm-accent-line { height: 0.5rem; width: 100%; background: linear-gradient(90deg, var(--fm-primary), var(--fm-accent)); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.fm-product-card:hover .fm-accent-line { transform: scaleX(1); }

/* ---------- Hover-lift op kaarten (block style .is-style-fm-card) ---------- */
.is-style-fm-card, .is-style-card {
	background: #fff;
	border: 1px solid var(--fm-border);
	border-radius: 0.75rem;
	overflow: hidden;
	transition: transform .4s ease, box-shadow .4s ease;
	height: 100%;
}
.is-style-fm-card:hover, .is-style-card:hover { transform: translateY(-6px); box-shadow: var(--fm-shadow); }

/* ---------- Badge ---------- */
.fm-badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: rgba(0,160,152,0.12);
	color: var(--fm-accent-dark);
	border: 1px solid rgba(0,160,152,0.3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---------- Stats marquee ---------- */
.fm-marquee { overflow: hidden; background: #fff; border-top: 1px solid var(--fm-border); border-bottom: 1px solid var(--fm-border); padding: 1.25rem 0; }
.fm-marquee__track { display: flex; width: max-content; animation: fm-marquee 32s linear infinite; }
.fm-marquee:hover .fm-marquee__track { animation-play-state: paused; }
.fm-marquee__item { display: flex; align-items: center; gap: 0.75rem; padding: 0 2.5rem; white-space: nowrap; }
.fm-marquee__val { font-size: 1.5rem; font-weight: 900; color: var(--fm-primary); line-height: 1; }
.fm-marquee__label { font-size: 0.75rem; font-weight: 600; color: var(--fm-muted-text); text-transform: uppercase; letter-spacing: 0.05em; }
.fm-marquee__sep { color: var(--fm-border); font-size: 1.5rem; }
@keyframes fm-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Dynamische blokken: product-overzicht ---------- */
.fm-overzicht { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 900px) { .fm-overzicht { flex-direction: row; } }
.fm-overzicht__aside { flex: 0 0 16rem; }
.fm-overzicht__filters { position: sticky; top: 9rem; background: #fff; border: 1px solid var(--fm-border); border-radius: 0.75rem; padding: 1.25rem; }
.fm-overzicht__filters h4 { font-size: 0.6875rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: var(--fm-accent); margin: 0 0 1rem; }
/* Zorg dat het HTML hidden-attribuut display:flex/grid van eigen regels overschrijft. */
.fm-overzicht [hidden] { display: none !important; }
.fm-filter-list { display: flex; flex-direction: column; gap: 0.5rem; }
.fm-filter-btn { display: block; width: 100%; text-align: left; padding: 0.7rem 1rem; border-radius: var(--fm-radius); font-size: 0.875rem; font-weight: 700; color: var(--fm-contrast); text-decoration: none; background: none; border: none; font-family: inherit; cursor: pointer; transition: background .2s ease, color .2s ease; }
.fm-filter-btn:hover { background: var(--fm-muted); }
.fm-filter-btn.is-active { background: var(--fm-primary); color: #fff; }
/* Uitklapbare categorie (Slangen, Koppelstukken). */
.fm-filter-btn--cat { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fm-filter-btn--cat.is-active:not(.is-open) { background: rgba(0,160,152,0.10); color: var(--fm-accent); }
.fm-filter-btn--cat.is-open { background: var(--fm-muted); }
.fm-filter-btn--cat.is-active { color: var(--fm-accent); }
.fm-chevron { flex: 0 0 auto; transition: transform .2s ease; }
.fm-filter-btn--cat.is-open .fm-chevron { transform: rotate(90deg); }
.fm-filter-subs { margin: 0.375rem 0 0.25rem 0.75rem; padding-left: 0.75rem; border-left: 2px solid var(--fm-border); display: flex; flex-direction: column; gap: 0.25rem; }
.fm-filter-sub { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; border-radius: calc(var(--fm-radius) - 2px); font-size: 0.875rem; font-weight: 600; color: var(--fm-muted-text); background: none; border: none; font-family: inherit; cursor: pointer; transition: background .2s ease, color .2s ease; }
.fm-filter-sub:hover { background: var(--fm-muted); color: var(--fm-contrast); }
.fm-filter-sub.is-active { background: var(--fm-accent); color: var(--fm-contrast); }
.fm-filter-all { margin-top: 1.25rem; }
.fm-empty { text-align: center; padding: 4rem 1rem; color: var(--fm-muted-text); }
.fm-overzicht__main { flex: 1; }
.fm-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (max-width: 639px) {
	.fm-grid--2, .fm-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
	.fm-grid--stack, .fm-grid--3:has(.fm-testimonial), .fm-grid--3:has(.fm-post-card) { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (min-width: 640px) { .fm-grid--2 { grid-template-columns: repeat(2, 1fr); } .fm-grid--3 { grid-template-columns: repeat(2, 1fr); } }

/* Configurator op mobiel: kaart 90% breed en gecentreerd */
@media (max-width: 600px) {
	.wp-block-post-content:has(.fm-config) { padding-left: 0 !important; padding-right: 0 !important; }
	.wp-block-group:has(> .fm-config) {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
	.fm-config { max-width: none; }
}

/* USP-balk: 2x2 op mobiel i.p.v. 4 geperste kolommen */
@media (max-width: 599px) {
	.fm-usp-cols { flex-wrap: wrap; row-gap: 1rem; }
	.fm-usp-cols > .wp-block-column { flex: 1 1 40% !important; }
	.fm-usp-cols .wp-block-column .wp-block-group { flex-wrap: wrap; justify-content: center; text-align: center; }
}
/* Verhuurproces-stepper: 7 bollen compacter op kleine telefoons */
@media (max-width: 420px) {
	.fm-process__dot { width: 1.9rem; height: 1.9rem; font-size: 0.85rem; }
	.fm-config__dot { width: 2.1rem; height: 2.1rem; }
	.fm-config__step-label { font-size: 0.6rem; }
}
@media (min-width: 1100px) { .fm-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Productkaart */
.fm-product-card { display: flex; flex-direction: column; background: var(--fm-card, #fff); border: 1px solid var(--fm-border); border-radius: 0.75rem; overflow: hidden; text-decoration: none; color: inherit; transition: transform .5s ease, box-shadow .5s ease; height: 100%; }
.fm-product-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1); }
.fm-product-card__img { height: 14rem; overflow: hidden; background: var(--fm-muted); }
.fm-product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fm-product-card:hover .fm-product-card__img img { transform: scale(1.05); }
.fm-product-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.fm-product-card__cat { font-size: 0.6875rem; color: var(--fm-muted-text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.fm-product-card__title { font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 0.375rem; }
.fm-product-card__desc { font-size: 0.75rem; color: var(--fm-muted-text); line-height: 1.6; flex: 1; margin: 0 0 1rem; }
.fm-mediums { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 1rem 0; }
.fm-medium-tag { font-size: 0.6875rem; background: var(--fm-muted); color: var(--fm-muted-text); padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-weight: 500; }
.fm-specbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0 0 1rem; padding: 0.75rem; background: rgba(232,232,232,0.4); border: 1px solid rgba(204,204,204,0.5); border-radius: var(--fm-radius); }
.fm-specbox__k { display: block; font-size: 0.5625rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; color: var(--fm-muted-text); margin-bottom: 0.125rem; }
.fm-specbox__v { display: block; font-size: 0.75rem; font-weight: 600; color: var(--fm-contrast); line-height: 1.2; }
.fm-product-card__actions { display: flex; gap: 0.5rem; }
.fm-btn--card { flex: 1; padding-top: 0.85rem; padding-bottom: 0.85rem; font-size: 0.75rem; }
.fm-btn--outline.fm-btn--card:hover { border-color: var(--fm-primary); color: var(--fm-primary); }
/* Productkaarten netjes in 2 kolommen op mobiel */
@media (max-width: 639px) {
	.fm-product-card { min-width: 0; }
	.fm-product-card__body { padding: 0.9rem; }
	.fm-product-card__img { height: 9.5rem; }
	.fm-product-card__title { font-size: 1rem; margin-bottom: 0.25rem; }
	.fm-product-card__desc { font-size: 0.7rem; margin-bottom: 0.75rem; }
	.fm-specbox { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.6rem 0.7rem; margin-bottom: 0.75rem; }
	.fm-specbox__v { font-size: 0.7rem; }
	.fm-product-card__actions { flex-direction: column; }
	.fm-btn--card { white-space: normal; }
}
.fm-btn__icon { flex: 0 0 auto; }
.fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.6rem 1rem; border-radius: var(--fm-radius); font-weight: 700; font-size: 0.8125rem; text-decoration: none; cursor: pointer; transition: all .25s ease; border: 2px solid transparent; box-sizing: border-box; white-space: nowrap; }
.fm-btn--accent { background: var(--fm-accent); color: #fff; }
.fm-btn--accent:hover { background: var(--fm-accent-dark); }
.fm-btn--outline { border-color: var(--fm-border); color: var(--fm-contrast); background: transparent; }
.fm-btn--outline:hover { border-color: var(--fm-primary); color: var(--fm-primary); }
.fm-btn--primary { background: var(--fm-primary); color: #fff; }
.fm-btn--primary:hover { background: var(--fm-accent); }
.fm-btn--block { width: 100%; white-space: normal; }
.fm-count { color: var(--fm-muted-text); font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem; display: block; }

/* Filter-pills (blog) */
.fm-filter-pill { display: inline-block; padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 700; text-decoration: none; color: var(--fm-contrast); background: #fff; border: 1px solid var(--fm-border); transition: all .2s ease; }
.fm-filter-pill:hover { border-color: rgba(0,160,152,0.5); }
.fm-filter-pill.is-active { background: var(--fm-accent); color: #fff; border-color: var(--fm-accent); }

/* Product-details omschrijving */
.fm-product-details__desc { color: var(--fm-muted-text); line-height: 1.6; margin-bottom: 1.5rem; }

/* ---------- product-details (single) ---------- */
.fm-specs { border: 1px solid var(--fm-border); border-radius: 0.75rem; overflow: hidden; margin: 1.5rem 0; }
.fm-specs__row { display: flex; gap: 1rem; padding: 0.75rem 1.25rem; font-size: 0.875rem; }
.fm-specs__row:nth-child(odd) { background: rgba(0,0,0,0.02); }
.fm-specs__label { color: var(--fm-muted-text); width: 50%; flex-shrink: 0; }
.fm-specs__value { font-weight: 600; }
.fm-table-wrap { overflow-x: auto; border: 1px solid var(--fm-border); border-radius: 0.75rem; }
.fm-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fm-table thead tr { background: var(--fm-primary); color: #fff; }
.fm-table th { padding: 0.75rem 1rem; text-align: left; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.fm-table td { padding: 0.75rem 1rem; white-space: nowrap; }
.fm-table tbody tr:nth-child(odd) { background: rgba(0,0,0,0.02); }

/* ---------- blog-overzicht ---------- */
.fm-post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fm-border); border-radius: 0.75rem; overflow: hidden; text-decoration: none; color: inherit; height: 100%; transition: transform .4s ease, box-shadow .4s ease; }
.fm-post-card:hover { transform: translateY(-8px); box-shadow: var(--fm-shadow); }
.fm-post-card__img { height: 13rem; overflow: hidden; }
.fm-post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fm-post-card:hover .fm-post-card__img img { transform: scale(1.05); }
.fm-post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.fm-post-card__title { font-size: 1rem; font-weight: 900; line-height: 1.3; margin: 0.75rem 0; }
.fm-post-card__excerpt { font-size: 0.875rem; color: var(--fm-muted-text); line-height: 1.5; flex: 1; }
.fm-post-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--fm-border); font-size: 0.75rem; color: var(--fm-muted-text); }

/* ---------- Referentie-kaart ---------- */
.fm-testimonial { background: #fff; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--fm-shadow); }
.fm-testimonial__img { height: 11rem; background-size: cover; background-position: center; position: relative; }
.fm-testimonial__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(39,63,69,0.6), transparent); }
.fm-testimonial__sector { position: absolute; bottom: 0.75rem; left: 1rem; z-index: 1; background: var(--fm-accent); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25rem 0.75rem; border-radius: 999px; }
.fm-testimonial__body { padding: 1.5rem; color: var(--fm-contrast); display: flex; flex-direction: column; flex: 1; }
.fm-testimonial__mark { color: var(--fm-accent); font-size: 3rem; line-height: 0.5; font-family: Georgia, serif; opacity: 0.4; }
.fm-testimonial__quote { font-style: italic; font-size: 0.9rem; line-height: 1.6; flex: 1; margin: 0.5rem 0 1.5rem; }
.fm-testimonial__author { border-top: 1px solid var(--fm-border); padding-top: 1rem; }
.fm-testimonial__author strong { display: block; font-size: 0.9rem; }
.fm-testimonial__author span { font-size: 0.8rem; color: var(--fm-muted-text); }

/* ---------- Blog / artikel ---------- */
.fm-breadcrumbs { font-size: 0.8rem; color: rgba(255,255,255,0.6); display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.fm-breadcrumbs a { color: rgba(255,255,255,0.8); text-decoration: none; }
.fm-breadcrumbs a:hover { color: var(--fm-accent); }
.fm-breadcrumbs [aria-current="page"] { color: rgba(255,255,255,0.55); }
.fm-breadcrumbs__sep { opacity: 0.5; }
.fm-artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0 0; color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.fm-artikel-meta__sep { opacity: 0.5; }
.fm-artikel-intro { font-size: 1.2rem; line-height: 1.6; color: var(--fm-contrast); font-weight: 500; margin: 1.75rem 0; padding-left: 1.1rem; border-left: 3px solid var(--fm-accent); }
.fm-artikel-faq { margin-top: 3rem; }
.fm-artikel-faq__title { font-weight: 900; text-transform: uppercase; font-size: 1.4rem; margin: 0 0 1.5rem; }

/* ---------- FAQ accordeon (details/summary) ---------- */
.fm-faq { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.fm-faq > details { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; background: #fff; border: 1px solid var(--fm-border); border-radius: 0.75rem; overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.fm-faq details[open] { border-color: rgba(0,160,152,0.4); box-shadow: var(--fm-shadow); }
.fm-faq summary { list-style: none; cursor: pointer; padding: 1.25rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fm-faq summary::-webkit-details-marker { display: none; }
.fm-faq summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--fm-accent); border-bottom: 2px solid var(--fm-accent); transform: rotate(45deg); transition: transform .3s ease; }
.fm-faq details[open] summary::after { transform: rotate(225deg); }
.fm-faq p { padding: 0 1.25rem 1.25rem; margin: 0; color: var(--fm-muted-text); font-size: 0.9375rem; line-height: 1.6; }
.fm-faq details { interpolate-size: allow-keywords; }
.fm-faq details::details-content { height: 0; overflow: hidden; opacity: 0; transition: height .3s ease, opacity .3s ease, content-visibility .3s allow-discrete; }
.fm-faq details[open]::details-content { height: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fm-faq details::details-content { transition: none; } }

/* FAQ op de productpagina: links uitgelijnd op volle breedte, met ruimte tussen de items. */
.fm-product-faq { margin-top: 3rem; }
.fm-product-faq h3 { margin-bottom: 1.25rem; }
.fm-product-faq .fm-faq { max-width: 100%; margin: 0; gap: 0.75rem; }

/* ---------- Spoed-alert ---------- */
.fm-alert { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem 1.25rem; border-radius: 0.6rem; margin-bottom: 1.5rem; }
.fm-alert--spoed { background: #fdecec; border: 1px solid #f3c6c6; }
.fm-alert__icon { flex: none; color: #d9534f; margin-top: 0.1rem; }
.fm-alert__icon svg { width: 1.3rem; height: 1.3rem; }
.fm-alert__body strong { display: block; color: var(--fm-contrast); font-size: 0.95rem; margin-bottom: 0.15rem; }
.fm-alert__body p { margin: 0; color: var(--fm-muted-text); font-size: 0.9rem; }
.fm-alert__body a { color: var(--fm-accent); font-weight: 700; text-decoration: none; }
.fm-alert__body a:hover { text-decoration: underline; }

/* Border-radius van alle contact-elementen op 0.2rem (dubbele class = hogere specificiteit) */
.fm-alert.fm-alert,
.fm-contact-card.fm-contact-card,
.fm-contact-card__icon.fm-contact-card__icon,
.fm-contact-form .fm-field input,
.fm-contact-form .fm-field textarea,
.fm-contact-form .fm-btn.fm-btn { border-radius: 0.2rem; }

/* ---------- Contactgegevens-kaarten ---------- */
.fm-contact-cards { display: flex; flex-direction: column; gap: 1rem; }
.fm-contact-card { display: flex; align-items: flex-start; gap: 1rem; background: #fff; border: 1px solid var(--fm-border); border-radius: 0.6rem; padding: 1.1rem 1.25rem; }
.fm-contact-card__icon { flex: none; width: 3rem; height: 3rem; border-radius: 0.6rem; background: var(--fm-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.fm-contact-card__icon svg { width: 1.35rem; height: 1.35rem; }
.fm-contact-card__body { display: flex; flex-direction: column; min-width: 0; }
.fm-contact-card__label { color: var(--fm-muted-text); font-size: 0.8rem; }
.fm-contact-card__value { color: var(--fm-contrast); font-weight: 700; font-size: 1.05rem; text-decoration: none; word-break: break-word; }
a.fm-contact-card__value:hover { color: var(--fm-accent); }
.fm-contact-card__note { color: var(--fm-muted-text); font-size: 0.8rem; margin-top: 0.35rem; }

/* ---------- Wie wij zijn ---------- */
.fm-about { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.fm-about__intro .fm-eyebrow { display: block; margin-bottom: 0.5rem; }
.fm-about__title { margin: 0 0 1.5rem; color: var(--fm-contrast); font-weight: 900; text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.05; }
.fm-about__intro p { margin: 0 0 1.1rem; color: var(--fm-muted-text); line-height: 1.7; }
.fm-about__intro p strong { color: var(--fm-contrast); }
.fm-about__quote { margin: 1.75rem 0 0; padding: 1.25rem 1.5rem; background: #e7ebec; border-left: 4px solid var(--fm-accent); border-radius: 0.6rem; font-weight: 700; font-style: normal; color: var(--fm-contrast); }
.fm-about__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.fm-about__stat { background: #e9ebec; border-radius: 1rem; padding: 1.75rem 1rem; text-align: center; }
.fm-about__stat--wide { grid-column: 1 / -1; padding: 2rem 1rem; }
.fm-about__stat svg { width: 1.65rem; height: 1.65rem; color: var(--fm-accent); margin-bottom: 0.75rem; }
.fm-about__stat--wide svg { width: 2rem; height: 2rem; }
.fm-about__num { color: var(--fm-contrast); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.fm-about__stat--wide .fm-about__num { font-size: 1.5rem; }
.fm-about__label { margin-top: 0.45rem; color: var(--fm-muted-text); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
@media (max-width: 860px) { .fm-about { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- Salesteam-kaarten ---------- */
.fm-team-grid { max-width: 60rem; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.fm-team-card { background: #fff; color: var(--fm-contrast); border-radius: 1.25rem; overflow: hidden; box-shadow: var(--fm-shadow); }
.fm-team-media { position: relative; aspect-ratio: 1 / 1.02; }
.fm-team-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-team-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.3) 32%, rgba(0,0,0,0) 58%); }
.fm-team-overlay { position: absolute; left: 0; right: 0; bottom: 1.5rem; z-index: 1; text-align: center; padding: 0 1.25rem; }
.fm-team-overlay h3 { margin: 0; color: #fff; font-weight: 900; text-transform: uppercase; font-size: 1.4rem; line-height: 1.1; }
.fm-team-overlay p { margin: 0.4rem 0 0; color: var(--fm-accent); font-weight: 700; font-size: 0.85rem; }
.fm-team-actions { display: flex; justify-content: center; gap: 2.75rem; padding: 1.5rem 1rem; }
.fm-team-actions a { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--fm-contrast); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.fm-team-actions .fm-ico { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #f1f3f4; color: var(--fm-contrast); display: flex; align-items: center; justify-content: center; transition: background-color .25s ease, color .25s ease; }
.fm-team-actions .fm-ico svg { width: 1.15rem; height: 1.15rem; }
.fm-team-actions a:hover .fm-ico { background: var(--fm-accent); color: #fff; }
@media (max-width: 640px) { .fm-team-grid { grid-template-columns: 1fr; } }

/* ---------- Verhuurproces stepper ---------- */
.fm-process { max-width: 46rem; margin: 0 auto; }
.fm-process__dots { display: flex; align-items: center; justify-content: center; margin-bottom: 2.5rem; }
.fm-process__dot { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: none; cursor: pointer; font-weight: 900; background: var(--fm-border); color: var(--fm-muted-text); transition: all .3s ease; flex-shrink: 0; }
.fm-process__dot.is-done { background: var(--fm-primary); color: #fff; }
.fm-process__dot.is-active { background: var(--fm-accent); color: #fff; transform: scale(1.15); box-shadow: 0 6px 16px -4px rgba(0,160,152,0.5); }
.fm-process__line { height: 3px; width: 1.5rem; background: var(--fm-border); }
@media (min-width: 640px) { .fm-process__line { width: 2.5rem; } }
.fm-process__card { background: #fff; border: 2px solid rgba(0,160,152,0.3); border-radius: 1rem; padding: 2.5rem; text-align: center; box-shadow: var(--fm-shadow); }
.fm-process__num { width: 4rem; height: 4rem; border-radius: 999px; background: var(--fm-primary); color: var(--fm-accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; margin: 0 auto 1.5rem; }
.fm-process__title { text-transform: uppercase; font-weight: 900; margin: 0 0 1rem; }
.fm-process__desc { color: var(--fm-muted-text); font-size: 1.05rem; margin: 0 auto; max-width: 28rem; }
.fm-process__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
.fm-process__counter { color: var(--fm-muted-text); font-weight: 600; font-size: 0.9rem; }

/* ---------- Configurator (visueel) ---------- */
.fm-config { max-width: 52rem; margin: 0 auto; }

/* Stepper: genummerde cirkels met verbindingslijnen */
.fm-config__steps { display: flex; align-items: flex-start; margin-bottom: 2.5rem; }
.fm-config__step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.fm-config__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 1.25rem;            /* = helft van de cirkelhoogte */
	left: 50%;
	width: 100%;
	height: 2px;
	background: var(--fm-border);
	z-index: 0;
}
.fm-config__dot {
	position: relative;
	z-index: 1;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	background: #fff;
	border: 2px solid var(--fm-border);
	color: var(--fm-muted-text);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.fm-config__step.is-active .fm-config__dot { background: var(--fm-accent); border-color: var(--fm-accent); color: #fff; }
.fm-config__step.is-active:not(:last-child)::after { background: var(--fm-accent); }
.fm-config__step.is-done .fm-config__dot { font-size: 0; }
.fm-config__step.is-done .fm-config__dot::after { content: "✓"; font-size: 1.1rem; color: #fff; }
.fm-config__step-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fm-muted-text); line-height: 1.3; max-width: 8rem; }
.fm-config__step.is-active .fm-config__step-label { color: var(--fm-accent); }
/* Mobiel: toon alleen het label van de huidige (actieve, nog niet afgeronde) stap */
@media (max-width: 600px) {
	.fm-config__steps { margin-bottom: 3.25rem; }
	.fm-config__step { min-width: 0; }
	.fm-config__step-label { display: none; }
	.fm-config__step.is-active:not(.is-done) .fm-config__step-label {
		display: block;
		position: absolute;
		top: 100%;
		transform: translateX(-50%);
		margin-top: 0.65rem;
		max-width: none;
		white-space: nowrap;
		font-size: 0.7rem;
	}
	/* Actief label onder het MIDDEN van de hele stepper zetten (per stap gecorrigeerd) */
	.fm-config__step:nth-child(1).is-active:not(.is-done) .fm-config__step-label { left: 250%; }
	.fm-config__step:nth-child(2).is-active:not(.is-done) .fm-config__step-label { left: 150%; }
	.fm-config__step:nth-child(3).is-active:not(.is-done) .fm-config__step-label { left: 50%; }
	.fm-config__step:nth-child(4).is-active:not(.is-done) .fm-config__step-label { left: -50%; }
	.fm-config__step:nth-child(5).is-active:not(.is-done) .fm-config__step-label { left: -150%; }
}

.fm-config__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .fm-config__grid { grid-template-columns: 1fr 1fr; } }
.fm-config__placeholder { color: var(--fm-muted-text); font-style: italic; padding: 2rem 0; text-align: center; }
.fm-config__nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; }
.fm-config__nav-spacer { flex: 1; }
.fm-config__note { text-align: center; color: var(--fm-muted-text); font-size: 0.9rem; margin: 1.25rem 0 0; }

/* Wizard in de lichte configurator-kaart: hero-stijlen (voor donkere achtergrond) terugthemen */
.fm-config .fm-hero-card__form label { color: var(--fm-muted-text); }
.fm-config .fm-hero-card__form input,
.fm-config .fm-hero-card__form select,
.fm-config .fm-hero-card__form textarea { background: #fff; border: 1px solid var(--fm-border); padding: 0.85rem; color: var(--fm-contrast); }
.fm-config .fm-hero-step__hint { color: var(--fm-muted-text); }
.fm-config .fm-hero-step__legend { color: var(--fm-contrast); }
.fm-config .fm-hero-toggle { border: 1px solid var(--fm-border); border-radius: 0.5rem; padding: 1rem 1.25rem; }
.fm-config .fm-hero-toggle__label { color: var(--fm-contrast); }
.fm-config .fm-switch__slider { background: var(--fm-border); }
.fm-config .fm-hero-check { border-color: var(--fm-border); color: var(--fm-contrast); }
.fm-config .fm-hero-check__box { border-color: var(--fm-border); }
.fm-config .fm-hero-option { background: #fff; border-color: var(--fm-border); color: var(--fm-contrast); }
.fm-config .fm-hero-option:hover { border-color: var(--fm-accent); }
.fm-config .fm-hero-option.is-selected { background: var(--fm-accent); border-color: var(--fm-accent); color: #fff; }
.fm-config .fm-hero-slang { background: var(--fm-muted); border-color: var(--fm-border); }
.fm-config .fm-hero-slang__remove { border-color: var(--fm-border); color: var(--fm-muted-text); }
.fm-config .fm-hero-add { border-color: var(--fm-border); color: var(--fm-contrast); }
.fm-config .fm-hero-add:hover { border-color: var(--fm-accent); color: var(--fm-accent); }
.fm-config .fm-hero-summary { background: var(--fm-muted); border-color: var(--fm-border); }
.fm-config .fm-hero-summary__row { color: var(--fm-muted-text); }
.fm-config .fm-hero-summary__row strong { color: var(--fm-contrast); }
.fm-config .fm-hero-success h4 { color: var(--fm-contrast); }
.fm-config .fm-hero-success p { color: var(--fm-muted-text); }
.fm-config .fm-hero-card__note { color: var(--fm-muted-text); }
.fm-config .fm-hero-card__note a { color: var(--fm-accent); }
.fm-field label { display: block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fm-muted-text); margin-bottom: 0.5rem; }
.fm-field input, .fm-field select, .fm-field textarea { width: 100%; box-sizing: border-box; padding: 0.85rem; border: 1px solid var(--fm-border); border-radius: 0.5rem; font-size: 1rem; font-family: inherit; background: #fff; }
.fm-field input:focus, .fm-field select:focus, .fm-field textarea:focus { outline: none; border-color: var(--fm-accent); box-shadow: 0 0 0 3px rgba(0,160,152,0.15); }

/* ---------- Sector-tiles ---------- */
.fm-sectors { display: grid; grid-template-columns: 1fr; width: 100%; }
@media (min-width: 768px) { .fm-sectors { grid-template-columns: 1fr 1fr; } }
.fm-sector { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 22rem; overflow: hidden; text-decoration: none; padding: 2rem; }
.fm-sector__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) brightness(0.8); transition: transform 1s ease, filter .5s ease; }
.fm-sector:hover .fm-sector__bg { transform: scale(1.1); filter: grayscale(0) brightness(1); }
.fm-sector__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(39,63,69,0.95), rgba(39,63,69,0.45), transparent); mix-blend-mode: multiply; }
.fm-sector__eyebrow { position: relative; z-index: 1; color: rgba(255,255,255,0.7); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.5rem; }
.fm-sector__label { position: relative; z-index: 1; color: #fff; font-size: 2rem; font-weight: 900; text-transform: uppercase; text-align: center; line-height: 1.1; }

/* Utility */
.fm-cta-banner { background: var(--fm-primary); color: #fff; }
.has-primary-background-color a, .has-primary-dark-background-color a { color: #fff; }

/* ---------- Zwevende WhatsApp-chat ---------- */
.fm-wa { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.fm-wa__fab { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: none; cursor: pointer; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -6px rgba(0,0,0,0.35); transition: transform .2s ease, background-color .2s ease; }
.fm-wa__fab:hover { background: #1ebe5d; transform: scale(1.05); }
.fm-wa__fab svg { width: 1.9rem; height: 1.9rem; }
.fm-wa__panel { width: min(20rem, calc(100vw - 2.5rem)); background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 50px -12px rgba(0,0,0,0.35); transform-origin: bottom right; transform: scale(0.85) translateY(10px); opacity: 0; transition: transform .25s ease, opacity .25s ease; pointer-events: none; }
.fm-wa.is-open .fm-wa__panel { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
.fm-wa__header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.1rem; background: #075e54; color: #fff; }
.fm-wa__avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; }
.fm-wa__avatar svg { width: 1.4rem; height: 1.4rem; }
.fm-wa__ident { flex: 1; min-width: 0; line-height: 1.3; }
.fm-wa__ident strong { display: block; font-size: 0.95rem; }
.fm-wa__ident span { font-size: 0.72rem; color: rgba(255,255,255,0.8); }
.fm-wa__close { flex: none; background: transparent; border: none; color: rgba(255,255,255,0.85); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
.fm-wa__close:hover { color: #fff; }
.fm-wa__body { padding: 1.25rem 1.1rem; background: #e5ddd5; }
.fm-wa__bubble { background: #fff; border-radius: 0 0.75rem 0.75rem 0.75rem; padding: 0.85rem 1rem; font-size: 0.9rem; line-height: 1.5; color: var(--fm-contrast); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.fm-wa__start { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.9rem 1rem; background: #25d366; color: #fff; font-weight: 700; text-decoration: none; transition: background-color .2s ease; }
.fm-wa__start:hover { background: #1ebe5d; color: #fff; }
.fm-wa__start-icon { display: inline-flex; }
.fm-wa__start-icon svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 599px) {
	.fm-wa { right: 1rem; bottom: 1rem; }
	.fm-wa__fab { width: 3.25rem; height: 3.25rem; }
}

.fm-post-card[hidden] { display: none !important; }

/* Top-gradientlijn full-bleed t.o.v. het schermmidden (ongeacht de inspring) */
.fm-topbar { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ---------- Taalwisselaar (WPML) — vlaggen-dropdown ---------- */
.fm-langswitch { position: relative; display: inline-flex; }
.fm-langswitch__toggle { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--fm-border); border-radius: 0.4rem; background: #fff; padding: 0.35rem 0.5rem; cursor: pointer; color: var(--fm-muted-text); }
.fm-langswitch__toggle:hover { border-color: var(--fm-accent); }
.fm-langswitch__flag { display: block; width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.fm-langswitch__chevron { transition: transform .2s ease; }
.fm-langswitch.is-open .fm-langswitch__chevron { transform: rotate(180deg); }
.fm-langswitch__menu { position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 10rem; margin: 0; padding: 0.35rem; list-style: none; background: #fff; border: 1px solid var(--fm-border); border-radius: 0.5rem; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.25); z-index: 200; }
.fm-langswitch__item { margin: 0; }
.fm-langswitch__item a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 0.35rem; text-decoration: none; color: var(--fm-contrast); font-size: 0.85rem; font-weight: 600; }
.fm-langswitch__item a:hover { background: var(--fm-muted); }
.fm-langswitch__item.is-active a { color: var(--fm-accent); }