/* =====================================================================
   THEME — reset, layout, header, footer, gedeelde componenten.
   Blok-specifieke opmaak staat in blocks/<naam>/style.css.
   ===================================================================== */

/* ----------  Reset  ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
	margin:0;
	font-family:var(--font-body);
	font-size:var(--fs-body);
	line-height:1.65;
	color:var(--ink);
	background:var(--paper);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	text-wrap:pretty;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-deep); }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.0; margin:0; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* ----------  Layout  ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sw-block{ position:relative; }
.sw-sp-compact{ padding-block:var(--sec-compact); }
.sw-sp-normal{ padding-block:var(--sec-normal); }
.sw-sp-roomy{ padding-block:var(--sec-roomy); }
.sw-sp-none{ padding-block:0; }

.sw-w-narrow .wrap, .wrap.sw-w-narrow{ max-width:var(--maxw-narrow); }
.sw-w-wide .wrap{ max-width:var(--maxw-wide); }
.sw-w-full .wrap{ max-width:none; }

/* Volvlaks lichte tint zonder de container te breken */
.section--mist{ position:relative; }
.section--mist::before{
	content:""; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); width:100vw;
	background:var(--mist); z-index:-1;
}

/* Donkere band */
.band{ background:var(--ink); color:#fff; position:relative; overflow:clip; }
.band--cobalt{ background:var(--cobalt); }
.band .section-title, .band h1, .band h2, .band h3{ color:#fff; }
.band .lead{ color:rgba(255,255,255,.78); }
.band__arc{
	position:absolute; right:-6%; top:-30%; width:min(48vw,560px); aspect-ratio:1;
	background:radial-gradient(circle at 30% 30%, rgba(135,174,220,.28), transparent 62%);
	border-radius:50%; pointer-events:none; z-index:0;
}
.band__mark{
	position:absolute; left:-3%; bottom:-14%; height:min(78%,520px); width:auto;
	opacity:.05; pointer-events:none; z-index:0;
}
.band .wrap{ position:relative; z-index:1; }
@media (max-width:700px){ .band__mark{ display:none; } }

/* ----------  Koppen  ---------- */
.section-title{ font-size:var(--fs-h2); max-width:28ch; }
.lead{ font-size:var(--fs-lead); color:var(--ink-soft); font-weight:400; max-width:60ch; }

.sw-head{ margin-bottom:2.6rem; display:flex; flex-direction:column; gap:var(--sp-2); }
.sw-head--center{ align-items:center; text-align:center; }
.sw-head--center .section-title, .sw-head--center .lead{ max-width:44ch; }

/* Editorial: label in een eigen kolom links */
.editorial{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-2); }
@media (min-width:1000px){
	.editorial{ grid-template-columns:minmax(140px,180px) minmax(0,1fr); gap:var(--sp-4); }
}
.anchor-col .mono{ display:flex; }

/* ----------  Mono label  ---------- */
.mono{
	font-family:var(--font-mono);
	font-size:var(--fs-mono);
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--ink-mute);
	font-weight:500;
	display:inline-flex; align-items:center; gap:.6em;
}
.mono--accent{ color:var(--red); }
.mono--light{ color:rgba(255,255,255,.72); }

/* ----------  Golf-signatuur  ---------- */
.wave{ display:block; width:100%; height:auto; pointer-events:none; }
.wave--footer{ display:block; width:100%; margin-bottom:-1px; }

/* ----------  Boog-gebaar  ---------- */
.arc{
	display:inline-block;
	width:var(--arc-size,54px); height:var(--arc-size,54px);
	background:var(--accent);
	border-radius:var(--arc-size,54px) 4px var(--arc-size,54px) var(--arc-size,54px);
	flex:none;
}

/* ----------  Buttons  ---------- */
.btn{
	--_bg:var(--accent); --_fg:#fff; --_bd:var(--accent);
	display:inline-flex; align-items:center; gap:.7em;
	padding:.95em 1.6em;
	font-family:var(--font-head); font-weight:600; font-size:.98rem; letter-spacing:-.01em;
	color:var(--_fg); background:var(--_bg);
	border:1.5px solid var(--_bd); border-radius:var(--r-pill);
	transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .3s var(--ease); }
