/*
 * Visible keyboard focus indicator (WCAG 2.4.7 Focus Visible, 2.4.11 Focus Appearance).
 *
 * ROOT CAUSE, measured on staging rather than assumed. The @tailwindcss/forms
 * base layer sets, on every form control:
 *
 *     outline: transparent solid 2px;  outline-offset: 2px;
 *
 * and expects a --tw-ring-* box-shadow to supply the actual visible ring. That
 * ring is never applied here, so the computed style on focus is
 * `outline: rgba(0, 0, 0, 0) solid 2px` with `box-shadow: none`. The result is
 * that NOTHING visible changes when these controls receive keyboard focus:
 * confirmed on select.form-select.sorter-options, #email and #pass.
 *
 * WHY THIS FILE AND NOT A TAILWIND SOURCE EDIT: the deploy pipeline does not
 * build Tailwind ("Phase 10: No legacy theme builds required, Hyva themes use
 * pre-compiled Tailwind CSS"), so editing web/tailwind/** would change nothing
 * that ships. This is hand-written CSS loaded alongside the pre-compiled sheet,
 * which also means a future Tailwind rebuild cannot silently drop it.
 *
 * WHY THE `html` PREFIX: Tailwind's rule is `[type="email"]:focus`, specificity
 * (0,2,0). A bare `input:focus-visible` is (0,1,1) and would LOSE regardless of
 * load order, so the indicator would still be invisible. `html [type=...]` is
 * (0,2,1) and wins deterministically without needing !important or relying on
 * which stylesheet happens to load last.
 *
 * WHY :focus-visible RATHER THAN :focus: it shows the ring for keyboard and
 * other non-pointer interaction, which is what 2.4.7 is about, while leaving
 * mouse clicks visually unchanged. Every browser Magento 2.4.7 supports
 * implements it.
 */

html [type="text"]:focus-visible,
html [type="email"]:focus-visible,
html [type="password"]:focus-visible,
html [type="search"]:focus-visible,
html [type="tel"]:focus-visible,
html [type="url"]:focus-visible,
html [type="number"]:focus-visible,
html [type="date"]:focus-visible,
html [type="datetime-local"]:focus-visible,
html [type="month"]:focus-visible,
html [type="time"]:focus-visible,
html [type="week"]:focus-visible,
html [multiple]:focus-visible,
html input:where(:not([type])):focus-visible,
html select:focus-visible,
html textarea:focus-visible,
html .form-input:focus-visible,
html .form-select:focus-visible,
html .form-multiselect:focus-visible,
html .form-textarea:focus-visible {
    /* #1d4ed8 is the theme's own primary (the .btn-primary background), so the
       indicator is brand consistent. Against the white field backgrounds these
       controls sit on it measures ~8.6:1, comfortably past the 3:1 that 2.4.11
       requires of a focus indicator. */
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

/*
 * Pagination and other bare action links. Anchors do not go through the
 * Tailwind forms reset, but a.action.next was reported with no visible focus
 * change either, so it needs its own indicator. Scoped to .action rather than
 * all anchors deliberately: a blanket a:focus-visible rule would repaint focus
 * across every link on the site, which is a far larger visual change than this
 * fix is scoped to make.
 */
html a.action:focus-visible,
html .pages a:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
    border-radius: 2px;
}