/*==============================================================
  LeadsOnline — WCAG 2.1 AA Accessibility Overrides
  Load order: LAST. Overrides outline:none in manager/style.css.
==============================================================*/

/* ---------------------------------------------------------------
   FOCUS INDICATORS — WCAG 2.4.7 Focus Visible (AA)
   manager/style.css sets outline:none in 10+ places.
   :focus-visible targets keyboard users only, not mouse clicks.
   Minimum 3:1 contrast ratio against adjacent colors required.
--------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid #0049b3 !important;
    outline-offset: 2px !important;
}

table thead th:focus,
table thead th:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #0049b3 !important;
}

input[type="text"]:focus-visible,
input[type="text"]:focus,
input[type="password"]:focus-visible,
input[type="password"]:focus,
input[type="email"]:focus-visible,
input[type="email"]:focus,
input[type="tel"]:focus-visible,
input[type="tel"]:focus,
input[type="number"]:focus-visible,
input[type="number"]:focus,
input[type="search"]:focus-visible,
input[type="search"]:focus,
select:focus-visible,
textarea:focus-visible,
textarea:focus {
    /* outline is overridden by Chrome when Narrator/screen reader is active.
       box-shadow renders in the CSS layer and is not affected by screen-reader overrides. */
    outline: none !important;
    box-shadow: 0 0 0 2px #0049b3 !important;
}

/* jQuery UI dialog wrapper is a programmatic container — not keyboard-interactive.
   Its internal focus management must not show a ring on the container itself. */
.ui-dialog:focus,
.ui-dialog:focus-visible {
    outline: none !important;
}

/* Skip-link targets (#mainContent, #mainNav) need tabindex="-1" so JS and skip
   links can move focus into them (WCAG 2.4.1), but they are structural containers
   — not interactive controls — so they must not show a visible focus ring. */
#mainContent:focus,
#mainContent:focus-visible,
#mainNav:focus,
#mainNav:focus-visible {
    outline: none !important;
}

/* All buttons use inset box-shadow so the ring draws inside the element and
   cannot be clipped by any parent container's overflow (dialog, servicesTray,
   btnsContainerSubmit, etc.). outline-offset would push the ring outside where
   overflow:hidden parents silently crop it. */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #0049b3 !important;
}

/* Checkboxes and radios: outline-offset:2px extends outside the element and gets
   clipped by overflow parents. offset:0 keeps the ring at the element boundary. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid #0049b3 !important;
    outline-offset: 0 !important;
}

a:focus-visible {
    outline: 2px solid #0049b3 !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* span.mimicAnchor elements appear throughout the app inside containers with
   overflow:auto (containerGeneral, detailBar, etc.) which clip outward outlines.
   Inset box-shadow draws inside the element and is never clipped. */
span.mimicAnchor:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #0049b3 !important;
}

/* Nav tabs (.containerTabs) are floated mimicAnchor spans — covered by rule above.
   No separate rule needed. */

/* Vertical navList <a> links — same overflow clipping issue as containerTabs. */
#containerMain .stage ul.navList li a:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #0049b3 !important;
}

#containerMain .stage ul.navList li a.selected:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

/* Browse to Upload (qq-upload-button): a div wrapping an opacity:0 file input.
   The div has overflow:hidden so the input's focus outline is clipped.
   :focus-within shows the ring on the visible div when the input is focused.
   Suppress the input's own ring to avoid a double indicator. */
div.qq-upload-button:focus-within {
    outline: none !important;
    background: #0072EB !important;
    box-shadow: inset 0 0 0 2px #003080 !important;
}

div.qq-upload-button input[type="file"]:focus,
div.qq-upload-button input[type="file"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* span.btnStyle3, span.newBlueCtaButton, input[type="button"].btnStyle3, and
   input[type="submit"].btnStyle3 all have a #0049b3 background — the generic
   button rule's blue ring is invisible on blue. Two cues: lighter blue background
   + dark navy inset ring. #003080 contrasts ~5:1 on button, ~12:1 on white page. */
span.btnStyle3:focus-visible,
span.newBlueCtaButton:focus-visible,
input[type="button"].btnStyle3:focus-visible,
input[type="submit"].btnStyle3:focus-visible {
    outline: none !important;
    background: #0072EB !important;
    box-shadow: inset 0 0 0 2px #003080 !important;
    border-radius: 2px;
}

/* .returnLink <a> is display:block inside a floated <p> whose ancestor uses
   overflow:hidden for float-clearing — the outline's left side gets clipped.
   Inset box-shadow draws inside the element and is never clipped. */
.returnLink a:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #0049b3 !important;
    border-radius: 0;
}

