/*
 * Formind: basis. Kleuren, typografie, knoppen, header, footer en de nodige correcties op Salient.
 * Elke sectie heeft daarnaast een eigen bestand in css/secties/ (NN-naam.css).
 * Maten komen uit het Figma-ontwerp (desktop 1728px breed, inhoud 1104px).
 */

:root {
	--fm-chocolate: #2b1a12;
	--fm-chocolate-2: #36231a;
	--fm-egg: #fff4e3;
	--fm-zand: #f5e6ce;
	--fm-zand-2: #ead6b8;
	--fm-creme: #fffaf2;
	--fm-burnt: #d76525;
	--fm-tan: #eab163;
	--fm-rand-veld: #e6d4ba;
	/* tekst met transparantie, zoals in het ontwerp */
	--fm-choc-74: rgba(43, 26, 18, .74);
	--fm-choc-55: rgba(43, 26, 18, .55);
	--fm-choc-35: rgba(43, 26, 18, .35);
	--fm-choc-25: rgba(43, 26, 18, .25);
	--fm-choc-18: rgba(43, 26, 18, .18);
	--fm-choc-14: rgba(43, 26, 18, .14);
	--fm-egg-85: rgba(255, 244, 227, .85);
	--fm-egg-72: rgba(255, 244, 227, .72);
	--fm-egg-60: rgba(255, 244, 227, .6);
	--fm-egg-50: rgba(255, 244, 227, .5);
	--fm-egg-14: rgba(255, 244, 227, .14);
	--fm-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fm-header-h: 77px;
}

/* ---------- Salient-correcties ---------- */

/* overflow-x: hidden van Salient breekt position: sticky; clip doet hetzelfde zonder dat */
html body { overflow-x: clip; overflow-y: visible; }
@media (max-width: 999px) { html body { --scroll-bar-w: 0px; } }
html { scroll-padding-top: var(--fm-header-h); }

body,
body p,
body li,
body input,
body textarea,
body select,
body button,
body h1, body h2, body h3, body h4, body h5, body h6,
body .nectar-button,
#header-outer,
#header-outer #top nav > ul > li > a,
#slide-out-widget-area {
	font-family: var(--fm-font);
}
body {
	color: var(--fm-chocolate);
	background-color: var(--fm-egg);
	font-size: 17px;
	line-height: 28px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
	color: inherit;
	letter-spacing: 0;
	margin: 0;
	padding: 0;
}
body p { padding-bottom: 0; margin: 0; }
body a { color: inherit; }
body strong, body b { font-weight: 500; }

/* Salient zet onder elk beeld in een kolom 15px marge */
body .row .col img.fm-beeld,
body .fm img { margin-bottom: 0; }

/* WPBakery: tekstblokken zonder eigen marge, de secties regelen hun ritme zelf */
body .fm .wpb_text_column,
body .fm .wpb_content_element,
body .fm .wpb_text_column > .wpb_wrapper > *:last-child { margin-bottom: 0; }
body .fm .wpb_text_column ul,
body .fm .wpb_text_column ol { margin: 0; padding: 0; list-style: none; }

/* Salient dimt links in een lichte tekstkolom (opacity .7) en kleurt ze wit; in de donkere secties niet */
.fm-donker .span_12.light .wpb_text_column a { opacity: 1; }
.fm-donker .span_12.light .wpb_text_column a.fm-knop { color: var(--fm-egg); }

/* ---------- typografie (klassen voor alle secties) ---------- */

.fm-geen-breuk { white-space: nowrap; }   /* bv. "one-on-one" in de hero: niet afbreken op het streepje */

.fm-h1 {
	font-weight: 300; font-size: 92px; line-height: 93.84px; letter-spacing: -3.22px;
}
.fm-h2 {
	font-weight: 300; font-size: 46px; line-height: 52.9px; letter-spacing: -.92px;
}
.fm-lead {
	font-weight: 300; font-size: 24px; line-height: 39.6px; letter-spacing: -.24px;
}
.fm-intro {
	font-weight: 400; font-size: 17px; line-height: 28px; color: var(--fm-choc-74);
}
.fm-donker .fm-intro { color: var(--fm-egg-72); }
.fm-eyebrow {
	font-weight: 500; font-size: 15px; line-height: 24.75px; color: var(--fm-burnt);
}

/* ---------- knoppen ---------- */

