/*
 * en2x Accessibility – styles (foundation package).
 *
 * Scope: visible keyboard focus + reduced-motion. The skip link itself reuses
 * Salient's existing .nectar-skip-to-content element (styled by the theme,
 * relabelled to German in PHP, retargeted/focus-fixed in JS); we only ensure
 * its focus ring is consistent with the rest of the site.
 *
 * Colours fall back to literals so the file is self-sufficient even if
 * en2x-custom's global.css (which defines the :root tokens) is not loaded.
 */

/* ---------------------------------------------------------------------------
 * Visible keyboard focus
 *
 * Only on :focus-visible, so mouse/touch interaction stays ring-free while
 * keyboard navigation always shows a clear indicator. :where() keeps the
 * selector at zero specificity; !important guarantees the ring survives theme
 * resets such as `outline: none`. The 2px offset places the ring just outside
 * the element (on the page background), so it stays visible even on dark
 * (primary-coloured) buttons and filter pills.
 * ------------------------------------------------------------------------- */
/* Two-tone ring: a blue outline plus a white inner halo. On light backgrounds
 * the blue outline shows; on brand-coloured (blue) backgrounds the blue outline
 * blends in but the white halo stays visible. So the indicator never disappears,
 * regardless of the surface or element colour. */
:where( a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="link"] ):focus-visible {
	outline: 3px solid var( --en2x-color-primary, #221182 ) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
}

/* The main-content container is focused programmatically by the skip link
 * (tabindex="-1"). It should not draw a box around the whole content area. */
[role="main"]:focus,
[role="main"]:focus-visible,
#en2x-content:focus,
#en2x-content:focus-visible,
#ajax-content-wrap:focus,
#ajax-content-wrap:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 *
 * Respect the OS-level "reduce motion" preference site-wide: near-instant
 * animations/transitions and no smooth scrolling. Complements modules that
 * already honour this (e.g. the animated circles).
 * ------------------------------------------------------------------------- */
@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;
	}

	html {
		scroll-behavior: auto !important;
	}
}