/**
 * Accessibility CSS
 * WCAG 2.2 compliant styles for screen readers and touch targets
 *
 * @package Bucksalc
 */

/* ==============================================
   SCREEN READER TEXT
   ============================================== */

/**
 * Visually hidden but accessible to screen readers
 * https://www.a11yproject.com/posts/how-to-hide-content/
 */
.screen-reader-text,
.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;
}

/**
 * Allow screen reader text to be focusable
 */
.screen-reader-text:focus,
.sr-only:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ==============================================
   SKIP LINKS
   ============================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 8px 16px;
    background: var(--color-primary, #2E2766);
    color: #ffffff;
    text-decoration: none;
    z-index: 100000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-secondary, #E67E23);
    outline-offset: 2px;
}

/* ==============================================
   TOUCH TARGETS (WCAG 2.2 Level AA - 24px minimum)
   ============================================== */

/**
 * Ensure all interactive elements meet 24x24px minimum
 * WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum)
 */

/* Buttons and links in navigation */
.menu-item a,
.header-menu a,
.footer-menu a,
#top_menu a,
#main_menu a,
#footer-menu a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px 12px;
}

/* Social media links - ensure minimum touch target */
.social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
}

/* Mobile menu touch targets */
.mobile-top-menu a,
.top-menu-mobile a,
#mobile-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

/* Search buttons */
.search-submit,
.mobile-search-toggle,
.mobile-search-submit,
.mobile-search-close {
    min-width: 44px;
    min-height: 44px;
}

/* Hamburger menu button - reset button styles for accessibility */
button.ham_wrapper {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    justify-content: flex-end;
}

button.ham_wrapper .p_medium_normal {
    color: #ffffff;
    margin-bottom: 0;
}

/* Hamburger outer wrapper - ensure it's visible */
button.ham_wrapper .ham-outer {
    display: block;
    position: relative;
}

/* Hamburger icon container */
button.ham_wrapper .ham-outer .hamburger-wrapper {
    width: 24px;
    height: 18px;
    position: relative;
    display: block;
}

/* Hamburger inner wrapper */
button.ham_wrapper .ham-outer .hamburger-wrapper .hamburger {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Hamburger icon lines - full path through all wrappers */
button.ham_wrapper .ham-outer .hamburger-wrapper .hamburger .lines {
    width: 100%;
    height: 3px;
    position: absolute;
    left: 0;
    background: #ffffff !important;
    transition: all 300ms ease-in-out;
}

button.ham_wrapper .ham-outer .hamburger-wrapper .hamburger .lines.line1 {
    top: 0;
}

button.ham_wrapper .ham-outer .hamburger-wrapper .hamburger .lines.line2 {
    top: 7px;
}

button.ham_wrapper .ham-outer .hamburger-wrapper .hamburger .lines.line3 {
    top: 14px;
}

/* Hamburger X state when menu is open */
button.ham_wrapper.is-active .ham-outer .hamburger-wrapper .hamburger .lines.line1 {
    transform: rotate(45deg);
    transform-origin: left;
    left: 3px;
}

button.ham_wrapper.is-active .ham-outer .hamburger-wrapper .hamburger .lines.line2 {
    width: 0;
}

button.ham_wrapper.is-active .ham-outer .hamburger-wrapper .hamburger .lines.line3 {
    transform: rotate(-45deg);
    transform-origin: left;
    left: 2px;
    top: 17px;
}

@media (max-width: 1023px) {
    button.ham_wrapper {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (min-width: 1024px) {
    button.ham_wrapper {
        display: none;
    }
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
    min-height: 44px;
}

/* Buttons - only set minimum height, don't override other styles */
.btn,
.bucksalc-btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-height: 44px;
}

/* ==============================================
   FOCUS INDICATORS
   ============================================== */

/**
 * Enhanced focus indicators for keyboard navigation
 * WCAG 2.2 Success Criterion 2.4.7 Focus Visible
 */

/* Remove default focus outline, rely on :focus-visible instead */
:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for keyboard users */
:focus-visible {
    outline: 3px solid var(--color-primary, #2E2766);
    outline-offset: 3px;
}

/* Focus styles for specific elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-primary, #2E2766);
    outline-offset: 2px;
}

/* ==============================================
   REDUCED MOTION
   ============================================== */

/**
 * Respect user's motion preferences
 * WCAG 2.2 Success Criterion 2.3.3 Animation from Interactions
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==============================================
   HIGH CONTRAST MODE
   ============================================== */

@media (prefers-contrast: high) {
    /* Increase border widths for form elements only */
    input,
    select,
    textarea {
        border-width: 2px;
    }

    /* Ensure links are distinguishable */
    a {
        text-decoration: underline;
    }

    /* Increase focus indicator visibility */
    :focus-visible {
        outline-width: 4px;
    }
}

/* ==============================================
   Z-INDEX FIXES
   ============================================== */

/* Ensure mobile menu appears above page content */
#mobile-menu {
    z-index: 9998;
}

/* ==============================================
   COLOR CONTRAST HELPERS
   ============================================== */

/**
 * Utility classes for ensuring sufficient color contrast
 */
.text-high-contrast {
    color: #1a1a1a;
}

.bg-high-contrast {
    background-color: #ffffff;
}