/* ============================================================
   Securranty ADA / WCAG 2.1 AA accessibility layer (GLOBAL)
   Loaded by every master page. Keyboard focus visibility + helpers.
   Paired with /assets/js/ada-accessibility.js
   ------------------------------------------------------------
   Single source of truth. Do not duplicate these rules per page.
   ============================================================ */

/* ---- Skip to main content link ---- */
.ada-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 10px 16px;
    background: #00263d;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.ada-skip-link:focus {
    left: 0;
    outline: 3px solid #ffbf00;
    outline-offset: 2px;
}

/* ---- Visible keyboard focus indicators (WCAG 2.4.7) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible,
summary:focus-visible {
    outline: 3px solid #ffbf00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px;
}

/* Fallback for browsers without :focus-visible support */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
[role="button"]:focus,
.dropdown-toggle:focus,
.dropdown-item:focus {
    outline: 3px solid #ffbf00;
    outline-offset: 2px;
}

/* When :focus-visible is supported, hide the ring for mouse/touch users so the
   existing visual design is unchanged for them. */
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),
[role="button"]:focus:not(:focus-visible),
.dropdown-toggle:focus:not(:focus-visible),
.dropdown-item:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ---- CTA tiles that wrap a <button> inside an <a> ----
   The <a> is the tab stop (inner button removed from tab order via JS);
   draw the ring on the visible button, not the anchor. */
a:focus > button,
a:focus-visible > button {
    outline: 3px solid #ffbf00 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

a:focus:has(> button),
a:focus-visible:has(> button) {
    outline: none !important;
    box-shadow: none !important;
}

/* ---- Video thumbnails (made keyboard-operable via JS) ---- */
.youtube-thumbnail:focus,
.youtube-thumbnail:focus-visible {
    outline: 3px solid #ffbf00 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

/* ---- Button-styled checkboxes / radios ----
   These patterns visually hide the native <input> and style the wrapping
   <label> as a button, so a :focus-visible ring on the input is invisible.
   Draw the ring on the visible label box instead when the hidden control is
   keyboard-focused (keyboard-only via :focus-visible, so mouse users and
   default checkboxes are unaffected). Selectors are scoped to exactly where the
   theme hides the native input, so normal checkboxes are never affected. Add a
   wrapper class here if another button-styled checkbox/radio pattern turns up. */
.custom-checkbox-no-tick .custom-checkbox-single-item:has(input:focus-visible),
.custom-radion-no-select-round .single-radio:has(input:focus-visible),
.step__option__content:has(input:focus-visible) {
    outline: 3px solid #ffbf00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5) !important;
    /* no border-radius override: the ring follows each control's own shape
       (e.g. the pill-shaped "Show All" keeps its 24px radius). */
}

/* ---- Dialog containers ----
   Message/confirm popups receive PROGRAMMATIC focus on open so the screen reader
   announces the dialog title + message (via aria-labelledby/aria-describedby) before
   the user Tabs to the buttons. The container itself is not interactive, so suppress
   the focus ring on it (the controls inside still get their own visible focus ring). */
.modalPopup:focus,
.modalPopup_new:focus,
[role="dialog"]:focus,
[role="alertdialog"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ---- Screen-reader live announcer ----
   Visually-hidden but readable by assistive tech. Used to speak the highlighted
   date-picker day (which keeps focus on the field, so NVDA otherwise reads "blank").
   Not focusable and removed from layout, so it never affects the visible design or
   the keyboard focus order/indicators. */
.ada-sr-announcer {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Date-picker keyboard highlight ----
   Arrow keys move this highlight over calendar day cells while focus stays on the
   date field (so the calendar doesn't close). Paired with the datepicker keyboard
   logic in ada-accessibility.js. */
.ada-dp-focus {
    outline: 2px solid #ffbf00 !important;
    outline-offset: -2px !important;
    background-color: rgba(255, 191, 0, 0.45) !important;
    color: #000 !important;
}

/* ---- Portal Dashboard tiles ----
   Their container clips an outward outline, so use an INSET ring + tint that
   stays fully visible on keyboard focus. */
.actionList_third:focus-within {
    outline: 3px solid #ffbf00;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 3px #ffbf00, 0 0 0 4px rgba(0, 0, 0, 0.35) !important;
    background-color: #fff8e1 !important;
    border-radius: 6px;
}

.actionList_third a:focus,
.actionList_third a:focus-visible,
.owl-carousel a:focus,
.owl-carousel a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.owl-carousel a:focus .single-info,
.owl-carousel a:focus-visible .single-info {
    box-shadow: inset 0 0 0 3px #ffbf00, inset 0 0 0 6px rgba(0, 0, 0, 0.35) !important;
    border-radius: 6px;
}