/*
 * Luisterwereld merklaag 2026.
 * De waarden zijn fallbacks; WordPress-instellingen blijven leidend via
 * de inline --lw-* variabelen van Luisterwereld Core.
 */
:root {
	--lw-primary: #197d8c;
	--lw-accent: #d97b5f;
	--lw-soft: #a9d9f0;
	--lw-text: #16324f;
	--lw-muted: #587080;
	--lw-surface: #ffffff;
	--lw-background: #f5fafc;
}

body {
	background: var(--lw-background, #f5fafc);
	color: var(--lw-text, #16324f);
}

a {
	color: var(--lw-primary, #197d8c);
}

.lw-site-header {
	border-bottom: 1px solid color-mix(in srgb, var(--lw-soft, #a9d9f0), transparent 45%);
	background: color-mix(in srgb, var(--lw-background, #f5fafc), #fff 58%);
}

.lw-beta {
	background: var(--lw-accent, #d97b5f);
	color: var(--lw-text, #16324f);
}

.lw-hero {
	background: var(--lw-text, #16324f);
}

.lw-hero::after {
	background: linear-gradient(90deg, #102b45 3%, rgba(22, 50, 79, .93) 40%, rgba(22, 50, 79, .12) 72%);
}

.lw-hero h1 span {
	color: var(--lw-soft, #a9d9f0);
}

.lw-category-card {
	border-color: color-mix(in srgb, var(--lw-soft, #a9d9f0), #fff 28%);
	background: color-mix(in srgb, var(--lw-soft, #a9d9f0), #fff 75%);
}

.lw-section--soft {
	background: color-mix(in srgb, var(--lw-soft, #a9d9f0), #fff 68%);
}

.lw-cta--submit {
	background: linear-gradient(120deg, color-mix(in srgb, var(--lw-soft, #a9d9f0), #fff 55%), var(--lw-background, #f5fafc));
	color: var(--lw-text, #16324f);
}

.lw-cta--submit h2 {
	color: var(--lw-text, #16324f);
}

.lw-cta--submit .lw-button {
	background: var(--lw-accent, #d97b5f);
	color: var(--lw-text, #16324f);
}

.lw-site-footer {
	border-top: 5px solid var(--lw-primary, #197d8c);
	background: var(--lw-text, #16324f);
	color: var(--lw-background, #f5fafc);
}

.lw-site-footer .lw-brand,
.lw-site-footer .lw-brand__text strong,
.lw-site-footer h2,
.lw-site-footer a {
	color: var(--lw-background, #f5fafc);
}

.lw-site-footer .lw-brand__text small,
.lw-site-footer .lw-footer-grid p,
.lw-site-footer .lw-footer-grid li,
.lw-site-footer .lw-footer-bottom {
	color: color-mix(in srgb, var(--lw-background, #f5fafc), var(--lw-soft, #a9d9f0) 32%);
}

.lw-site-footer .lw-footer-bottom {
	border-top-color: rgba(245, 250, 252, .2);
}

@media (max-width: 720px) {
	.lw-hero::after {
		background: linear-gradient(180deg, rgba(22, 50, 79, .18), rgba(16, 43, 69, .98) 78%);
	}
}