/* ==========================================================================
   Accessibility Enhancements — WCAG 2.1 AA
   StratusLIVE.WorkplaceGiving.Base

   Two-color focus indicator per WCAG 2.1 technique C40.
   Inner ring (outline) + outer ring (box-shadow) ensures visibility on
   any background.  The two colors must maintain ≥ 9:1 contrast with each
   other so that at least one band always meets 3:1 against the background.

   Override these custom properties in child theme stylesheets to customize
   focus indicators and skip-nav appearance per theme.
   ========================================================================== */

:root {
    --a11y-focus-inner: #F9F9F9;        /* light inner ring */
    --a11y-focus-outer: #193146;        /* dark outer ring  — 12.7:1 vs inner */
    --a11y-focus-width: 2px;
    --a11y-focus-shadow-width: 4px;     /* outer ring total spread */
    --a11y-skip-nav-bg: var(--a11y-focus-outer);
    --a11y-skip-nav-color: #fff;
}

/* --------------------------------------------------------------------------
   Skip Navigation Link
   -------------------------------------------------------------------------- */
.skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--a11y-skip-nav-bg);
    color: var(--a11y-skip-nav-color);
    padding: 8px 16px;
    z-index: 10000;
    font-weight: bold;
    text-decoration: none;
    transition: top 0.2s;
}

.skip-nav:focus {
    top: 0;
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
    color: var(--a11y-skip-nav-color);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Focus Indicators — Global
   Uses :focus-visible with :focus fallback for older browsers.
   -------------------------------------------------------------------------- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
.btn:focus,
.dropdown-toggle:focus,
.navbar-toggle:focus,
.carousel-control:focus {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.dropdown-toggle:focus:not(:focus-visible),
.navbar-toggle:focus:not(:focus-visible),
.carousel-control:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.dropdown-toggle:focus-visible,
.navbar-toggle:focus-visible,
.carousel-control:focus-visible{
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
}

/* Mouse focus on form controls: bootstrap-style blue ring, compliance-adjusted
   to ~5:1 against white (WCAG 1.4.11 non-text contrast). Keyboard focus keeps
   the dark a11y ring above via :focus-visible. */
.form-control:focus:not(:focus-visible) {
    border-color: #1976d2;
    outline: none;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(25,118,210,.6);
}
/* --------------------------------------------------------------------------
   Focus overrides for selectors that previously suppressed focus
   -------------------------------------------------------------------------- */
.btn-primary:focus,
#impersonate .btn-default:focus {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
}

.btn-primary:focus:not(:focus-visible),
#impersonate .btn-default:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.k-pager-wrap .k-link:focus {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
}

.k-pager-wrap .k-link:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Kendo Calendar — visible focus indicator for arrow-key navigation.
   Kendo's calendar uses aria-activedescendant rather than moving DOM focus,
   so the active day gets .k-state-focused instead of :focus.  Without this
   rule, sighted users see no feedback as they arrow through dates (screen
   reader users hear announcements via aria-activedescendant).
   Kendo's own default theme styles this class but its CSS is not loaded by
   Base/UnitedWay/Medstar, so we restyle it here using the a11y palette.
   -------------------------------------------------------------------------- */
.k-calendar .k-state-focused,
.k-calendar .k-link.k-state-focused,
.k-calendar td.k-state-focused > .k-link {
    background-color: rgba(25, 49, 70, 0.18);
    box-shadow: inset 0 0 0 .75px var(--a11y-focus-outer);
    border-radius: 2px;
}

#leftPane .panel-title .accordion-toggle:focus {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
}

#leftPane .panel-title .accordion-toggle:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.checkbox-switch-slider:focus {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
}

.checkbox-switch-slider:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Radio & Checkbox focus — Bootstrap 3 positions these inputs with
   position: absolute; margin-left: -20px, making the native focus ring
   small and offset.  Move the indicator to the wrapping <label> so it
   is clearly visible around the full label text.
   -------------------------------------------------------------------------- */
