﻿/* ==========================================================================
   Hope Accessibility — Focus Ring
   Consistent high-visibility focus ring for ALL interactive elements.
   Loaded AFTER UIkit — overrides UIkit's outline:0 resets.
   ========================================================================== */

/* -- Universal: show on keyboard navigation only ------------------------- */
/* !important needed to beat UIkit's .uk-button:focus{outline:0} etc.      */
*:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* -- Suppress ring on mouse clicks --------------------------------------- */
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

html *:focus-visible {
  outline: 2px solid #005fcc !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

html *:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Radio buttons: blue outline; checkboxes use browser default ring */
input[type="radio"]:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}
input[type="radio"]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
input[type="checkbox"]:focus-visible {
    outline: 2px auto !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
input[type="checkbox"]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* vue-form-wizard sets .wizard-btn:focus { outline:0 !important } — override it */
.vue-form-wizard .wizard-btn:focus-visible {
    outline: 2px solid #005fcc !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}
.vue-form-wizard .wizard-btn:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}