/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 05 2025 | 11:30:25 */
/* ==========================================================================
Inhoudsopgave
1. Root en globale instellingen
2. Typografie
3. Layout & grids
4. Componenten
4.1 Navigatie & Menu
4.2 Hero Banner
4.3 Buttons & Links
4.4 Headers & Tekst
4.5 Footer
4.6 Loading animatie
4.7 Floating contact en scroll to top
4.8 Webinar countdown timer
4.9 Categorie Pills
4.10 Afbeeldingen
4.11 BK kaarten
4.12 CTA component
4.13 FORMINATOR – CORE 
4.15 Blogpagina & lined titles
4.16 "Meer lezen" – CRP
4.17 BK Post Navigatie
4.18 WooCommerce
4.19 Inhoudsopgave plugin (EZ-TOC)
4.20 Breadcrumbs
4.21 FAQ
4.22 Lists 
5. Media queries & toegankelijkheid
6. TODO en aanbevelingen
============================================================================ */

/* ============================================================== */
/* === 1. Root en globale instellingen === */
/* 
Definieer hier CSS‑variabelen voor kleuren, typografie en spacing.
Deze variabelen worden in de hele stylesheet gebruikt om consistentie te bewaren. 
*/
/* Root verplaatst naar citical css */
/* TODO: Controleer of extra resets (marge/padding op body) nodig zijn */

/* ============================================================== */
/* === 2. Typografie === */
/* Zet basis typografie zoals kopgroottes en responsive schaal. */
body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
}
/* Responsieve tekstgroottes */
.bk-responsive-L   { font-size: clamp(16px, 1rem + 0.2vw, 18px); }
.bk-responsive-XL  { font-size: clamp(17px, 1rem + 0.45vw, 20px); }
.bk-responsive-XXL { font-size: clamp(18px, 1rem + 0.7vw, 22px); }

/* ============================================================== */
/* === 3. Layout & grids === */
main {
	min-height: 50vh; /* zorg dat korte pagina's minimaal halve viewport hoog zijn */
}

/* ============================================================== */
/* === 4. Componenten === */

/* ============================================================== */
/* 4.1 Navigatie & Menu */

/* ============================================================== */
/* 4.2 Hero Banner */
@media (max-width: 768px) {
	.hero-banner {
		height: calc(100vh - 200px); /* calc(100vh - 200px) */
	}
}
@media (min-width: 769px) {
	.hero-banner { height: calc(70vh - 100px); } /* calc(70vh - 100px) */
}
.hero-banner h1,
.hero-banner p,
.hero-banner a {
	white-space: normal;
	text-wrap: balance; /* mooie regelbrekingen */
	overflow-wrap: anywhere; /* voorkom overloop */
}

/* ============================================================== */
/* 4.3 Buttons & Links */
.wp-element-button {
	transition: all 0.3s ease; /* vloeiende hover animaties */
}

.post-metadata { vertical-align: middle; }
.post-metadata a {
	border-radius: 18px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1;
	color: #fff;
	background-color: var(--color-gray-end);
	text-decoration: none;
	display: inline-block;
}
.post-metadata a:hover,
.wp-block-post-terms a:focus {
	background-color: var(--color-dark);
	text-decoration: none;
}
.post-metadata .wp-block-post-terms__prefix {
	font-size: 40px;
	vertical-align: middle;
	font-weight: bold;
}
/* Gradient knoppen voor speciale call‑to‑action buttons */
.red-button a, .red-button button {
	background: linear-gradient(180deg, var(--color-red-start) 0%, var(--color-red-end) 100%) !important; /* rood verloop */
}
.green-button a, .green-button button {
	background: linear-gradient(180deg, var(--color-green-start) 0%, var(--color-green-end) 100%) !important; /* groen verloop */
}
.blue-button a, .blue-button button {
	background: linear-gradient(180deg, var(--color-blue-start) 0%, var(--color-blue-end) 100%) !important; /* blauw verloop */
}
.gray-button a, .gray-button button {
	background: linear-gradient(180deg, var(--color-gray-start) 0%, var(--color-gray-end) 100%) !important; /* grijs verloop */
}

.wp-block-button:hover,
.wp-block-button:focus {
	filter: brightness(120%); /* knop oplichten bij hover */
}

/* Dikgedrukte buttons */
.wp-block-button {
	font-weight: 700;
}

/* ============================================================== */
/* 4.4 Headers & Tekst */
/* zie sectie 2 voor koppen; extra responsive classes zijn al gedefinieerd. */

/* ============================================================== */
/* 4.5 Footer */
footer .footer-inner {
	background: var(--color-light-gray);
	color: #222;
	font-family: var(--font-family-base);
	align-items: flex-start;
}
footer .footer-info,
footer .footer-nav .wp-block-navigation-item__content {
	line-height: 1.5;
}
/* Zoeken in de footer */
footer .footer-search {width: 100%;}
footer .wp-block-search {display: flex; width: 100%;}
footer .wp-block-search__input {
	flex: 1 1 auto;
	width: 100%;
	padding: 10px 14px;
	box-sizing: border-box;
}
footer .wp-block-search__button {
	flex: 0 0 auto;
	padding: 10px 16px;
	background: #fff;
	color: var(--color-dark);
	border: 3px solid var(--color-dark);
	font-weight: 700;
}
footer .wp-block-search__button:hover,
footer .wp-block-search__button:focus {
	background: var(--color-red-start);
	color: #fff;
	border-color: var(--color-red-start);
}
/* Footer layout op grote schermen */
@media (min-width: 1028px) {

	/* Search */
	footer .footer-search {max-width: 800px;}
	footer .wp-block-search {max-width: 800px;}

	/* Socials */
	footer .footer-socials {
		margin-right: 30px;
		margin-left: 10px;
	}
	footer .footer-nav {
		display: flex;
		justify-content: space-between;
	}
	footer .footer-nav > .wp-block-navigation {
		border-left: 2px solid var(--color-dark);
		padding: 0 10px;
		flex: 0 0 auto;
		min-width: 160px;
	}

	footer .footer-nav .wp-block-navigation-item__content {
		text-decoration: none;
		position: relative;
		transition: color .2s ease;
		font-size: 1rem;
	}
	footer .footer-nav .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		width: 0;
		height: 2px;
		background: var(--color-red-start);
		transition: width .25s ease;
	}
	footer .footer-nav .wp-block-navigation-item__content:hover {
		color: var(--color-red-start);
	}
	footer .footer-nav .wp-block-navigation-item__content:hover::after {
		width: 100%;
	}
}
/* Footer layout op mobiel/tablet */
@media (max-width: 1027px) {
	footer .footer-info {
		text-align: center;
		margin: 15px auto 0;
	}
	footer .footer-right {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	footer .footer-socials {
		flex: 0 0 100%;
		display: flex;
		justify-content: center;
	}
	footer .footer-socials .wp-block-social-links {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 21px;
		margin: 8px 0 !important;
		padding: 0 !important;
		list-style: none;
		max-width: 100%;
	}
	footer .footer-socials .wp-block-social-links .wp-social-link {
		margin: 0;
	}
	footer .footer-nav {
		padding: 20px;
		justify-content: center;
		width: 100% !important;
		max-width: 100%;
	}
	footer .footer-nav nav.wp-block-navigation {
		margin: 0;
		padding: 0;
		background: rgba(0,0,0,.03);
		border: 1px solid rgba(0,0,0,.06);
		border-radius: 12px;
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100%;
	}
	footer .footer-nav .wp-block-navigation-item__content {
		padding: 8px 0;
		line-height: 1.2;
		word-break: normal;
		overflow-wrap: anywhere;
		hyphens: auto;
		font-size: clamp(1rem, 5vw, 2.5rem);
	}
	footer .footer-nav .wp-block-navigation__container.is-vertical {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center;
		gap: 8px;
		width: max-content;
		margin: 0 auto;
		padding-left: 0;
		list-style: none;
		text-align: center;
	}
	footer .wp-block-columns {
		display: flex;
		flex-direction: column;
	}
	footer .wp-block-column {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* ============================================================== */
/* 4.6 BK – Page Progress (DELAYED) */
#pageProgress{
	position:fixed; top:0; left:0; right:0;
	/* geen hoogte hier; komt uit Critical */
	z-index:100000; pointer-events:none;
	padding-top:env(safe-area-inset-top);
	background:transparent;
}

#pageProgress .pp-track{
	position:relative; width:100%;
	/* height blijft 4px uit Critical */
	background:transparent; overflow:hidden;
	box-shadow:0 1px 0 rgba(0,0,0,.06);
}

#pageProgress .pp-blue,
#pageProgress .pp-red{
	position:absolute; top:0; left:0; height:100%;
	will-change:width;
}

