/*
 * Global Accessibility Utilities
 * Implements WCAG 2.1 AA compliance for focus indicators, screen reader
 * utilities, skip navigation, and form validation states.
 * Created for TIK-1681
 */

/* =================================================================
   Section A — Screen Reader Utilities
   Modern .visually-hidden using clip-path (replaces deprecated clip)
   ================================================================= */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Becomes visible on focus — used for skip links */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =================================================================
   Section B — Skip Link
   Off-screen by default, appears fixed at top of page on focus
   ================================================================= */
.skip-link {
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}

.skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: block;
    width: auto;
    padding: 12px 24px;
    background: #cf1c35;
    color: #fff;
    font-size: 1.6em;
    font-weight: 600;
    text-decoration: none;
    outline: 3px solid #000;
    outline-offset: -3px;
}

/* Skip link target and results containers should not show a visible focus ring */
main[tabindex="-1"]:focus,
#pjaxEventList[tabindex="-1"]:focus,
.lp-parking-content[tabindex="-1"]:focus {
    outline: none;
}

/* Non-interactive text elements made tabbable for screen readers */
.lp-filters-no-results-text[tabindex="0"]:focus-visible,
.no-events-message[tabindex="0"]:focus-visible,
.lp-parking-empty[tabindex="0"]:focus-visible,
.lp-parking-error[tabindex="0"]:focus-visible,
.icon-blocks .media[tabindex="0"]:focus-visible {
    outline: 2px solid #cf1c35;
    outline-offset: 2px;
    border-radius: 2px;
}

/* =================================================================
   Section C — Global Focus Restoration
   Overrides the destructive outline:none !important from bootstrap.css
   Uses :focus-visible so click-based focus is unaffected
   ================================================================= */

/* Restore focus indicators for form controls */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #cf1c35 !important;
    outline-offset: 0;
}

/* General interactive element focus */
a:focus-visible {
    outline: 2px solid #cf1c35;
    outline-offset: 2px;
    border-radius: 2px;
}

button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #cf1c35 !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Suppress browser/Bootstrap default focus outline on mouse click */
button:focus:not(:focus-visible),
a.btn:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Footer social icon links — add padding so focus ring has breathing room */
.footer .social-networks a {
    padding: 4px;
    border-radius: 4px;
}

/* =================================================================
   Section D — Form Validation States
   Visual counterpart to ARIA attributes set by form-validation.js
   ================================================================= */
[aria-invalid="true"] {
    border-color: #d9534f !important;
}

[aria-invalid="true"]:focus-visible {
    outline-color: #d9534f !important;
    box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.25);
}

.form-error-message {
    color: #d9534f;
    font-size: 1.2em;
}

/* =================================================================
   Section E — Required Field Indicator
   ================================================================= */
label .required-indicator {
    color: #d9534f;
}

/* =================================================================
   Section F — Non-text Contrast (WCAG 1.4.11)
   UI component boundaries need 3:1 against adjacent color.
   #767676 on white = 4.54:1
   ================================================================= */

/* Form control borders — the border is the sole visual boundary */
.form-control,
.form-newsletter .form-control,
.form-newsletter .form-group .form-control,
.sidebar-email-capture-form .form-control,
.footer-email-capture-form .form-control {
    border: 1px solid #767676;
}

/* Header search box — white border for non-text contrast on dark background */
.search-hed .input-group .form-control,
.search-hed .form-control.tt-input {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Support / Contact page form controls */
.support-message .form-control,
.support-message .form-contact .form-control,
.support-message .form-contact textarea.form-control,
.support-message .dropdown .btn-default,
.support-message .form-contact .dropdown .btn-default,
.support-message .upload {
    border-color: #767676;
}

/* Privacy Choices page */
.privacy-choices .privacy-choice-form input,
.privacy-choices .privacy-choice-form select,
.privacy-choices .privacy-choice-form .dropdown .btn.dropdown-toggle,
.privacy-choices .select-dropdown-menu .btn.dropdown-toggle {
    border-color: #767676;
}

/* Booking / checkout step forms */
.booking-step .input-group .form-control,
.booking-step .bg-for-select select {
    border-color: #767676;
}

/* Interactive button outlines */
.btn-outline-grey {
    border-color: #767676;
}
.btn-outline-grey:hover,
.btn-outline-grey:focus,
.btn-outline-grey:active {
    border-color: #505050;
}

/* Venue page buttons */
.venue-links .btn.btn-default,
.with-img .venue-links .btn.btn-default {
    border-color: #767676;
}

/* Custom dropdown button borders (scoped to form contexts) */
.event-search .form-group.select-dropdown-width {
    border-color: #767676;
}

/* Ensure custom combobox dropdown buttons show a visible focus ring (WCAG 2.4.7) */
.select-dropdown-menu .btn.dropdown-toggle:focus-visible {
    outline: 2px solid #cf1c35 !important;
    outline-offset: 2px;
    border-radius: 3px;
}

/* SVG icons used as interactive indicators */
.faq-block .panel-heading svg.panel-chevron path {
    fill: #767676;
}

/* =================================================================
   Section G — Semantic replacements for presentational tags
   Replaces <u> and <i> on terms/privacy page (WCAG BadTag rules)
   ================================================================= */
.terms-of-use .underline-heading {
    text-decoration: underline;
}
.terms-of-use .subsection-title {
    text-decoration: underline;
    font-style: italic;
}

/* =================================================================
   Section H — High Contrast & Reduced Motion
   ================================================================= */
@media (prefers-contrast: high) {
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline-width: 3px;
        outline-color: currentColor;
    }

    [aria-invalid="true"] {
        border-width: 3px;
    }

    .skip-link:focus {
        outline-width: 4px;
        outline-color: currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =================================================================
   Print — Remove focus indicators
   ================================================================= */
@media print {
    .skip-link {
        display: none !important;
    }
}