/* =====================================================
   ACCESSIBILITY FIXES - WCAG 2.1 Level AA Compliance
   ===================================================== */

/* Screen-reader only text utility class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   1. TOUCH TARGET FIXES - Minimum 44x44px (WCAG 2.5.5)
   ===================================================== */

/* Global minimum touch targets for all interactive elements */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
.filter-btn,
.clickable,
.pagination-btn,
.pagination-page,
[role="button"],
[tabindex]:not([tabindex="-1"]) {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
}

/* Text inputs need adequate height for touch */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea {
    min-height: 44px;
    padding: 12px 16px;
}

/* Select dropdowns */
select {
    min-height: 44px;
    padding: 12px 16px;
}

/* Company cards are clickable - ensure adequate size */
.company-card {
    min-height: 120px;
}

/* Expand/collapse buttons */
.expand-btn {
    min-height: 48px;
    min-width: 120px;
    padding: 12px 24px;
}

/* Filter buttons - full accessibility */
.filter-btn {
    min-height: 44px;
    min-width: 80px;
    padding: 12px 20px;
}

/* Clear filters button */
.clear-filters-btn {
    min-height: 44px;
    min-width: 100px;
    padding: 12px 20px;
}

/* Footer links */
.footer-link {
    min-height: 44px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

/* Company website links */
.company-website {
    min-height: 48px;
    padding: 14px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Breadcrumb links */
.breadcrumb a,
.company-breadcrumb a,
nav[aria-label="Breadcrumb"] a {
    min-height: 44px;
    padding: 10px 8px;
    display: inline-flex;
    align-items: center;
}

/* Category badges if clickable */
.company-category[href],
.company-category[onclick],
.company-category.clickable {
    min-height: 36px;
    padding: 8px 16px;
}

/* Stats cards when clickable */
.stat-card[href],
.stat-card[onclick],
.stat-card.clickable {
    min-height: 80px;
}

/* Scroll to top button */
.footer-scroll-top {
    min-height: 48px;
    min-width: 120px;
    padding: 14px 24px;
}

/* Map controls */
.map-reset-btn {
    min-height: 48px;
    padding: 14px 28px;
}

/* Search interface buttons */
.btn-secondary,
.btn-export {
    min-height: 44px;
    padding: 12px 20px;
}

/* Filter chips close button */
.filter-chip-remove {
    min-height: 24px;
    min-width: 24px;
    padding: 4px;
    cursor: pointer;
}

/* =====================================================
   2. MOBILE TOUCH TARGET IMPROVEMENTS (48x48px)
   ===================================================== */

@media (max-width: 768px) {
    /* Even larger touch targets on mobile */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    select,
    .filter-btn,
    .clickable {
        min-height: 48px;
        padding: 14px 18px;
    }

    /* Text inputs prevent iOS zoom at 16px */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom */
        padding: 14px 18px;
    }

    /* Mobile filter buttons - full width for easy tapping */
    .filters {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .filter-btn {
        width: 100%;
        text-align: center;
        padding: 16px 20px;
        min-height: 48px;
        font-size: 16px;
    }

    /* Mobile search controls */
    .search-container input,
    .search-container select {
        min-height: 48px;
        font-size: 16px;
    }

    /* Mobile footer links */
    .footer-link {
        min-height: 48px;
        padding: 14px 18px;
    }

    /* Mobile company website links */
    .company-website {
        min-height: 48px;
        padding: 14px 20px;
        display: flex;
        width: 100%;
    }

    /* Mobile expand buttons */
    .expand-btn {
        min-height: 52px;
        width: 100%;
        font-size: 16px;
    }

    /* Mobile breadcrumb links */
    .breadcrumb a,
    .company-breadcrumb a {
        min-height: 48px;
        padding: 12px 10px;
    }

    /* Mobile pagination */
    .pagination-btn,
    .pagination-page {
        min-height: 48px;
        padding: 14px 18px;
    }

    /* Mobile map controls */
    .control-group select {
        min-height: 48px;
        font-size: 16px;
    }

    .map-reset-btn {
        min-height: 48px;
        width: 100%;
    }

    /* Mobile resource links */
    .resource-link {
        min-height: 48px;
        padding: 14px 20px;
    }
}

/* =====================================================
   3. TEXT SIZE FIXES - Minimum 16px on Mobile
   ===================================================== */

/* Base text should be readable on mobile */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Base readable size */
        line-height: 1.6;
    }

    /* Ensure all interactive elements have readable text */
    button,
    a,
    input,
    select,
    .filter-btn,
    .company-card {
        font-size: 16px;
    }

    /* Company card content */
    .company-name {
        font-size: 1.125rem; /* 18px */
    }

    .company-info {
        font-size: 16px;
        line-height: 1.6;
    }

    .company-category {
        font-size: 14px; /* Acceptable for badges */
    }

    /* Stats should be readable */
    .stat-number {
        font-size: 1.75rem; /* 28px */
    }

    .stat-label {
        font-size: 14px;
    }

    /* Footer text */
    .footer-link,
    .footer-description {
        font-size: 16px;
    }

    /* Small text minimum */
    small,
    .small-text,
    .text-sm {
        font-size: 14px; /* Still readable */
    }

    /* Extra small text (badges, meta) */
    .text-xs,
    .filter-hint {
        font-size: 13px; /* Minimum for supplementary text */
    }

    /* Map popups */
    .leaflet-popup-content {
        font-size: 16px;
    }

    /* Search placeholders */
    input::placeholder {
        font-size: 16px;
    }
}