.btn:hover{
	background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;
	transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(49,62,136,.55);
}
.btn:hover svg{ transform:translateX(3px); }
.btn--ghost{ --_bg:transparent; --_fg:var(--ink); --_bd:var(--line-strong); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:none; }
.btn--light{ --_bg:#fff; --_fg:var(--ink); --_bd:#fff; }
.btn--light:hover{ background:var(--mist); border-color:var(--mist); color:var(--ink); }
.btn--onink{ --_bg:transparent; --_fg:#fff; --_bd:rgba(255,255,255,.35); }
.btn--onink:hover{ background:#fff; border-color:#fff; color:var(--ink); box-shadow:none; }
.btn--red{ --_bg:var(--red); --_bd:var(--red); }
.btn--red:hover{ background:var(--red-deep); border-color:var(--red-deep); box-shadow:0 10px 24px -10px rgba(171,45,50,.55); }

.tlink{
	display:inline-flex; align-items:center; gap:.5em;
	font-family:var(--font-head); font-weight:600; color:var(--red);
	transition:gap .25s var(--ease);
}
.tlink svg{ width:1em; height:1em; }
.tlink:hover{ gap:.85em; color:var(--red-deep); }
.band .tlink{ color:var(--brand-4); }
.band .btn--ghost{ --_fg:#fff; --_bd:rgba(255,255,255,.35); }

/* ----------  Focus  ---------- */
:focus-visible{ outline:3px solid var(--cobalt); outline-offset:3px; border-radius:3px; }
.band :focus-visible{ outline-color:var(--brand-4); }
.skip{
	position:absolute; left:var(--gutter); top:-100px; z-index:200;
	background:var(--ink); color:#fff; padding:.8em 1.2em;
	border-radius:0 0 var(--r-sm) var(--r-sm); transition:top .2s var(--ease);
}
.skip:focus{ top:0; }

/* =====================================================================
   AANKONDIGINGSBALK
   ===================================================================== */
.announce{ background:var(--red); color:#fff; font-size:.92rem; }
.announce--brand{ background:var(--accent); }
.announce[hidden]{ display:none; }
.announce__inner{ display:flex; align-items:center; justify-content:center; gap:var(--sp-3); min-height:44px; position:relative; padding-block:.4rem; }
.announce a{ display:inline-flex; align-items:center; gap:.6em; color:#fff; font-weight:600; }
.announce a:hover{ color:#fff; text-decoration:underline; text-underline-offset:.2em; }
.announce a svg{ width:1em; height:1em; }
.announce__close{
	position:absolute; right:0; top:50%; transform:translateY(-50%);
	width:32px; height:32px; display:grid; place-items:center;
	background:none; border:none; color:#fff; opacity:.75; cursor:pointer;
}
.announce__close:hover{ opacity:1; }
.announce__close svg{ width:16px; height:16px; }

/* =====================================================================
   HEADER / NAVIGATIE
   ===================================================================== */
.site-header{
	position:sticky; top:0; z-index:100;
	background:rgba(255,255,255,.86);
	backdrop-filter:saturate(1.4) blur(14px);
	border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; gap:var(--sp-3); min-height:74px; }
.brand{ display:flex; align-items:center; margin-right:auto; flex:none; }
.brand img{ height:30px; width:auto; max-width:none; flex:none; }
.brand__text{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink); }

.nav-toggle, .nav-toggle-label{ display:none; }

.menu{ display:flex; align-items:center; gap:.35rem; }
.menu > li{ position:relative; }
.menu > li > a{
	display:inline-flex; align-items:center; gap:.4em;
	padding:.7em .85em; border-radius:var(--r-sm);
	font-family:var(--font-head); font-weight:500; font-size:.96rem; color:var(--ink);
	transition:color .2s var(--ease), background .2s var(--ease);
}
.menu > li > a:hover, .menu > li:focus-within > a{ color:var(--accent); }
.menu a[aria-current="page"]{ color:var(--accent); }
.menu > li > a svg{ width:.7em; height:.7em; transition:transform .25s var(--ease); }
.menu > li:hover > a svg, .menu > li:focus-within > a svg{ transform:rotate(180deg); }

.submenu{
	position:absolute; top:calc(100% + 6px); left:0;
	min-width:230px; padding:.5rem; list-style:none; margin:0;
	background:var(--paper); border:1px solid var(--line);
	border-radius:var(--r-md); box-shadow:var(--shadow-md);
	opacity:0; visibility:hidden; transform:translateY(8px);
	transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
	z-index:2;
}
.menu > li:hover .submenu, .menu > li:focus-within .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu li a{
	display:block; padding:.65em .8em; border-radius:var(--r-sm);
	font-family:var(--font-body); font-size:.95rem; color:var(--ink-soft);
	transition:background .18s var(--ease), color .18s var(--ease);
}
.submenu li a:hover, .submenu li a:focus{ background:var(--mist); color:var(--accent); }
.submenu .sub-lead{
	padding:.4em .8em .6em; font-family:var(--font-mono); font-size:var(--fs-mono);
	letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}

.nav-right{ display:flex; align-items:center; gap:.6rem; }

.lang{ position:relative; }
.lang-btn{
	display:inline-flex; align-items:center; gap:.45em;
	height:42px; padding-inline:.95em;
	border:1px solid var(--red); border-radius:var(--r-pill);
	background:none; font-family:var(--font-mono); font-size:.74rem;
	letter-spacing:.14em; text-transform:uppercase; color:var(--red);
	transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lang-btn:hover, .lang:focus-within .lang-btn{ border-color:var(--red-deep); color:var(--red-deep); }
.lang-btn svg{ width:.7em; height:.7em; }
.lang-list{
	position:absolute; top:calc(100% + 6px); right:0; min-width:150px; padding:.4rem;
	background:var(--paper); border:1px solid var(--line);
	border-radius:var(--r-md); box-shadow:var(--shadow-md);
	opacity:0; visibility:hidden; transform:translateY(8px);
	transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
	z-index:2;
}
.lang:hover .lang-list, .lang:focus-within .lang-list{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-list a{
	display:flex; justify-content:space-between; gap:1em;
	padding:.55em .7em; border-radius:var(--r-sm); font-size:.9rem; color:var(--ink-soft);
}
.lang-list a:hover, .lang-list a:focus{ background:var(--mist); color:var(--accent); }
.lang-list a[aria-current="true"]{ color:var(--accent); font-weight:600; }
.lang-list a span{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; color:var(--ink-mute); }

.nav-cta{ display:inline-flex; height:42px; padding-block:0; padding-inline:1.15em; font-size:.9rem; }

/* ----------  Mobiele navigatie (CSS-only)  ---------- */
@media (max-width:1040px){
	.nav-toggle-label{
		display:inline-flex; align-items:center; justify-content:center;
		width:46px; height:46px; border:1px solid var(--line-strong);
		border-radius:var(--r-sm); order:3; margin-left:.2rem;
	}
	.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after{
		content:""; display:block; width:22px; height:2px; background:var(--ink);
		border-radius:2px; position:relative;
		transition:transform .3s var(--ease), opacity .2s var(--ease);
	}
	.nav-toggle-label span::before{ position:absolute; top:-7px; }
	.nav-toggle-label span::after{ position:absolute; top:7px; }
	.nav-toggle:checked ~ .nav-toggle-label span{ background:transparent; }
	.nav-toggle:checked ~ .nav-toggle-label span::before{ transform:translateY(7px) rotate(45deg); }
	.nav-toggle:checked ~ .nav-toggle-label span::after{ transform:translateY(-7px) rotate(-45deg); }

	.nav{ flex-wrap:wrap; }
	.menu{
		order:5; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0;
		max-height:0; overflow:hidden; opacity:0;
		transition:max-height .4s var(--ease), opacity .3s var(--ease);
	}
	.nav-toggle:checked ~ .menu{ max-height:80vh; overflow-y:auto; opacity:1; padding-block:.5rem 1rem; }
	.menu > li{ border-bottom:1px solid var(--line); }
	.menu > li > a{ width:100%; padding:1em .4em; font-size:1.05rem; }
	.submenu{
		position:static; opacity:1; visibility:visible; transform:none;
		box-shadow:none; border:none; padding:0 0 .5rem .8rem; min-width:0;
		max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
	}
	.menu > li:focus-within .submenu, .menu > li:hover .submenu{ max-height:400px; }
	.submenu .sub-lead{ display:none; }
	.nav-right{ order:2; margin-left:auto; }
	.nav-cta{ display:none; }
}
@media (max-width:520px){
	.lang-btn .lang-full{ display:none; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); position:relative; overflow:clip; }
.footer-top{ display:grid; gap:var(--sp-5); padding-block:var(--sp-6) var(--sp-5); }
@media (min-width:820px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--sp-4); } }
.footer-brand img{ height:26px; opacity:.95; }
.footer-brand p{ margin-top:var(--sp-2); max-width:34ch; font-size:.95rem; }
.footer h4{
	color:#fff; font-size:.95rem; font-family:var(--font-mono); font-weight:500;
	letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--sp-2);
}
.footer-links a{
	display:inline-block; padding:.3em 0; font-size:.96rem; color:rgba(255,255,255,.72);
	transition:color .2s var(--ease), padding-left .2s var(--ease);
}
.footer-links a:hover{ color:#fff; padding-left:.35em; }
.footer address{ font-style:normal; font-size:.96rem; line-height:1.7; }
.footer address a{ color:rgba(255,255,255,.72); }
.footer address a:hover{ color:#fff; }
.socials{ display:flex; gap:.6rem; margin-top:var(--sp-3); }
.socials a{
	width:42px; height:42px; display:grid; place-items:center;
	background:var(--red); border:1px solid var(--red); border-radius:var(--r-pill); color:#fff;
	transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.socials a:hover{ background:var(--red-deep); border-color:var(--red-deep); transform:translateY(-2px); color:#fff; }
.socials svg{ width:18px; height:18px; }
.footer-bottom{
	border-top:1px solid rgba(255,255,255,.12); padding-block:var(--sp-3);
	display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
	align-items:center; justify-content:space-between; font-size:.86rem;
}
.footer-bottom .kvk{ font-family:var(--font-mono); letter-spacing:.08em; }
.footer-bottom a{ color:rgba(255,255,255,.72); }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom nav, .footer-bottom ul{ display:flex; gap:var(--sp-3); flex-wrap:wrap; list-style:none; margin:0; padding:0; }

/* =====================================================================
   VASTE ZIJTAB
   ===================================================================== */
.config-tab{
	position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:120;
	display:flex; flex-direction:column; align-items:center; gap:.6rem;
	padding:1.15rem .75rem; background:var(--red); color:#fff;
	border-radius:var(--r-md) 0 0 var(--r-md);
	box-shadow:-8px 0 26px -12px rgba(22,24,29,.5);
	transition:background .22s var(--ease);
}
.config-tab:hover, .config-tab:focus-visible{ background:var(--red-deep); color:#fff; }
.config-tab svg{ width:24px; height:24px; flex:none; }
.config-tab .ct-label{
	writing-mode:vertical-rl;
	font-family:var(--font-head); font-weight:700; letter-spacing:.04em; font-size:1rem;
}
@media (max-width:600px){
	.config-tab{ padding:.85rem .55rem; gap:.45rem; }
	.config-tab svg{ width:20px; height:20px; }
	.config-tab .ct-label{ font-size:.85rem; }
}

/* =====================================================================
   VIDEO-LIGHTBOX
   ===================================================================== */
.video-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--gutter); }
.video-modal[hidden]{ display:none; }
.video-modal__backdrop{ position:absolute; inset:0; background:rgba(15,18,45,.82); backdrop-filter:blur(4px); }
.video-modal__body{ position:relative; z-index:1; width:min(1040px,100%); animation:vm-in .3s var(--ease) both; }
@keyframes vm-in{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.video-modal__frame{
	position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
	background:linear-gradient(135deg, var(--brand) 0%, var(--accent-deep) 100%);
	display:grid; place-items:center; box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.video-modal__frame iframe, .video-modal__frame video{ width:100%; height:100%; border:0; display:block; }
.video-modal__close{
	position:absolute; top:-16px; right:-16px; z-index:2; width:46px; height:46px; border:none;
	border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center;
	box-shadow:var(--shadow-md); cursor:pointer; transition:transform .2s var(--ease);
}
.video-modal__close:hover{ transform:scale(1.08); }
.video-modal__close svg{ width:22px; height:22px; }
@media (max-width:560px){ .video-modal__close{ top:-12px; right:4px; } }

/* =====================================================================
   TEKSTOPMAAK BINNEN WYSIWYG-VELDEN
   ===================================================================== */
.rich > * + *{ margin-top:1em; }
.rich h2{ font-size:var(--fs-h3); margin-top:1.6em; }
.rich h3{ font-size:var(--fs-h4); margin-top:1.4em; }
.rich ul, .rich ol{ padding-left:1.3em; list-style:disc; }
.rich ol{ list-style:decimal; }
.rich li + li{ margin-top:.35em; }
.rich a{ color:var(--red); text-decoration:underline; text-underline-offset:.18em; }
.rich a:hover{ color:var(--red-deep); }
.rich strong{ font-weight:700; }
.rich blockquote{
	margin:1.6em 0; padding-left:1.2em; border-left:3px solid var(--red);
	font-size:var(--fs-lead); color:var(--ink-soft);
}
.rich table{ width:100%; border-collapse:collapse; font-size:.96rem; }
.rich th, .rich td{ padding:.9em 1em; text-align:left; border-bottom:1px solid var(--line); }
.rich thead th{ background:var(--mist); font-weight:600; }
.band .rich{ color:rgba(255,255,255,.82); }
.band .rich a{ color:var(--brand-4); }

/* =====================================================================
   OVERIG
   ===================================================================== */
.crumbs{ padding-block:var(--sp-3) 0; font-size:.88rem; color:var(--ink-mute); }
.crumbs a{ color:var(--ink-soft); }
.crumbs a:hover{ color:var(--accent); }

.post-list{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.pagination{ margin-top:var(--sp-5); }
.pagination .page-numbers{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:44px; height:44px; padding-inline:.6em; margin-right:.35rem;
	border:1px solid var(--line-strong); border-radius:var(--r-pill); color:var(--ink);
}
.pagination .page-numbers.current{ background:var(--accent); border-color:var(--accent); color:#fff; }

.spec-table{ margin-top:var(--sp-3); border-top:1px solid var(--line); }
.spec-row{ display:grid; grid-template-columns:1fr; gap:.2rem; padding:.9em 0; border-bottom:1px solid var(--line); }
@media (min-width:620px){ .spec-row{ grid-template-columns:minmax(180px,32%) 1fr; gap:var(--sp-3); } }
.spec-row dt{ font-family:var(--font-head); font-weight:600; }
.spec-row dd{ margin:0; color:var(--ink-soft); }

.swatches{ margin-top:var(--sp-3); display:flex; flex-wrap:wrap; gap:var(--sp-3); list-style:none; padding:0; }
.swatch{ display:flex; flex-direction:column; gap:.5rem; width:96px; }
.swatch__dot, .swatch__img{ width:96px; height:96px; border-radius:var(--r-md); border:1px solid var(--line); display:block; object-fit:cover; }
.swatch__name{ font-size:.88rem; color:var(--ink-soft); }

.download-list{ margin-top:var(--sp-3); display:flex; flex-direction:column; gap:.5rem; }
.download-list a{ color:var(--red); text-decoration:underline; text-underline-offset:.18em; }

/* Subtiele reveal, uitsluitend opacity + kleine offset */
@media (prefers-reduced-motion: no-preference){
	.reveal{ animation:reveal-up .8s var(--ease) both; animation-timeline:view(); animation-range:entry 0% cover 26%; }
	@keyframes reveal-up{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
}

/* Gutenberg alignment binnen onze blokken */
.alignfull{ margin-inline:0; }