/* De kop boven een nieuwsbericht, 13 september 2026.

   Variant A uit de drie voorstellen aan Jan: de foto over de volle breedte tegen de
   menubalk aan, en linksonder in de foto de rubriek, de datum en de titel. Dezelfde
   stijl als de kop van het eerste, het tweede en het bestuur, zodat de hele site
   hetzelfde oogt.

   In het bericht staat alleen dit:
     cover met de klassen alignfull + vlk-berichtkop
       groep .vlk-bk
         groep .vlk-bkrub   met post-terms en post-date
         post-title
*/

/* Jan, 13 september 2026: "dat witte regeltje helemaal bovenin dat moet eruit."

   Het thema zet op een berichtpagina ruimte boven de inhoud ter hoogte van de
   menubalk (body.single-post section.wrapper). De balk zelf is lager dan die ruimte,
   dus er bleef een witte streep tussen de rode balk en de foto staan. Op de
   teampagina's is die ruimte er niet en loopt de kopfoto gewoon onder de balk door.
   Dat doen de berichten nu ook. De kop heeft zelf 110 px ruimte van boven, dus de
   rubriek en de titel blijven onder de balk. */
body.single-post section.wrapper:has( .vlk-berichtkop ) {
	padding-top: 0 !important;
}

/* het thema zet margin-bottom:0 op elke cover, vandaar de nadruk */
.vlk-berichtkop {
	margin-bottom: 44px !important;
}

.vlk-berichtkop .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1200px;
}

/* het thema centreert de inhoud van een kopfoto; hier hoort alles links */
.vlk-berichtkop .vlk-bk {
	position: relative;
	z-index: 3;
	display: block;
	text-align: left;
	width: 100%;
}

/* de gele regel boven de titel: rubriek en datum naast elkaar */
.vlk-berichtkop .vlk-bkrub {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	margin: 0 0 12px;
}

.vlk-berichtkop .vlk-bkrub > * {
	margin: 0;
	font-family: gobold, sans-serif;
	font-size: clamp( 11px, 1.1vw, 13px );
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #f4e608;
	line-height: 1.2;
}

/* de rubriek is elders op de site een geel blokje met een rand eromheen; in de
   kopfoto hoort het gewoon gele tekst te zijn, anders valt het weg op zijn eigen
   achtergrond */
.vlk-berichtkop .vlk-bkrub a,
.vlk-berichtkop .vlk-bkrub .wp-block-post-terms a {
	background: none !important;
	background-color: transparent !important;
	color: #f4e608 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-decoration: none;
}

.vlk-berichtkop .vlk-bkrub a:hover {
	text-decoration: underline;
}

/* het puntje tussen de rubriek en de datum */
.vlk-berichtkop .vlk-bkrub .wp-block-post-date::before {
	content: "\00B7";
	margin-right: 10px;
	color: rgba( 244, 230, 8, 0.6 );
}

.vlk-berichtkop .vlk-bk .wp-block-post-title {
	font-family: gobold, sans-serif;
	font-size: clamp( 27px, 4.3vw, 58px );
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	max-width: 15em;
	text-shadow: 0 2px 22px rgba( 0, 0, 0, 0.55 );
}

.vlk-berichtkop .vlk-bk .wp-block-post-title a {
	color: #fff;
	text-decoration: none;
}

@media ( max-width: 700px ) {
	.vlk-berichtkop {
		margin-bottom: 26px;
	}
	.vlk-berichtkop .vlk-bk .wp-block-post-title {
		max-width: none;
	}
}