/**
 * OSHIDA — accessibility primitives.
 *
 * The skip link and the screen-reader-only helper live here rather than in
 * utilities.css because `assets/asset-map.json` enqueues this path on every
 * route (shared.css), and both must be present before the first paint of the
 * header.
 *
 * Owner: work package A1.
 */

/* --------------------------------------------------------------------------
 * Screen-reader-only text. Stays in the accessibility tree, out of the render.
 * The `:not(:focus):not(:active)` guard lets a focusable element inside it
 * (a skip target, an inline "edit" link) reveal itself when tabbed to.
 * -------------------------------------------------------------------------- */

.o-visually-hidden:not(:focus):not(:active) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
 * Skip link — the first focusable element on every page, per
 * docs/ai/conventions.md. Parked off the block-start edge until focused.
 * -------------------------------------------------------------------------- */

.o-skip-link {
	position: absolute;
	z-index: var(--o-z-skip);
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: var(--o-space-2xs) var(--o-space-md);
	background-color: var(--o-gold);
	color: var(--o-text-on-gold);
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-semibold);
	border-end-end-radius: var(--o-radius-xs);
	text-decoration: none;
	translate: 0 -150%;
}

.o-skip-link:focus-visible {
	translate: 0 0;
}

@media (prefers-reduced-motion: no-preference) {
	.o-skip-link {
		transition: translate var(--o-dur-fast) var(--o-ease-out);
	}
}

/* --------------------------------------------------------------------------
 * The main landmark takes focus programmatically when the skip link is used,
 * without drawing a ring around the whole page.
 * -------------------------------------------------------------------------- */

[tabindex="-1"]:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
 * Honour forced-colors mode: let the OS palette through instead of fighting it
 * with the dark token set.
 * -------------------------------------------------------------------------- */

@media (forced-colors: active) {
	.o-skip-link {
		border: 1px solid;
	}

	:focus-visible {
		outline: 2px solid CanvasText;
	}
}