/* =============================================================================
   ACCESSIBILITY FIXES
   Screen reader support, keyboard navigation, zoom/reflow, contrast
   WCAG 2.1 AA compliance patches
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. ZOOM & REFLOW (WCAG 1.4.4 / 1.4.10)
   Content must be usable at 200% zoom and reflow at 320px equivalent
   ----------------------------------------------------------------------------- */

/* Prevent horizontal scroll at high zoom - use overflow-wrap instead of overflow:hidden */
.tournament-container {
    overflow: visible;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Ensure tables scroll horizontally rather than breaking layout */
.standings-table-wrapper,
.standings-table-container,
.participants-table-container,
.admin-groups-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Announce scrollable region */
}

/* At very high zoom (equivalent to ~320px), stack layouts */
@media (max-width: 320px) {
    .match-teams-compact {
        flex-direction: column;
        align-items: center;
    }
    
    .filter-controls {
        flex-direction: column;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .match-form-grid {
        grid-template-columns: 1fr;
    }
    
    .nav-menu {
        flex-direction: column;
    }
}

/* Ensure text resizes properly - no fixed heights that clip text */
.index-link-container {
    height: auto;
    min-height: 55px;
}

.index-link {
    height: auto;
    min-height: 55px;
}

/* Prevent text clipping at larger font sizes */
.team-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

@media (min-width: 768px) {
    .team-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}


/* -----------------------------------------------------------------------------
   2. FOCUS INDICATORS (WCAG 2.4.7)
   All interactive elements need visible focus indicators
   ----------------------------------------------------------------------------- */

/* NEVER remove outlines - override the problematic rule */
.nav-toggle:focus {
    outline: 3px solid #22d3ee !important;
    outline-offset: 2px !important;
}

/* Ensure all interactive elements have visible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #22d3ee;
    outline-offset: 2px;
}

/* For light theme pages */
body:not([data-theme="dark"]) a:focus-visible,
body:not([data-theme="dark"]) button:focus-visible,
body:not([data-theme="dark"]) input:focus-visible,
body:not([data-theme="dark"]) select:focus-visible,
body:not([data-theme="dark"]) [tabindex]:focus-visible {
    outline: 3px solid #2c5aa0;
    outline-offset: 2px;
}

/* Phase headers that act as buttons need focus styles */
.phase-header:focus-visible,
.collapsible-header:focus-visible,
.group-summary:focus-visible {
    outline: 3px solid #22d3ee;
    outline-offset: 2px;
}


/* -----------------------------------------------------------------------------
   3. COLOR CONTRAST FIXES (WCAG 1.4.3 - minimum 4.5:1 for text)
   Dark theme specific fixes
   ----------------------------------------------------------------------------- */

/* Fix low-contrast text on dark backgrounds */
/* #b0b0b0 on #1a1f2e = ~5.2:1 - borderline, bump up */
/* #c0c0c0 on #0f1419 = ~9.3:1 - OK */
/* #999 on dark = too low */

.match-header-status {
    color: #d4d4d4; /* was #d0d0d0, improve slightly */
}

.match-vs-inline,
.match-vs-separator,
.vs {
    color: #d4d4d4; /* was #d0d0d0 */
}

/* Placeholder/TBD text - ensure readable */
.bracket-slot {
    color: #e0e0e0;
}

/* Info text in dark theme */
.info-text {
    color: #d0d0d0; /* was #c0c0c0 in dark, #666 in light */
}

/* Breadcrumb separator */
.breadcrumb-separator {
    color: #d0d0d0; /* was #b0b0b0 */
}

/* Status text "Tulossa" / "Päättynyt" in match cards */
.match-status-text {
    color: #d4d4d4;
}

/* Admin group card details text */
.admin-group-details {
    color: #d0d0d0; /* was #c0c0c0 */
}

/* Score separator in set inputs */
.set-scores-grid .score-separator {
    color: #d0d0d0; /* was #b0b0b0 / #999 */
}

/* Ensure table header text has good contrast */
.standings-table th {
    color: #ffffff;
}

/* Fix placeholder text contrast in inputs (dark theme) */
.filter-group input::placeholder,
.form-group input::placeholder {
    color: #a0a0a0;
    opacity: 1;
}


/* -----------------------------------------------------------------------------
   4. TOUCH TARGETS (WCAG 2.5.8 - minimum 44x44px)
   ----------------------------------------------------------------------------- */

/* Ensure all interactive elements meet minimum touch target */
.nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.nav-toggle {
    min-width: 44px;
    min-height: 44px;
}

.quick-filter-btn,
.clear-filters,
.view-toggle button {
    min-height: 44px;
}

/* Phase headers and collapsible elements */
.phase-header,
.collapsible-header,
.group-summary {
    min-height: 44px;
}


/* -----------------------------------------------------------------------------
   5. MOTION / ANIMATION (WCAG 2.3.3)
   Already partially handled, reinforcing
   ----------------------------------------------------------------------------- */

@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;
    }
    
    .tournament-nav a:hover,
    .tournament-nav a:focus,
    button.primary:hover,
    button.primary:focus,
    .index-link-container:hover,
    .phase-header:hover {
        transform: none !important;
    }
}


/* -----------------------------------------------------------------------------
   6. HIGH CONTRAST MODE
   ----------------------------------------------------------------------------- */

@media (prefers-contrast: high) {
    /* Strengthen borders */
    .match,
    .match-card,
    .admin-group-card,
    .info-card,
    .bracket-slot {
        border: 2px solid currentColor;
    }
    
    /* Ensure focus rings are extra visible */
    *:focus-visible {
        outline-width: 4px;
    }
    
    /* Strengthen table borders */
    .standings-table td,
    .standings-table th {
        border: 1px solid currentColor;
    }
    
    /* Ensure badges are distinguishable */
    .status-finished,
    .status-pending {
        border: 2px solid currentColor;
    }
}


/* -----------------------------------------------------------------------------
   7. FORCED COLORS (Windows High Contrast Mode)
   ----------------------------------------------------------------------------- */

@media (forced-colors: active) {
    .nav-link.active,
    .tournament-nav a.active {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }
    
    .status-badge {
        border: 1px solid currentColor;
    }
    
    .phase-header,
    .collapsible-header {
        border: 1px solid currentColor;
    }
    
    /* Ensure focus indicators work */
    *:focus-visible {
        outline: 3px solid Highlight;
    }
}


/* -----------------------------------------------------------------------------
   8. SCREEN READER IMPROVEMENTS
   ----------------------------------------------------------------------------- */

/* Improve sr-only class to be more robust */
.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;
}

/* Ensure aria-live regions don't cause layout shifts */
[aria-live] {
    contain: layout;
}