/**
 * ExtKids ADA Accessibility Fixes - Phases 1-4 CSS
 * WCAG 2.1 AA compliance
 */

/* ==========================================================================
   Phase 4: Skip-to-main-content link
   ========================================================================== */
.extkids-skip-link {
    position: fixed !important;
    top: -100px !important;
    left: 10px !important;
    z-index: 999999 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: 2px solid #5D17E8 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    transition: top 0.15s ease !important;
}

.extkids-skip-link:focus {
    top: 10px !important;
    outline: none !important;
}

/* ==========================================================================
   Phase 4: Strong focus indicators (2px outline, high contrast)
   ========================================================================== */
/* Fix: Ensure focus indicators are visible on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.fl-button:focus-visible,
.menu-item a:focus-visible,
.uabb-creative-menu a:focus-visible,
.uabb-menu-toggle:focus-visible,
.uabb-creative-menu-toggle:focus-visible,
.uabb-menu-close-btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #5D17E8 !important;
    outline-offset: 2px !important;
}

/* Screen reader only - visually hidden but accessible to assistive tech */
.sr-only {
    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;
    color: #000 !important;
    background: #fff !important;
}

/* Fix: Touch targets — mobile menu links need minimum 44px touch target */
/* Scoped to off-canvas only — do NOT apply to desktop horizontal nav */
.uabb-off-canvas-menu .menu-item a,
.uabb-off-canvas-menu .uabb-creative-menu .uabb-has-submenu-container > a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* ==========================================================================
   Phase 3: Color Contrast Fixes — WCAG 2.1 AA (4.5:1 minimum)
   Minimal adjustments to meet compliance while preserving visual feel
   ========================================================================== */

/* Fix: "Connect Now" button — dark text on gold for readability */
.fl-button[href*="contact"] .fl-button-text,
a.fl-button .fl-button-text {
    color: #333333 !important;
}

/* Fix: Off-canvas mobile menu — slightly darker orange for 4.5:1 on white */
.uabb-off-canvas-menu .menu-item a {
    color: #d44222 !important;
}

/* Note: Color contrast fixes for Insurance, FAQ, and Resources sections are
   intentionally scoped to @media (prefers-contrast: more) below.
   Original Beaver Builder brand colors are shown by default per client request.
   Accessible darker versions activate only when the OS/browser high-contrast
   setting is enabled. */

/* ==========================================================================
   Enhanced contrast for users who request it (OS accessibility setting)
   ========================================================================== */
@media (prefers-contrast: more) {
    /* Maximum contrast on all buttons */
    .fl-button .fl-button-text {
        color: #000000 !important;
    }
    .fl-button {
        border: 2px solid #000000 !important;
    }

    /* High contrast mobile menu */
    .uabb-off-canvas-menu .menu-item a {
        color: #000000 !important;
    }

    /* Color contrast fixes — only active when user has requested high contrast.
       Insurance & FAQ page: original bright brand colors → accessible darker versions */
    /* In-Network (original cyan #1cc9e4 → accessible teal) */
    .fl-node-af4l6ey5j2cr .fl-row-content-wrap,
    .fl-node-af4l6ey5j2cr .fl-col-content,
    .fl-node-3yw2segvanp7 .fl-row-content-wrap,
    .fl-node-3yw2segvanp7 .fl-col-content {
        background-color: #065564 !important;
    }
    /* Arizona ESA (original pink #e64ecf → accessible deep pink) */
    .fl-node-vxet9gjfqd0a .fl-row-content-wrap,
    .fl-node-vxet9gjfqd0a .fl-col-content,
    .fl-node-nh1xodfwk4q0 .fl-row-content-wrap,
    .fl-node-nh1xodfwk4q0 .fl-col-content {
        background-color: #8a1d76 !important;
    }
    /* General FAQ (original lime #4dc615 → accessible forest green) */
    .fl-node-ezutah5w87gs .fl-row-content-wrap,
    .fl-node-ezutah5w87gs .fl-col-content {
        background-color: #1a5200 !important;
    }
    /* Resources page — cyan sections (original #1cc9e4 → accessible teal) */
    .fl-node-9gmreuvkdsiz .fl-col-content,
    .fl-node-ny03j6olfagr .fl-col-content,
    .fl-node-wstj4brdhy7i .fl-col-content,
    .fl-node-nxk4h08oami6 .fl-col-content,
    .fl-node-xzwus7pqg10h .fl-col-content {
        background-color: #065564 !important;
    }
    /* Resources page — pink section (original #e64ecf → accessible deep pink) */
    .fl-node-2a4fxt7wljcv .fl-col-content {
        background-color: #8a1d76 !important;
    }

    /* Stronger focus indicators */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    [role="button"]:focus-visible {
        outline: 3px solid #000000 !important;
        outline-offset: 2px !important;
    }
}

/* Fix: Empty headings should not take up space or confuse layout */
.uabb-info-list-title:empty {
    display: none;
}

/* Fix: Skip-to-content link - ensure it's visible on focus */
.fl-screen-reader-text:focus {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 999999 !important;
    background: #fff !important;
    color: #000 !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    border: 2px solid #5D17E8 !important;
    border-radius: 4px !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
}