/* Simpel Builder – gedeelde stijl voor site én editor-preview */

.sb-page {
	--sb-gap: 32px;
	box-sizing: border-box;
	width: 100%;
	color: var(--sb-text, inherit);
	font-family: var(--sb-font-body, inherit);
}
.sb-page :where(h1, h2, h3, h4) {
	color: inherit;
	font-family: var(--sb-font-heading, inherit);
}
.sb-page *, .sb-page *::before, .sb-page *::after { box-sizing: border-box; }

/* Secties over de volle schermbreedte, ook binnen een smal thema */
.sb-page.sb-bleed {
	position: relative;
	width: 100vw;
	max-width: none !important;
	left: calc(50% - 50vw);
	margin-left: 0;
	margin-right: 0;
}
body.sb-builder-page { overflow-x: hidden; overflow-x: clip; }

/* Paginatitel van het thema verbergen (optioneel per pagina) */
.sb-hide-title .entry-title,
.sb-hide-title .page-title,
.sb-hide-title .wp-block-post-title,
.sb-hide-title .entry-header { display: none; }

/* Secties */
.sb-section {
	position: relative;
	padding-left: 16px;
	padding-right: 16px;
	background-size: cover;
	background-position: center;
}
.sb-pad-none { padding-top: 0; padding-bottom: 0; }
.sb-pad-s { padding-top: 32px; padding-bottom: 32px; }
.sb-pad-m { padding-top: 64px; padding-bottom: 64px; }
.sb-pad-l { padding-top: 112px; padding-bottom: 112px; }

.sb-section-inner { position: relative; z-index: 1; margin: 0 auto; max-width: 960px; }
.sb-width-narrow .sb-section-inner { max-width: 720px; }
.sb-width-wide .sb-section-inner { max-width: 1200px; }
.sb-width-full .sb-section-inner { max-width: none; }

.sb-has-color h1, .sb-has-color h2, .sb-has-color h3, .sb-has-color h4,
.sb-has-color p, .sb-has-color a:not(.sb-btn) { color: inherit; }

