/* CSBN Base — structurele styling. Design-tokens komen uit theme.json. */

/*
 * `hidden` moet altijd winnen van een display-regel.
 *
 * De browser-standaard `[hidden] { display: none }` staat in de UA-stylesheet en
 * verliest daarmee van ELKE display-regel van een auteur, ongeacht
 * specificiteit. Een gewone `.knop { display: inline-flex }` maakt het
 * `hidden`-attribuut dus stilletjes krachteloos: JS zet het attribuut, er
 * gebeurt niets, en er is geen foutmelding.
 *
 * Dat is op 26-07-2026 drie keer op één dag misgegaan (cookiebanner niet weg te
 * klikken, sorteerknop bleef staan, mobiel menupaneel). Daarom hier centraal,
 * zodat elk child het erft.
 *
 * De selector staat er bewust twee keer: dat geeft specificiteit 0,2,0 en wint
 * daarmee van elke enkele klasse, zonder dat er `!important` aan te pas komt.
 * `until-found` is uitgezonderd — dat is de vorm waarbij de browser de inhoud
 * juist mág uitklappen om er doorheen te zoeken.
 */
[hidden][hidden]:not([hidden='until-found']) {
	display: none;
}

.csbn-main {
	display: block;
}

/*
 * De enige `outline: none` in dit bestand die een focusring ONVOORWAARDELIJK
 * weghaalt, en met reden. (De tweede staat op
 * `.csbn-theme-toggle:focus:not(:focus-visible)` verderop en is van een andere
 * soort: die verbergt de ring alleen voor de muisgebruiker en laat hem voor het
 * toetsenbord staan. Wie hier "de enige" leest en gaat tellen, vindt er twee.)
 *
 * `<main>` heeft `tabindex="-1"` zodat de skip-link de focus echt verplaatst
 * (header.php). Daarmee wordt het element focusbaar, en een focusbaar element
 * krijgt bij focus een ring — hier om de hele hoofdinhoud heen. Dat is geen
 * 2.4.7-overtreding: `<main>` is geen bediening, er valt niets op te doen, en
 * de bezoeker staat er alleen omdat hij net zelf op de skip-link drukte. Elk
 * WordPress-standaardthema doet dit zo.
 *
 * De attribuutselector staat er expliciet bij zodat deze regel alleen het
 * skip-linkdoel kan raken en nooit een echte bediening. Meteen ook de reden
 * dat hij op 0,3,0 uitkomt: een child dat `[tabindex]:focus-visible` een
 * focusring geeft (funcrea-child doet dat, regel F1) haalt maar 0,2,0 en
 * verliest hier dus — zonder dat het child iets hoeft te weten.
 */
.csbn-main[tabindex='-1']:focus {
	outline: none;
}

.csbn-container {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--50);
}

.csbn-page-header {
	margin-bottom: var(--wp--preset--spacing--40);
}

/*
 * Alleen-voor-schermlezers.
 *
 * Stond hier tot nu toe niet: de definitie kwam uit de block-library-CSS van
 * core, terwijl de skip-linkregel hieronder er wél op selecteert. Dequeuet een
 * performanceplugin ooit `wp-block-library` — een veelvoorkomende ingreep — dan
 * wordt elk verborgen label ("Naar inhoud", "Menu", "Zoeken") in één klap
 * zichtbare tekst op elke pagina van elke klantsite. Een klasse waar het theme
 * op leunt hoort van het theme te zijn.
 *
 * Laadt core's versie er wél naast, dan is dit dezelfde opmaak en verandert er
 * niets; ze zijn met opzet gelijk gehouden.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	/* `clip` is verouderd en core gebruikt hem NIET meer: de block-library-CSS
	   van de draaiende site levert alleen `clip-path` (nagekeken op
	   wp-includes/css/dist/block-library/style.min.css). Hij blijft hier staan
	   als terugval voor een browser zonder `clip-path`-ondersteuning; binnen het
	   bereik van WP 6.6 is dat er praktisch geen, dus dit is één regel
	   overdaad en geen dekking die we nodig hebben. Weghalen mag, maar dan
	   hoort `clip: auto` uit de `:focus`-regel hieronder mee. */
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal;
}