/* Custom checkbox pill (extends components.css) */
.customCheckboxPill__checkbox:focus-visible ~ .customCheckboxPill__labelText {
    outline: 2px solid #0049b3 !important;
    outline-offset: 1px !important;
}

/* Custom radio */
.customRadio input:focus-visible ~ .checkmark {
    outline: 2px solid #0049b3 !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------
   SKIP NAVIGATION — WCAG 2.4.1 Bypass Blocks (A)
   Visually hidden until focused. JS in Accessibility.js injects
   the <a> tags. Appears as first tab stop on every page.
--------------------------------------------------------------- */
.a11y-skip-nav {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* html.kbd-nav is toggled by Accessibility.js: added on Tab, removed on mousedown (see
   initKeyboardNavDetection). Gating the reveal on it (not just :focus-visible) means the
   tab-order reclaim in injectSkipNav — which calls .focus() whenever a page's own script
   steals focus first (e.g. an autofocused search field) — can fix keyboard Tab order
   without visually revealing the link to a mouse user who hasn't pressed Tab at all. */
html.kbd-nav .a11y-skip-nav:focus-visible {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    width: auto !important;
    min-width: 110px !important;
    overflow: visible !important;
    z-index: 100000 !important;
    background: #0049b3;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
    left: 0 !important;
    padding: 0 16px;
    line-height: 40px;
    position: absolute !important;
    top: 0 !important;
    text-decoration: none !important;
    outline: none !important;
}

/* ---------------------------------------------------------------
   SCREEN-READER-ONLY UTILITY — WCAG 1.3.1 Info and Relationships
   Use .a11y-sr-only for text visible only to assistive technology
   (e.g. supplementary labels, sr-only footer content).
--------------------------------------------------------------- */
.a11y-sr-only {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ---------------------------------------------------------------
   COLOR & VISUAL — WCAG 1.4.1 Use of Color (A)
   Do not rely on color alone. Add non-color cues to
   error/valid states. Contrast ratios: 4.5:1 normal, 3:1 large.
--------------------------------------------------------------- */
.field-validation-error::before {
    content: "⚠ ";
}

.input-validation-error {
    border: 2px solid #d71e28 !important;
    background: #ffe1e1 !important;
}

/* ---------------------------------------------------------------
   MOUSE-NAV SUPPRESSION — suppress custom rings during mouse navigation
   html.kbd-nav is toggled by Accessibility.js: added on Tab, removed on mousedown.
   When the user is clicking (no kbd-nav class), remove our injected box-shadow
   so editable fields look normal. :focus-visible alone does not cover all browsers
   for text inputs (Chrome applies it even on click for editable elements).
--------------------------------------------------------------- */
html:not(.kbd-nav) input[type="text"]:focus,
html:not(.kbd-nav) input[type="text"]:focus-visible,
html:not(.kbd-nav) input[type="password"]:focus,
html:not(.kbd-nav) input[type="password"]:focus-visible,
html:not(.kbd-nav) input[type="email"]:focus,
html:not(.kbd-nav) input[type="email"]:focus-visible,
html:not(.kbd-nav) input[type="tel"]:focus,
html:not(.kbd-nav) input[type="tel"]:focus-visible,
html:not(.kbd-nav) input[type="number"]:focus,
html:not(.kbd-nav) input[type="number"]:focus-visible,
html:not(.kbd-nav) input[type="search"]:focus,
html:not(.kbd-nav) input[type="search"]:focus-visible,
html:not(.kbd-nav) select:focus-visible,
html:not(.kbd-nav) textarea:focus,
html:not(.kbd-nav) textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------
   ZOOM & RESIZE — WCAG 1.4.4 Resize Text (AA), 1.4.10 Reflow
   Supports 200% zoom and 320px width without horizontal scroll.
   The viewport fix (user-scalable=no removal) is in layout files.
--------------------------------------------------------------- */
@media (max-width: 320px) {
    #containerMain {
        min-width: 0 !important;
    }
}

/* ---------------------------------------------------------------
   DATEPICKER KEYBOARD NAVIGATION — WCAG 2.4.7 Focus Visible (AA)
   jQuery UI's datepicker (_doKeyDown) navigates the calendar with
   Ctrl+Arrow keys and correctly applies ui-datepicker-days-cell-over
   to the cell the user has navigated to, but no stylesheet in the
   app (including the jQuery UI base theme) gives that class any
   visible appearance — so keyboard users get no feedback on where
   they are until they press Enter to select. Outline (not a solid
   fill) so it reads as "here you are", distinct from the solid-fill
   ui-datepicker-current-day (already-selected date).
--------------------------------------------------------------- */
.ui-datepicker td.ui-datepicker-days-cell-over a {
    outline: 2px solid #0049b3 !important;
    outline-offset: -2px !important;
    background: #cde9fa;
}