/**
 * 51-TTI Accessibility Stylesheet
 * WCAG 2.1 Level AA Compliance
 *
 * Covers: focus indicators (2.4.7), skip navigation (2.4.1),
 * screen-reader-text (1.3.1), color independence (1.4.1),
 * high contrast support, text spacing resilience (1.4.12),
 * outline:none overrides from Droip/plugins
 */

/* ==========================================================================
   1. FOCUS INDICATORS — WCAG 2.4.7 (Focus Visible)
   Override any outline:none from Droip, Tutor, or plugin CSS.
   3px solid at 2px offset guarantees 3:1 contrast on most backgrounds.
   ========================================================================== */

*:focus-visible {
    outline: 3px solid #4A90D9 !important;
    outline-offset: 2px !important;
}

/* Ensure inset focus for inputs that clip outlines */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #4A90D9 !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 1px #4A90D9 !important;
}

/* High-contrast focus for dark backgrounds */
.site-header *:focus-visible,
[class*="footer"] *:focus-visible,
.tutor-sidebar *:focus-visible {
    outline-color: #FFD700 !important;
}

/* ==========================================================================
   2. SKIP NAVIGATION LINK — WCAG 2.4.1 (Bypass Blocks)
   Visually hidden until focused, then anchored top-left.
   ========================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -1;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    z-index: 100000;
    text-decoration: none;
    outline: 3px solid #4A90D9;
    outline-offset: 2px;
}

/* ==========================================================================
   3. SCREEN READER TEXT — WCAG 1.3.1
   Visually hidden but available to assistive technology.
   WordPress standard pattern.
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   4. COLOR INDEPENDENCE — WCAG 1.4.1
   Links must be distinguishable by more than color alone.
   ========================================================================== */

/* Links within body content get underlines (theme already sets this,
   but reinforce for any overrides) */
main a:not([class*="btn"]):not([class*="button"]):not([role="button"]) {
    text-decoration: underline;
}

main a:not([class*="btn"]):not([class*="button"]):not([role="button"]):hover,
main a:not([class*="btn"]):not([class*="button"]):not([role="button"]):focus {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   5. TEXT SPACING RESILIENCE — WCAG 1.4.12
   Prevent content clipping when users apply custom text spacing.
   ========================================================================== */

/* Prevent overflow hidden on text containers that would clip adjusted spacing */
main *:not(iframe):not(video):not(canvas):not(img):not(svg) {
    overflow-wrap: break-word;
}

/* ==========================================================================
   6. HIGH CONTRAST MODE — prefers-contrast: more
   Enhanced borders and outlines for users who need higher contrast.
   ========================================================================== */

@media (prefers-contrast: more) {
    input,
    textarea,
    select,
    button,
    [role="button"] {
        border: 2px solid currentColor !important;
    }

    a {
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
    }

    *:focus-visible {
        outline-width: 4px !important;
    }

    img {
        border: 1px solid currentColor;
    }
}

/* ==========================================================================
   7. OUTLINE:NONE OVERRIDES
   Counteract outline suppression from Droip builder CSS, Tutor LMS,
   and other plugin stylesheets. These rules must load AFTER plugin CSS.
   ========================================================================== */

/* Droip builder elements */
.droip-page *:focus-visible,
[data-droip] *:focus-visible,
.droipbase-site-main *:focus-visible {
    outline: 3px solid #4A90D9 !important;
    outline-offset: 2px !important;
}

/* Tutor LMS review popup (tutor-review-popup.css:156 sets outline:none) */
.tutor-modal *:focus-visible,
.tutor-review-popup *:focus-visible {
    outline: 3px solid #4A90D9 !important;
    outline-offset: 2px !important;
}

/* WooCommerce elements */
.woocommerce *:focus-visible,
.wc-block-components-text-input *:focus-visible {
    outline: 3px solid #4A90D9 !important;
    outline-offset: 0 !important;
}

/* H5P wrapper elements on the parent page */
.h5p-iframe-wrapper *:focus-visible {
    outline: 3px solid #4A90D9 !important;
    outline-offset: 2px !important;
}