/**
 * Publieke weergave: berichtpagina en /nieuws/-archief.
 *
 * Bewust minimaal. Deze plugin draait op verschillende verenigingssites met
 * verschillende thema's; opdringerige styling zou daar telkens tegenin werken.
 * Alleen layout en ruimte, geen kleuren of lettertypen — die komen van het
 * thema. Wie meer wil, overschrijft het template vanuit het thema.
 */

/* ── Berichtpagina ─────────────────────────────────────────────────────── */

.prapp-datum {
	opacity: .75;
	font-size: .9em;
	margin: 0 0 1em;
}

.prapp-foto {
	margin: 0 0 1.5em;
}

.prapp-foto img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Voorbeeldmelding voor een nog niet gepubliceerd bericht. Opvallend genoeg
   om niet te missen, want anders denkt een redacteur dat het al live staat. */
.prapp-let-op {
	padding: .75em 1em;
	margin: 0 0 1.5em;
	border-left: 4px solid currentColor;
	opacity: .85;
	font-size: .95em;
}

/* Knop in de berichttekst ([[tekst]](adres), 0.32.0). Vorm hier; de kleuren
   (secundaire kleur met berekende tekstkleur) komen uit de inline-CSS van
   prapp_enqueue_publiek(), zoals bij de andere knoppen. Zonder huisstijl: een
   omlijnde knop in de tekstkleur van het thema. Dubbele klasse: wint van
   `.entry-content a` van het thema. */
.prapp-knop-regel {
	margin: 1.5em 0;
}

