/**
 * The universal focus ring.
 *
 * From the Figma handoff "Lösung Focusstates Universal": focus is shown
 * site-wide as a magenta ring (#FF00FF) held 2px off the element — "egal auf
 * welchem Hintergrund etc.". That is precisely the point: the rings used to be
 * brandbraun, which is all but invisible on the dark red :active button and in
 * the blue header. Magenta appears nowhere in the palette and therefore keeps
 * the same contrast on every background.
 *
 * The colour lives in theme.json under settings.custom.focus — not in the
 * palette, because it is a state, not a selectable design colour.
 *
 * ⚠️ The zero specificity of :where() is DELIBERATE, please do not "fix" it:
 *
 *   1. Elements that draw their own ring on purpose set `outline: none` and
 *      put up their own geometry instead — the calendar entry moves the ring
 *      around the whole card via :has(), WS Form around the field row. Because
 *      this rule wins nothing, those opt-outs keep winning by themselves. A
 *      stronger rule (or !important) would give those elements two rings.
 *   2. Where a bespoke ring already exists, its COLOUR was pointed at the same
 *      token at the source instead. This file is only responsible for the
 *      elements that had no ring at all.
 *
 * Only :focus-visible, never :focus — a mouse click must not flash magenta.
 * .wp-element-button is unnecessary: every button is a <button> or an <a>.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width, 2px) solid var(--wp--custom--focus--ring, #f0f);
	outline-offset: var(--wp--custom--focus--offset, 2px);
}

/**
 * Reduced motion for the button's 6px hover lift.
 *
 * The lift itself stays — it carries which button is active — and simply lands
 * instantly instead of sliding (house rule, cf. calendar-entry).
 *
 * ⚠️ This deliberately does NOT live in the button's theme.json `css` string:
 * WordPress discards the @media wrapper there and keeps only its contents, so
 * the reduced-motion case would collapse into an unconditional
 * `transition: none` for everyone — and the lift would snap instead of glide.
 *
 * The selector mirrors the one theme.json emits
 * (`:root :where(.wp-block-button .wp-block-button__link)`) so it carries the
 * same specificity and reliably overrides the transition.
 */
@media (prefers-reduced-motion: reduce) {

	:root :where(.wp-block-button .wp-block-button__link) {
		transition: none;
	}
}