/* Kluspunt Actie: banner, pop-up en actiepagina */
.ka-badge{
	display:inline-block;
	background:var(--grijs-donker,#2B2B2B);
	color:#fff;
	font-size:12px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	padding:4px 10px;
	border-radius:999px;
	line-height:1.4;
}
.hero .ka-badge,.ka-popup .ka-badge{background:var(--oranje,#F58220);color:#1a1a1a;}
.page-hero-inner .ka-badge{margin-bottom:12px;}

.ka-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	font:inherit;
	font-weight:700;
	font-size:14.5px;
	line-height:1.2;
	padding:12px 22px;
	border-radius:var(--radius,8px);
	background:var(--grijs-donker,#2B2B2B);
	color:#fff;
	text-decoration:none;
	border:2px solid var(--grijs-donker,#2B2B2B);
	transition:background .15s,color .15s;
	cursor:pointer;
}
.ka-btn:hover{background:#000;border-color:#000;color:#fff;}
.ka-btn:focus-visible,.ka-popup-close:focus-visible,.ka-popup-later:focus-visible{outline:3px solid var(--grijs-donker,#2B2B2B);outline-offset:2px;}

/* ---------- Banner onder de hero (smalle balk) ---------- */
section.ka-banner{background:var(--oranje,#F58220);color:var(--grijs-donker,#2B2B2B);padding:0;}
.ka-banner .ka-banner-inner{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	flex-wrap:wrap;
	max-width:1600px;
	padding:12px 32px;
}
.ka-banner .ka-badge{font-size:11px;padding:4px 10px;letter-spacing:.08em;background:var(--grijs-donker,#2B2B2B);color:#fff;}
.ka-banner-text{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:var(--grijs-donker,#2B2B2B);text-align:left;}
.ka-banner-date{display:inline;font-size:14px;font-weight:500;color:var(--grijs-donker,#2B2B2B);margin:0 0 0 8px;opacity:.85;}
.ka-banner .ka-btn{font-size:14px;padding:8px 18px;white-space:nowrap;background:var(--grijs-donker,#2B2B2B);border-color:var(--grijs-donker,#2B2B2B);color:#fff;}
.ka-banner .ka-btn:hover{background:#000;border-color:#000;color:#fff;}

/* ---------- Knop in de header ---------- */
.ka-header-btn{
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-size:13px;
	font-weight:800;
	line-height:1;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:8px 14px;
	border-radius:999px;
	border:2px solid var(--oranje,#F58220);
	color:var(--oranje,#F58220);
	background:transparent;
	text-decoration:none;
	white-space:nowrap;
	transition:background .15s,color .15s;
}
.ka-header-btn:hover{background:var(--oranje,#F58220);color:#1a1a1a;}
.ka-header-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.ka-header-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:ka-pulse 2s ease-in-out infinite;}
@keyframes ka-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.75);}}
@media (prefers-reduced-motion:reduce){.ka-header-dot{animation:none;}}

/* ---------- Pop-up ---------- */
.ka-popup{position:fixed;inset:0;z-index:99950;display:flex;align-items:center;justify-content:center;padding:16px;}
.ka-popup[hidden]{display:none !important;}
.ka-popup-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.ka-popup-dialog{
	position:relative;
	background:#fff;
	border-radius:14px;
	width:100%;
	max-width:460px;
	max-height:calc(100vh - 32px);
	overflow-y:auto;
	box-shadow:0 20px 60px rgba(0,0,0,.4);
	outline:none;
	animation:ka-up .3s ease-out;
}
.ka-popup-close{
	position:absolute;top:10px;right:10px;z-index:2;
	width:38px;height:38px;border-radius:50%;
	background:#fff;color:#2B2B2B;border:0;
	font-size:26px;line-height:1;cursor:pointer;
	box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.ka-popup-imglink{display:block;}
.ka-popup-img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:14px 14px 0 0;}
.ka-popup-body{padding:22px 24px 20px;text-align:center;}
.ka-popup-body h2{margin:10px 0 6px;font-size:24px;line-height:1.25;color:var(--grijs-donker,#2B2B2B);}
.ka-popup-date{margin:0 0 14px;font-size:13.5px;color:#666;}
.ka-btn-block{display:flex;width:100%;margin-top:14px;}
.ka-popup-later{
	display:block;margin:12px auto 0;background:none;border:0;
	font:inherit;font-size:13.5px;color:#666;text-decoration:underline;cursor:pointer;padding:6px 10px;
}
.ka-popup-later:hover{color:#000;}
html.ka-lock,html.ka-lock body{overflow:hidden;}

@keyframes ka-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.ka-popup-dialog{animation:none;}}

/* ---------- Actiepagina ---------- */
.ka-preview-note{background:#FFF4D6;border-bottom:1px solid #E8D28A;color:#5a4500;font-size:14px;padding:12px 0;}
.ka-page-copy h2{margin-top:0;}
/* Het thema haalt overal de opsommingstekens weg (ul{list-style:none}); in de tekst van de actie zetten we ze terug. */
.ka-page-copy ul,.ka-page-copy ol{margin:0 0 16px;padding-left:1.4em;}
.ka-page-copy ul{list-style:disc;}
.ka-page-copy ol{list-style:decimal;}
.ka-page-copy li{margin:0 0 6px;padding-left:2px;}
.ka-page-copy li::marker{color:var(--oranje,#F58220);}
.ka-page-copy p{margin:0 0 14px;}
.ka-page-copy strong{color:var(--grijs-donker,#2B2B2B);}
.ka-page-img{height:auto;max-height:480px;}
.ka-page-img img{height:auto;max-height:480px;}

@media (max-width:1100px){
	.ka-banner-text{font-size:16px;}
}
@media (max-width:760px){
	.ka-banner .ka-banner-inner{gap:8px 12px;padding:10px 16px;}
	.ka-banner .ka-badge{display:none;}
	.ka-banner-text{font-size:15px;text-align:center;}
	.ka-banner-date{display:block;font-size:13px;margin:2px 0 0;}
	.ka-banner .ka-btn{font-size:13px;padding:7px 14px;}
	.ka-popup-body h2{font-size:21px;}
	.ka-header-btn{font-size:11px;padding:6px 10px;gap:0;}
	.ka-header-dot{display:none;}
	header .header-actions{gap:8px;}
	/* Maak ruimte in de mobiele header zodat logo, Actie-knop, menu en Contact naast elkaar passen */
	header:has(.ka-header-btn) .logo-img{height:58px;}
	header:has(.ka-header-btn) .header-actions .btn-primary{padding:10px 12px;}
}
@media (max-width:360px){
	header:has(.ka-header-btn) .logo-img{height:46px;}
	header:has(.ka-header-btn) .header-inner{padding:10px 12px;}
}