/*
 * Vibe-thema: kleuren voor licht en donker, en de stijlen die theme.json niet kan uitdrukken.
 * Licht is de basis. Donker volgt de systeeminstelling, of de keuze in de themaknop (data-thema op <html>).
 */
:root {
	--vibe-navy: #142650;
	--vibe-amber: #ffba44;
	--vibe-bg: #f4f6fa;
	--vibe-surface: #ffffff;
	--vibe-surface-2: #e9edf5;
	--vibe-line: #d5dbe7;
	--vibe-fg: #0f1b38;
	--vibe-muted: #56617c;
	--vibe-accent: #1d3b80;
	--vibe-accent-ink: #ffffff;
	--vibe-hl: #142650;
	--vibe-shade: linear-gradient(90deg, rgba(244, 246, 250, .97) 0%, rgba(244, 246, 250, .88) 45%, rgba(244, 246, 250, .25) 100%);
	--vibe-logo-filter: brightness(0) invert(11%) sepia(46%) saturate(2400%) hue-rotate(207deg) brightness(92%);
	--vibe-radius: 12px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-thema="licht"]) {
		--vibe-bg: #0a1228;
		--vibe-surface: #111d3d;
		--vibe-surface-2: #172751;
		--vibe-line: #24356a;
		--vibe-fg: #eef2fb;
		--vibe-muted: #9ba8c8;
		--vibe-accent: #ffba44;
		--vibe-accent-ink: #142650;
		--vibe-hl: #ffba44;
		--vibe-shade: linear-gradient(90deg, rgba(10, 18, 40, .95) 0%, rgba(10, 18, 40, .8) 45%, rgba(10, 18, 40, .25) 100%);
		--vibe-logo-filter: none;
		color-scheme: dark;
	}
}
:root[data-thema="donker"] {
	--vibe-bg: #0a1228;
	--vibe-surface: #111d3d;
	--vibe-surface-2: #172751;
	--vibe-line: #24356a;
	--vibe-fg: #eef2fb;
	--vibe-muted: #9ba8c8;
	--vibe-accent: #ffba44;
	--vibe-accent-ink: #142650;
	--vibe-hl: #ffba44;
	--vibe-shade: linear-gradient(90deg, rgba(10, 18, 40, .95) 0%, rgba(10, 18, 40, .8) 45%, rgba(10, 18, 40, .25) 100%);
	--vibe-logo-filter: none;
	color-scheme: dark;
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--vibe-accent); outline-offset: 3px; }

/* Header */
.vibe-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--vibe-bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--vibe-line); }
.vibe-logo img { height: 38px; width: auto; filter: var(--vibe-logo-filter); display: block; }
 @media (max-width: 600px) { .vibe-header .wp-block-buttons { display: none; } }
.admin-bar .vibe-header { top: var(--wp-admin--admin-bar--height, 0px); }

/* Merkteken: equalizer-balkjes uit het logo */
.vibe-eyebrow { display: flex; width: fit-content; align-items: center; gap: .6rem; font-family: var(--wp--preset--font-family--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--vibe-accent); }
.vibe-eyebrow::before { content: ""; width: 18px; height: 14px; flex: none; background:
	linear-gradient(currentColor, currentColor) 0 100% / 3px 40% no-repeat,
	linear-gradient(currentColor, currentColor) 5px 100% / 3px 75% no-repeat,
	linear-gradient(currentColor, currentColor) 10px 100% / 3px 100% no-repeat,
	linear-gradient(currentColor, currentColor) 15px 100% / 3px 60% no-repeat; }

/* Hero */
.vibe-hero { position: relative; overflow: hidden; }
.vibe-hero .wp-block-cover__background { background: var(--vibe-shade) !important; opacity: 1 !important; }
.vibe-hero h1 mark, .vibe-markeer { background: linear-gradient(transparent 68%, color-mix(in srgb, var(--vibe-amber) 70%, transparent) 68%, color-mix(in srgb, var(--vibe-amber) 70%, transparent) 92%, transparent 92%); color: var(--vibe-hl); }

/* Blokstijlen */
.is-style-vibe-kaart { background: var(--vibe-surface); border: 1px solid var(--vibe-line); border-radius: var(--vibe-radius); overflow: hidden; }
.is-style-vibe-band { background: var(--vibe-surface); }
.is-style-vibe-cta { background: var(--vibe-navy); color: #fff; }
.is-style-vibe-cta .wp-block-button__link { background: var(--vibe-amber); color: var(--vibe-navy); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1px solid var(--vibe-line); color: var(--vibe-fg); background: transparent; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--vibe-accent); }

/* Stappen: echte volgorde, dus genummerd */
.vibe-stappen { counter-reset: stap; }
.vibe-stappen > .wp-block-column { border-top: 2px solid var(--vibe-line); padding-top: 1rem; }
.vibe-stappen > .wp-block-column:first-child { border-color: var(--vibe-accent); }
.vibe-stappen > .wp-block-column::before { counter-increment: stap; content: "Stap " counter(stap); font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vibe-accent); }

/* Team */
.vibe-persoon { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1rem; }
.vibe-persoon .wp-block-image { margin: 0; }
.vibe-persoon .wp-block-image img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; }
@media (max-width: 600px) { .vibe-persoon { grid-template-columns: 96px minmax(0, 1fr); } }

/* Reviews */
.vibe-review { margin: 0; }
.vibe-review .vibe-sterren { color: var(--vibe-amber); letter-spacing: 2px; }

/* FAQ met details */
.wp-block-details { background: var(--vibe-surface); border: 1px solid var(--vibe-line); border-radius: var(--vibe-radius); padding: .9rem 1.1rem; }
.wp-block-details summary { cursor: pointer; font-weight: 600; }

/* Themaknop */
.vibe-themaknop { display: inline-flex; border: 1px solid var(--vibe-line); border-radius: 999px; padding: 2px; gap: 2px; }
.vibe-themaknop button { font: inherit; font-size: .8rem; border: 0; background: transparent; color: var(--vibe-muted); padding: .3rem .65rem; border-radius: 999px; cursor: pointer; }
.vibe-themaknop button[aria-pressed="true"] { background: var(--vibe-surface-2); color: var(--vibe-fg); font-weight: 600; }

/* Footer */
.vibe-footer a { color: var(--vibe-fg); text-decoration: none; }
.vibe-footer a:hover { color: var(--vibe-accent); }

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link { transition: transform .15s ease, background-color .2s ease; }
	.wp-block-button__link:hover { transform: translateY(-1px); }
}