/* Alleen het verbergen terugdraaien. Waar het element dan terechtkomt is aan de
   component die hem focusbaar maakt — in dit theme is dat alleen de skip-link,
   en die zet zijn eigen `left` hieronder. */
.screen-reader-text:focus {
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

/* Skip-link */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 8px 0;
}

.skip-link.screen-reader-text:focus {
	left: 0;
}

/* Berichtenlijst */
.csbn-post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.csbn-post-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium, 8px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.csbn-post-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.csbn-post-card__body {
	padding: var(--wp--preset--spacing--40);
}

.csbn-post-card__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.5rem;
}

.csbn-post-card__title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.csbn-post-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

.csbn-post-card__meta {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0.75rem;
}

/* Enkel bericht */
.csbn-single__thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--medium, 8px);
}

.csbn-single__content {
	margin-top: var(--wp--preset--spacing--40);
}

/* Paginering */
.csbn-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

.csbn-pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.csbn-pagination .page-numbers {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small, 4px);
	text-decoration: none;
}

.csbn-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	border-color: var(--wp--preset--color--primary);
}

/* Fallback-menu */
.csbn-fallback-menu ul {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Donkere modus — paletomzetting
   ==========================================================================
   Hier staan GEEN kleuren. Het palet van de donkere modus wordt gegenereerd
   door `inc/darkmode.php` uit `styles/dark.json` (child vóór parent), en
   uitsluitend wanneer het thema `csbn-base-darkmode` ondersteunt.

   Dat is met opzet, en het is eerder fout gegaan: een handmatige spiegel van
   dark.json stond hier ook, wat drie problemen gaf. Een onderhoudsval (twee
   plekken bijwerken), een child kon zijn eigen donkere kleuren niet meer
   kiezen, en — het ergste — dit bestand wordt áltijd ingeladen, dus na
   `remove_theme_support( 'csbn-base-darkmode' )` bleef de site donker worden
   op een donker OS. De opt-out werkte dan niet.

   Wat hier wél hoort: de zichtbaarheid van de zon/maan-iconen. Dat is
   presentatie van de schakelaar zelf, en die bestaat alleen als darkmode aan
   staat.
   -------------------------------------------------------------------------- */

:root {
	/* Zichtbaarheid van de zon/maan-iconen: 1 = zichtbaar, 0 = verborgen. */
	--csbn-icon--sun: 1;
	--csbn-icon--moon: 0;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--csbn-icon--sun: 0;
		--csbn-icon--moon: 1;
	}
}

:root[data-theme="dark"] {
	--csbn-icon--sun: 0;
	--csbn-icon--moon: 1;
}

:root[data-theme="light"] {
	--csbn-icon--sun: 1;
	--csbn-icon--moon: 0;
}

/* ==========================================================================
   Thema-schakelaar (parts/theme-toggle.html)
   ==========================================================================
   Markup-contract: <button class="csbn-theme-toggle" data-csbn-theme-toggle
   aria-pressed="false" aria-label="Donkere modus">. De JS bindt op
   [data-csbn-theme-toggle] en houdt alleen aria-pressed bij; de weergave
   hangt aan data-theme op <html>, niet aan aria-pressed, zodat icoon en
   palet nooit uit elkaar kunnen lopen (ook niet als de JS wegvalt).

   Modifiers:
   - .csbn-theme-toggle--icon-only  → nooit labeltekst tonen.
   - .csbn-theme-toggle--with-label → labeltekst óók op mobiel tonen.
   -------------------------------------------------------------------------- */

