/*
Theme Name: 72 Uur Blackout
Theme URI: https://72uurblackout.nl
Author: De Zaak voor Crisiskunde
Description: Zelfstandig thema voor 72uurblackout.nl. Pagina's worden lokaal als HTML ontworpen en via WP-CLI geplaatst; dit thema levert alleen de romp, de header en de voet. Geen paginabouwer, geen afhankelijkheid van een bovenliggend thema.
Version: 1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: blackout
*/

/* ==========================================================================
   Tokens
   Eén bron voor kleur, ruimte en typografie. De ontworpen pagina's gebruiken
   deze variabelen, zodat een wijziging hier op de hele site doorwerkt.

   Let op: de definitieve vormtaal van het spel staat nog niet vast. Wat hier
   staat is een werkpalet dat past bij het onderwerp (nacht, zaklamplicht) en
   dat bewust afwijkt van de groenfamilie van crisiskunde.nl. Vervangen zodra
   het doosontwerp vastligt.
   ========================================================================== */

:root {
	/* Kleur */
	--bo-nacht:        #0d1117;
	--bo-nacht-zacht:  #161b22;
	--bo-licht:        #f5c451;
	--bo-licht-warm:   #e8a33d;
	--bo-papier:       #f7f5f2;
	--bo-tekst:        #1a1d21;
	--bo-tekst-zacht:  #4a5158;
	--bo-lijn:         #d8d4ce;

	/* Ruimte */
	--bo-ruimte-xs: 0.5rem;
	--bo-ruimte-s:  1rem;
	--bo-ruimte-m:  2rem;
	--bo-ruimte-l:  4rem;
	--bo-ruimte-xl: 6rem;

	/* Maten */
	--bo-breedte:      1180px;
	--bo-breedte-lees: 720px;

	/* Typografie */
	--bo-font-kop:   "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bo-font-tekst: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   Romp
   Bewust minimaal: de ontworpen pagina's brengen hun eigen opmaak mee.
   Alles wat hier staat, staat er omdat het anders in elke pagina herhaald
   zou moeten worden.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bo-papier);
	color: var(--bo-tekst);
	font-family: var(--bo-font-tekst);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; height: auto; }

a { color: var(--bo-licht-warm); }
a:hover, a:focus { color: var(--bo-nacht); }

h1, h2, h3, h4 {
	font-family: var(--bo-font-kop);
	line-height: 1.2;
	margin: 0 0 var(--bo-ruimte-s);
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 600; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 600; }

p { margin: 0 0 var(--bo-ruimte-s); }

/* Toegankelijkheid: zichtbare focus, niet weghalen. */
:focus-visible {
	outline: 3px solid var(--bo-licht);
	outline-offset: 2px;
}

/* Overslaan-naar-inhoud, zichtbaar bij toetsenbordgebruik. */
.bo-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--bo-ruimte-xs) var(--bo-ruimte-s);
	background: var(--bo-nacht);
	color: var(--bo-papier);
}
.bo-skip:focus { left: 0; }

/* ==========================================================================
   Header en voet
   ========================================================================== */

.bo-header {
	background: var(--bo-nacht);
	color: var(--bo-papier);
}

.bo-header__binnen {
	max-width: var(--bo-breedte);
	margin: 0 auto;
	padding: var(--bo-ruimte-s) var(--bo-ruimte-m);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bo-ruimte-m);
	flex-wrap: wrap;
}

.bo-header__naam {
	font-family: var(--bo-font-kop);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	color: var(--bo-papier);
	text-decoration: none;
}
.bo-header__naam:hover, .bo-header__naam:focus { color: var(--bo-licht); }

.bo-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--bo-ruimte-s);
	flex-wrap: wrap;
}
.bo-menu a {
	color: var(--bo-papier);
	text-decoration: none;
	font-size: 0.9375rem;
}
.bo-menu a:hover, .bo-menu a:focus { color: var(--bo-licht); }

.bo-voet {
	background: var(--bo-nacht);
	color: var(--bo-papier);
	margin-top: var(--bo-ruimte-xl);
}

.bo-voet__binnen {
	max-width: var(--bo-breedte);
	margin: 0 auto;
	padding: var(--bo-ruimte-l) var(--bo-ruimte-m);
	display: grid;
	gap: var(--bo-ruimte-m);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	font-size: 0.9375rem;
}

.bo-voet a { color: var(--bo-licht); }

.bo-voet__merk {
	border-top: 1px solid rgba(247, 245, 242, 0.15);
	margin-top: var(--bo-ruimte-m);
	padding-top: var(--bo-ruimte-s);
	grid-column: 1 / -1;
	color: rgba(247, 245, 242, 0.7);
	font-size: 0.875rem;
}

/* ==========================================================================
   Hulpklassen voor de ontworpen pagina's
   ========================================================================== */

.bo-band  { padding: var(--bo-ruimte-xl) var(--bo-ruimte-m); }
.bo-binnen { max-width: var(--bo-breedte); margin: 0 auto; }
.bo-lees   { max-width: var(--bo-breedte-lees); margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}