/* =====================================================
   4. FORM LABEL IMPROVEMENTS
   ===================================================== */

/* Ensure all form inputs have proper labels */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-secondary, #d0d0d0);
}

/* Associated label styling for filters */
.filter-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--primary-cyan, #00c4e8);
}

/* Make sure labels are connected to inputs */
label[for] {
    cursor: pointer;
}

/* Search input labels */
.search-box label,
.search-box-container label {
    display: block;
    margin-bottom: 8px;
}

/* Filter group labels */
.filter-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Control group labels (map page) */
.control-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--primary-cyan, #00c4e8);
}

/* =====================================================
   5. FOCUS INDICATORS - Enhanced for Visibility
   ===================================================== */

/* High-contrast focus indicators */
*:focus-visible {
    outline: 3px solid var(--accent-orange, #ff8001) !important;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Interactive elements get extra visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent-orange, #ff8001) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 128, 1, 0.2);
}

/* Company cards focus */
.company-card:focus-visible {
    outline: 3px solid var(--accent-orange, #ff8001) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 128, 1, 0.3);
}

/* Filter buttons focus */
.filter-btn:focus-visible {
    outline: 3px solid var(--accent-orange, #ff8001) !important;
    outline-offset: 2px;
    box-shadow: 0 0 12px rgba(255, 128, 1, 0.4);
}

/* =====================================================
   6. ADDITIONAL ACCESSIBILITY IMPROVEMENTS
   ===================================================== */

/* Skip to main content link */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--accent-orange, #ff8001);
    color: white;
    padding: 14px 24px;
    text-decoration: none;
    font-weight: bold;
    z-index: 10000;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.skip-to-main:focus {
    top: 0;
}

/* Improve contrast for muted text */
.text-muted {
    color: #b0b0b0; /* Improved from default */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }

    a,
    button {
        outline: 2px solid currentColor;
    }
}

/* =====================================================
   7. SPACING IMPROVEMENTS FOR TOUCH TARGETS
   ===================================================== */

/* Add space between adjacent interactive elements */
.filters > * + *,
.footer-links > * + *,
.resource-links > * + * {
    margin-left: 8px;
}

/* Vertical spacing for stacked elements */
.filters {
    gap: 12px;
}

.footer-links {
    gap: 8px;
}

/* Ensure adequate padding around clickable areas */
.company-card {
    padding: 24px;
}

/* =====================================================
   8. ARIA LIVE REGIONS - Screen Reader Support
   ===================================================== */

/* Visually style ARIA live regions appropriately */
[role="status"],
[role="alert"],
[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

/* Loading indicators should be announced */
.loading {
    position: relative;
}

/* No results message needs proper styling */
.no-results {
    padding: 48px 24px;
    text-align: center;
    font-size: 18px;
}

/* =====================================================
   9. INTERACTIVE ELEMENT STATES
   ===================================================== */

/* Disabled state should be obvious */
button:disabled,
input:disabled,
select:disabled,
[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Active state for buttons */
button:active:not(:disabled),
.filter-btn:active:not(.active) {
    transform: scale(0.98);
}

/* Hover states maintain accessibility */
button:hover:not(:disabled),
a:hover,
.filter-btn:hover:not(.active) {
    opacity: 0.9;
}

/* =====================================================
   10. REDUCED MOTION SUPPORT
   ===================================================== */

@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;
    }
}