/* Blue leading bar (gradient + entry animatie) */
#pageProgress .pp-blue{
	background:linear-gradient(90deg, var(--color-blue-start) 0%, var(--color-blue-end) 100%);
	width:0%;
	animation:bk-pp-load .7s ease-out forwards;
	z-index:1;
}

@keyframes bk-pp-load{
	from{ width:0%;}
	to{   width:100%;}
}

/* Red trailing bar (lag + highlight) */
#pageProgress .pp-red{
	background:linear-gradient(90deg, var(--color-red-start) 0%, var(--color-red-end) 100%);
	filter:drop-shadow(0 0 3px rgba(248,5,52,.25));
	width:0%;
	transition:width 120ms cubic-bezier(.22,.61,.36,1);
	z-index:2;
}
#pageProgress .pp-red::after{
	content:""; position:absolute; top:0; right:-6px; width:12px; height:100%;
	pointer-events:none;
	background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0));
	opacity:.55;
}

/* Motion respecteren */
@media (prefers-reduced-motion:reduce){
	#pageProgress .pp-blue{ animation:none; width:100%; }
	#pageProgress .pp-red{ transition:none; filter:none; }
	#pageProgress .pp-red::after{ display:none; }
}

/* ============================================================== */
/* 4.7 Floating contact en scroll to top */
#scrollToTop {
	border: none;
	outline: none;
	position: fixed;
	display: flex;
	bottom: 20px; /* 100px with Boei installed */
	right: 20px;
	width: 60px;
	height: 60px;
	background: var(--color-blue-start); /* basis: blauw */
	color: #fff;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	transition: opacity 1s ease, background 0.25s ease, transform 0.5s ease;
	z-index: 1001;
	opacity: 0;
	visibility: hidden;
}
#scrollToTop.show {
	opacity: 1;
	visibility: visible;
}
#scrollToTop:hover {
	background: var(--color-red-start); /* rood op hover */
	transform: scale(1.1);
}
#scrollToTop svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: currentColor;
}

/* DigiKees Chat icon */
/*
@media (max-width: 768px) {
#boei_button,
#boei_notification_badge {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(10px) !important;
will-change: opacity, transform, visibility;
}
#boei_button.show,
#boei_notification_badge.show {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
}*/

/* Chatbot verbergen op lead pagina's */
/*
.page-id-4516 #scrollToTop,
.parent-pageid-4516 #scrollToTop{
bottom: 20px;
}*/

/* ============================================================== */
/* 4.8 Webinar countdown timer */
.bk-countdown {
	--gap: .5rem;
	--pad-y: .25rem;
	--pad-x: .6rem;
	--bg: #f7f7f7;
	--fg: #111;
	--muted: #666;
	--radius: .5rem;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	display: flex;
	flex-wrap: wrap;                 /* laat netjes afbreken op smalle schermen */
	justify-content: center;
	align-items: center;
	gap: var(--gap);
	margin: 20px auto;
	padding: 0;
	color: var(--fg);
	font-family: var(--font);
	text-align: center;

	overflow: hidden;
	contain: content;                /* isolate layout/paint voor performance */
	content-visibility: auto;        /* skip offscreen rendering (Chromium) */
}

.bk-countdown__unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	background: var(--bg);
	padding: var(--pad-y) var(--pad-x);
	border-radius: var(--radius);
	min-width: 3.75ch;               /* stabieler dan 4ch op smalle devices */
}

.bk-countdown__num {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: clamp(1rem, 4vw, 1.4rem);  /* schaalt vloeiend mee */
	line-height: 1.05;
}

.bk-countdown__label {
	font-size: clamp(.58rem, 2.2vw, .72rem);
	color: var(--muted);
	margin-top: .15rem;
	white-space: nowrap;             /* voorkomt rare wraps */
}

.bk-countdown__sep {
	font-weight: 700;
	opacity: .5;
	line-height: 1;
}

/* Expired state */
.bk-countdown__expired {
	background: var(--bg);
	padding: var(--pad-y) var(--pad-x);
	border-radius: var(--radius);
	font-weight: 600;
}

/* --- Responsieve optimalisaties --- */

/* zeer kleine schermen: compacter en labels verbergen voor performance/ruimte */
@media (max-width: 380px) {
	.bk-countdown { --gap: .35rem; --pad-y: .2rem; --pad-x: .45rem; }
	.bk-countdown__unit { min-width: 3.2ch; }
	.bk-countdown__num { font-size: clamp(.95rem, 5.5vw, 1.15rem); }
	.bk-countdown__label { display: none; }
}

/* middelgroot: iets ruimer */
@media (min-width: 768px) {
	.bk-countdown { --gap: .6rem; --pad-y: .35rem; --pad-x: .7rem; }
	.bk-countdown__num { font-size: 1.5rem; }
	.bk-countdown__label { font-size: .78rem; }
}

