/* =============================================================================
   Wijkkrant Core — accessibility (WCAG 2.2 AA), independent of the theme.

   Only rules that apply to every theme. The colour corrections for the
   redactie.net theme (contrast of the newspaper colours, the footer blocks)
   have lived in that theme's style.css since Wijkkrant Core 1.0.0.

   Focus ring colour: set --wk-a11y-focus in the theme (defaults to the text colour).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   2. Links recognisable without colour (WCAG 1.4.1)
   -------------------------------------------------------------------------- */

.entry-content a:not( .wp-element-button ):not( .wp-block-button__link ),
.wk-voetblok p a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entry-content a:not( .wp-element-button ):hover {
	text-decoration-thickness: 2px;
}

/* -----------------------------------------------------------------------------
   3. Visible focus (WCAG 2.4.7, 2.4.11 not obscured, 2.4.13 AAA style)
   Currently only an underline or a light background; that is too weak.
   -------------------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --wk-a11y-focus, currentColor );
	outline-offset: 2px;
	border-radius: 2px;
}

/* The sticky header must not obscure the focus (2.4.11). */
html {
	scroll-padding-top: 5rem;
}

/* -----------------------------------------------------------------------------
   4. Target size (WCAG 2.5.8) — the search button was partly obscured (5.8 × 29.8 px)
   -------------------------------------------------------------------------- */

.wk-kopknop {
	position: relative;
	z-index: 1;
	/* 44 px including the padding: with content-box the frame grew to 66 × 58 px and the icon sat on the left. */
	box-sizing: border-box;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.wk-rail__knop {
	min-width: 32px;
	min-height: 32px;
}

/* -----------------------------------------------------------------------------
   5. Motion (WCAG 2.3.3) — the rail currently always scrolls "smooth"
   -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	html,
	.wk-rail__spoor {
		scroll-behavior: auto !important;
	}
}

/* -----------------------------------------------------------------------------
   6. Windows High Contrast / forced colours
   -------------------------------------------------------------------------- */

@media ( forced-colors: active ) {
	.wk-kopknop,
	.wk-rail__knop,
	.wk-rubrieknav a {
		border: 1px solid ButtonText;
	}
	.wk-hamburger i {
		background: ButtonText;
	}
}