/* Selr — keyboard focus indicator (2026-08-13).
 *
 * WHY: the site shipped with no focus styling of its own. Links and buttons fell
 * back to Chrome's native blue ring, and form fields had NO visible ring at all —
 * focusing a field only solidified its glass background from 35% white to #fafaf7.
 * On the pale canvas sections that fill-in is a very low-contrast cue and is easy
 * to miss, which is a WCAG 2.4.11 (Focus Appearance) risk for keyboard and
 * low-vision users. Luke's call, 2026-08-13: add the ring.
 *
 * WHAT: a 2px brand-purple ring, offset 2px, on :focus-visible only.
 *   - Buttons, links and the checkbox chips show the ring ONLY on keyboard focus.
 *     Verified by real mouse click: chip click gives focus-visible=false, outline
 *     none. Pointer users see no change on those.
 *   - Text inputs and textareas DO show the ring on click as well. That is the
 *     spec, not a bug: anything that accepts text entry always matches
 *     :focus-visible regardless of how it was focused. Verified by real click on
 *     the name field: focus-visible=true, ring drawn. It is the standard
 *     behaviour on most sites and it is the safer default, so it is kept.
 *   - Purple #6736E2 on canvas #F7F5EF measures 6.01:1, well past the 3:1 that
 *     WCAG requires of a non-text indicator.
 *   - Fields KEEP their existing background fill-in and gain the ring on top.
 *   - On purple and dark fills the purple ring would vanish, so it flips to the
 *     off-white #FFFFFA there.
 *
 * Pure CSS, no DOM and no hydration impact — same approach as selr-mobile-focus.css.
 */

:root {
  --selr-focus: #6736E2;
  --selr-focus-invert: #FFFFFA;
}

/* The ring. Native outline follows border-radius in every browser we target,
   so pill and card shapes are traced correctly without extra work. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 2px solid var(--selr-focus);
  outline-offset: 2px;
}

/* The contact form wraps its real input in a .field shell that carries the
   visible border and radius, so the ring belongs on the shell, not the raw
   input sitting inside it. */
.selr-contact-form .field:has(:focus-visible),
.selr-contact-form .choice:has(:focus-visible),
.abnw-item:focus-visible {
  outline: 2px solid var(--selr-focus);
  outline-offset: 2px;
}

/* Once the shell shows the ring, drop the inner input's own so they don't stack. */
.selr-contact-form .field:has(:focus-visible) input:focus-visible,
.selr-contact-form .field:has(:focus-visible) textarea:focus-visible,
.selr-contact-form .field:has(:focus-visible) select:focus-visible {
  outline: none;
}

/* Purple and dark surfaces: a purple ring on purple is invisible. */
.selr-band-purple :focus-visible,
[style*="rgb(103, 54, 226)"] :focus-visible,
[style*="background-color: rgb(36, 36, 36)"] :focus-visible {
  outline-color: var(--selr-focus-invert);
}

/* The nav CTA is #292929 and the footer sits on purple — both need the light ring. */
a[data-framer-name="Book Call"]:focus-visible,
a[data-framer-name="Book Call"] :focus-visible {
  outline-color: var(--selr-focus-invert);
}

/* Respect the site's existing reduced-motion contract: the ring is static and
   carries no transition, so there is nothing to disable. Stated for the next reader. */