/* hoge-contrast thema’s kunnen eenvoudig kleuren overschrijven op body */
@media (prefers-contrast: more) {
	.bk-countdown { --bg: #fff; --fg: #000; --muted: #333; }
}

/* minder beweging (voor zekerheid, al is er geen animatie) */
@media (prefers-reduced-motion: reduce) {
	.bk-countdown, .bk-countdown * { transition: none !important; }
}


/* ============================================================== */
/* 4.9 Categorie Pills */
ul.cornerstone-topics {
	list-style: none;
	padding: 0;
	margin: 30px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}
.blog-cornerstones.is-layout-constrained > * {
	max-width: none !important;
}
@media (max-width: 768px) {
	ul.cornerstone-topics li {
		display: none !important;
	}
	ul.cornerstone-topics {
		margin: 10px 5px;
	}
	ul.cornerstone-topics,
	ul.cornerstone-topics li.head-cat {
		display: inline-flex !important;
	}
}

ul.cornerstone-topics li.head-cat {background: var(--color-gray-end);}
ul.cornerstone-topics li {background: var(--color-gray-start);}
ul.cornerstone-topics li:hover, ul.cornerstone-topics li:focus {background: var(--color-dark);}
ul.cornerstone-topics li {
	display: inline-flex;
	align-items: center;
	border-radius: 18px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1;
	color: #fff;
	transition: all 0.15s ease-in-out;
}
ul.cornerstone-topics li.head-cat {
	font-weight: 600;
	position: relative;
}
ul.cornerstone-topics li:hover,
ul.cornerstone-topics li:focus {
	transform: translateY(-1px);
	text-decoration: none;
}
ul.cornerstone-topics li a {
	text-decoration: none;
}
@media (min-width: 768px) {
	ul.cornerstone-topics li.head-cat::after {
		content: ">>>";
		font-size: 21px;
		color: #fff;
		font-weight: 700;
		line-height: 1;
		margin-left: 12px;
	}
}

/* Kleurenschema's voor verschillende cornerstone-groepen */
/*
.blog-cornerstones ul.cornerstone-topics:nth-of-type(1) li {
background: #a3d4f1;
color: #000;
}
.blog-cornerstones ul.cornerstone-topics:nth-of-type(1) li.head-cat {
background: var(--color-blue-start);
color: #fff;
}
.blog-cornerstones ul.cornerstone-topics:nth-of-type(1) li.head-cat:hover {
background: #005b8e;
}
.blog-cornerstones ul.cornerstone-topics:nth-of-type(3) li {
background: #a9e5c7;
color: #000;
}
.blog-cornerstones ul.cornerstone-topics:nth-of-type(3) li.head-cat {
background: #43a047;
color: #fff;
}
.blog-cornerstones ul.cornerstone-topics:nth-of-type(3) li.head-cat:hover {
background: #2e7031;
}
.blog-cornerstones ul.cornerstone-topics:nth-of-type(4) li {
background: #fff4cc;
color: #000;
}
.blog-cornerstones ul.cornerstone-topics:nth-of-type(4) li.head-cat {
background: #f4b400;
color: #fff;
}
.blog-cornerstones ul.cornerstone-topics:nth-of-type(4) li.head-cat:hover {
background: #c79400;
}
*/

/* ============================================================== */
/* 4.10 Afbeeldingen */

/* Image effecten */
.zoom-image img {
	box-shadow: 3px 3px 4px rgba(33, 33, 33, 0.7);
}
@media (min-width: 768px) {
	.zoom-image img:hover,
	.zoom-image img:focus {
		box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.7);
		transform: scale(1.05);
		transition: transform 0.2s linear;
	}
}

@media (max-width: 768px) {
	.image-desktop { display: none; }
}
@media (min-width: 769px) {
	.image-mobile { display: none; }
}

/* ============================================================== */
/* 4.11 BK kaarten */
/* ============================================================== */
.bk-card {
	position: relative;
	background: #fafbfc !important;
	border-radius: var(--radius-lg);
	border: 1px solid #e6e8eb;
	box-shadow: 0 6px 22px rgba(0,0,0,0.05);
	padding: 18px 18px 22px;
	overflow: visible;
	transition: all 0.25s ease;
	flex-direction: column;
	justify-content: center; /* Verticaal centreren */
}

.bk-horizontal .bk-card h3 {
	max-width: 120% !important; 
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.bk-horizontal-4 .bk-card h3 {
	font-size: 1.2rem;
}
.bk-horizontal-3 .bk-card h3 {
	font-size: 1.5rem;
}

.bk-card h3 a {
	text-decoration: none;
}

/* Badge */
.bk-badge {
	position: absolute;
	top: -15px;
	right: -15px;
	z-index: 2;
	display: inline-block;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2px;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-dark);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.20);
}

/* Hoogte instellen kaarten */
/* ========================================================= */
/* OPLOSSING: Kaarthoogte & Content Onderaan Uitlijnen (Desktop) */
/* ========================================================= */

@media (min-width: 1001px) {
	/* 1. De Ouder-Container (.wp-block-column) - Zorgt voor GELIJKE HOOGTE */
	.wp-block-columns {
		/* Dit moet op 'stretch' blijven staan om gelijke hoogte te garanderen */
		align-items: stretch !important; 
	}

	/* 2. De Kaart (.bk-card) - Zorgt voor de interne content-flow */
	.bk-card {
		/* Maak de kaart zelf een flex-container */
		display: flex;
		/* Stapel de items verticaal */
		flex-direction: column;
		/* Zorg dat de kaart de volle hoogte van de kolom inneemt */
		height: 100%;
		/* Lijn de content onderaan uit (start) */
		/*justify-content: flex-end !important;*/
		/* De content moet strak onderin staan, we gebruiken 'margin-top: auto' voor de extra ruimte */
		align-items: stretch !important; /* Zorgt dat elementen de volle breedte pakken */
	}

	/* 3. Het Eerste Element (de afbeelding) - Pakt alle extra ruimte */
	/* Alle items in de flex-kolom staan nu strak bovenaan. */
	/* Door het eerste element (de badge is absolute) de 'margin-bottom: auto' te geven, */
	/* wordt alle resterende verticale ruimte BOVEN de content geduwd. */
	.bk-card > span.bk-badge:first-of-type + figure, /* Als er een badge is */
	.bk-card > figure:first-of-type { /* Als er geen badge is */
		margin-top: auto !important;
		margin-bottom: auto !important; /* Verwijder de oude 24px marge voor een strakker effect */
		/* Flex-grow zorgt ervoor dat alsnog de afbeelding ruimte mag innemen */
		flex-grow: 0; 
	}

	/* 4. Stel de extra ruimte onder de afbeelding */
	.bk-card figure {
		margin-bottom: 20px !important;
	}

	/* 5. Zorg dat de titel en beschrijving bovenaan de overige content blijven plakken */
	/* De beschrijving is nu de variabele factor in hoogte. */
	.bk-card .wp-block-heading,
	.bk-card p.has-medium-font-size,
	.bk-card .wp-block-buttons {
		/* Dit zorgt ervoor dat de overige content strak onder elkaar blijft */
		flex-shrink: 0;
	}

	/* FIX: Zorg ervoor dat de knop helemaal onderaan de kaart staat. */
	.bk-card .wp-block-buttons:last-of-type {
		margin-top: 20px; /* Dwingt de knop naar de absolute onderkant van de resterende flex-ruimte */
	}

	.bk-card p {
	}

}

