/* DispoLogic – aanvullende opmaak (naast theme.json) */

:root {
	--dl-radius: 11px;
	--dl-radius-lg: 14px;
	--dl-card: var(--wp--preset--color--surface);
	--dl-card-2: var(--wp--preset--color--surface-2);
	--dl-line: var(--wp--preset--color--border);
}

body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--wp--preset--color--primary); color: #fff; }

/* Subtiel raster op de achtergrond, zoals in de app */
.dl-grid-bg {
	background-image:
		linear-gradient(rgba(231, 237, 241, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(231, 237, 241, 0.035) 1px, transparent 1px);
	background-size: 32px 32px;
}

/* ---------- kopbalk ---------- */
.dl-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(23, 39, 51, 0.92);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--dl-line);
}
.admin-bar .dl-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .dl-header { top: 46px; } }
.dl-header .wp-block-image img { height: 34px; width: auto; }
.dl-header .wp-block-navigation a { color: var(--wp--preset--color--contrast); }
.dl-header .wp-block-navigation a:hover { color: var(--wp--preset--color--white); text-decoration: none; }
.dl-header .wp-block-button__link { padding: 0.5rem 1rem; font-size: 0.9rem; }
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base-2) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ---------- stijlvarianten ---------- */
.is-style-dl-card {
	background: var(--dl-card);
	border: 1px solid var(--dl-line);
	border-radius: var(--dl-radius-lg);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}
.is-style-dl-card.has-background { border-color: var(--dl-line); }

p.is-style-dl-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	font-weight: 750;
	color: var(--wp--preset--color--accent-dark);
	margin-bottom: 0.35rem;
}

.wp-block-button.is-style-dl-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid #5B7A88;
}
.wp-block-button.is-style-dl-outline .wp-block-button__link:hover {
	background: var(--dl-card-2);
	color: var(--wp--preset--color--white);
}

ul.is-style-dl-check { list-style: none; padding-left: 0; }
ul.is-style-dl-check li { position: relative; padding-left: 1.75rem; margin: 0.45rem 0; }
ul.is-style-dl-check li::before {
	content: ""; position: absolute; left: 0; top: 0.3em;
	width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: var(--wp--preset--color--primary)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

.wp-block-image.is-style-dl-screen img {
	border-radius: var(--dl-radius-lg);
	border: 1px solid var(--dl-line);
	box-shadow: var(--wp--preset--shadow--panel);
}

/* ---------- stappen (genummerde rondjes zoals de stappenbalk van de app) ---------- */
.dl-step-number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: var(--wp--preset--color--primary); color: #fff;
	font-weight: 750; font-size: 1rem; margin: 0 0 0.75rem;
}

/* ---------- veelgestelde vragen ---------- */
.wp-block-details summary { cursor: pointer; font-weight: 650; color: var(--wp--preset--color--white); }
.wp-block-details summary::marker { color: var(--wp--preset--color--accent-dark); }
.wp-block-details[open] summary { margin-bottom: 0.5rem; }
.wp-block-details + .wp-block-details { margin-top: 0.75rem; }

/* ---------- formulieren (algemeen) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"],
input[type="number"], input[type="url"], textarea, select {
	background: var(--dl-card-2);
	color: var(--wp--preset--color--contrast);
	border: 1px solid #49606E;
	border-radius: 6px;
	padding: 0.6rem 0.75rem;
	font: inherit;
}
input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary-light);
}
::placeholder { color: #7F95A2; }

/* ---------- tabellen ---------- */
.wp-block-table table { border-collapse: collapse; }
.wp-block-table td, .wp-block-table th { border-color: var(--dl-line); }
.wp-block-table thead { background: var(--dl-card-2); }

/* ---------- voettekst ---------- */
.dl-footer { border-top: 1px solid var(--dl-line); }
.dl-footer a { color: var(--wp--preset--color--muted); }
.dl-footer a:hover { color: var(--wp--preset--color--white); }
.dl-footer .wp-block-image img { height: 26px; width: auto; }

/* ---------- toegankelijkheid ---------- */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ---------- sectiekop over de brede kolom ---------- */
.dl-section-head > :first-child { margin-top: 0; }
.dl-section-head .dl-intro { max-width: 62ch; }
.dl-footer ul { list-style: none; padding-left: 0; margin: 0; }

/* ---------- prijzen zonder WooCommerce ---------- */
.dl-prijzen-leeg { border: 1px dashed var(--dl-line); border-radius: 12px; padding: 1.5rem; color: var(--wp--preset--color--muted); }

/* ---------- kop op smalle schermen ---------- */
.dl-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 781px) {
	.dl-header .wp-block-buttons .wp-block-button.is-style-dl-outline { display: none; }
	.dl-header .wp-block-button__link { padding: .5em .85em; font-size: .85rem; }
	.dl-header .wp-block-image img { height: 28px; }
}

/* ---------- voettekst onderaan bij korte pagina's ---------- */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }