/**
 * Accessibility CSS
 * WCAG 2.2 Level AA compliance styles
 */

/* =================================================================
   SKIP LINKS - WCAG 2.4.1 Bypass Blocks
   ================================================================= */

.skip-links {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: #033319;
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transition: top var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    
}

.skip-link:focus {
    top: var(--spacing-md);
    outline: var(--focus-ring-width) solid var(--color-white);
    outline-offset: var(--focus-ring-offset);
    color:#fff;
}

/* =================================================================
   FOCUS INDICATORS - WCAG 2.4.7, 2.4.13 (NEW in 2.2)
   Focus must have:
   - 3:1 contrast ratio minimum
   - At least 2px thick
   - Visible and not obscured
   ================================================================= */

/* Remove default focus outline */
*:focus {
    outline: none;
}

/* Custom focus visible styles */
*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
}

/* Button focus */
button:focus-visible,
.button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Link focus */
a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    text-decoration: underline;
}

/* Input focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

/* Dialog focus */
dialog:focus-visible {
    outline: none; /* Dialog gets focus but doesn't need outline since content inside gets it */
}

/* Map focus (for keyboard navigation) */
.map-canvas:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: -3px; /* Inset to stay within bounds */
}

/* =================================================================
   PROGRAMMATIC FOCUS CONTAINERS - tabindex="-1"
   
   Elements with tabindex="-1" fall into two categories:
   
   1. CONTAINERS that receive programmatic focus for screen reader
      announcements (panels, dialogs, headings). These should NOT
      show a visible focus ring — the ring would appear on the
      container wrapper, which is visually confusing and not the
      interactive element. These are scoped explicitly below.
   
   2. INTERACTIVE ELEMENTS that are temporarily removed from tab
      order (e.g. items in a roving tabindex widget). These SHOULD
      show a focus ring when focused via arrow keys.
   
   The old blanket rule `[tabindex="-1"]:focus { outline: none }`
   suppressed outlines on both categories — removing it here and
   scoping only to known containers. (WCAG 2.4.7, 2.4.13)
   ================================================================= */

/* Side panel — receives programmatic focus on open/close */
#side-panel[tabindex="-1"]:focus,
#side-panel-content[tabindex="-1"]:focus {
    outline: none;
}

/* Info panel — receives programmatic focus when opened */
#info-panel[tabindex="-1"]:focus {
    outline: none;
}

/* Building / parking list containers — programmatic scroll targets */
#building-list-items[tabindex="-1"]:focus,
#parking-list-items[tabindex="-1"]:focus,
#ae-list-items[tabindex="-1"]:focus,
#ap-list-items[tabindex="-1"]:focus {
    outline: none;
}

/* Section headings that receive programmatic focus for SR announcement */
#accessible-section-heading[tabindex="-1"]:focus,
#building-panel-title[tabindex="-1"]:focus,
#parking-panel-title[tabindex="-1"]:focus,
#ae-panel-title[tabindex="-1"]:focus,
#ap-panel-title[tabindex="-1"]:focus {
    outline: none;
}

/* Map canvas — has its own :focus-visible rule above */
.map-canvas[tabindex="-1"]:focus {
    outline: none;
}

/* =================================================================
   HIGH CONTRAST MODE - WCAG 1.4.11 Non-text Contrast
   ================================================================= */

@media (prefers-contrast: more) {
    :root {
        --focus-ring-width: 4px;
        --color-border: var(--color-gray-900);
    }
    
    /* Ensure all borders are visible */
    button,
    input,
    select,
    textarea {
        border: 2px solid currentColor;
    }
    
    /* Make sure focus is super obvious */
    *:focus-visible {
        outline-width: 4px;
        outline-offset: 3px;
    }
}

/* =================================================================
   REDUCED MOTION - WCAG 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;
    }
    
    /* Instant menu transitions instead of slides */
    .side-panel {
        transition: none !important;
    }
    
    /* Instant dialog appearance */
    dialog {
        transition: none !important;
    }
}

/* =================================================================
   SCREEN READER ONLY CONTENT
   ================================================================= */

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

/* Allow screen reader only content to be focusable */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    padding: var(--spacing-sm);
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
}

/* =================================================================
   ARIA LIVE REGIONS
   Hidden but announced to screen readers
   ================================================================= */

.sr-only[aria-live] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =================================================================
   KEYBOARD NAVIGATION HELPERS
   ================================================================= */

/* Show keyboard focus within */
.keyboard-focus-within:focus-within {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* Roving tabindex pattern — items temporarily set to tabindex="-1"
   still show focus rings when reached via arrow keys. No blanket
   suppression here; see the containers section above for exceptions. */

[tabindex="0"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* =================================================================
   TARGET SIZE - WCAG 2.5.8 (NEW in 2.2)
   All interactive targets minimum 24x24px (we use 44x44px)
   ================================================================= */

/* Ensure all interactive elements meet minimum size */
a,
button,
[role="button"],
[role="link"],
input[type="checkbox"],
input[type="radio"],
select {
    min-width: 44px;
    min-height: 44px;
}

/* Exception for inline text links */
a:not([role="button"]) {
    min-width: auto;
    min-height: auto;
}

/* Ensure spacing between interactive elements */
button + button,
a + button,
button + a {
    margin-left: var(--spacing-xs);
}

/* =================================================================
   FOCUS NOT OBSCURED - WCAG 2.4.11, 2.4.12 (NEW in 2.2)
   Ensure focused elements aren't hidden by sticky/fixed elements
   ================================================================= */

/* Add scroll padding to account for sticky header */
html {
    scroll-padding-top: calc(var(--header-height-mobile) + var(--spacing-md));
}

/* Ensure focus is visible even with floating elements */
.side-panel-content:focus-within {
    scroll-padding-bottom: var(--spacing-xl);
}

/* =================================================================
   COLOR CONTRAST - WCAG 1.4.3 Contrast (Minimum)
   Text must have 4.5:1 contrast ratio (3:1 for large text)
   ================================================================= */

/* Ensure text on colored backgrounds has sufficient contrast */
.text-on-primary {
    color: var(--color-white);
}

.text-on-light {
    color: var(--color-gray-900);
}

/* Muted text must still meet contrast requirements */
.text-muted {
    color: var(--color-gray-600); /* Ensures 4.5:1 on white */
}

/* =================================================================
   ERROR IDENTIFICATION - WCAG 3.3.1
   ================================================================= */

.error-message {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.error-message::before {
    content: '⚠';
    flex-shrink: 0;
}

/* Input error state */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--color-error);
    border-width: 2px;
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
    outline-color: var(--color-error);
}

/* =================================================================
   LOADING STATES - Communicate to screen readers
   ================================================================= */

[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.6;
}

.loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* =================================================================
   DISABLED STATES
   ================================================================= */

[disabled],
[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =================================================================
   PRINT STYLES - Accessibility for printed content
   ================================================================= */

@media print {
    /* Hide navigation and controls */
    .side-panel,
    .map-controls,
    .skip-links,
    .map-footer {
        display: none;
    }
    
    /* Ensure text is readable */
    body {
        color: #000;
        background: #fff;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
        color: #666;
    }
}