/* ============================================================== */
/* 4.11 BK kaarten - Desktop Override voor Consistentie */
/* ============================================================== */
@media (min-width: 1001px) {
	.bk-horizontal {
		display: grid !important; 
		gap: 24px !important; 
		overflow: visible !important; 
		padding: 20px 0 !important;
	}

	/* Definineer kolommen */
	.bk-horizontal-4 {
		grid-template-columns: repeat(4, 1fr) !important; 
	}
	.bk-horizontal-3 {
		grid-template-columns: repeat(3, 1fr) !important; 
	}

}

/* ============================================================== */
/* 4.11 BK kaarten - Mobiel (onder 1000px) - BEHOUDEN */
/* ============================================================== */
/* Dit gedeelte behouden we om je horizontale scroll-ervaring te garanderen */
@media (max-width: 1000px) {
	.bk-horizontal {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: 80vw; /* Behoudt de breedte van 80% van de viewport */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding: 16px;
	}
	/* Zorg dat de kaart de volle hoogte van de container inneemt op mobiel */
	.bk-card {
		scroll-snap-align: start;
		height: 100% !important; 
		display: flex !important;
		flex-direction: column !important;
	}
	/* Zorgt ervoor dat de knop ook op mobiel onderaan staat */
	.wp-block-button.is-style-bk-button-primary {
		margin-top: auto !important; 
	}
	.bk-card-primary { order: -1; }
}

/* ========================================================= */
/* FIX: Pijl VAST op Scherm (Nieuwe Wrapper) */
/* ========================================================= */
/* Standaard de pijl verbergen */
.bk-arrow-fixed-wrapper {
	display: none;
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 1000px) {
	/* De pijl zelf: stijl en maak hem klikbaar */
	.bk-scroll-arrow-fixed {
		height: 48px;
		width: 48px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		font-weight: 700;
		color: var(--color-blue-start);
		cursor: pointer;
		opacity: 0.9;
		transition: opacity 0.3s ease;
		z-index: 100; /* Zorg dat hij bovenaan ligt */
	}

	/* De Wrapper: Positioneer de pijl vast op het scherm */
	.bk-arrow-fixed-wrapper {
		display: block;
		position: absolute;
		right: 16px; 
		top: 55%; 
		z-index: 100;
		opacity: 0.9;
		pointer-events: auto;
	}

}

/* ============================================================== */
/* Kaarten layout */

/* -- 1. Globale Styling voor de sectie -- */
.qualifier-grid {
	display: flex; /* Zet de twee boxen naast elkaar */
	justify-content: center !important;
	gap: 30px !important; /* Ruimte tussen de twee boxen */
	margin: 30px auto;
	max-width: 1000px; /* Maximale breedte van de sectie */
}

/* -- 2. Basis Styling van de boxen -- */
.qualifier-box {
	flex: 1;
	padding: 30px;
	border-radius: 8px; /* Zachte hoeken voor de Tony Robbins/Russel Brunson look */
	text-align: left;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Lichte schaduw */
}

.qualifier-title {
	font-size: 1.5em;
	margin-top: 0;
	font-weight: 700;
}

/* De lijst zelf resetten */
.qualifier-list {
	list-style: none; /* Verwijder standaard list bullets */
	padding: 0;
}

.qualifier-list li {
	margin-bottom: 15px;
	padding-left: 30px; /* Ruimte voor het custom icoon */
	position: relative;
	line-height: 1.4;
	font-size: 1.1em;
}

/* -- 3. Specifieke Styling voor NIET (Rood/Kruis) -- */
:root {
	--niet-bg-color: #ffeaea; /* Zeer lichtroze/rood */
	--niet-icon-color: #d83d3d; /* Duidelijk rood */
}

.qualifier-box--niet {
	background-color: var(--niet-bg-color);
}

.qualifier-box--niet .qualifier-title {
	color: var(--niet-icon-color);
}

.qualifier-box--niet .qualifier-list li::before {
	content: '✖'; /* Unicode kruisje */
	color: var(--niet-icon-color);
	font-weight: bold;
	position: absolute;
	left: 0;
	top: 0;
}

/* -- 4. Specifieke Styling voor WEL (Groen/Vinkje) -- */
:root {
	--wel-bg-color: #eaf8e9; /* Zeer lichtgroen */
	--wel-icon-color: #4a9e4a; /* Duidelijk groen */
}

.qualifier-box--wel {
	background-color: var(--wel-bg-color);
}

.qualifier-box--wel .qualifier-title {
	color: var(--wel-icon-color);
}

.qualifier-box--wel .qualifier-list li::before {
	content: '✓'; /* Unicode vinkje (check mark) */
	color: var(--wel-icon-color);
	font-weight: bold;
	position: absolute;
	left: 0;
	top: 0;
}

/* -- 5. Responsive Aanpassing (Belangrijk!) -- */
@media (max-width: 768px) {
	.qualifier-grid {
		flex-direction: column; /* Boxen onder elkaar op mobiel */
		gap: 20px;
		margin: 20px;
	}
}

/* ============================================================== */
/* Receipt bonnetjes */
.receipt {
	max-width: 420px;
	margin: 0 auto !important;
	background: #fff;
	padding: 1.5rem;
	border: 1px solid #ccc;
	box-shadow: 0 6px 16px rgba(0,0,0,0.1);
	font-family: system-ui, sans-serif;
}

.receipt h3 {
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 0.5rem;
}

.receipt p {
	font-size: 0.9rem;
	margin: 0.4rem 0;
	text-align: center;
}

.receipt-list {
	margin: 1rem 0;
	border-top: 2px dashed #000;
	border-bottom: 2px dashed #000;
	padding: 0.75rem 0;
}

.receipt-list div {
	display: flex;
	justify-content: space-between;
	padding: 0.35rem 0;
	border-bottom: 1px dotted #ccc;
	align-items: center;
}

.receipt-list div:last-child {
	border-bottom: none;
}

.receipt-list .item-name,
.receipt-list .item-price {
	line-height: 1.2;
}

.receipt-list .item-name {
	font-size: 0.9rem;
}

