/*
 * BDS Payment Portal - Accessibility overrides (WCAG 2.2 AA)
 *
 * This file must be loaded LAST (after style.css and theme CSS) so these
 * rules override any vendor or theme focus suppression.
 *
 * Do not add layout or cosmetic rules here — accessibility only.
 */

/* ─────────────────────────────────────────────
   1. Visible focus indicator (WCAG 2.4.7, 2.4.11)
   Uses :focus-visible so keyboard users see the ring,
   but mouse/touch clicks do not trigger it.
   ───────────────────────────────────────────── */
:focus-visible {
    outline: 3px solid #005FCC !important;
    outline-offset: 2px !important;
    /* No global box-shadow here — it extends above inputs into label text.
       Form inputs get their own contained glow via section 4 below. */
}

/* Fallback for browsers that do not support :focus-visible */
:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure interactive elements never suppress focus in our code */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #005FCC !important;
    outline-offset: 2px !important;
}

/* Form inputs: ring sits flush on the border so it cannot climb into the label above.
   outline-offset: 0 means the 3px ring is drawn right on top of the existing border —
   it does not float upward. WCAG 2.4.13 is still met (3px × perimeter > 2px minimum). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #005FCC !important;
    outline-offset: 0 !important;
}

/* ─────────────────────────────────────────────
   2. Skip to main content link (WCAG 2.4.1)
   Visually hidden until focused by keyboard.
   Uses clip technique — NOT display:none — so
   the link stays in tab order.
   ───────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 6px;
    z-index: 100000;
    padding: 8px 16px;
    background: #005FCC;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.1s ease;
    /* clip technique keeps it in the a11y tree */
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* ─────────────────────────────────────────────
   3. Focus not obscured by sticky header (WCAG 2.4.11)
   Adds scroll margin so the fixed top navbar
   does not overlap a focused element.
   ───────────────────────────────────────────── */
:focus {
    scroll-margin-top: 80px;
}

/* ─────────────────────────────────────────────
   4. Non-text contrast — form field borders (WCAG 1.4.11)
   Bootstrap 3 default border #ccc = ~1.6:1 on white — fails.
   #767676 on white = 4.54:1 — passes 3:1 minimum.
   ───────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
    border-color: #767676 !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #005FCC !important;
    /* Inset-only glow stays inside the border — does not overflow upward into labels. */
    box-shadow: inset 0 1px 3px rgba(0, 95, 204, 0.20) !important;
}

/* ─────────────────────────────────────────────
   5. Target size — minimum 24×24 px (WCAG 2.5.8)
   Applies to known small interactive targets.
   ───────────────────────────────────────────── */
.paginate_button {
    min-width: 32px !important;
    min-height: 32px !important;
    line-height: 32px !important;
}

