/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 17 2026 | 10:40:23 */
/* ======== CRITICAL CSS (Above-the-fold) ======== */

/* --- 1) Root styling --- */
:root{
	/* === Jouw palette en tokens (critical) === */
	/* Primaire kleuren */
	--color-red-start:#f80534;
	--color-red-end:#c10429;
	--color-blue-start:#0072b1;
	--color-blue-end:#005580;
	--color-green-start:#339403;
	--color-green-end:#267002;
	--color-gray-start:#5a5a5a;
	--color-gray-end:#2f2f2f;
	--color-dark:#212121;
	--color-light-gray:#f7f7f7;
	--color-primary-bg:#ffffff;

	/* Typografie */
	--font-family-base:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--font-weight-bold:700;
	--font-size-base:16px;

	/* Spacing */
	--spacing-xs:4px;
	--spacing-sm:8px;
	--spacing-md:16px;
	--spacing-lg:24px;

	/* Ronde hoeken */
	--radius-sm:4px;
	--radius-md:10px;
	--radius-lg:16px;

	/* Schaduwen */
	--shadow-sm:0 4px 6px rgba(0,0,0,0.05);
	--shadow-md:0 6px 22px rgba(0,0,0,0.05);

	/* === Afgeleide BK-variabelen === */
	--bk-accent: var(--color-blue-start);
	--bk-accent-2: var(--color-red-start);
	--bk-text: var(--color-dark);
	--bk-muted:#6b7280;
	--bk-bg: var(--color-primary-bg);
	--bk-radius: var(--radius-md);
	--bk-gap: 28px;
}

/* --- 2) Reset + basis typografie (klein) --- */
*,*::before,*::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
	font-family:var(--font-family-base);
	font-size:var(--font-size-base);
	color:#0f172a;
	background:#fff;
}

h1, h2, h3 { font-weight:var(--font-weight-bold); margin:0 0 .35em; }
h1 { line-height: 1.15; }
h2 { line-height: 1.2; }
h3 { line-height: 1.25; }
h4, h5, h6 { line-height: 1.3; }

/* Font size: Mobiel 32px & pc 48 px */
/* Scherm groottes 360 768 1280 1536 1920 */
h1 { font-size: clamp(1.6rem, calc(1.3rem + 0.8vw), 2rem); }
h2 { font-size: clamp(2rem, calc(1.6rem + 1.2vw), 3rem); }
h3 { font-size: clamp(1.6rem, calc(1.3rem + 0.8vw), 2rem); }
h4, h5, h6 { font-size: clamp(1.1rem, calc(1rem + 0.3vw), 1.3rem); }

p {
	margin:0 0 1em;
}
p, ul.wp-block-list li, ol.wp-block-list li, summary {
	font-size: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem); /* Default L size wordpress */
}
summary {
	font-weight: bold;
}

/* --- 3) Layout minimale guard --- */
main{ min-height:50vh; }

/* --- 4) Navigatie --- */

/* --- 5) Hero banner --- */
.hero-banner {
	height: calc(70vh - 100px); /* calc(70vh - 100px) */
}

/*
.hero-banner h1,
.hero-banner p,
.hero-banner a {
	white-space:normal;
	text-wrap:balance;
	overflow-wrap:anywhere;
}*/

@media (max-width: 768px) {
	.hero-banner {
		height: calc(100vh - 200px); /* calc(100vh - 200px) */
	}

	/* --- 6) CTA/Buttons die in hero/header kunnen staan (light) --- */
	.wp-element-button {
		display:inline-block;
		text-decoration:none;
		border-radius:999px;
	}
	
	.red-button a, .red-button button {
		background:linear-gradient(180deg,var(--color-red-start) 0%,var(--color-red-end) 100%) !important;
		color:#fff !important;
	}
	
	.blue-button a, .blue-button button {
		background:linear-gradient(180deg,var(--color-blue-start) 0%, #005580 100%) !important;
		color:#fff !important;
	}

	/* --- 7) Boven-de-vouw beeldmateriaal (CLS voorkomen) --- */
	/*.hero-banner img{ display:block; max-width:100%; height:auto; }*/

	/* --- 8) Toegankelijkheid: reduce motion (kleine baseline) --- */
	@media (prefers-reduced-motion: reduce){
		*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
	}

	/* --- 9) Progress bar (je bestaande #pageProgress, dunner en strak) --- */
	#pageProgress .pp-track{ height:4px; background:transparent; }
	#pageProgress .pp-blue{ height:4px; background:var(--bk-accent); width:0; }
	#pageProgress .pp-red{ height:4px; background:var(--bk-accent-2); width:0; }