.receipt-list .item-price {
	font-family: "Courier New", monospace;
	font-weight: bold;
	font-size: 0.9rem;
	margin-right: 10px !important; /* bon rechts uitlijnen */
}



/* ============================================================== */
/* 4.12 CTA component */
/* CTA is toekomstbestendig; de basisstructuur staat beschreven bovenaan in comments. */
/*
Primaire CTA-knoppen die buiten de CTA-component worden gebruikt.
.btn-cta: basis knop met magnetisch effect zonder extra ring.
.btn-cta-primary: variant met pulserende ring; deze gebruikt een aparte animatie
(btnPulseCTA) zodat we de oorspronkelijke 'btnPulse' animatie kunnen behouden voor de bottom CTA.
*/
.btn-cta {
	display: inline-block;
	border-radius: 999px;
	position: relative;
	transition: transform 0.15s ease;
}
.btn-cta-primary {
	display: inline-block;
	border-radius: 999px;
	position: relative;
	transition: transform 0.15s ease, background-color 0.2s ease;
}
.btn-cta-primary::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: inherit;
	border: 10px solid rgba(229, 57, 53, 0.45);
	opacity: 0;
	pointer-events: none;
	animation: btnPulseCTA 3s ease-out infinite; /* gebruik aparte animatie */
}
@keyframes btnPulseCTA {
	0%   { transform: scale(0.92); opacity: 0.8; }
	60%  { opacity: 0; }
	100% { transform: scale(1.25); opacity: 0; }
}
.cta-box{
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 30px;
	align-items: center;
	background: var(--color-primary-bg);
	color: #0f172a;
	border-radius: var(--radius-lg);
	padding: 22px 24px;
	margin: 24px 0;
	box-shadow: 0 10px 25px rgba(2,6,23,.10);
	overflow: hidden;
}
.cta-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 32px;
	line-height: 1;
	user-select: none;
	box-shadow: 0 6px 16px rgba(37,99,235,.35);
	background: radial-gradient(60% 60% at 35% 35%, #ff9aa5 0%, #f43f5e 40%, #ef4444 100%);
	color: #fff;
}
.cta-icon svg,
.cta-icon i {
	fill: #fff !important;
	color: #fff !important;
}
.cta-icon svg { width: 36px; height: 36px; display:block; }
.cta-box h3{
	font-size: 1.6rem;
	line-height: 1.2;
	font-weight: 800;
	margin: 0 0 6px 0;
	color: #0f172a;
}
.cta-box p{
	margin: 0 0 6px 0;
	color: #334155;
}
.cta-box ul{
	margin: 6px 0 14px 0;
	padding-left: 1.1rem;
	color: #475569;
}
.cta-box ul li{ margin: 4px 0; }
.cta-btn{
	display: inline-block;
	background: #2563eb;
	color: #ffffff;
	padding: 12px 20px;
	border-radius: 10px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(37,99,235,.35);
	transform: translateY(0);
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cta-btn:hover{
	background: #1e40af;
	box-shadow: 0 8px 22px rgba(30,64,175,.35);
	transform: translateY(-2px);
}
.cta-btn:focus{
	outline: 2px solid #1e40af;
	outline-offset: 2px;
}
@media (max-width: 640px){
	.cta-box{
		grid-template-columns: 1fr;
		text-align: left;
	}
	.cta-icon{ width: 64px; height: 64px; }
	.cta-box h3{ font-size: 1.4rem; }
	.cta-btn{
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}
@media (prefers-reduced-motion: reduce){
	.cta-btn{ transition: none; }
}
/* Theme utilities: kleuren voor verschillende CTA thema's */
.cta-theme-teal .cta-icon{
	background: radial-gradient(60% 60% at 35% 35%, #a7f3d0 0%, #14b8a6 45%, #0f766e 100%);
	box-shadow: 0 6px 16px rgba(20,184,166,.35);
}
.cta-theme-teal .cta-btn{
	background: #14b8a6;
	box-shadow: 0 6px 16px rgba(20,184,166,.35);
}
.cta-theme-teal .cta-btn:hover{
	background: #0f766e;
	box-shadow: 0 8px 22px rgba(15,118,110,.35);
}
.cta-theme-blue .cta-icon{
	background: radial-gradient(60% 60% at 35% 35%, #b3d4ff 0%, #2563eb 45%, #1d4ed8 100%);
	box-shadow: 0 6px 16px rgba(37,99,235,.35);
}
.cta-theme-blue .cta-btn{
	background: #2563eb;
	box-shadow: 0 6px 16px rgba(37,99,235,.35);
}
.cta-theme-blue .cta-btn:hover{
	background: #1e40af;
	box-shadow: 0 8px 22px rgba(30,64,175,.35);
}
.cta-theme-rose .cta-icon{
	background: radial-gradient(60% 60% at 35% 35%, #ffc0cb 0%, #f43f5e 45%, #e11d48 100%);
	box-shadow: 0 6px 16px rgba(244,63,94,.35);
}
.cta-theme-rose .cta-btn{
	background: #f43f5e;
	box-shadow: 0 6px 16px rgba(244,63,94,.35);
}
.cta-theme-rose .cta-btn:hover{
	background: #be123c;
	box-shadow: 0 8px 22px rgba(190,18,60,.35);
}
.cta-theme-amber .cta-icon{
	background: radial-gradient(60% 60% at 35% 35%, #ffe7b3 0%, #f59e0b 45%, #d97706 100%);
	box-shadow: 0 6px 16px rgba(245,158,11,.35);
}
.cta-theme-amber .cta-btn{
	background: #f59e0b;
	box-shadow: 0 6px 16px rgba(245,158,11,.35);
}
.cta-theme-amber .cta-btn:hover{
	background: #b45309;
	box-shadow: 0 8px 22px rgba(180,83,9,.35);
}
.cta-theme-violet .cta-icon{
	background: radial-gradient(60% 60% at 35% 35%, #e9d5ff 0%, #8b5cf6 45%, #6d28d9 100%);
	box-shadow: 0 6px 16px rgba(139,92,246,.35);
}
.cta-theme-violet .cta-btn{
	background: #8b5cf6;
	box-shadow: 0 6px 16px rgba(139,92,246,.35);
}
.cta-theme-violet .cta-btn:hover{
	background: #6d28d9;
	box-shadow: 0 8px 22px rgba(109,40,217,.35);
}
.cta-compact{ padding:16px 18px; }
.cta-compact .cta-icon{ width:56px; height:56px; font-size:28px; }
.cta-spacious{ padding:28px 28px; }
.cta-spacious .cta-icon{ width:80px; height:80px; font-size:36px; }

/* ============================================================== */
/* 4.13 FORMINATOR – CORE */

/* Checkbox margin op een lijn */
.forminator-checkbox__label p, .forminator-consent__label p {
	margin: 0;
}

/* Forminator knoppen */
.forminator-button {
	border: none;
	border-radius: 999px !important;
	padding: 1rem 2.25rem;
	transition: all 0.3s ease; /* vloeiende hover animaties */
}
.forminator-button-submit {
	background-color: var(--color-red-start);
	color: #fff;
}
.forminator-button-submit:hover, .forminator-button-submit:focus {
	background-color: var(--color-red-end);
}

/* Verwijder focusrand of outline bij klikken/focus */
.forminator-ui:focus,
.forminator-ui:focus-within,
.forminator-ui .forminator-pagination:focus,
.forminator-ui .forminator-pagination:focus-within {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* 4.14a FORMINATOR – QUIZ */
/* 4.14a FORMINATOR – QUIZ */
/* Afbeeldingen kleiner maken - overschrijven standaar setting */
.forminator-ui .forminator-quiz-intro .forminator-quiz--image {
	width: 80% !important;
	margin: 20px auto !important;
}
/*
@media (min-width: 1024px) {
.forminator-ui .forminator-quiz-intro {
overflow: auto;
clear: both;
}

.forminator-ui .forminator-quiz-intro .forminator-quiz--image {
float: left !important;
width: 40% !important;
margin-right: 20px;
margin-bottom: 10px;
}
}*/

/* Quiz introductie */
.forminator-ui .forminator-quiz-intro .forminator-quiz--description p:first-of-type {
	font-size: 1.5rem !important;
}

/* horizontal buttons */
.forminator-ui .wp-element-button {
	border-radius: 999px;
	padding: .55rem 1rem;
	margin: 0;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.forminator-ui .forminator-button.forminator-quiz-start {
	font-weight: 700 !important;
	font-size: 18px !important;
}

@media (min-width: 768px) {
	.forminator-ui .wp-block-buttons {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.75rem; /* ruimte tussen knoppen */
		margin-bottom: 2rem;
	}
}

/* bonus block */
.bonus-blok {
	background: #e8f4ff; /* zachte blauwe achtergrond */
	border-left: 4px solid #0066a1; /* hoofdblauw */
	padding: 1rem;
	border-radius: 6px;
	margin-top: 1rem;
	box-shadow: 0 2px 8px rgba(0, 102, 161, 0.08);
	text-align: center;
	color: #004b80;
}
.bonus-blok::before {
	content: "🎁 ";
}

/* Meer ruimte voor resultaten op pc - tijdelijk uitgeschakeld */
@media (min-width: 99999px) {
	.forminator-quiz--result, .forminator-result {
		width: 1024px !important;       /* gewenste breedte */
		max-width: 100vw;               /* failsave voor overflow */
		margin-left: 50%;
		transform: translateX(-50%);    /* centreert het element */
	}
}

/* Forminator transitie paginatie */
.forminator-pagination {
	transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}
.forminator-pagination[aria-hidden="true"] {
	opacity: 0;
	visibility: hidden;
}


/* Vorige volgede knop op mobiel (800 px voor overwrite forminator) */
@media (max-width: 800px) {
	.forminator-pagination-footer {
		display: flex;
		justify-content: space-between;
	}
	.forminator-button-back {
		margin-right: auto;
	}
	.forminator-button-next {
		margin-left: auto;
	}
}

/* Remove quiz options */
.forminator-ui.forminator-quiz .forminator-quiz--result .forminator-result .forminator-quiz--action-buttons {
	display: none !important;
}

/* Social share – robuust centreren */
.forminator-quiz--social li.forminator-social--icon a {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	color: #fff;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	text-align: center;
	line-height: 1;        /* geen baseline shift */
	font-size: 0;          /* whitespace/baseline neutraliseren */
}
.forminator-quiz--social li.forminator-social--icon a:hover{
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* Icoon (font-glyph via ::before) exact in het midden */
.forminator-quiz--social li.forminator-social--icon a i,
.forminator-quiz--social li.forminator-social--icon a i::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.forminator-quiz--social li.forminator-social--icon a i {
	display: block;
	font-size: 22px;      /* icon-grootte */
	line-height: 1;
	width: auto;
	height: auto;
	color: #fff !important; /* Maak icoon wit */
}
.forminator-quiz--social li.forminator-social--icon a i::before {
	display: block;
	line-height: 1;
}

/* Kleuren per platform */
.forminator-quiz--social a[data-social="facebook"]   { background-color: #1877F2; }
.forminator-quiz--social a[data-social="twitter"],
.forminator-quiz--social a[data-social="x"]          { background-color: #000000; }
.forminator-quiz--social a[data-social="linkedin"]   { background-color: #0A66C2; }

/* Hover (iets lichter) */
.forminator-quiz--social a[data-social="facebook"]:hover { background-color: #3b8af5; }
.forminator-quiz--social a[data-social="twitter"]:hover,
.forminator-quiz--social a[data-social="x"]:hover        { background-color: #111111; }
.forminator-quiz--social a[data-social="linkedin"]:hover  { background-color: #1177d1; }

/* ============================================================== */
/* 4.15 Blogpagina & lined titles */
@media (min-width: 769px) {
	.wp-block-heading.bk-lined-title {
		display: flex !important;
		align-items: center;
		gap: 12px;
		margin-bottom: .6rem;
		position: relative;
		padding-left: 18px;
	}
	.wp-block-heading.bk-lined-title::before {
		content: "";
		position: absolute;
		left: 0; top: 50%;
		width: 12px;
		height: 3px;
		background: rgba(0,0,0,.3);
		transform: translateY(-50%);
		border-radius: 2px;
	}
	.wp-block-heading.bk-lined-title::after {
		content: "";
		flex: 1 1 0%;
		height: 3px;
		background: rgba(0,0,0,.22);
		border-radius: 2px;
		transform: translateY(1px);
	}
	.wp-block-heading.bk-lined-title > * { margin: 0 !important; }
	.wp-block-heading.bk-lined-title.blue::before  { background: var(--color-blue-start); }
	.wp-block-heading.bk-lined-title.green::before { background: #43a047; }
	.wp-block-heading.bk-lined-title.yellow::before{ background: #f4b400; }
	.wp-block-heading.bk-lined-title.gray::before  { background: rgba(0,0,0,.3); }
}
@media (max-width: 768px) {
	.wp-block-heading.bk-lined-title {
		border-top: 3px solid rgba(0,0,0,.22);
		padding-top: 8px;
	}
}
.wp-block-heading.bk-lined-title {
	font-size: clamp(30px, 2.5vw, 60px) !important;
}

/* Volledige breedte blog bij afsnijding 1110-1120px */
@media (max-width: 1120px) {
	body.blog .wp-block-post-featured-image,
	body.blog .wp-block-post-featured-image a,
	body.blog .wp-block-post-featured-image img,
	body.archive .wp-block-post-featured-image,
	body.archive .wp-block-post-featured-image a,
	body.archive .wp-block-post-featured-image img {
		width: 80vw !important;
		height: 80vw !important;
		max-width: 100% !important;
		margin: 20px auto;
	}
}

/* ============================================================== */
/* 4.16 "Meer lezen" – CRP */
.crp-bk, .crp-bk * { box-sizing: border-box; }
.crp-bk { display:block; max-width:100%; }
.crp-bk ul { list-style:none; margin:0; padding:0; }
.crp-bk li{
	position:relative;
	background:#fff;
	border:1px solid #e6e8eb;
	border-radius:16px;
	box-shadow:0 6px 22px rgba(0,0,0,.05);
	padding:14px 14px 18px;
	overflow:hidden;
	transition:transform .25s, box-shadow .25s, border-color .25s;
	scroll-snap-align:start;
	min-width:0;
}
.crp-bk li:hover{
	border-color:#ccd0d5;
	box-shadow:0 10px 28px rgba(0,0,0,.08);
	transform:translateY(-2px);
}
.crp-bk li > a.crp_link{
	display:block;
	color:inherit;
	text-decoration:none;
}
.crp-bk li figure{ margin:0 0 12px 0; }
.crp-bk li img{
	display:block;
	width:100%;
	height:auto;
	border-radius:12px;
	aspect-ratio:16/10;
	object-fit:cover;
}
.crp-bk .crp_title{
	display:block;
	margin:0 0 6px 0;
	color:#0f172a;
	font-weight:800;
	font-size:1.05rem;
	line-height:1.25;
	text-wrap:balance;
}
.crp-bk .crp_date{
	display:inline-block;
	margin-bottom:6px;
	font-size:.82rem;
	font-weight:600;
	color:#64748b;
}
.crp-bk .crp_excerpt{
	display:block;
	font-size:.95rem;
	line-height:1.5;
	color:#475569;
}
.crp-bk .crp_primary_term{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(29, 78, 216, .15);
	background: #eaf1ff;
	color: #1d4ed8;
	font-weight: 800;
	font-size: .80rem;
	line-height: 1;
	letter-spacing: .2px;
	box-shadow: 0 2px 8px rgba(29, 78, 216, .15);
	margin: 0 0 10px 0;
	white-space: nowrap;
}
.crp-bk .crp_primary_term::before{
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: currentColor;
	transform: translateY(0);
}
.crp-bk li{ display: flex; flex-direction: column; }
.crp-bk li > .crp_primary_term{ order: -1; }
.crp-bk li > a.crp_link .crp_primary_term{ display:inline-flex; }
.crp-bk li > .crp_primary_term + a.crp_link figure,
.crp-bk li > a.crp_link .crp_primary_term + figure{
	margin-top: 4px;
}
@media (max-width: 480px){
	.crp-bk .crp_primary_term{
		font-size: .78rem;
		padding: 5px 9px;
	}
}
@media (min-width:1001px){
	.crp-bk ul{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		gap:24px;
		padding:4px 0;
		overflow:visible;
	}
}
@media (max-width:1000px){
	.crp-bk{ overflow-x:hidden; }
	.crp-bk ul{
		display:grid;
		grid-auto-flow:column;
		grid-auto-columns:70vw;
		gap:20px;
		padding:16px 16px 18px;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		overscroll-behavior-x:contain;
		scroll-snap-type:x mandatory;
		scroll-padding-left:16px;
	}
	.crp-bk ul::-webkit-scrollbar{ height:8px; }
	.crp-bk ul::-webkit-scrollbar-thumb{
		background:rgba(0,0,0,.15);
		border-radius:999px;
	}
}

/* ============================================================== */
/* 4.17 BK Post Navigatie */
.bk-post-nav{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	align-items: stretch;
	margin: 28px 0 8px;
}
.bk-post-nav:has(.bk-post-nav__item:nth-child(2)){
	grid-template-columns: 1fr 1fr;
}
.bk-post-nav:has(.bk-post-nav__item:nth-child(1)):not(:has(.bk-post-nav__item:nth-child(2))){
	grid-template-columns: 1fr;
}
.bk-post-nav__item:not(:has(.bk-post-nav__title)),
.bk-post-nav__item:has(.bk-post-nav__title:empty){
	display: none;
}
.bk-post-nav__item{
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #ffffff;
	color: #0f172a;
	text-decoration: none;
	border: 1px solid #e6e8eb;
	border-radius: 16px;
	padding: 16px 18px;
	box-shadow: 0 6px 22px rgba(0,0,0,.05);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	overflow: hidden;
	min-width: 0;
	width: 100%;
}
.bk-post-nav__eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	width:max-content; margin:0 0 10px 0; padding:6px 10px;
	font-weight:800; font-size:.9rem; line-height:1; letter-spacing:.2px;
	color:#1d4ed8; background:#eaf1ff; border:1px solid rgba(29,78,216,.15);
	border-radius:999px; box-shadow:0 2px 8px rgba(29,78,216,.15);
}
.bk-post-nav__eyebrow::before{ content:""; width:7px; height:7px; border-radius:999px; background:currentColor; }
.bk-post-nav__title{
	font-weight:800; font-size:1.25rem; line-height:1.3; color:#0f172a;
	display:block;
	white-space:normal;
	word-break:break-word;
	overflow-wrap:anywhere;
}
.bk-post-nav__item::after{
	content:"→"; font-weight:800; font-size:20px; color:#2563eb;
	align-self:center; margin-left:auto; transition:transform .2s ease;
}
.bk-post-nav__prev::after{ content:"←"; margin-left:0; margin-right:auto; }
.bk-post-nav__item:hover{ border-color:#ccd0d5; box-shadow:0 10px 28px rgba(0,0,0,.08); transform:translateY(-2px); }
.bk-post-nav__item:hover::after{ transform:translateX(4px); }
.bk-post-nav__prev:hover::after{ transform:translateX(-4px); }
@media (max-width:720px){
	.bk-post-nav{ grid-template-columns:1fr; gap:16px; margin-top:24px; }
	.bk-post-nav__item::after{ display:none; }
	.bk-post-nav__title{ font-size:1.35rem; }
}

/* ============================================================== */
/* 4.18 WooCommerce */
.wc-block-components-product-sale-badge {
	background: linear-gradient(180deg, var(--color-red-start) 0%, var(--color-red-end) 100%) !important;
	color: #fff;
}

/* ============================================================== */
/* 4.19 Inhoudsopgave plugin (EZ-TOC) */
.ez-toc-sticky-fixed {
	max-width: 80vw;
}
.ez-toc-open-icon {
	opacity: 0;
	pointer-events: none;
	transform: translateX(-8px);
	transition: opacity .25s ease, transform .25s ease, background .3s ease, box-shadow .25s ease;
	will-change: transform, box-shadow;
}
.toc-reveal .ez-toc-open-icon {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}
@media (min-width: 769px) {
	.ez-toc-open-icon:hover {
		background: linear-gradient(180deg, var(--color-gray-start) 0%, var(--color-gray-end) 100%);
		color: #fff;
		transform: translateY(-3px) scale(1.02);
		box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
	}
}
@media (max-width: 768px) {
	#ez-toc-sticky-container ul ul {
		margin-left: 0;
	}
	.ez-toc-open-icon {
		padding: 5px 7px 15px 0;
	}
}

/* ============================================================== */
/* 4.20 Breadcrumbs */
.breadcrumbs {
	font-size: 0.9rem;
	font-weight: 400;
	margin: 0.5rem 0 1.5rem 0;
	padding: 0;
	line-height: 1.4;
	color: #666;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.3rem;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs a {
	color: #0073aa;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}
.breadcrumbs a:hover {
	color: #005177;
	text-decoration: underline;
}
.breadcrumbs span.separator,
.breadcrumbs::before {
	content: "›";
	margin: 0 0.3rem;
	color: #aaa;
}
.breadcrumbs > a:first-child::before {
	content: "";
	margin: 0;
}
.breadcrumbs span.current,
.breadcrumbs strong,
.breadcrumbs > :last-child {
	font-weight: 600;
	color: #333;
}
@media (max-width: 768px) {
	.breadcrumbs {
		font-size: 0.8rem;
		gap: 0.2rem;
	}
}

/* ============================================================== */
/* 4.21 FAQ */
body.page-id-97 h2,
body.page-id-97 h3 {
	margin-top: 50px;
}

/* ============================================================== */
/* 4.22 Lists */

/* ▶▶▶ Triangle */
.list-triangle {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.list-triangle li {
	padding-left: 22px;
	position: relative;
	margin: 6px 0;
}
.list-triangle li::before {
	content: "▶";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 12px;
	color: #333;
	font-weight: 700;
}

/* ✔✔✔ Checkmarks */
.list-check {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.list-check li {
	padding-left: 28px;
	margin: 6px 0;
	position: relative;
}
.list-check li::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	font-size: 16px;
	color: #27ae60;
}

/* ✖✖✖ Crosses */
.list-cross {
	list-style: none;
	padding-left: 0;
}
.list-cross li {
	padding-left: 28px;
	margin: 6px 0;
	position: relative;
}
.list-cross li::before {
	content: "✖";
	color: #c0392b;
	position: absolute;
	left: 0;
	font-size: 16px;
	font-weight: 700;
}

/* ℹℹℹ Info */
.list-info {
	list-style: none;
	padding: 0;
}
.list-info li {
	position: relative;
	padding-left: 28px;
	margin: 6px 0;
}
.list-info li::before {
	content: "ℹ";
	color: #2980b9;
	position: absolute;
	left: 0;
	font-size: 17px;
	font-weight: 700;
}

/* ✓✓✓ Ticks */
.list-badge {
	list-style: none;
	padding: 0;
}
.list-badge li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0;
}
.list-badge li::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: #e6f7f1;
	color: #1e8449;
	font-size: 13px;
	font-weight: 700;
}

/* --- Minimalist */
.list-line {
	list-style: none;
	padding: 0;
}
.list-line li {
	padding-left: 14px;
	border-left: 2px solid #ddd;
	margin: 4px 0;
}

/* 1 2 3 steps */
.list-steps {
	counter-reset: step;
	margin: 0;
	padding: 0;
}
.list-steps li {
	list-style: none;
	counter-increment: step;
	margin: 10px 0;
	padding-left: 36px;
	position: relative;
}
.list-steps li::before {
	content: counter(step) ".";
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	color: #333;
}

/* ★★★ Premium gold */
.list-gold {
	list-style: none;
	padding: 0;
}
.list-gold li {
	padding-left: 30px;
	margin: 8px 0;
	position: relative;
}
.list-gold li::before {
	content: "★";
	color: #d4af37;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 18px;
}

/* ===========================
Yoast FAQ – algemene styling
=========================== */
/* Container van alle FAQ-vragen */
.schema-faq.wp-block-yoast-faq-block {
	max-width: 780px;          /* centreren in contentkolom */
	margin: 2rem auto;
	padding: 1.5rem 1.75rem;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.06);
	background: #fafbff;
}

/* Individuele blokken */
.schema-faq-section {
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.schema-faq-section:last-child {
	border-bottom: none;
}

/* Vraag */
.schema-faq-question {
	display: block;
	margin-bottom: 0.8rem;
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 600;
	color: #111827;
}

/* Klein label "Vraag" links ervoor (optioneel, kan je weghalen) */
/*
.schema-faq-question::before {
	content: "Q";
	color: #f80534;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	margin-right: 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.12);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}*/

/* Antwoord */
.schema-faq-answer {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #374151;
}

/* Links in het antwoord */
.schema-faq-answer a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Hover voor links */
.schema-faq-answer a:hover {
	text-decoration-thickness: 2px;
}

/* Responsive: iets kleinere padding op mobiel */
@media (max-width: 640px) {
	.schema-faq.wp-block-yoast-faq-block {
		padding: 1.25rem 1rem;
		margin: 1.5rem 0;
	}

	.schema-faq-question {
		font-size: 0.98rem;
	}

	.schema-faq-answer {
		font-size: 0.93rem;
	}
}
/* Forceer consistente dikte voor alle Yoast FAQ titels */
.schema-faq-question {
	font-weight: 600 !important;  /* kies 500, 600 of 700 naar smaak */
}

/* Zorg dat nested <strong> binnen de vraag geen extra bold wordt */
.schema-faq-question strong {
	font-weight: inherit !important;
}

/* ===========================
   Yoast FAQ – genummerde vragen
=========================== */

/* Reset teller op container */
.schema-faq.wp-block-yoast-faq-block {
    counter-reset: faq-counter;
}

/* Elke sectie verhoogt de teller */
.schema-faq-section {
    counter-increment: faq-counter;
}

/* Nummer voor de vraag */
.schema-faq-question::before {
    content: counter(faq-counter);
    color: #f80534;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    font-size: 0.75rem;
    font-weight: 700;
    background: #fff;
}

/* Optioneel: hover animatie (subtiel en clean) */
.schema-faq-question:hover::before {
    transform: scale(1.05);
    transition: 0.15s ease;
}




/* ============================================================== */
/* === 5. Media queries & toegankelijkheid === */
/* 
Hier hebben we per component al veel media queries en voorkeuren opgenomen.
Deze sectie benadrukt nogmaals dat we de prefers-reduced-motion query respecteren 
en stimuleert consistente responsive gedrag.
*/
@media (prefers-reduced-motion: reduce) {
	/* Algemene fallback voor animaties buiten component-specifieke regels */
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition: none !important;
	}
}
*/