.csbn-theme-toggle {
	/* Raakdoel: 44 x 44 px minimum (WCAG 2.5.8 / 2.5.5). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 0.875rem;
	background-color: var(--wp--preset--color--base-2);
	/* Rand op contrast-2 i.p.v. de slug `border`: die haalt de 3:1 van
	   WCAG 1.4.11 (niet-tekstcontrast) niet tegen de kopachtergrond. */
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--wp--custom--radius--medium, 8px);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.csbn-theme-toggle:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Focus: outline op `contrast` — de enige kleur die in beide modi maximaal
   contrast houdt met elke achtergrond in het palet (>= 15:1). */
.csbn-theme-toggle:focus {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

@supports selector(:focus-visible) {
	.csbn-theme-toggle:focus:not(:focus-visible) {
		outline: none;
	}

	.csbn-theme-toggle:focus-visible {
		outline: 3px solid var(--wp--preset--color--contrast);
		outline-offset: 2px;
	}
}

.csbn-theme-toggle__icons {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.csbn-theme-toggle__icon {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	opacity: 0;
	transition: opacity 180ms ease;
}

.csbn-theme-toggle__icon--sun {
	opacity: var(--csbn-icon--sun, 1);
}

.csbn-theme-toggle__icon--moon {
	opacity: var(--csbn-icon--moon, 0);
}

.csbn-theme-toggle__label {
	display: var(--csbn-toggle--label-display, inline);
	white-space: nowrap;
}

/* Op smalle schermen alleen het icoon. De toegankelijke naam blijft intact:
   die komt uit aria-label op de knop, met exact dezelfde tekst als het
   zichtbare label (WCAG 2.5.3, Label in Name). */
@media (max-width: 599px) {
	.csbn-theme-toggle:not(.csbn-theme-toggle--with-label) {
		--csbn-toggle--label-display: none;

		padding-inline: 0.5rem;
	}
}

.csbn-theme-toggle--icon-only {
	--csbn-toggle--label-display: none;

	padding-inline: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.csbn-theme-toggle,
	.csbn-theme-toggle__icon {
		transition: none;
	}
}

/* Windows-contrastmodus: forced-colors negeert var()-kleuren, dus de rand
   expliciet terugzetten op een systeemkleur. */
@media (forced-colors: active) {
	.csbn-theme-toggle {
		border-color: ButtonText;
	}

	.csbn-theme-toggle:focus,
	.csbn-theme-toggle:focus-visible {
		outline-color: Highlight;
	}

	.csbn-theme-toggle__icon {
		stroke: CanvasText;
	}
}

/* --- Zoekformulier --------------------------------------------------------

   `get_search_form()` levert kale markup, en `404.php` van dit thema zet hem
   neer. Zonder deze regels staat er op de foutpagina een leeg invoervak met de
   grijze standaardknop van de browser — juist op de plek waar een bezoeker net
   iets niet kon vinden.

   Alleen tokens die elk child levert, met een terugvalwaarde waar het een
   custom property is; een child dat die niet definieert krijgt dan nog steeds
   iets fatsoenlijks in plaats van niets.
   ------------------------------------------------------------------------ */

.search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
	max-width: 32rem;
	margin-top: var(--wp--preset--spacing--30);
}

.search-form label {
	flex: 1 1 12rem;
	margin: 0;
}

.search-form .search-field {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 1.125rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium, 10px);
	font: inherit;
}

.search-form .search-field::placeholder {
	color: var(--wp--preset--color--contrast-2);
	opacity: 1;
}

.search-form .search-field:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.search-form .search-submit {
	min-height: 44px;
	padding: 0.6rem 1.5rem;
	background-color: var(--wp--preset--color--primary);
	/* Tekst op een primary-vlak is `base`, niet `primary-contrast`. Zie valkuil
	   11: die laatste zakt in de donkere modus onder AA. */
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--medium, 10px);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.search-form .search-submit:hover {
	background-color: var(--wp--custom--primary--hover, var(--wp--preset--color--contrast));
}