/* ============================================================
   main.css — Peakfort standaard stijlen
   Geladen via pf-template-functions (assets/main.css)
   ============================================================ */

/* --- Design tokens (font families) -------------------------- */
:root {
	--Font-Lora: 'Lora', Georgia, 'Times New Roman', serif;
	--Font-Google-Sans: 'Google Sans', sans-serif;
	--Primary-415464: #415464;
	--415464: #415464;
	--Charcoal-Blue-950: #1E262E;
	--Primary-FFFFFF: #FFFFFF;
	--Tea-Green-100: #E5EBDC;
	--Charcoal-Blue-100: #E0E9ED;
	--Charcoal-Blue-400: #6E8FA2;
	--Cream-FFFDF9: #FFFDF9;
	--Bone-E2DACB: #E2DACB;
	--Tea-Green-C3D1AF: #C3D1AF;
	--Deep-Space-Blue-163957: #163957;
	/* Divider-hoek (Figma 398×80): breedte schaalt met het scherm, */
	/* hoogte volgt dezelfde verhouding → op elk scherm strak in de hoek */
	--divider-w: min(398px, 40vw);
	--divider-h: calc(var(--divider-w) * 80 / 398);
}

/* --- Custom font (Elementor custom font: Lora Medium) ------ */
@font-face {
	font-family: 'Lora';
	src: url('/wp-content/uploads/Lora-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* --- Google Sans (zelf gehost; variable font woff2, weight 400-700) */
@font-face {
	font-family: 'Google Sans';
	src: url('/wp-content/uploads/GoogleSans.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* --- Typografie (design tokens) ----------------------------- */
/* --Font-* / --Size-* tokens worden in :root gezet (o.a. via design-system-sync); de fallbacks hier houden de stijlen werkend zonder tokens. */

/* Body */
html body {
	font-family: var(--Font-Google-Sans, "Google Sans", sans-serif);
	font-size: var(--Size-Body, 18px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--Size-Lineheight-Body, 28.8px); /* 160% */
	color: var(--e-global-color-text, #7A7A7A);
}

/* H1 */
html h1 {
	font-family: var(--Font-Lora, Lora);
	font-size: var(--Size-H1, 80px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--Size-H1, 80px); /* 100% */
	letter-spacing: -1.6px;
}

/* H2 */
html h2 {
	font-family: var(--Font-Lora, Lora);
	font-size: var(--Size-H2, 40px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--Size-Lineheight-H2, 48px); /* 120% */
	letter-spacing: -0.8px;
}

/* H3 */
html h3 {
	font-family: var(--Font-Lora, Lora);
	font-size: var(--Size-H3, 32px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--Size-Lineheight-H3, 38.4px); /* 120% */
	letter-spacing: -0.64px;
}

/* H4 */
html h4 {
	font-family: var(--Font-Lora, Lora);
	font-size: var(--Size-H4, 30px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--Size-Lineheight-H4, 36px); /* 120% */
	letter-spacing: -0.6px;
}

/* H5 / H6: zelfde heading-font, size via browser-default */
html h5,
html h6 {
	font-family: var(--Font-Lora, Lora);
	font-weight: 500;
}

html a {
	color: var(--e-global-color-primary, #6EC1E4);
}

/* --- Standaard knoppen -------------------------------------- */
/* Elementor knoppen + native WordPress / Gravity Forms knoppen */
.elementor-button,
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
.gform_wrapper .gform_button {
	font-family: var(--Font-Google-Sans, "Google Sans");
	font-size: var(--Size-Tiny, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--Size-Lineheight-Tiny, 16px); /* 100% */
	letter-spacing: -0.16px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 5px;
	background-color: var(--e-global-color-primary, #6EC1E4);
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover / focus */
.elementor-button:hover,
.elementor-button:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus {
	background-color: var(--e-global-color-secondary, #54595F);
	color: #FFFFFF;
	text-decoration: none;
}

/* --- Outline variant (Elementor) ---------------------------- */
.elementor-button.elementor-button-outline {
	background-color: transparent;
	border-color: var(--e-global-color-primary, #6EC1E4);
	color: var(--e-global-color-primary, #6EC1E4);
}

.elementor-button.elementor-button-outline:hover,
.elementor-button.elementor-button-outline:focus {
	background-color: var(--e-global-color-primary, #6EC1E4);
	color: #FFFFFF;
}

/* --- Knop-klassen (Figma button variants) ------------------- */
/* In Elementor: OP DE BUTTON-WIDGET zelf → tabblad Advanced → veld "CSS Classes", bv. "btn btn-dark" */
/* (niet op een omliggende container — dan krijg je twee knoppen over elkaar) */
/* .btn.btn = dubbele class → wint het van Elementor's standaard .elementor-button stijl */
.btn.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 42px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 50px;
	font-family: var(--Font-Google-Sans, "Google Sans");
	font-size: var(--Size-Tiny, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--Size-Lineheight-Tiny, 16px); /* 100% */
	letter-spacing: -0.16px;
	color: var(--415464, var(--Primary-415464, #415464));
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Reset inner Elementor button-onderdelen binnen .btn (anders gray box ín de knop) */
html .btn.btn .elementor-button-content-wrapper,
html .btn.btn .elementor-button-text,
html .btn.btn .elementor-button-icon {
	background: transparent;
	padding: 0;
	border: none;
}

/* Pijl ↗ in elke .btn (mask → kleur = currentColor per variant) */
.btn.btn::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("arrow-up-right.svg") center / contain no-repeat;
	mask: url("arrow-up-right.svg") center / contain no-repeat;
}

/* Charcoal (Figma: background Charcoal-Blue-950, border Primary-415464) */
.btn.btn-dark {
	background: var(--Charcoal-Blue-950, #1E262E);
	border: 1px solid var(--Primary-415464, #415464);
	color: #FFFFFF;
}

.btn.btn-dark:hover,
.btn.btn-dark:focus {
	background: color-mix(in srgb, var(--Charcoal-Blue-950, #1E262E) 85%, #000000);
	color: #FFFFFF;
	text-decoration: none;
}

/* Slate primary */
.btn.btn-primary {
	background: var(--Primary-415464, #415464);
	border: 1px solid var(--Primary-415464, #415464);
	color: #FFFFFF;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
	background: color-mix(in srgb, var(--Primary-415464, #415464) 85%, #000000);
	color: #FFFFFF;
	text-decoration: none;
}

/* Wit (Figma: background + border Primary-FFFFFF) */
.btn.btn-light {
	background: var(--Primary-FFFFFF, #FFFFFF);
	border: 1px solid var(--Primary-FFFFFF, #FFFFFF);
	color: var(--415464, var(--Primary-415464, #415464));
}

.btn.btn-light:hover,
.btn.btn-light:focus {
	background: #EEF1F4;
	color: var(--415464, var(--Primary-415464, #415464));
	text-decoration: none;
}

/* Wit met dikke Tea-Green-100 border (accent, Figma) */
.btn.btn-accent {
	background: var(--Primary-FFFFFF, #FFFFFF);
	border: 3px solid var(--Tea-Green-100, #E5EBDC);
	color: var(--415464, var(--Primary-415464, #415464));
}

.btn.btn-accent:hover,
.btn.btn-accent:focus {
	background: #EEF1F4;
	color: var(--415464, var(--Primary-415464, #415464));
	text-decoration: none;
}

/* Charcoal met 4px Primary-415464 border (Figma, witte achtergrond) */
.btn.btn-dark-accent {
	background: var(--Charcoal-Blue-950, #1E262E);
	border: 4px solid var(--Primary-415464, #415464);
	color: #FFFFFF;
}

.btn.btn-dark-accent:hover,
.btn.btn-dark-accent:focus {
	background: color-mix(in srgb, var(--Charcoal-Blue-950, #1E262E) 85%, #000000);
	color: #FFFFFF;
	text-decoration: none;
}

/* Outline */
.btn.btn-outline {
	background: transparent;
	border: 1px solid var(--Primary-415464, #415464);
	color: var(--Primary-415464, #415464);
}

.btn.btn-outline:hover,
.btn.btn-outline:focus {
	background: var(--Primary-415464, #415464);
	color: #FFFFFF;
	text-decoration: none;
}

/* Gevulde Charcoal-Blue-100 (Figma, witte achtergrond) */
.btn.btn-muted {
	background: var(--Charcoal-Blue-100, #E0E9ED);
	border: 1px solid transparent;
	color: var(--Charcoal-Blue-400, #6E8FA2);
}

.btn.btn-muted:hover,
.btn.btn-muted:focus {
	background: color-mix(in srgb, var(--Charcoal-Blue-100, #E0E9ED) 88%, #000000);
	color: var(--Charcoal-Blue-400, #6E8FA2);
	text-decoration: none;
}

/* Disabled */
.btn.btn:disabled,
.btn.btn.is-disabled {
	background: #E5E8EB;
	border-color: transparent;
	color: #9AA3AB;
	cursor: not-allowed;
}

/* --- .btn op een Elementor widget --------------------------------------- */
/* In Elementor landt "CSS Classes" op de widget-WRAPPER (div.elementor-widget), */
/* niet op de <a>. Daarom: wrapper neutraal, de inner .elementor-button is de knop. */
.elementor-widget.btn.btn {
	display: block;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	gap: 0;
	white-space: normal;
}

.elementor-widget.btn.btn::after {
	content: none;
}

.btn.btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 42px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 50px;
	font-family: var(--Font-Google-Sans, "Google Sans");
	font-size: var(--Size-Tiny, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: var(--Size-Lineheight-Tiny, 16px);
	letter-spacing: -0.16px;
	color: var(--415464, var(--Primary-415464, #415464));
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn.btn .elementor-button::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("arrow-up-right.svg") center / contain no-repeat;
	mask: url("arrow-up-right.svg") center / contain no-repeat;
}

.btn.btn-dark .elementor-button {
	background: var(--Charcoal-Blue-950, #1E262E);
	border: 1px solid var(--Primary-415464, #415464);
	color: #FFFFFF;
}

.btn.btn-dark .elementor-button:hover,
.btn.btn-dark .elementor-button:focus {
	background: color-mix(in srgb, var(--Charcoal-Blue-950, #1E262E) 85%, #000000);
	color: #FFFFFF;
	text-decoration: none;
}

.btn.btn-primary .elementor-button {
	background: var(--Primary-415464, #415464);
	border: 1px solid var(--Primary-415464, #415464);
	color: #FFFFFF;
}

.btn.btn-primary .elementor-button:hover,
.btn.btn-primary .elementor-button:focus {
	background: color-mix(in srgb, var(--Primary-415464, #415464) 85%, #000000);
	color: #FFFFFF;
	text-decoration: none;
}

.btn.btn-light .elementor-button {
	background: var(--Primary-FFFFFF, #FFFFFF);
	border: 1px solid var(--Primary-FFFFFF, #FFFFFF);
	color: var(--415464, var(--Primary-415464, #415464));
}

.btn.btn-light .elementor-button:hover,
.btn.btn-light .elementor-button:focus {
	background: #EEF1F4;
	color: var(--415464, var(--Primary-415464, #415464));
	text-decoration: none;
}

.btn.btn-accent .elementor-button {
	background: var(--Primary-FFFFFF, #FFFFFF);
	border: 3px solid var(--Tea-Green-100, #E5EBDC);
	color: var(--415464, var(--Primary-415464, #415464));
}

.btn.btn-accent .elementor-button:hover,
.btn.btn-accent .elementor-button:focus {
	background: #EEF1F4;
	color: var(--415464, var(--Primary-415464, #415464));
	text-decoration: none;
}

.btn.btn-dark-accent .elementor-button {
	background: var(--Charcoal-Blue-950, #1E262E);
	border: 4px solid var(--Primary-415464, #415464);
	color: #FFFFFF;
}

.btn.btn-dark-accent .elementor-button:hover,
.btn.btn-dark-accent .elementor-button:focus {
	background: color-mix(in srgb, var(--Charcoal-Blue-950, #1E262E) 85%, #000000);
	color: #FFFFFF;
	text-decoration: none;
}

.btn.btn-outline .elementor-button {
	background: transparent;
	border: 1px solid var(--Primary-415464, #415464);
	color: var(--Primary-415464, #415464);
}

.btn.btn-outline .elementor-button:hover,
.btn.btn-outline .elementor-button:focus {
	background: var(--Primary-415464, #415464);
	color: #FFFFFF;
	text-decoration: none;
}

.btn.btn-muted .elementor-button {
	background: var(--Charcoal-Blue-100, #E0E9ED);
	border: 1px solid transparent;
	color: var(--Charcoal-Blue-400, #6E8FA2);
}

.btn.btn-muted .elementor-button:hover,
.btn.btn-muted .elementor-button:focus {
	background: color-mix(in srgb, var(--Charcoal-Blue-100, #E0E9ED) 88%, #000000);
	color: var(--Charcoal-Blue-400, #6E8FA2);
	text-decoration: none;
}

.btn.btn .elementor-button:disabled,
.btn.btn.is-disabled .elementor-button {
	background: #E5E8EB;
	border-color: transparent;
	color: #9AA3AB;
	cursor: not-allowed;
}

/* --- Divider: hoek transparant uitsnijden aan de rand ------------ */
/* Zet "divider" op het element ZELF dat de achtergrond draagt (foto of */
/* kleur): als de foto op de sectie staat → divider op de SECTIE; staat */
/* de foto op een container → divider op DIE container. Alleen dan zit */
/* de hoek strak aan de rand van de foto, op elk scherm. */
/* Elementor: Advanced → CSS Classes → "divider". */
/* De rechteronderhoek (398×80, schaalt mee via :root --divider-w/h) */
/* wordt uit de mask gesneden: daar is de foto TRANSPARANT en wat */
/* erachter zit schijnt door. Zet op de sectie eronder "divider-next" */
/* (schuift automatisch --divider-h omhoog) met de kleur die door de */
/* hoek moet schijnen (bv. Bone). Content in de hoek wordt meege- */
/* maskeerd → hoek leeghouden. */
/* Twee mask-lagen met exclude/xor: volle laag MIN de hoek = gat. */
/* Maten aanpasbaar via :root: --divider-w / --divider-h */
.divider {
	position: relative;
	z-index: 1;
	-webkit-mask-image: linear-gradient(#000 0 0), url("divider-hole.svg");
	mask-image: linear-gradient(#000 0 0), url("divider-hole.svg");
	-webkit-mask-position: 0 0, right bottom;
	mask-position: 0 0, right bottom;
	-webkit-mask-size: 100% 100%, var(--divider-w) var(--divider-h);
	mask-size: 100% 100%, var(--divider-w) var(--divider-h);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Sectie direct ONDER een .divider: schuift mee omhoog, zodat de */
/* uitgesneden hoek gevuld wordt door de eigen achtergrondkleur. */
.divider-next {
	margin-top: calc(-1 * var(--divider-h));
}

/* --- Divider-tr: hoek RECHTSBOVEN uitsnijden (boven i.p.v. onder) --- */
/* Zet samen met .divider op het element dat de achtergrond draagt: */
/* "divider divider-tr" (Elementor → Advanced → CSS Classes). De mask- */
/* laag wordt dan divider-hole-tr.svg op "right top". Het element schuift */
/* zélf --divider-h omhoog (margin-top negatief) en ligt zo boven de */
/* sectie erboven: in de hoek schijnt de kleur van die sectie erboven */
/* door. Let op: de hoek rechtsonder van de sectie erboven wordt bedekt */
/* door dit element → die hoek leeghouden. */
.divider-tr {
	-webkit-mask-image: linear-gradient(#000 0 0), url("divider-hole-tr.svg");
	mask-image: linear-gradient(#000 0 0), url("divider-hole-tr.svg");
	-webkit-mask-position: 0 0, right top;
	mask-position: 0 0, right top;
	margin-top: calc(-1 * var(--divider-h));
}

/* --- Noise-achtergrond (Figma pixelpatroon op Bone) -------------- */
/* Zet "bg-noise-bone" op een container (Elementor: Advanced → CSS */
/* Classes). noise-bone.svg is de Figma-export (feTurbulence); tile't */
/* naadloos (stitchTiles) op native 1920×1154, dus de pixels blijven */
/* 1:1 op elk scherm. Werkt samen met .divider: de hoek wordt uit de */
/* noise meege-sneden. */
.bg-noise-bone {
	background-color: var(--Bone-E2DACB, #E2DACB);
	background-image: url("noise-bone.svg");
	background-repeat: repeat;
	background-size: 1920px 1154px;
}

/* --- Noise overlay: ruis-pixels vermenigvuldigd met de eigen bg ------ */
/* Voor een container mét eigen achtergrondkleur (Elementor → */
/* Background → Classic → Color): zet "noise" erbij via Advanced → */
/* CSS Classes. noise.svg is transparant — alleen de noise-pixels */
/* (zwart, 10% alpha) zitten in de SVG. */
/* background-blend-mode: multiply vermenigvuldigt de noise-laag met de */
/* EIGEN achtergrond van het element (kleur of foto): op de ruis-pixels */
/* wordt de kleur eronder donkerder (de 10% alpha = sterkte van het */
/* donkerder worden), daarbuiten blijft alles gelijk. Let op: dit is de */
/* blend tussen de background-lagen van het element zélf — mix-blend-mode */
/* op het element zou de hele container met de pagina eráchter blenden. */
/* Tile't naadloos op native 1920×1154. */
.noise {
	background-image: url("noise.svg");
	background-repeat: repeat;
	background-size: 1920px 1154px;
	background-blend-mode: multiply;
}

/* --- Header: transparant, eerste sectie loopt erachter -------- */
/* Header uit de document-flow (absolute) → de eerste rij containers */
/* begint bovenaan op y=0 en loopt zo achter de header door. */
/* In Elementor: header-template (Theme Builder) zelf ook transparant zetten. */
.elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: transparent;
}

/* Header-template transparant (voor als daar een bg-kleur op staat) */
.elementor-location-header .elementor-section,
.elementor-location-header .e-con {
	background: transparent;
}

/* Alleen op bv. de homepage: body.page-id-XX .elementor-location-header { … } */

/* WP admin bar (ingelogd, 32px) staat bovenaan → site-header eronder */
body.admin-bar .elementor-location-header {
	top: 32px;
}