.sb-overlay { color: #fff; }
.sb-overlay::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.sb-overlay h1, .sb-overlay h2, .sb-overlay h3, .sb-overlay h4,
.sb-overlay p, .sb-overlay a:not(.sb-btn) { color: inherit; }

/* Kolommen */
.sb-cols { display: grid; gap: var(--sb-gap); grid-template-columns: minmax(0, 1fr); }
.sb-layout-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-layout-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sb-layout-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sb-layout-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-layout-1-1-1-1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-valign-top { align-items: start; }
.sb-valign-center { align-items: center; }
.sb-valign-bottom { align-items: end; }
.sb-col { min-width: 0; }

@media (max-width: 1024px) {
	.sb-layout-1-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.sb-cols { grid-template-columns: minmax(0, 1fr) !important; }
	.sb-pad-m { padding-top: 48px; padding-bottom: 48px; }
	.sb-pad-l { padding-top: 72px; padding-bottom: 72px; }
}

/* Blokken */
.sb-block { margin: 0 0 16px; }
.sb-block:last-child { margin-bottom: 0; }

.sb-heading h1, .sb-heading h2, .sb-heading h3, .sb-heading h4 { margin: 0; line-height: 1.2; }

.sb-text p { margin: 0 0 1em; line-height: 1.65; }
.sb-text p:last-child { margin-bottom: 0; }
.sb-text-small { font-size: 0.9em; }
.sb-text-large { font-size: 1.2em; }

.sb-image figure { margin: 0; }
.sb-image img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.sb-image img.sb-round { border-radius: 12px; }

.sb-button p { margin: 0; }
.sb-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: var(--sb-radius, 8px);
	background-color: var(--sb-primary, #2563eb);
	color: var(--sb-on-primary, #fff);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: filter .15s ease;
}
.sb-btn:hover, .sb-btn:focus { filter: brightness(0.92); text-decoration: none; }
/* Tegen linkkleuren van het thema in (inline kleuren van de klant winnen nog steeds) */
.sb-page .sb-btn:link, .sb-page .sb-btn:visited, .sb-page .sb-btn:hover, .sb-page .sb-btn:focus { color: var(--sb-on-primary, #fff); }

.sb-divider hr {
	margin: 0;
	border: 0;
	border-top: 1px solid #e5e7eb;
	height: 0;
	background: none;
}

/* Contactformulier */
.sb-form { max-width: 640px; }
.sb-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 600px) { .sb-form-row { grid-template-columns: minmax(0, 1fr); } }
.sb-field { margin: 0 0 16px; }
.sb-field label { display: block; margin-bottom: 6px; font-weight: 600; }
.sb-optional { font-weight: 400; opacity: .7; }
.sb-form input[type="text"], .sb-form input[type="email"], .sb-form input[type="tel"], .sb-form textarea {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: min(var(--sb-radius, 8px), 8px);
	background: #fff;
	color: #1f2328;
	font: inherit;
	line-height: 1.4;
}
.sb-form textarea { resize: vertical; min-height: 120px; }
.sb-form input:focus, .sb-form textarea:focus { outline: 2px solid var(--sb-primary, #2563eb); outline-offset: 1px; border-color: transparent; }
.sb-form [aria-invalid="true"] { border-color: #b42318; }
.sb-field-error { display: block; margin-top: 6px; color: #b42318; font-size: .9em; }
.sb-has-color .sb-field-error, .sb-overlay .sb-field-error { color: inherit; font-weight: 600; }
.sb-check label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.sb-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--sb-primary, #2563eb); }
.sb-form-submit { margin: 8px 0 0; }
.sb-form button.sb-btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.sb-form button.sb-btn:disabled { opacity: .7; cursor: default; }
.sb-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sb-form-status { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; background: #fdecea; color: #7a1a12; }
.sb-form-status.is-success, .sb-form-status:not(.is-error) { background: #e7f4ec; color: #14532d; }
.sb-form-status:focus { outline: none; }
.sb-form.is-sent > :not(.sb-form-status) { display: none; }
.sb-form [hidden] { display: none !important; }

/* ---------- Eigen kop en voettekst (paginasjabloon) ---------- */
body.sb-canvas { margin: 0; }
.sb-canvas #sb-main:focus { outline: none; }
.sb-skip-link { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 10px 16px; background: #fff; color: #111; border-radius: 6px; }
.sb-skip-link:focus { top: 8px; }

.sb-site-header {
	position: relative;
	z-index: 50;
	box-sizing: border-box;
	padding: 0 16px;
	color: var(--sb-text, inherit);
	font-family: var(--sb-font-body, inherit);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.sb-site-header *, .sb-site-header *::before, .sb-site-header *::after { box-sizing: border-box; }
.sb-site-header.is-sticky { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); }
.sb-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; margin: 0 auto; max-width: 960px; }
.sb-site-header.sb-width-wide .sb-header-inner { max-width: 1200px; }
.sb-site-header.sb-width-full .sb-header-inner { max-width: none; }

.sb-logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; flex: none; }
.sb-logo img { display: block; width: auto; max-width: 240px; object-fit: contain; }
.sb-logo-text { font-family: var(--sb-font-heading, inherit); font-size: 1.35rem; font-weight: 700; line-height: 1.1; }

.sb-nav { display: flex; align-items: center; gap: 24px; }
.sb-nav ul { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.sb-nav li { margin: 0; }
.sb-nav ul a { display: inline-block; padding: 6px 0; color: inherit; text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; }
.sb-nav ul a:hover { border-bottom-color: currentColor; }
.sb-nav ul a[aria-current="page"] { border-bottom-color: var(--sb-primary, currentColor); }
.sb-site-header .sb-header-btn { padding: 10px 18px; }
.sb-site-header .sb-header-btn:link, .sb-site-header .sb-header-btn:visited, .sb-site-header .sb-header-btn:hover { color: var(--sb-on-primary, #fff); }

.sb-header-center .sb-header-inner { flex-direction: column; justify-content: center; gap: 8px; padding: 16px 0 12px; }

.sb-menu-toggle { display: none; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid currentColor; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.sb-menu-icon, .sb-menu-icon::before, .sb-menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; }
.sb-menu-icon { position: relative; }
.sb-menu-icon::before, .sb-menu-icon::after { content: ""; position: absolute; left: 0; }
.sb-menu-icon::before { top: -6px; }
.sb-menu-icon::after { top: 6px; }

@media (max-width: 781px) {
	.sb-header-inner, .sb-header-center .sb-header-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; min-height: 64px; padding: 0; }
	.sb-menu-toggle { display: inline-flex; }
	.sb-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 8px 0 20px; }
	.sb-site-header.is-open .sb-nav { display: flex; }
	.sb-nav ul { flex-direction: column; gap: 0; }
	.sb-nav ul a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(127, 127, 127, .25); }
	.sb-nav ul a[aria-current="page"] { border-bottom-color: rgba(127, 127, 127, .25); font-weight: 700; }
	.sb-site-header .sb-header-btn { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .sb-site-header * { transition: none !important; } }

/* Galerij */
.sb-gallery-grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-gcols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-gcols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-gcols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 781px) {
	.sb-gallery-grid.sb-gcols-3, .sb-gallery-grid.sb-gcols-4, .sb-gallery-grid.sb-gcols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-gallery-grid { gap: 8px; }
}
.sb-gallery-item { margin: 0; padding: 0; overflow: hidden; background: rgba(127, 127, 127, .12); }
.sb-gallery-round .sb-gallery-item { border-radius: 10px; }
.sb-gallery-item a { display: block; height: 100%; }
.sb-gallery-item a:focus-visible { outline: 3px solid var(--sb-primary, #2563eb); outline-offset: -3px; }
.sb-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.sb-gallery-item a:hover img { transform: scale(1.03); }
.sb-ratio-square .sb-gallery-item { aspect-ratio: 1 / 1; }
.sb-ratio-landscape .sb-gallery-item { aspect-ratio: 4 / 3; }
.sb-ratio-portrait .sb-gallery-item { aspect-ratio: 3 / 4; }
.sb-ratio-original .sb-gallery-item img { height: auto; }
.sb-ratio-original { align-items: start; }

/* Vergroten */
html.sb-lb-open { overflow: hidden; }
.sb-lb {
	position: fixed; inset: 0; z-index: 100000;
	display: grid; place-items: center;
	padding: 56px 64px;
	background: rgba(10, 12, 12, .92);
	color: #fff;
	font-family: var(--sb-font-body, system-ui, sans-serif);
}
.sb-lb[hidden] { display: none; }
.sb-lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.sb-lb-img { display: block; max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.sb-lb-caption { max-width: 70ch; text-align: center; font-size: 15px; opacity: .9; }
.sb-lb-btn {
	position: absolute; display: grid; place-items: center;
	width: 48px; height: 48px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .14); color: #fff;
	font-size: 32px; line-height: 1; cursor: pointer;
}
.sb-lb-btn:hover { background: rgba(255, 255, 255, .26); }
.sb-lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sb-lb-btn[hidden] { display: none; }
.sb-lb-close { top: 12px; right: 12px; }
.sb-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.sb-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.sb-lb-counter { position: absolute; top: 24px; left: 20px; font-size: 14px; opacity: .8; }
@media (max-width: 600px) {
	.sb-lb { padding: 56px 8px 72px; }
	.sb-lb-prev, .sb-lb-next { top: auto; bottom: 12px; transform: none; }
	.sb-lb-prev { left: calc(50% - 60px); }
	.sb-lb-next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { .sb-gallery-item img { transition: none; } }

/* Video en kaart */
.sb-embed { position: relative; width: 100%; overflow: hidden; border-radius: 8px; background: #1d2422 center / cover no-repeat; }
.sb-embed.sb-ratio-16-9 { aspect-ratio: 16 / 9; }
.sb-embed.sb-ratio-4-3 { aspect-ratio: 4 / 3; }
.sb-embed.sb-ratio-1-1 { aspect-ratio: 1 / 1; }
.sb-embed.sb-ratio-9-16 { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }
.sb-embed iframe, .sb-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sb-embed-map { background: #e7ebe4; }
.sb-embed-load {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	width: 100%; padding: 24px; border: 0; cursor: pointer; text-align: center;
	background: transparent; color: #fff; font: inherit;
}
.sb-embed.has-poster .sb-embed-load { background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, .1)); }
.sb-embed-map .sb-embed-load { color: #1f2328; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 14px, transparent 14px 28px); }
.sb-embed-play { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--sb-primary, #2563eb); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.sb-embed-play::after { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--sb-on-primary, #fff); }
.sb-embed-map .sb-embed-play::after { margin: 0; width: 18px; height: 18px; border: 3px solid var(--sb-on-primary, #fff); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.sb-embed-load:hover .sb-embed-play { transform: scale(1.06); }
.sb-embed-load:focus-visible { outline: 3px solid var(--sb-primary, #2563eb); outline-offset: -3px; }
.sb-embed-text { display: flex; flex-direction: column; gap: 4px; max-width: 42ch; }
.sb-embed-text strong { font-size: 1.05em; }
.sb-embed-text small { font-size: .82em; opacity: .85; line-height: 1.4; }
.sb-embed-noscript { position: absolute; bottom: 12px; left: 12px; color: #fff; }
.sb-map-route { margin: 10px 0 0; }
.sb-map-route a { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 600; }

/* Icoon met tekst */
.sb-feature-box { display: flex; flex-direction: column; gap: 12px; }
.sb-feature-center { align-items: center; text-align: center; }
.sb-feature-left { flex-direction: row; align-items: flex-start; text-align: left; }
.sb-feature-icon { --sb-icon-color: var(--sb-primary, #2563eb); display: grid; place-items: center; flex: none; color: var(--sb-icon-color); }
.sb-icon-circle { width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, var(--sb-icon-color) 14%, transparent); }
.sb-page .sb-feature-title { margin: 0 0 6px; font-size: 1.15em; line-height: 1.3; }
.sb-feature-text p { margin: 0 0 .8em; line-height: 1.6; }
.sb-feature-text p:last-child { margin-bottom: 0; }

/* Reviews */
.sb-reviews { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-rcols-1 { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.sb-rcols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 781px) { .sb-reviews { grid-template-columns: minmax(0, 1fr); } }
.sb-review {
	display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px;
	border-radius: 12px; background: #fff; color: var(--sb-text, #1f2328);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .06);
}
.sb-review blockquote { margin: 0; padding: 0; border: 0; font-style: normal; flex: 1; }
.sb-review blockquote p { margin: 0 0 .8em; line-height: 1.6; }
.sb-review blockquote p:last-child { margin-bottom: 0; }
.sb-review figcaption { display: flex; flex-direction: column; font-size: .92em; }
.sb-review figcaption span { opacity: .7; }
.sb-stars { display: inline-flex; gap: 2px; }
.sb-stars svg { fill: #f2b01e; }
.sb-stars svg.is-off { fill: rgba(127, 127, 127, .3); }