.modal .close,
.modal-header .close {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Icon-only table action buttons and small inline buttons */
.btn-xs,
.btn-link.text-danger,
.btn-link.p-0 {
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

/* ─────────────────────────────────────────────
   6. Label clearance above focused inputs
   Bootstrap default label margin-bottom is 5px.
   Bumping to 8px gives the 3px flush focus ring
   enough room so label text is never obscured.
   ───────────────────────────────────────────── */
.form-group label,
.form-horizontal .control-label,
label[for] {
    margin-bottom: 8px;
}

/* ─────────────────────────────────────────────
   7. Required field marker
   Used by accessible form patterns to show *
   ───────────────────────────────────────────── */
.required-note {
    color: #c0392b;
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
}

/* Visually hidden helper (sr-only equivalent for non-Bootstrap pages) */
.a11y-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ─────────────────────────────────────────────
   8. aria-live / status region
   Off-screen container for AT announcements.
   ───────────────────────────────────────────── */
#ajax-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────────────────────────
   9. Cross-theme utility class contrast fixes (WCAG 1.4.3)
   These Bootstrap-derived helper classes are defined identically
   in every theme CSS file and all carry the same contrast failures.
   One global fix here covers all 22 themes.

   .btn-green  — "PAY NOW", Next, Submit, Update, Create Plan buttons.
                 Original: #5cb85c bg + white text = 2.48:1  ✗
                 Fixed:    #347034 bg + white text = 5.98:1  ✓
                 Hover:    #2d682d bg + white text = 6.71:1  ✓

   .text-success — confirmation page labels (Sub Total, Fee, Total Paid…)
                   Original: #5cb85c on white = 2.48:1  ✗
                   Fixed:    #347034 on white = 5.98:1  ✓

   .text-danger  — error messages, warnings, form validation copy.
                   Original: #c15959 on white = 4.34:1  ✗
                   Fixed:    #B43A3A on white = 5.82:1  ✓

   .label-custom / .bg-theme-dark — sidebar badges and theme accent blocks.
                   Original: #00b5c2 bg + white text = 2.50:1  ✗
                   Fixed:    #007a82 bg + white text = 5.11:1  ✓
   ───────────────────────────────────────────── */

/* btn-green — default */
.btn-green,
.btn-green.focus,
.btn-green:focus {
    background-color: #347034 !important;
    border-color:     #2d682d !important;
    color:            #fff    !important;
}
/* btn-green — hover / active */
.btn-green:hover,
.btn-green.active,
.btn-green:active,
.open > .dropdown-toggle.btn-green {
    background-color: #2d682d !important;
    border-color:     #265426 !important;
    color:            #fff    !important;
}
/* btn-green — disabled (keep accessible tone, reduce opacity via existing Bootstrap rule) */
.btn-green.disabled,
.btn-green[disabled],
fieldset[disabled] .btn-green {
    background-color: #347034 !important;
    border-color:     #2d682d !important;
}

/* text-success */
.text-success {
    color: #347034 !important;
}

/* text-danger */
.text-danger {
    color: #B43A3A !important;
}

/* sidebar badges and bg-theme-dark teal blocks */
.sidebar .label-custom,
.bg-theme-dark {
    background-color: #007a82 !important;
}

/* ─────────────────────────────────────────────
   WCAG 2.5.7 — Dragging Movements
   No dragging-only UI is present in this
   application. This comment serves as
   evidence of the review for audit purposes.
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   10. Reflow — WCAG 1.4.10 (320px / 400% zoom)
   Prevent horizontal scrolling at 320 CSS px
   viewport width. Bootstrap 3 already handles
   most responsive layout, but some components
   need extra help.
   ───────────────────────────────────────────── */

/* Tables must not force horizontal scroll at narrow widths */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Login / register / auth boxes: stack at 480px and below */
@media (max-width: 480px) {
    .content-box,
    .login-box,
    .register-box {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .reg-container {
        padding-left: 8px;
        padding-right: 8px;
    }
    /* Prevent fixed-width sidebar from causing overflow */
    .sidebar,
    #sidebar-nav {
        position: static !important;
        width: 100% !important;
    }
    /* Auth top-bar button row: hide on narrow widths */
    .button-box.no-mobile {
        display: none !important;
    }
}

/* Ensure forms never cause horizontal scroll */
form,
.form-control,
.input-group {
    max-width: 100%;
}

/* ─────────────────────────────────────────────
   11. Text Spacing — WCAG 1.4.12
   Override any hardcoded line-height,
   letter-spacing, word-spacing, or
   paragraph spacing that would prevent
   users from applying their own
   text-spacing user stylesheets.
   ───────────────────────────────────────────── */

/* Remove hardcoded line-height from headings so user agents can override */
h1, h2, h3, h4, h5, h6 {
    line-height: normal;
}

/* Ensure body text can be reflowed by user stylesheets */
body {
    line-height: inherit;
}

/* Remove fixed letter-spacing from button text that might conflict */
.btn {
    letter-spacing: normal;
    word-spacing: normal;
}

/* Allow text-spacing overrides without layout breakage in table cells */
td, th {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Ensure form controls don't clip text when letter/word spacing increases */
.form-control {
    height: auto;
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ─────────────────────────────────────────────
   12. Responsive form layout (mobile / tablet)
   Ensures form inputs, labels, and action buttons
   stack and scale correctly at every breakpoint.
   ───────────────────────────────────────────── */

/* Nav tabs: allow horizontal scroll on narrow screens instead of
   wrapping tabs off-screen or clipping them */
@media (max-width: 767px) {
    .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        border-bottom: 1px solid #ddd;
    }
    .nav-tabs > li {
        float: none;
        display: inline-block;
    }
    .nav-tabs > li > a {
        white-space: nowrap;
    }
}

/* PAY NOW and other long submit buttons: full-width block on phones
   so they never overflow their container or clip at the right edge */
@media (max-width: 767px) {
    .btn-green {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
}

/* Pay-by-text form uses col-sm-4 which is very narrow on tablet.
   Force full width on xs and give a sensible max on sm+ */
@media (max-width: 767px) {
    form.form-horizontal.col-sm-4 {
        width: 100% !important;
        float: none !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Input-group addons: prevent the addon text from squeezing the
   input below a usable width on narrow viewports */
@media (max-width: 480px) {
    .input-group-addon {
        max-width: 40px;
        overflow: hidden;
        font-size: 0;          /* hide text, keep icon */
    }
    .input-group-addon i {
        font-size: 14px;       /* restore icon size */
    }
}

/* ─────────────────────────────────────────────
   13. Custom checkbox focus ring (WCAG 2.4.7, 2.4.11)
   The theme hides the native <input> via opacity:0 and
   draws the visual checkbox using label::before.
   The global :focus-visible rule targets the invisible
   input and has no visible effect. We use the adjacent
   sibling combinator (+) to surface a ring on label::before
   instead. box-shadow is used because outline is not
   reliably supported on ::before pseudo-elements.
   ───────────────────────────────────────────── */
.checkbox input[type=checkbox]:focus-visible + label::before,
.checkbox input[type=checkbox]:focus + label::before {
    box-shadow: 0 0 0 3px #005FCC !important;
    border-color: #005FCC !important;
}

/* ─────────────────────────────────────────────
   14. Action button rows on the dashboard
   "Pay Bill / Paperless / AutoPay / Pay by Text"
   wrap gracefully on narrow screens.
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .panel-body .btn-sm,
    .panel-body .btn-blue,
    .panel-body .btn-green.btn-sm {
        display: block !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 6px !important;
    }
}