/**
 * Toegankelijkheid
 *
 * Alleen wat er nodig is voor de patronen uit deze skill. Neem dit over in de
 * scss van het child-thema als de site een build heeft; dan hoort het bij de
 * rest van de stijlen in plaats van in een los bestand.
 */

/* Tekst die alleen een schermlezer hoort. Niet display:none gebruiken,
   want dan verdwijnt hij ook voor de schermlezer. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Wel zichtbaar zodra hij focus krijgt, anders kan een toetsenbordgebruiker
   niet zien waar hij is. */
.screen-reader-text:focus,
.b210-skip-link:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

.b210-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: #fff;
	color: #000;
	text-decoration: underline;
}

.b210-skip-link:focus {
	left: 0;
}

/* Een zichtbare focus. Veel thema's zetten outline:none; dat is de meest
   voorkomende reden dat een site met het toetsenbord onbruikbaar is. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* De klikbare kaart: de link ligt over het hele blok. */
.one-item {
	position: relative;
}

.one-item > a.permalink {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* De zichtbare linktekst in zo'n kaart is geen aparte link meer, maar hij
   moet er wel uitzien als voorheen. */
.one-item .block.link span {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Een div die als direct kind in een <ul> stond, is gewikkeld in
   <li class="b210-list-item"> zodat de lijststructuur geldig is. Die li is een
   constructie en geen menu-item, dus neutraliseer wat het thema aan li-regels
   meegeeft: in minimal210 krijgt elke li in het mobiele menu display: flex en
   margin-top: 10px, waardoor het logoblok 10px opschoof.

   !important omdat themaregels hier via een id op de ul komen
   (#min_responsive_menu li) en dus een hogere specificiteit hebben dan een
   losse klasse. */
li.b210-list-item {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}