/* Kleine aanvullingen die alleen in WordPress nodig zijn.
   Dit bestand wordt NIET door het gereedschap overschreven — de rest van
   site.css wel. Zet hier dus alleen op wat geen tegenhanger in het ontwerp
   heeft: lijstjes die in Astro anders waren opgebouwd, en meldingen. */

/* Contactpersonen bij een activiteit, en documenten bij een informatiepagina. */
.contact-lijst,
.download-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s3);
}

.contact-lijst li {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	align-items: baseline;
}

.contact-lijst strong { color: var(--tekst); }
.contact-lijst a,
.download-lijst a { color: var(--salie-tekst); }

/* Alleen zichtbaar voor wie mag beheren, als er nog geen menu is ingesteld. */
.menu-hint {
	margin: var(--s2) 0 0;
	font-size: .8rem;
	color: var(--amber);
}

/* De blokkeneditor van WordPress zet uitgelijnde blokken in de lopende tekst. */
.proza .alignwide { max-width: var(--breed); }
.proza .alignfull { max-width: none; }
.proza figure { margin: var(--s5) 0; }
.proza figcaption {
	font-size: .82rem;
	color: var(--sub);
	margin-top: var(--s2);
}

/* De balk bovenaan voor een tussentijds bericht. Amber, want dat vraagt
   aandacht zonder te alarmeren — rood zou bij een uitvaartmelding verkeerd
   staan. De balk staat boven de kopbalk, dus vóór het menu. */
.mededeling {
	background: var(--amber-zacht);
	border-bottom: 1px solid var(--amber);
	color: var(--tekst);
}

.mededeling-inner {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3) 0;
	flex-wrap: wrap;
}

.mededeling-teken {
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--amber);
	color: var(--lei);
	font-weight: 700;
	font-size: .82rem;
	display: grid;
	place-items: center;
}

.mededeling-tekst {
	margin: 0;
	flex: 1 1 16rem;
	font-size: .93rem;
	line-height: 1.5;
}

.mededeling-link {
	flex: none;
	font-size: .88rem;
	font-weight: 600;
	color: var(--amber-tekst);
	white-space: nowrap;
}