/* ==========================================================================
   Oranje-hub skin
   Een herkenbaar oranje ontwerp dat alleen op de Oranje-pagina geldt.
   Werkt mee met de donkere modus en respecteert de huisstijl van de
   donkerblauwe accenten.
   ========================================================================== */

body.oranje-hub {
	--oranje: #FF6A13;
	--oranje-dk: #D9450A;
	--oranje-licht: #FFF4EC;
	--bg: var(--oranje-licht);
	--surface: #FFFFFF;
	--tekst: #3A1B0C;
	--tekst-zacht: #6F3B23;
	--lijn: #F4D9C5;
	--accent: var(--oranje);
	--accent-dk: var(--oranje-dk);
	--actie: var(--oranje);
	--actie-dk: var(--oranje-dk);
}

@media (prefers-color-scheme: dark) {
	body.oranje-hub:not([data-theme="light"]) {
		--bg: #241007;
		--surface: #3A1B0C;
		--tekst: #FFE9DC;
		--tekst-zacht: #F4B998;
		--lijn: #5C2B14;
	}
}
[data-theme="dark"] body.oranje-hub {
	--bg: #241007;
	--surface: #3A1B0C;
	--tekst: #FFE9DC;
	--tekst-zacht: #F4B998;
	--lijn: #5C2B14;
}

body.oranje-hub .wk-hero {
	background: linear-gradient(135deg, #FF8A3D 0%, #FF6A13 40%, #D9450A 100%);
	color: var(--wit);
}
body.oranje-hub .wk-hero h1 { color: var(--wit); }
body.oranje-hub .wk-hero::before {
	background:
		radial-gradient(circle at 80% 20%, rgba(14, 26, 43, 0.18) 0%, transparent 50%),
		radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
}

body.oranje-hub .wk-section--licht { background: var(--surface); }
body.oranje-hub .wk-team-hero {
	background: linear-gradient(135deg, var(--oranje) 0%, var(--oranje-dk) 100%);
}
body.oranje-hub .wk-cijfers__cijfer { color: var(--oranje-dk); }

body.oranje-hub .wk-match { border-color: var(--lijn); }
body.oranje-hub .wk-match--oranje { border-color: var(--oranje); border-width: 2px; }

/* Donkerblauwe accentlijn die onder kopjes terugkomt. */
body.oranje-hub .wk-section__kop h2 {
	display: inline-block;
	padding-bottom: 0.35rem;
	border-bottom: 3px solid var(--ink);
}

/* Standentabel-caption in oranje. */
body.oranje-hub .wk-standen__caption { background: var(--oranje-dk); }
[data-theme="dark"] body.oranje-hub .wk-standen__caption { background: var(--oranje); color: var(--ink); }

/* Knoppen op de Oranje-hub: warme oranje gevulde knop. */
body.oranje-hub .wk-knop--primair { background: var(--ink); color: var(--wit); }
body.oranje-hub .wk-knop--primair:hover { background: var(--oranje-dk); color: var(--wit); }