/*
 * Theme-aanvullingen op de gecompileerde Sass.
 *
 * Dit bestand wordt met de hand beheerd en overleeft dus een hercompilatie van
 * swgg.css. Houd het klein: alles wat hier staat is een bewuste afwijking van de
 * meegeleverde Sass, met de reden erbij.
 */

/* Filter.tsx had een <div> in een <label>; dat is ongeldige HTML. Wij gebruiken een
   <span>, die de opmaakregel van `.c-filters__item__link div` moet overnemen. */
.c-beleid-zoeken .c-columns__col--left .c-search__filters__list .c-filters__item .c-filters__item__link .c-filters__item__label {
	display: inline;
	padding-left: 5px;
}

/* Skiplink: stond in het originele theme in de markup maar nergens in de Sass. */
#skiptocontent {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em;
	background: #fff;
	color: #000;
}

#skiptocontent:focus {
	left: 0;
	top: 0;
}

/* Alleen voor schermlezers. Ontbreekt in de meegeleverde Sass, terwijl header.php de
   sitenaam naast het logo ermee verbergt en de beleidpagina hem gebruikt om het aantal
   resultaten aan te kondigen zonder het in beeld te zetten. */
.u-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Video -------------------------------------------------------------------
   .c-video__play-button is in de Sass absolute met 100% breedte en hoogte. In de
   React-versie kreeg .c-video-container zijn hoogte van de Vimeo-speler, die met
   responsive: true meteen een iframe met vaste verhouding neerzette. Wij laden dat
   iframe pas na een klik, dus de verhouding moet hier vandaan komen. Zonder dit is
   de container nul pixels hoog en zie je de poster niet.                        */
.c-video-container {
	aspect-ratio: 16 / 9;
}

.c-video__poster,
.c-video__poster .o-image,
.c-video__poster .o-image__cropped__img {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
}

.c-video__poster .o-image__cropped__img {
	background-size: cover;
	background-position: 50% 50%;
}

.c-video__play-button {
	align-items: center;
	justify-content: center;
	background: transparent;
}

.c-video__player:empty {
	display: none;
}

.c-video__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Themablokken ------------------------------------------------------------
   .o-image__cropped__img krijgt zijn hoogte uit padding-bottom: 66.66%. Het
   binnenste element is dus leeg en heeft een expliciete breedte nodig.          */
.c-theme-item__image .o-image {
	width: 100%;
}

/* Antwoorden op de gemeentepagina gaan nu door wpautop, zodat meerdere alinea's ook als
   alinea's tonen. De algemene p-regel geeft 20px ondermarge; die is binnen het omkaderde
   antwoordvak ongewenst bij de laatste alinea, anders krijgt elk vak onderaan extra
   witruimte die er voorheen niet was. */
.c-beleid-item__antwoord p:last-child {
	margin-bottom: 0;
}