/**
 * utilities.css — single-purpose utility classes.
 *
 * Scope note: only the accessibility utilities the rendering layer depends on
 * exist so far. They are not optional polish — `.screen-reader-text` without
 * this file renders every hidden label as visible body text, and the skip link
 * sits permanently at the top of every page. The templates emit this markup, so
 * the rules ship with them.
 *
 * Visual utilities (spacing, display, alignment) belong here too and arrive
 * with the design system. Values must come from the tokens aliased in main.css
 * — never hardcode.
 */

/* ---------------------------------------------------------------------------
 * Screen reader text
 *
 * Visually hidden, still announced. Uses the clip-path technique rather than
 * display:none or visibility:hidden, both of which remove the element from the
 * accessibility tree entirely and defeat the purpose.
 *
 * white-space: nowrap prevents the collapsed 1px box from wrapping its text
 * into an infinitely tall column, which some screen readers read as blank.
 * ------------------------------------------------------------------------ */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * Anything focusable that is visually hidden must become visible on focus —
 * otherwise a keyboard user's focus disappears off-screen. This is the rule the
 * skip link depends on.
 */
.screen-reader-text:focus {
	background-color: var(--mw-color-surface);
	clip-path: none;
	color: var(--mw-color-primary-dark);
	display: block;
	font-size: var(--mw-text-sm);
	font-weight: var(--mw-weight-semibold);
	height: auto;
	left: var(--mw-space-3);
	line-height: normal;
	padding: var(--mw-space-2) var(--mw-space-3);
	text-decoration: none;
	top: var(--mw-space-3);
	width: auto;
	z-index: 100000;
}

/* ---------------------------------------------------------------------------
 * Skip link
 * ------------------------------------------------------------------------ */

.mw-skip-link:focus {
	border-radius: var(--mw-radius-sm);
	box-shadow: var(--mw-shadow-md);
	outline: 2px solid var(--mw-color-primary);
	outline-offset: 2px;
	position: fixed;
}

/* ---------------------------------------------------------------------------
 * Focus visibility
 *
 * The skip link's target carries tabindex="-1" so focus can land on it. That
 * makes it programmatically focusable, and browsers would otherwise draw a
 * focus ring around the entire main region when it receives focus.
 *
 * Scoped to .mw-main rather than a bare [tabindex="-1"]. This file is also
 * loaded as an editor stylesheet, and a global outline reset would suppress
 * focus rings on anything the block editor renders with tabindex="-1" inside
 * the canvas. Never suppress a focus indicator more broadly than the one
 * element that needs it.
 * ------------------------------------------------------------------------ */

.mw-main[tabindex="-1"]:focus {
	outline: 0;
}