.prapp-knop-link.prapp-knop-link {
	display: inline-block;
	padding: .7em 1.4em;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

/* ── Archief ───────────────────────────────────────────────────────────── */

/* Het terugval-template staat buiten de containers van het thema (die zijn per
   thema anders en niet betrouwbaar te raden), dus zonder eigen breedte plakt de
   inhoud tegen de linkerrand. Daarom hier een eigen leesbreedte.
   `--wp--style--global--content-size` is de standaard van blokthema's; die wint
   als het thema hem levert, anders 1100px. Een thema met een eigen
   archive-prapp_bericht.php raakt dit niet: dat template wint van dit bestand. */
.prapp-archief {
	max-width: var(--wp--style--global--content-size, 1100px);
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
	box-sizing: border-box;
}

.prapp-archief__kop {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.prapp-archief__kop h1 {
	margin: 0;
}

.prapp-archief__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2em;
}

.prapp-archief__item {
	display: grid;
	gap: 1em;
	align-items: start;
}

/* Foto naast de tekst zodra er ruimte is; eronder op smalle schermen. */
@media (min-width: 640px) {
	.prapp-archief__item:has(.prapp-archief__foto) {
		grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	}
}

.prapp-archief__foto img {
	max-width: 100%;
	height: auto;
	display: block;
}

.prapp-archief__titel {
	margin: 0 0 .25em;
}

.prapp-archief__datum {
	opacity: .75;
	font-size: .9em;
	margin: 0 0 .5em;
}

.prapp-archief__samenvatting {
	margin: 0;
}

/* Vastgezet bericht: subtiel gemarkeerd, geen schreeuwend label — het staat
   al bovenaan, dat is het belangrijkste signaal. */
.prapp-archief__item.is-vastgezet .prapp-archief__titel::before {
	content: "★";
	margin-right: .4em;
	opacity: .7;
}

.prapp-archief__leeg {
	opacity: .75;
}

/* ── Berichtenslider (shortcode [prapp_nieuws]) ────────────────────────── */

/* Horizontaal scrollend met scroll-snap in plaats van een JavaScript-carrousel.
   Werkt zonder JS, is toegankelijk met toetsenbord en touch, en valt op smalle
   schermen vanzelf terug op vegen. Eén afhankelijkheid minder om te onderhouden. */

/* Géén eigen max-width hier, anders dan bij het archief: deze shortcode wordt
   ín een kolom geplaatst (naast bijv. de concertagenda) en moet zich naar dat
   vak voegen. Het archief is een hele pagina en heeft die breedte juist wél
   nodig. Ook geen horizontale padding: de kolom levert die al. */
.prapp-slider {
	box-sizing: border-box;
}

/* Kop gecentreerd, de berichten links uitgelijnd. Reden: deze shortcode staat
   vaak naast een andere kolom met een gecentreerde kop ("Aankomende concerten"
   op hafabra.nl), en dan valt een linkse kop uit de toon. De berichten zelf
   blijven links: gecentreerde lopende tekst leest slechter. */
.prapp-slider__kop {
	margin-bottom: clamp(1rem, 3vw, 1.75rem);
	text-align: center;
}

.prapp-slider__titel {
	margin: 0;
}

/* Onder elkaar, niet naast elkaar (v0.3.1). Horizontaal scrollen werkte tegen
   de praktijk in: deze shortcode staat vaak in een halve kolom naast andere
   inhoud, en dan is een zijwaartse scrollbalk in een smal vak onhandig én
   makkelijk te missen. Een verticale lijst leest daar beter en past zich
   vanzelf aan elke kolombreedte aan. */
.prapp-slider__spoor {
	list-style: none;
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.prapp-slider__item + .prapp-slider__item {
	border-top: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
	padding-top: clamp(1rem, 2.5vw, 1.5rem);
}

.prapp-slider__link {
	display: grid;
	gap: .2em .9em;
	text-decoration: none;
	color: inherit;
	align-items: start;
}

/* Foto naast de tekst zodra de kolom breed genoeg is. Container queries i.p.v.
   media queries: de shortcode kan in een smalle zijkolom staan terwijl het
   scherm breed is, en dan zegt de schermbreedte niets. */
@supports (container-type: inline-size) {
	.prapp-slider {
		container-type: inline-size;
	}

	@container (min-width: 420px) {
		.prapp-slider__link:has(.prapp-slider__foto) {
			grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
		}
	}
}

/* Vaste beeldverhouding: anders springt de lijst bij het laden, omdat elke foto
   een andere hoogte heeft. */
.prapp-slider__foto {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
}

.prapp-slider__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.prapp-slider__tekst {
	display: flex;
	flex-direction: column;
	gap: .25em;
	min-width: 0;
}

.prapp-slider__berichttitel {
	font-weight: 700;
	line-height: 1.3;
	font-size: 1.05em;
}

.prapp-slider__datum {
	font-size: .85em;
	opacity: .7;
}

.prapp-slider__link:hover .prapp-slider__berichttitel,
.prapp-slider__link:focus-visible .prapp-slider__berichttitel {
	text-decoration: underline;
}

.prapp-slider__samenvatting {
	font-size: .92em;
	line-height: 1.45;
	opacity: .9;
	margin-top: .15em;
}

.prapp-slider__item.is-vastgezet .prapp-slider__berichttitel::before {
	content: "★";
	margin-right: .4em;
	opacity: .7;
}

/* Link naar het archief, onderaan. Gescheiden van de lijst met dezelfde
   lijn-stijl als tussen de items, zodat hij er niet als zesde bericht uitziet. */
.prapp-slider__meer-onder {
	margin: 0;
	text-align: center;
	padding-top: clamp(1rem, 2.5vw, 1.5rem);
	border-top: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
	/* Twee links naast elkaar, met een wrap op smal: "Meer berichten" en de
	   nieuwsbriefknop passen op een telefoon niet altijd samen op één regel. */
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.2rem;
	justify-content: center;
	align-items: center;
}

/* De nieuwsbriefknop mag opvallen — het is een oproep, geen navigatie. Sinds
   0.26.3 in de secundaire kleur van de vereniging; die kleurregels komen uit
   prapp_enqueue_publiek() en staan alleen op de pagina als de huisstijl is
   ingevuld. Hieronder de neutrale basis: een knop met een rand, in de stijl
   van het thema. */
.prapp-slider__nieuwsbrief {
	display: inline-block;
	padding: .5em 1.1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	/* 44px tikdoel op een telefoon. */
	min-height: 44px;
	line-height: 1.9;
	box-sizing: border-box;
}

.prapp-slider__meer {
	font-weight: 600;
}


/* ── Persarchief (/press, shortcode [prapp_press]) ─────────────────────── */

/* HTML-eerst (charter §4.5): de volledige tekst staat hier, de PDF is een
   download eronder. Journalisten willen kopieerbare tekst, en crawlers en
   AI-engines lezen geen PDF. */

/* Leesbreedte, exact zoals .prapp-archief die kreeg in v0.2.1: de eigen
   /press-route staat buiten de containers van het thema, dus zonder dit plakt
   de inhoud tegen de linkerrand van het scherm.

   Alleen op de modifier, niet op .prapp-press zelf — en dát is het verschil
   met het archief. De persruimte heeft twee ingangen die dezelfde render()
   delen (charter §4.5): de losse route én de shortcode [prapp_press] op een
   eigen pagina onder Contact. Als shortcode zit hij al in een themakolom, en
   een tweede max-width daarbinnen zou de tekst onnodig versmallen. De route
   zet daarom `pagina => ja`; de shortcode niet. */
.prapp-press--pagina {
	max-width: var(--wp--style--global--content-size, 1100px);
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
	box-sizing: border-box;
}

.prapp-press__item + .prapp-press__item {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-top: clamp(2rem, 5vw, 3.5rem);
	border-top: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
}

.prapp-press__kop {
	margin: 0 0 .3em;
}

.prapp-press__datum {
	margin: 0 0 1.2em;
	opacity: .75;
	font-size: .92em;
}

.prapp-press__citaat {
	margin: 1.5em 0;
	padding: .2em 0 .2em 1em;
	border-left: 3px solid currentColor;
	border-left-color: color-mix(in srgb, currentColor 35%, transparent);
	font-style: italic;
}

.prapp-press__citaat cite {
	display: block;
	margin-top: .4em;
	font-style: normal;
	font-size: .9em;
	opacity: .75;
}

.prapp-press__download {
	margin-top: 1.5em;
}

.prapp-press__leeg {
	opacity: .75;
}

/* ── Nieuwsbrief: aanmelden, bevestigen, uitschrijven (charter §4.3) ────── */

/* Zelfde terughoudendheid als hierboven: layout en ruimte, geen lettertypen en
   geen kleurenschema dat tegen het thema in werkt. Alleen de knoppen krijgen
   de secundaire kleur van de vereniging (0.26.3, zie .prapp-knop-kleur
   hieronder); zonder huisstijl erven ze de themastijl voor <button>. */

.prapp-nieuwsbrief {
	margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.prapp-nieuwsbrief__kop {
	margin: 0 0 .4em;
}

.prapp-nieuwsbrief__tekst {
	margin: 0 0 1.2em;
	opacity: .85;
}

.prapp-nieuwsbrief__form {
	display: flex;
	flex-direction: column;
	gap: .35em;
	/* Een e-mailveld over de volle breedte van een desktopscherm oogt als een
	   fout; een leesbare maximumbreedte houdt het formulier compact. */
	max-width: 26rem;
}

.prapp-nieuwsbrief__label {
	font-size: .92em;
	opacity: .85;
}

.prapp-nieuwsbrief__label span {
	opacity: .7;
	font-weight: normal;
}

.prapp-nieuwsbrief__veld {
	width: 100%;
	padding: .55em .7em;
	margin: 0 0 .6em;
	border: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 4px;
	/* 16px voorkomt dat iOS bij focus inzoomt op het formulier. */
	font-size: max(1rem, 16px);
	font-family: inherit;
	background: transparent;
	color: inherit;
}

.prapp-nieuwsbrief__knop {
	align-self: flex-start;
	padding: .6em 1.4em;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
}

/* De kleur van deze knoppen (secundaire kleur, leesbare tekst) staat NIET
   hier maar in de inline-CSS van prapp_enqueue_publiek(), en alleen als de
   huisstijl is ingevuld. Hier een terugval met var(…, revert) zetten leek
   netjes, maar `revert` gooit ook de knopstijl van het thema weg (gemeten in
   Chrome, 0.26.3): zonder huisstijl zou een themaknop dan grijs worden. */
.prapp-nieuwsbrief__knop,
.prapp-press__download a {
	border-radius: 6px;
}

.prapp-nieuwsbrief__knop:hover,
.prapp-slider__nieuwsbrief:hover,
.prapp-press__download a:hover {
	filter: brightness(.94);
}

/* De PDF-download in de persruimte als knop: het is de nette versie die een
   journalist komt halen, geen voetnoot. */
.prapp-press__download a {
	display: inline-block;
	padding: .55em 1.2em;
	min-height: 44px;
	box-sizing: border-box;
	line-height: 1.9;
	text-decoration: none;
	font-weight: 600;
}

/* De honeypot mag voor een bot gewoon in het formulier staan, maar nooit
   zichtbaar of bereikbaar zijn voor een mens. `display: none` wordt door
   sommige bots herkend en overgeslagen, vandaar het wegschuiven. */
.prapp-nieuwsbrief__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.prapp-nieuwsbrief__melding {
	padding: .75em 1em;
	margin: 0 0 1.2em;
	border-left: 4px solid currentColor;
	font-size: .95em;
}

/* Semantisch, dus bewust wél kleur — een bevestiging en een fout moeten
   herkenbaar zijn, ook op een thema dat alles grijs maakt. */
.prapp-nieuwsbrief__melding--goed {
	border-left-color: #15803d;
}

.prapp-nieuwsbrief__melding--fout {
	border-left-color: #b91c1c;
}

.prapp-nieuwsbrief--melding {
	max-width: 42rem;
	margin-inline: auto;
	padding: clamp(1.5rem, 5vw, 3rem) 1rem;
}

/* ── Nieuwsbrief op "Mijn account" (charter §4.3) ──────────────────────── */

/* Bewust geen kleuren: dit blok staat midden in de accountpagina van het thema
   en moet zich daarnaar voegen, net als het aanmeldformulier. Alleen ruimte. */
.prapp-nieuwsbrief--account {
	margin: 0;
}

.prapp-nieuwsbrief--account .prapp-nieuwsbrief__form,
.prapp-nieuwsbrief--account form {
	display: grid;
	gap: .4rem;
	justify-items: start;
	max-width: 26rem;
}

/* Uitschrijven is de minst gewenste actie op dit scherm en hoort dus niet even
   hard te roepen als "Naam opslaan". Onderstreept in plaats van als knop:
   herkenbaar, maar niet uitnodigend. */
/* Dubbele klasse: een thema dat `button` stijlt (bijv. `.entry-content button`)
   won anders, en dan werd Uitschrijven een volle themaknop — gemeten in
   Chrome, 0.26.3 (bestond al vóór die versie). */
.prapp-nieuwsbrief__knop--secundair.prapp-nieuwsbrief__knop--secundair {
	background: none;
	border: 0;
	padding: 0;
	/* Geen knopkleur: dit is een link-achtige actie, en de knoptekstkleur
	   (bijv. navy) hoort niet op de achtergrond van het thema. */
	color: inherit;
	text-decoration: underline;
	opacity: .75;
}

/* ── Partnervermelding (§4.7, 0.30.0) ──────────────────────────────────── */

/* Altijd zichtbaar: geen display:none, geen off-screen positie en geen eigen
   kleur. De tekstkleur komt van het thema, dus het contrast is dat van de
   rest van de site. Alleen ruimte en een iets kleinere letter. */
.prapp-partner {
	margin: 0;
	padding: 1rem 16px;
	text-align: center;
	font-size: .875rem;
	line-height: 1.5;
}

.prapp-partner a {
	text-decoration: underline;
}

/* Logo boven de zin (0.31.3). Blok zodat de zin eronder begint; 56px hoog,
   zodat het woord in het VerenigingsKorting-logo nog te lezen is. */
.prapp-partner .prapp-partner__logo-link {
	display: block;
	width: max-content;
	margin: 0 auto .5rem;
	text-decoration: none;
}

.prapp-partner__logo {
	display: block;
	width: auto;
	height: 56px;
	border-radius: 4px;
}

/* ── Sponsoroverzicht [prapp_partners] (§4.7, 0.31.0; review 0.31.1) ──── */

/* Raster dat zelf het aantal kolommen kiest: twee op een telefoon (ook 320px),
   meer op een breed scherm. Logo's houden hun verhouding (object-fit: contain),
   zodat een liggend en een staand logo even zwaar ogen. De naam staat altijd
   als tekst onder het logo, in de tekstkleur en het lettertype van het thema.

   Dubbele klassen waar een thema anders wint: Kadence zet
   `.single-content ul { padding-left: 2em }` en de linkkleur via
   `.entry-content a` — allebei specifieker dan één klasse. Gemeten op
   hafabra.nl (0.31.1): de lijst sprong 34px in (één kolom tot 375px) en de
   namen stonden in de linkkleur, goud op wit = 2,3:1. */
.prapp-partners {
	margin: 0 0 2em;
}

.prapp-partners__groep {
	margin: 1.5em 0 .75em;
}

.prapp-partners__lijst.prapp-partners__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* groot="Hoofdsponsor": grotere tegels en logo's voor die groep. */
.prapp-partners__lijst.prapp-partners__lijst--groot {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.prapp-partners__item.prapp-partners__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* color: inherit = de tekstkleur van het thema, ook bij hover en focus (de
   linkkleur van het thema is daar vaak nog specifieker). Geen eigen kleur. */
.prapp-partners__kaart.prapp-partners__kaart,
.prapp-partners__kaart.prapp-partners__kaart:hover,
.prapp-partners__kaart.prapp-partners__kaart:focus {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	height: 100%;
	padding: 12px;
	border: 1px solid rgba(127, 127, 127, .25);
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 6px;
	color: inherit;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}

/* Zonder logo is de naam het beeld: midden in de tegel. */
.prapp-partners__kaart.prapp-partners__kaart--zonder-logo {
	justify-content: center;
}

/* Klikbare tegel: rand in de secundaire kleur van de vereniging (lijnen en
   accenten, CLAUDE.md), anders in de tekstkleur. 2px zonder te verspringen. */
a.prapp-partners__kaart.prapp-partners__kaart:hover,
a.prapp-partners__kaart.prapp-partners__kaart:focus-visible {
	border-color: var(--prapp-knop, currentColor);
	box-shadow: 0 0 0 1px var(--prapp-knop, currentColor);
}

/* Een licht vlak achter elk logo: logo's zijn vrijwel altijd voor een lichte
   achtergrond gemaakt. Op een witte site valt het weg, op een donker thema
   blijft een donker logo zo zichtbaar. Bewust geen huisstijlkleur. Het vlak is
   een eigen element: een filter op de img zou het mee zwart maken. */
.prapp-partners__logovlak {
	display: block;
	width: 100%;
	max-width: 160px;
	height: 84px;
	padding: 6px;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
}

.prapp-partners__lijst--groot .prapp-partners__logovlak {
	max-width: 240px;
	height: 120px;
}

.prapp-partners__logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Een licht logo op een doorzichtige achtergrond (PRAPP_Partner::is_licht(),
   of de keuze "Donker maken" bij de sponsor) wordt zwart. Alleen de img, niet
   het vlak eromheen. */
.prapp-partners__logo--donker {
	filter: brightness(0);
}

/* Onder een logo: naam naar de onderkant, zodat logo's bovenaan op één lijn
   staan, ook als de ene naam twee regels heeft en de andere één. */
.prapp-partners__naam {
	font-size: .875rem;
	line-height: 1.3;
	/* Lange namen afbreken op lettergrepen (lang="nl" van het thema), en pas
	   als dat niet kan midden in een woord. Op 320px brak "Installatiebedrijf"
	   anders als "Installatiebedr / ijf". */
	hyphens: auto;
	overflow-wrap: break-word;
}

.prapp-partners__logovlak + .prapp-partners__naam {
	margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
	.prapp-partners__kaart.prapp-partners__kaart {
		transition: none;
	}
}