/*
 * Accessibility baseline — the site-wide rules the F1 chrome audit (F13 US-001)
 * found were only being set per component.
 *
 * Nothing here restyles a component. It fills the gaps that applied to every
 * page template at once:
 *
 *   1. A focus ring on EVERY interactive element, not only the header links and
 *      the form controls that already had one. The ring is 3px of copper with an
 *      offset, so it is visible on both the light and the dark surfaces.
 *   2. The skip link's target. <main id="primary"> carries tabindex="-1" so the
 *      skip link really moves focus in every browser; the ring is suppressed on
 *      that programmatic focus only, which is why :focus-visible is used for
 *      everything else.
 *   3. Touch targets: every control this theme paints is at least 44x44 CSS
 *      px, and body-copy links get that floor through their padding on a
 *      coarse pointer (F13 US-002), together with the focus marker for the
 *      form result regions the same story made focusable.
 *   4. A prefers-reduced-motion safety net. design-tokens.css already zeroes the
 *      --duration-* tokens, but a keyframe animation or a smooth scroll written
 *      without them would still run, so motion is cut off here as well.
 *
 * Loaded on every page from inc/accessibility.php. Every value is a token, so a
 * [data-theme="dark"] remap recolours the rings with the rest of the site.
 */

/* ------------------------------------------------------------ focus ring --- */

a:focus-visible,
button:focus-visible,
[role='button']:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
	outline: 3px solid var(--color-primary-600);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* On the dark footer and the dark bands the copper ring is too close to the
 * background, so the amber token takes over there. */
.hcr-site-footer a:focus-visible,
.hcr-site-footer button:focus-visible,
.hcr-site-footer input:focus-visible,
.hcr-section--dark a:focus-visible,
.hcr-section--dark button:focus-visible {
	outline-color: var(--color-accent-300);
}

/* --------------------------------------------------------- skip target --- */

/*
 * The skip link sends focus into the main landmark. It is focusable only
 * programmatically (tabindex="-1"), so it must not draw a ring of its own —
 * the heading it lands on is the confirmation.
 */
#primary:focus,
#primary:focus-visible {
	outline: none;
}

/* ------------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------- touch targets --- */

/*
 * F13 US-002. A control has to be big enough to hit with a thumb: WCAG 2.2
 * Target Size (Minimum) asks for 24x24 CSS px, and the 44x44 here is the
 * stricter figure the platform guidelines use. The rules are scoped to the
 * controls this theme paints and use min-* plus flex centring, so a button
 * never changes shape — it only ever grows to the floor.
 */

.hcr-btn,
button:not(.hcr-social__link),
input[type='submit'],
.hcr-nav-toggle,
.hcr-mini-cart,
.hcr-social__link,
.hcr-chip,
.hcr-topic-chip,
.hcr-filters__clear {
	min-height: 44px;
	min-width: 44px;
}

/* Icon-only controls centre their glyph inside that box. */
.hcr-social__link,
.hcr-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * A link sitting on its own line in body copy (contact details, footer lists,
 * the listed form problems) gets the same floor through its tappable area
 * rather than its box, so the text keeps its own line height.
 */
@media (pointer: coarse) {
	/* Form controls are tapped as often as buttons are. */
	input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
	select,
	textarea {
		min-height: 44px;
	}

	.hcr-contact__link,
	.hcr-site-footer__links a,
	.hcr-contact-form__problems a,
	.hcr-filters__label {
		display: inline-block;
		min-height: 44px;
		padding-block: var(--space-2);
	}
}

/* ------------------------------------------------- announced form result --- */

/*
 * The three shared forms focus their result message after the admin-post
 * redirect (assets/js/a11y-status-focus.js). The region is focusable only
 * programmatically, so :focus-visible never fires on it — it gets its own
 * marker here, otherwise a sighted keyboard user sees focus vanish.
 */
.hcr-newsletter__status:focus,
.hcr-enquiry__status:focus,
.hcr-contact-form__notice:focus {
	outline: 3px solid var(--color-primary-600);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.hcr-site-footer .hcr-newsletter__status:focus {
	outline-color: var(--color-accent-300);
}