/**
 * Focus indicator - WCAG 1.4.11 (Non-text Contrast), 2.4.7 (Focus Visible).
 *
 * The theme drew a single gold (#FEC458) ring. Gold reads well on the dark
 * sections but only manages 1.58:1 on white and 1.42:1 on the #F1F2F6 panels,
 * so the indicator disappeared on most of the page.
 *
 * No single colour can fix this: 3:1 against white needs a dark colour, 3:1
 * against the purple sections needs a light one, and the two ranges do not
 * overlap. So the ring is drawn in two colours - a near-black band hugging the
 * control with the brand gold just outside it. Whatever the control sits on,
 * one of the two bands clears 3:1, and they contrast 12.6:1 with each other:
 *
 *            white   #F1F2F6   #030525   #4F2DA7   #2B1C50
 *   gold      1.58     1.42     12.59      5.85      9.57
 *   near-black 19.96   17.84      1.00      2.15      1.32
 *
 * Both bands are 3px, over the 2px minimum thickness.
 *
 * This file lives outside assets/scss/ deliberately: that directory compiles to
 * assets/css/style.css, and these overrides have to survive a rebuild. It is
 * enqueued after `main`, so re-stating the theme's own selectors at matching
 * specificity is enough to win - no !important needed.
 */

:root {
	--focus-ring-outer: #fec458;
	--focus-ring-inner: #030525;
}

/* --------------------------------------------------------------------------
 * Baseline: every focusable control the theme does not style itself. Inputs
 * are included because the theme sets `outline: 0` on them, leaving no focus
 * indicator at all.
 * ----------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--focus-ring-outer);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--focus-ring-inner);
}

/* --------------------------------------------------------------------------
 * The theme's own focus rules, re-stated so this file wins on source order.
 * Selectors are copied verbatim from assets/css/style.css to keep specificity
 * matched; `button.button-white.anim-button` gains the `:focus` the original
 * is missing.
 * ----------------------------------------------------------------------- */

.header-main a:focus,
.header-main button:focus,
.header-main a:focus-visible,
.header-main button:focus-visible,
.menu-main a:focus,
.menu-main button:focus,
.menu-main a:focus-visible,
.menu-main button:focus-visible,
.footer-main a:focus,
.footer-main button:focus,
.footer-main a:focus-visible,
.footer-main button:focus-visible,
.footer-img a:focus,
.footer-img a:focus-visible,
.button.anim-button:focus,
button.button-white.anim-button:focus,
.testimonial-controls button:focus,
.award-controls button:focus,
.award-slider-main:focus,
.award-slider-main:focus-visible,
.testimonial-slider:focus,
.testimonial-slider:focus-visible,
.motion-toggle:focus,
.motion-toggle:focus-visible {
	outline: 3px solid var(--focus-ring-outer);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--focus-ring-inner);
}

/* --------------------------------------------------------------------------
 * The theme hides the ring for pointer clicks via :focus:not(:focus-visible).
 * Those rules only clear `outline`, so the inner band needs clearing too.
 * ----------------------------------------------------------------------- */

.header-main a:focus:not(:focus-visible),
.header-main button:focus:not(:focus-visible),
.menu-main a:focus:not(:focus-visible),
.menu-main button:focus:not(:focus-visible),
.footer-main a:focus:not(:focus-visible),
.footer-main button:focus:not(:focus-visible),
.footer-img a:focus:not(:focus-visible) {
	box-shadow: none;
}

/* --------------------------------------------------------------------------
 * Windows High Contrast Mode drops box-shadow, so hand the outline over to the
 * system highlight colour and keep a single, guaranteed-visible ring.
 * ----------------------------------------------------------------------- */

@media (forced-colors: active) {
	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	summary:focus-visible,
	[tabindex]:focus-visible {
		outline-color: Highlight;
	}
}

/* --------------------------------------------------------------------------
 * The "Learn more" buttons in the service cards are opacity:0 until the card
 * is hovered, so a keyboard user got a focus ring on an invisible control -
 * opacity applies to the outline too. Mirror the hover reveal for focus.
 * ----------------------------------------------------------------------- */

.single-service-block:focus-within > div p {
	opacity: 0;
}

.single-service-block:focus-within > div .button {
	opacity: 1;
}