/**
 * EBA — WCAG 2.1 AA Accessibility Layer
 *
 * Global accessibility utilities that apply to every EBA-rendered page:
 *  - Skip-to-content link (visible on focus)
 *  - prefers-reduced-motion fallback
 *  - Touch-target minimum size enforcement (WCAG 2.5.5)
 *  - High-visibility focus indicators (WCAG 2.4.7)
 *  - Screen-reader-only utility
 */

/* ============== SKIP TO CONTENT ============== */
.eba-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 100000;
    padding: 12px 20px;
    background: #0f172a;
    color: #d4a24c !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 0 0 10px 10px;
    border: 2px solid #d4a24c;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: top 0.18s ease-out;
}
.eba-skip-link:focus,
.eba-skip-link:focus-visible {
    top: 8px;
    outline: 3px solid #e0b96b;
    outline-offset: 2px;
}

/* ============== SCREEN-READER-ONLY ============== */
.eba-sr-only,
.eba-visually-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;
}

/* ============== FOCUS VISIBLE (WCAG 2.4.7) ============== */
/* Universal gold focus ring on all interactive EBA elements.
   Uses :focus-visible so mouse users don't see the ring, but keyboard users do. */
.eba-wrapper :focus-visible,
.eba-wrapper button:focus-visible,
.eba-wrapper a:focus-visible,
.eba-wrapper [tabindex]:focus-visible,
.eba-wrapper input:focus-visible,
.eba-wrapper textarea:focus-visible,
.eba-wrapper select:focus-visible,
.eba-wrapper [role="button"]:focus-visible,
.eba-wrapper [role="tab"]:focus-visible,
.eba-wrapper [role="link"]:focus-visible {
    outline: 2px solid #d4a24c !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* Remove default browser outline ONLY when our focus-visible is taking over.
   This way we keep accessibility but the styling is consistent across browsers. */
.eba-wrapper :focus:not(:focus-visible) {
    outline: none;
}

/* ============== TOUCH TARGET SIZE (WCAG 2.5.5 — AAA but client expectation) ============== */
/* Ensure interactive icon buttons hit the 44x44 minimum on touch devices.
   Uses a transparent ::after pseudo-element to extend the hit area without
   visually enlarging the button — preserves design integrity. */
@media (hover: none) and (pointer: coarse) {
    .eba-wrapper button,
    .eba-wrapper [role="button"],
    .eba-wrapper a.eba-btn,
    .eba-wrapper .eba-cpm__icon-btn,
    .eba-wrapper .eba-clp__icon-btn,
    .eba-wrapper .eba-jpm__icon-btn {
        position: relative;
    }
    .eba-wrapper button::after,
    .eba-wrapper [role="button"]::after {
        content: '';
        position: absolute;
        inset: 0;
        min-width: 44px;
        min-height: 44px;
        /* Center the hit area over the visual button */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: max(44px, 100%);
        height: max(44px, 100%);
        background: transparent;
        pointer-events: none;
    }
}

/* ============== REDUCED MOTION (WCAG 2.3.3) ============== */
/* Honor user's OS-level preference to reduce animations.
   Critical for vestibular disorders. */
@media (prefers-reduced-motion: reduce) {
    .eba-wrapper *,
    .eba-wrapper *::before,
    .eba-wrapper *::after,
    .eba-deck-modal,
    .eba-deck-modal *,
    .eba-audio-modal,
    .eba-audio-modal * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============== HIGH CONTRAST MODE (Windows + system pref) ============== */
@media (forced-colors: active) {
    .eba-wrapper button,
    .eba-wrapper a.eba-btn,
    .eba-wrapper .eba-cpm__icon-btn,
    .eba-wrapper .eba-clp__icon-btn {
        border: 1px solid currentColor;
    }
    .eba-wrapper :focus-visible {
        outline: 3px solid Highlight !important;
    }
}

/* ============== FORM ERROR / STATUS REGIONS ============== */
/* Standardize live status/error regions so screen readers announce them. */
.eba-form__alert,
.eba-form__status,
[role="alert"].eba-form-msg,
[role="status"].eba-form-msg {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
}
.eba-form__alert--error,
[role="alert"].eba-form-msg {
    background: rgba(220, 38, 38, 0.08);
    color: #991b1b;
    border-left: 3px solid #dc2626;
}
.eba-form__alert--success,
[role="status"].eba-form-msg {
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
    border-left: 3px solid #16a34a;
}

/* ============== ARIA-REQUIRED VISIBLE INDICATOR ============== */
.eba-wrapper [aria-required="true"] + label::after,
.eba-wrapper label:has(+ [aria-required="true"])::after {
    content: ' *';
    color: #b58834;
    font-weight: 700;
}