/*
 * Focus visibility (WCAG 2.4.7).
 *
 * Astra offers a customizer option for this, but hard-wires
 * 'outline-width' => 'thin' (1px) and additionally sets
 * input { outline: none }, so even with the option enabled the indicator
 * stays too thin and disappears on form fields entirely.
 *
 * The mechanism lives here with neutral defaults; a project overrides only
 * the tokens. The box-shadow is a contrast band that fills the gap created by
 * outline-offset: on a light surface it is invisible and the ring contrasts,
 * on a dark surface the band is visible and the ring contrasts against the
 * band. Either way >= 3:1 without having to know the surface colour, which
 * is what makes this work inside cookie banners and third-party widgets.
 */

:root {
	--ls-focus-style: solid;
	--ls-focus-width: 3px;
	--ls-focus-ring: currentcolor;
	--ls-focus-backdrop: transparent;
}

/*
 * Element selectors on purpose: Astra generates rules like `a:focus-visible`
 * (0-1-1) from the customizer, and a bare `:focus-visible` (0-1-0) would lose
 * against them. This rule ties on specificity and wins on order, because the
 * plugin is enqueued after `astra-theme-css` and its dynamic CSS. No
 * !important - that would take the decision away from the projects using this
 * plugin.
 *
 * Note when verifying by hand or in a headless browser: Astra puts a 0.2s
 * transition on these links, so `getComputedStyle` right after focusing
 * reports the *start* of the animation (currentColor, offset 0, transparent
 * shadow) and looks exactly like a broken rule. Wait for the transition to
 * finish before measuring.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
	outline: var(--ls-focus-width) var(--ls-focus-style) var(--ls-focus-ring);
	outline-offset: var(--ls-focus-width);
	box-shadow: 0 0 0 var(--ls-focus-width) var(--ls-focus-backdrop);
}

/*
 * Astra sets `input { outline: none }` unconditionally, which also strips the
 * indicator from checkboxes and radios where the label is the visible target.
 */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: var(--ls-focus-width) var(--ls-focus-style) var(--ls-focus-ring);
	outline-offset: var(--ls-focus-width);
}

/* Astra's menu links and submenu toggles. */
.main-header-menu .menu-link:focus-visible,
.main-header-menu .ast-menu-toggle:focus-visible,
.ast-mobile-popup-drawer .menu-link:focus-visible,
.ast-mobile-popup-drawer .ast-menu-toggle:focus-visible,
.ast-mobile-popup-drawer .menu-toggle-close:focus-visible,
.ast-button-wrap .menu-toggle:focus-visible {
	outline: var(--ls-focus-width) var(--ls-focus-style) var(--ls-focus-ring);
	outline-offset: var(--ls-focus-width);
	box-shadow: 0 0 0 var(--ls-focus-width) var(--ls-focus-backdrop);
}

/*
 * The skip link is the very first thing a keyboard user reaches; it must not
 * inherit an offset that pushes the ring off screen.
 */
.skip-link:focus-visible {
	outline-offset: 0;
}

/*
 * Astra's reset zeroes the outline on every button shape at once:
 * `.ast-button:focus, .button:focus, button:focus, input[type=submit]:focus, …
 * { border-color: …; outline: 0 }` in main.min.css. `.button:focus` is 0-2-0
 * and beats the base `button:focus-visible` rule (0-1-1), so buttons carrying
 * one of those classes were left with `outline-style: none` while
 * :focus-visible matched - measured on "add to cart" and the wishlist button.
 */
.ast-button:focus-visible,
.button:focus-visible,
.wp-block-button__link:focus-visible,
.ast-custom-button-link:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
	outline: var(--ls-focus-width) var(--ls-focus-style) var(--ls-focus-ring);
}

/*
 * The scroll-to-top control is a <div tabindex="0">, and Astra gives it
 * `#ast-scroll-top { outline: inherit }` - an ID selector (1-0-0) that no
 * element- or class-level rule can reach, so it had no ring at all.
 *
 * Only the ring itself is set here. The offset is left to the base rule so a
 * project can place it without having to outrank an ID selector.
 */
#ast-scroll-top:focus-visible {
	outline: var(--ls-focus-width) var(--ls-focus-style) var(--ls-focus-ring);
}