/* Jobistim Accessibility - Layer 1 non-invasive fixes */

/* ============================================================
   SKIP LINK
   ============================================================ */
.jba-skip-link{
position:absolute; right:8px; top:-60px; z-index:100000;
background:#000; color:#fff; padding:10px 18px; border-radius:0 0 6px 6px;
font:600 16px/1.4 system-ui,Arial,sans-serif; text-decoration:none;
transition:top .15s ease;
}
.jba-skip-link:focus{ top:0; outline:3px solid #ffbf00; outline-offset:2px; }

/* ============================================================
   FOCUS INDICATOR
   Base layer: zero-specificity so authors can still override
   intentionally, but covers every interactive element type
   including MY toolbar (.jba-*) and Supabase dropdowns (.sjs-*).
   ============================================================ */
:where(a,button,input,select,textarea,summary,[tabindex],
[role="button"],[role="link"],[role="tab"],[role="option"],
[role="menuitem"],[role="menuitemcheckbox"],[role="switch"],
[role="checkbox"],[role="radio"],[role="slider"],[role="combobox"],
[aria-haspopup="listbox"],
.jba-toolbar-toggle,.jba-panel button,.jba-panel [role="button"],
.sjs-custom-select-wrap button,.sjs-custom-select-wrap [role="option"]
):focus-visible{
outline:3px solid #1769ff !important;
outline-offset:2px !important;
border-radius:2px;
}

/* ============================================================
   REINFORCEMENT LAYER (high specificity)
   Wins against Elementor / theme resets that set outline:none
   on these specific selectors. Same visual result.
   ============================================================ */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [tabindex]:focus-visible,
html body .elementor-field-textual:focus-visible,
html body .elementor-field-group .elementor-field:focus-visible,
html body .elementor-search-form__input:focus-visible,
html body .sjs-custom-select-wrap button:focus-visible,
html body .sjs-custom-select-wrap [role="option"]:focus-visible,
html body .jba-toolbar-toggle:focus-visible,
html body .jba-panel button:focus-visible{
outline:3px solid #1769ff !important;
outline-offset:2px !important;
/* Double-ring halo: keeps the indicator visible no matter the
   background colour behind the element. */
box-shadow:0 0 0 1px #fff, 0 0 0 5px rgba(0,0,0,.55) !important;
border-radius:2px !important;
}

/* ============================================================
   HIGH-CONTRAST / DARK / INVERTED FOCUS VARIANTS
   When the toolbar puts the page into a dark or high-contrast
   mode, a blue outline can be swallowed. These body classes
   (set by the toolbar) switch the outline to a high-contrast
   amber + white/black double ring so focus stays visible.
   ============================================================ */
@media (prefers-color-scheme: dark){
:where(a,button,input,select,textarea,[tabindex],
[role="option"],[aria-haspopup="listbox"]):focus-visible{
outline-color:#ffbf00 !important;
}
}

html.jba-dark *:focus-visible,
html.jba-contrast *:focus-visible,
html.jba-invert *:focus-visible,
body.jba-dark *:focus-visible,
body.jba-contrast *:focus-visible,
body.jba-invert *:focus-visible{
outline:3px solid #ffbf00 !important;
outline-offset:2px !important;
box-shadow:0 0 0 1px #000, 0 0 0 5px #fff !important;
}

/* Forced-colors (Windows High Contrast) safety net */
@media (forced-colors: active){
*:focus-visible{
outline:3px solid Highlight !important;
outline-offset:2px !important;
}
}

/* ============================================================
   SR-ONLY UTILITY
   ============================================================ */
.jba-sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   TARGET SIZE (WCAG 2.2 AA, opt-in via .jba-fix-targets)
   ============================================================ */
.jba-fix-targets a[role="button"],
.jba-fix-targets button,
.jba-fix-targets [role="tab"]{ min-width:24px; min-height:24px; }


/* ============================================================
   SUPABASE DROPDOWN - KEYBOARD ACTIVE OPTION (Stage B)
   Visible highlight for the keyboard-focused option, so a
   keyboard user SEES the current option (not only SR via
   aria-activedescendant). Mouse hover is left untouched.
   ============================================================ */
.sjs-custom-select-option.jba-sjs-active{
outline:2px solid #1769ff !important;
outline-offset:-2px !important;
background:#e8f0ff !important;
color:#0b0b0b !important;
font-weight:600 !important;
}
/* High-contrast / dark variants so the highlight never vanishes */
html.jba-dark .sjs-custom-select-option.jba-sjs-active,
html.jba-contrast .sjs-custom-select-option.jba-sjs-active,
html.jba-invert .sjs-custom-select-option.jba-sjs-active,
body.jba-dark .sjs-custom-select-option.jba-sjs-active,
body.jba-contrast .sjs-custom-select-option.jba-sjs-active{
outline:2px solid #ffbf00 !important;
background:#000 !important;
color:#fff !important;
}
@media (forced-colors: active){
.sjs-custom-select-option.jba-sjs-active{
outline:2px solid Highlight !important;
background:Highlight !important;
color:HighlightText !important;
}
}