body a.fm-knop,
body button.fm-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--fm-burnt);
	color: var(--fm-egg);
	font-family: var(--fm-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 24.75px;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
body a.fm-knop:hover,
body button.fm-knop:hover { background: #c2571b; color: var(--fm-egg); }
body a.fm-knop:focus-visible,
body button.fm-knop:focus-visible { outline: 2px solid var(--fm-tan); outline-offset: 3px; }
/* omlijnd: op donker een Egg-rand, op licht een Chocolate-rand */
body a.fm-knop--rand {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--fm-egg-60);
	color: var(--fm-egg);
}
body a.fm-knop--rand:hover { background: rgba(255, 244, 227, .08); box-shadow: inset 0 0 0 1px var(--fm-egg); }
body a.fm-knop--rand-donker {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--fm-choc-35);
	color: var(--fm-chocolate);
}
body a.fm-knop--rand-donker:hover { background: rgba(43, 26, 18, .05); color: var(--fm-chocolate); box-shadow: inset 0 0 0 1px var(--fm-chocolate); }
.fm-knoppen { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- header ---------- */

#header-outer {
	background-color: rgba(43, 26, 18, .92) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--fm-egg-14);
	box-shadow: none !important;
}
#header-outer #top nav > ul > li > a,
#header-outer #top nav > ul > li > a .menu-title-text {
	font-size: 15px;
	line-height: 24.75px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--fm-egg-72) !important;
	transition: color .2s ease;
}
#header-outer #top nav > ul > li > a:hover,
#header-outer #top nav > ul > li > a:hover .menu-title-text,
#header-outer #top nav > ul > li.current-menu-item > a .menu-title-text {
	color: var(--fm-egg) !important;
}
/* Logo links, menu in het midden van de vrije ruimte, knop rechts (zoals 'space-between' in Figma).
   Salient centreert het menu op de hele breedte en zet de knoppen absoluut rechts; hier alles in één flexrij. */
@media (min-width: 1000px) {
	#header-outer[data-format=centered-menu] .logo-spacing { display: none; }
	#header-outer[data-format=centered-menu] #top .span_9 nav {
		display: flex;
		align-items: center;
		height: 100%;
	}
	#header-outer[data-format=centered-menu] #top .span_9 nav > .sf-menu:not(.buttons) {
		display: flex;
		gap: 32px;
		width: auto;
		margin: 0 auto;
	}
	#header-outer[data-format=centered-menu] #top nav > .buttons,
	#header-outer[data-format=centered-menu] #top nav > .buttons > li {
		position: static;
		display: flex;
		align-items: center;
		height: auto !important;
		margin: 0;
	}
	#header-outer #top nav > .sf-menu > li { margin: 0 !important; }
	#header-outer #top nav > .sf-menu:not(.buttons) > li > a {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin: 0 !important;
	}
}
/* knop Contact */
#header-outer #top nav > .buttons > li.menu-item-btn-style-button_solid_color > a {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px !important;
	margin: 0 !important;
	border-radius: 999px;
	background: var(--fm-burnt);
	line-height: 24.75px;
	transition: background-color .2s ease;
}
#header-outer #top nav > .buttons > li.menu-item-btn-style-button_solid_color > a::before,
#header-outer #top nav > .buttons > li.menu-item-btn-style-button_solid_color > a::after { display: none !important; }
/* Salient tekent de knop met een transparante rand per menu-item (.menu-item-NN > a) en een ::before-laag */
body #header-outer #top nav > .buttons > li.menu-item-btn-style-button_solid_color > a {
	height: auto !important;
	border: 0 !important;
}
#header-outer #top nav > .buttons > li.menu-item-btn-style-button_solid_color > a .menu-title-text {
	padding: 0 !important;
	font-weight: 500;
	color: var(--fm-egg) !important;
}
#header-outer #top nav > .buttons > li.menu-item-btn-style-button_solid_color > a:hover { background: #c2571b; }

/* zichtbare toetsenbordfocus in het menu (Salient zet outline: none op .sf-menu a:focus) */
#header-outer #top nav > ul > li > a:focus-visible { outline: 2px solid var(--fm-tan) !important; outline-offset: 6px; border-radius: 4px; }
#header-outer #top nav > ul:not(.buttons) > li > a:focus-visible .menu-title-text { color: var(--fm-egg) !important; }
#header-outer #top nav > .buttons > li > a:focus-visible { outline-offset: 3px; border-radius: 999px; }
/* doel van een ankerlink krijgt de focus (js/00-ankers.js), zonder kader */
[tabindex="-1"]:focus { outline: none; }

