/* ═══════════════════════════════════════════════════════════════════
   Voya Indis Co. — voya-a11y.css
   Global accessibility helpers. Include on every page (after voya-catalog.css).
   ═══════════════════════════════════════════════════════════════════ */

/* Visible keyboard-focus ring everywhere. Uses :focus-visible so mouse
   clicks don't show a ring, only keyboard/AT navigation does. */
:focus-visible {
  outline: 2px solid #b8935a;
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.voya-pg-btn:focus-visible,
.voya-pg-first:focus-visible,
.filter-btn:focus-visible,
.gallery-item:focus-visible,
.auto-gallery-grid > div:focus-visible,
.category-card:focus-visible,
.explore-card:focus-visible,
.product-card:focus-visible,
.product-card-full:focus-visible {
  outline: 2px solid #b8935a;
  outline-offset: 3px;
}

/* Form fields already remove the default outline on :focus for the
   border-color transition — give them back a visible ring. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
  outline: 2px solid #b8935a;
  outline-offset: 1px;
}

/* Nav / footer sit on dark backgrounds where the default browser blue
   ring is invisible — force the gold ring there specifically too. */
nav a:focus-visible,
nav button:focus-visible,
.vf3 a:focus-visible,
.vf3 button:focus-visible {
  outline: 2px solid #b8935a;
  outline-offset: 2px;
}