/* LVI public accessibility safeguards. Keyboard focus is intentionally
 * separated from pointer focus so mouse/touch interactions stay clean. */
:root {
    --lvi-focus-ring: #ffffff;
}

body[class*="music"] { --lvi-focus-ring: #a970ff; }
body[class*="comedy"] { --lvi-focus-ring: #ff4b55; }
body[class*="arts"] { --lvi-focus-ring: #ff9d1d; }
body[class*="labs"] { --lvi-focus-ring: #57df78; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--lvi-focus-ring) !important;
    outline-offset: 4px !important;
}

:where(input, select, textarea):focus-visible {
    border-color: var(--lvi-focus-ring) !important;
}

.screen-reader-text {
    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;
}

.screen-reader-text:focus {
    z-index: 100000;
    top: 12px;
    left: 12px;
    width: auto !important;
    height: auto !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    clip: auto !important;
    color: #050608;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid Highlight !important;
    }

    :where(button, [class*="button"], [class*="btn"]) {
        border: 1px solid ButtonText;
    }
}