.radio:has(input[type="radio"]:focus-visible) label,
.checkbox:has(input[type="checkbox"]:focus-visible) label,
.radio-inline:has(input[type="radio"]:focus-visible),
.checkbox-inline:has(input[type="checkbox"]:focus-visible) {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 1px;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
    border-radius: 2px;
}

/* Suppress the default focus ring on the small, offset input itself
   so only the label ring is shown */
.radio input[type="radio"]:focus,
.checkbox input[type="checkbox"]:focus,
.radio-inline input[type="radio"]:focus,
.checkbox-inline input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Toggle switch focus — when the visually-hidden checkbox receives focus,
   show a ring on its sibling slider span.
   -------------------------------------------------------------------------- */
.switch input:focus-visible + .checkbox-switch-slider {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 1px;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
}

/* Direct focus on the slider span (remove-charity button with role="button").
   The span is position:absolute filling its .switch parent; use the parent
   as the focus outline anchor via outline on the .switch wrapper instead.
   overflow:visible counteracts #sliderContainer > div { overflow:hidden }
   which otherwise clips the focus ring. */
/* Focus ring on the .switch wrapper (now sized to match the visual toggle).
   overflow:visible counteracts #sliderContainer > div { overflow:hidden }
   which otherwise clips the ring. */
#sliderContainer .switch:has(.checkbox-switch-slider[role="button"]:focus-visible) {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 2px;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
    overflow: visible;
}

#sliderContainer .form-group:has(.checkbox-switch-slider[role="button"]:focus-visible) {
    overflow: visible;
}

.checkbox-switch-slider[role="button"]:focus-visible {
    outline: none;
    box-shadow: none;
}

.checkbox-switch-slider[role="button"]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Giving-level buttons — override inline outline:none
   -------------------------------------------------------------------------- */
.giving-level-btn:focus-visible {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner) !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer) !important;
}

/* --------------------------------------------------------------------------
   Wizard step counter — current step indicator
   -------------------------------------------------------------------------- */
#wizardSteps li[aria-current="step"] .stepNum a {
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Screen-reader-only utility (Bootstrap 3 .sr-only already exists,
   but .sr-only-focusable may not be present in all builds)
   -------------------------------------------------------------------------- */
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/* --------------------------------------------------------------------------
   Ensure "Continue" button is visible when navigated via keyboard
   -------------------------------------------------------------------------- */
#charityActionButtonRow .btn:focus,
#charityActionButtonRow .btn:focus-visible,
#stepButtons .btn:focus,
#stepButtons .btn:focus-visible {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
}

/* --------------------------------------------------------------------------
   Ensure keyboard-navigated Continue button after gift choice is visible
   -------------------------------------------------------------------------- */
#checkout:focus,
#checkout:focus-visible,
#continue:focus,
#continue:focus-visible,
#modifyContributionContinue:focus,
#modifyContributionContinue:focus-visible {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
    visibility: visible;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Renewal accordion: input + addon ($ / %) — focus ring on wrapper.
   The wrapper has overflow:hidden, so the input's own box-shadow ring is
   clipped on outer sides and overlaps the addon background asymmetrically
   based on DOM paint order (visible adjacent to the addon for the total
   input, hidden for the pct input).  Move the indicator to the wrapper so
   it surrounds the whole control and renders consistently.
   -------------------------------------------------------------------------- */
#renewAccordions .cs-input-with-addon:has(input:focus-visible) {
    outline: var(--a11y-focus-width) solid var(--a11y-focus-inner);
    outline-offset: 0;
    box-shadow: 0 0 0 var(--a11y-focus-shadow-width) var(--a11y-focus-outer);
    border-color: var(--a11y-focus-outer);
}

#renewAccordions .cs-input-with-addon input:focus,
#renewAccordions .cs-input-with-addon input:focus-visible {
    outline: none;
    box-shadow: none;
}