/* hamburger: raakvlak van 46x44 in plaats van 22x20 */
@media (max-width: 999px) {
	body #header-outer .slide-out-widget-area-toggle a { display: block; position: relative; }
	body #header-outer .slide-out-widget-area-toggle a::after { content: ""; position: absolute; inset: -12px; }
}

/* off-canvas menu (onder 1000px) */
body #slide-out-widget-area .inner .off-canvas-menu-container li a,
body #slide-out-widget-area .inner .off-canvas-menu-container li a .menu-title-text {
	font-family: var(--fm-font) !important;
	font-weight: 300 !important;
	font-size: 30px !important;
	line-height: 1.35 !important;
	letter-spacing: -.3px !important;
	color: var(--fm-egg) !important;
}
body #slide-out-widget-area .inner .off-canvas-menu-container li a:hover,
body #slide-out-widget-area .inner .off-canvas-menu-container li a:focus-visible { color: var(--fm-tan) !important; }
/* het sluitkruis is geen tabstop zolang het menu dicht is */
body:not(.material-ocm-open) .slide_out_area_close { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
	body .ocm-effect-wrap,
	body #slide-out-widget-area,
	body #slide-out-widget-area *,
	body #slide-out-widget-area-bg { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- footer (globale sectie 'Formind footer') ---------- */

.fm-footer { color: var(--fm-egg-72); }
/* de rand op de achtergrondlaag, die over de volle breedte loopt */
.fm-footer-grid {
	display: grid;
	/* 512/256/256 bij 1104px inhoud (zoals het ontwerp); daaronder krimpen de kolommen mee */
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 40px;
	row-gap: 56px;
}
.fm-footer-logo img { display: block; width: 150px; height: 20px; margin: 0; }
body .fm-footer h4.fm-footer-kop {
	font-weight: 500; font-size: 14px; line-height: 23.1px; color: var(--fm-egg-50); margin: 0 0 14px;
}
.fm-footer-lijst { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body .fm-footer .fm-footer-lijst li {
	font-size: 15px; line-height: 24.75px; color: var(--fm-egg-72); margin: 0; padding: 0; list-style: none;
}
/* links in Egg 72% zoals de rest van de lijst, bij hover Egg (Salient maakt links in een lichte rij wit met .span_12.light .wpb_text_column a) */
body .wpb_row.fm-footer .fm-footer-lijst a { color: var(--fm-egg-72); text-decoration: none; transition: color .2s ease; }
body .wpb_row.fm-footer .fm-footer-lijst a:hover { color: var(--fm-egg); }
body .fm-footer p.fm-copy {
	grid-column: 1 / -1; font-size: 13px; line-height: 21.45px; color: var(--fm-egg-50);
}

/* ---------- tablet en gsm ---------- */

/* tablet: 40px zijmarge in plaats van Salients 20px (desktop heeft 48px, anders springt het bij 999px) */
@media (min-width: 691px) and (max-width: 999px) {
	body { --mobile-container-width: calc(100% - 80px); }
}

/* één ritme voor alle secties op tablet en gsm (Salient zet de padding inline); de hero regelt het zelf */
@media (max-width: 999px) {
	body .wpb_row.fm:not(.fm-s01):not(.fm-footer) { padding-top: 96px !important; padding-bottom: 96px !important; }
}
@media (max-width: 690px) {
	body .wpb_row.fm:not(.fm-s01):not(.fm-footer) { padding-top: 72px !important; padding-bottom: 72px !important; }
}

@media (max-width: 999px) {
	.fm-h1 { font-size: 56px; line-height: 60px; letter-spacing: -1.8px; }
	.fm-h2 { font-size: 36px; line-height: 42px; letter-spacing: -.6px; }
	.fm-lead { font-size: 21px; line-height: 33px; }
	.fm-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
	.fm-footer-logo { grid-column: 1 / -1; }
}
@media (max-width: 690px) {
	.fm-h1 { font-size: 42px; line-height: 46px; letter-spacing: -1.2px; }
	.fm-h2 { font-size: 30px; line-height: 36px; letter-spacing: -.4px; }
	.fm-lead { font-size: 19px; line-height: 30px; }
	.fm-intro { font-size: 16px; line-height: 26.4px; }
	.fm-footer-grid { grid-template-columns: 1fr; row-gap: 32px; }
}

/* footerlinks op touchschermen: raakvlak over de hele kolom en de gap van 8px (33px hoog), zonder verschuiving */
@media (max-width: 999px), (pointer: coarse) {
	body .fm-footer .fm-footer-lijst a { display: block; padding: 4px 0; margin: -4px 0; }
}