/* Staalvol — thema.
   Nagebouwd van de Elementor-site: Sunflower voor koppen en knoppen, Roboto voor tekst,
   oranje #f98b25 als accent, leeskolom 1140px. De lettertypes staan lokaal, dus er gaat
   geen verzoek naar Google en er is daarvoor ook geen toestemming nodig. */

@font-face { font-family: 'Sunflower'; src: url('assets/sunflower-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Sunflower'; src: url('assets/sunflower-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Sunflower'; src: url('assets/sunflower-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('assets/roboto-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('assets/roboto-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('assets/roboto-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('assets/roboto-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
	--oranje: #f98b25;
	--oranje-donker: #e07a15;
	--kop: #747474;
	--tekst: #1b1a1a;
	--link: var(--oranje);
	--grijs: #7a7a7a;
	--grijs-licht: #f4f4f4;
	--zand: #f4ebe1;
	--wit: #fff;
	--breedte: 1140px;
	--font-kop: 'Sunflower', system-ui, sans-serif;
	--font-tekst: 'Roboto', system-ui, -apple-system, sans-serif;
	/* de core-widgets lezen deze */
	--sp-primary: var(--oranje);
	--sp-line: #e3e3e3;
	--sp-muted: var(--grijs);
	--sp-surface: var(--grijs-licht);
	--sp-radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--font-tekst);
	font-size: 14px;
	line-height: 1.7;
	color: var(--tekst);
	background: var(--wit);
}
img { max-width: 100%; height: auto; }
/* tekstlinks zijn oranje en onderlijnd; navigatie, knoppen en bovenbalk krijgen hun streep
   hieronder weer af — daar draagt de vorm de link al. */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--oranje-donker); }

h1, h2, h3, h4 { font-family: var(--font-kop); margin: 0 0 .5em; line-height: 1.25; }
h1 { font-size: 30px; font-weight: 700; color: var(--kop); text-transform: uppercase; }
h2 { font-size: 25px; font-weight: 500; color: var(--oranje); }
h3 { font-size: 20px; font-weight: 500; color: var(--kop); }
p { margin: 0 0 1.2em; }

.inner { max-width: var(--breedte); margin: 0 auto; padding: 0 20px; }

/* ── bovenbalk ─────────────────────────────────────────── */
.topbar { background: var(--oranje); color: var(--wit); font-size: 13px; }
.topbar .inner { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.topbar a { color: var(--wit); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-rechts { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.topbar svg { width: 15px; height: 15px; }

/* ── kop ───────────────────────────────────────────────── */
.site-header { background: var(--wit); }
.site-header .inner { display: flex; align-items: center; gap: 28px; min-height: 132px; }
.site-logo { text-decoration: none; }
.site-logo img { display: block; width: 240px; height: auto; }
.site-nav { margin-left: auto; }
.site-nav ul.menu { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; }
.site-nav a { font-family: var(--font-kop); font-size: 18px; font-weight: 500; color: var(--kop); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--oranje); text-decoration: none; }
.site-nav li { position: relative; list-style: none; }
.site-nav ul.menu-sub { display: none; position: absolute; top: 100%; left: 0; background: var(--wit); border: 1px solid var(--sp-line); padding: 8px 0; min-width: 210px; z-index: 30; flex-direction: column; gap: 0; }
.site-nav li:hover > ul.menu-sub, .site-nav li:focus-within > ul.menu-sub { display: flex; }
.site-nav .menu-sub a { display: block; padding: 6px 16px; font-size: 16px; white-space: nowrap; }
.site-nav .sp-menu-toggle { display: none; }
.header-cta { display: flex; align-items: center; }
.nav-toggle { display: none; background: none; border: 1px solid var(--sp-line); border-radius: 3px; width: 42px; height: 40px; align-items: center; justify-content: center; cursor: pointer; color: var(--kop); }

/* ── knoppen ───────────────────────────────────────────── */
.btn, .sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-kop); font-size: 18px; font-weight: 500;
	padding: 8px 22px; border-radius: 3px; border: 3px double var(--wit);
	background: var(--oranje); color: var(--wit); cursor: pointer; text-align: center;
	text-decoration: none;
}
.btn:hover, .sp-btn:hover { background: var(--oranje-donker); color: var(--wit); text-decoration: none; }
.btn[data-variant="ghost"] { background: transparent; color: var(--oranje); border-color: var(--oranje); }

/* ── inhoud ────────────────────────────────────────────── */
main { min-height: 40vh; }
.sp-section { padding: 34px 0; }
.sp-container { max-width: var(--breedte); margin: 0 auto; padding: 0 20px; }
.sp-pad-none { padding: 0; }
.sp-pad-s { padding: 18px 0; }
.sp-pad-l { padding: 56px 0; }
.sp-text a { color: var(--link); }
.sp-text strong em, .sp-text em strong { color: var(--link); font-style: italic; }
.sp-heading { margin-bottom: .4em; }

/* ── voet: schuine grijze vorm, zoals op de Elementor-site ─ */
.site-footer { margin-top: 40px; }
.footer-vorm { height: 120px; background: linear-gradient(172deg, transparent 0 46%, #d9d9d9 46% 100%); }
.footer-bodem { background: var(--grijs); color: var(--wit); text-align: center; font-size: 12px; padding: 10px 20px; }
.footer-bodem a { color: var(--wit); text-decoration: underline; }
.footer-bodem .legal { display: block; margin-top: 4px; opacity: .85; }

@media (max-width: 900px) {
	.site-header .inner { min-height: 90px; gap: 14px; flex-wrap: wrap; }
	.site-logo img { width: 170px; }
	.nav-toggle { display: inline-flex; }
	.site-nav { order: 10; width: 100%; display: none; margin-left: 0; }
	.site-nav.is-open { display: block; }
	.site-nav ul.menu { flex-direction: column; gap: 0; }
	.site-nav a { display: block; padding: 10px 0; }
	.site-nav ul.menu-sub { position: static; border: 0; padding: 0 0 0 14px; display: flex; }
	.header-cta .btn { font-size: 16px; padding: 6px 14px; }
	.topbar .inner { min-height: 38px; font-size: 12px; }
	h1 { font-size: 24px; } h2 { font-size: 21px; }
}