/**
 * Accessibility Styles for Physics Labs
 * WCAG 2.1 Level AA Compliance
 * 
 * These styles ensure the site is accessible to all users,
 * including those using screen readers, keyboard navigation,
 * and assistive technologies.
 */

/* ==========================================================================
   Skip Links - WCAG 2.1 Requirement
   ========================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 1rem 1.5rem;
    background: var(--color-link);
    color: var(--text-inverse);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    left: 0;
    top: 0;
    outline: 3px solid var(--color-focus);
    outline-offset: 0;
}

/* ==========================================================================
   Visually Hidden - Available to Screen Readers
   ========================================================================== */

.visually-hidden,
.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;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==========================================================================
   Focus Indicators - Keyboard Navigation
   ========================================================================== */

/* Modern focus management: Show outline ONLY for keyboard navigation */

/* Remove default focus outline (will be added back for keyboard users only) */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: none; /* Removed for mouse clicks */
}

/* Show focus outline ONLY for keyboard navigation (modern browsers) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-outline-width, 2px) solid var(--color-focus);
    outline-offset: var(--focus-outline-offset, 2px);
}

/* Fallback: Enhanced focus for keyboard navigation mode (older browser support) */
body.keyboard-navigation *:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(207, 184, 124, 0.1); /* UCB gold with transparency */
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    /* Ensure borders are visible in high contrast mode */
    button,
    a,
    input,
    select,
    textarea {
        border: 2px solid currentColor;
    }
    
    /* Ensure focus indicators are prominent */
    *:focus {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }
}

/* ==========================================================================
   Reduced Motion - Respect User Preferences
   ========================================================================== */

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

/* ==========================================================================
   Color Contrast - WCAG AA Minimum 4.5:1
   ========================================================================== */

/* Error messages - high contrast */
.message-error,
.error {
    background: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    border-left: 4px solid var(--alert-danger-border);
}

/* Success messages - high contrast */
.message-success,
.success {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-left: 4px solid var(--alert-success-border);
}

/* Warning messages - high contrast */
.message-warning,
.warning {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-left: 4px solid var(--alert-warning-border);
}

/* Info messages - high contrast */
.message-info,
.info {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-left: 4px solid var(--alert-info-border);
}

/* ==========================================================================
   Links - Accessible and Distinguishable
   ========================================================================== */

/* Ensure links are distinguishable from surrounding text */
a {
    color: var(--color-link);
    text-decoration: underline;
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

a:visited {
    color: var(--color-link-visited);  /* UCB: same as link color, no purple */
}

/* Current page indicator in navigation */
[aria-current="page"] {
    font-weight: bold;
    border-bottom: 3px solid var(--color-link);
}

/* ==========================================================================
   Form Elements - Accessible Labels and Errors
   ========================================================================== */

/* Ensure all form elements have visible labels */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--form-label-text);
}

/* Required field indicator */
.required::after,
label.required::after {
    content: " *";
    color: var(--form-required-color);
    font-weight: bold;
}

/* Error states */
input:invalid,
select:invalid,
textarea:invalid {
    border-color: var(--form-border-error);
    border-width: 2px;
}

.error-message {
    color: var(--form-border-error);
    font-weight: 600;
    margin-top: 0.25rem;
    display: block;
}

/* ==========================================================================
   ARIA Live Regions - Screen Reader Announcements
   ========================================================================== */

[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

/* ==========================================================================
   Touch Targets - Minimum 44x44 pixels (WCAG 2.1)
   ========================================================================== */

/* Apply touch target sizing only to button-like elements and standalone links */
/* Exclude inline text links (links within paragraphs, lists, etc.) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
a.button,
nav:not([aria-label="breadcrumb" i]) a,
.section-card,
.quick-link {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
}

/* Inline text links should not have minimum dimensions */
/* This ensures links in paragraphs don't have extra spacing */
p a,
li a:not(nav li a),
td a,
th a {
    min-height: unset;
    min-width: unset;
    padding: 0;
}

/* ==========================================================================
   Tables - Accessible Data Tables
   ========================================================================== */

/* Ensure table headers are clearly identified */
th {
    text-align: left;
    font-weight: bold;
    background: var(--table-header-bg);
    color: var(--table-header-text);
    border-bottom: 2px solid var(--table-border);
}

/* Zebra striping for better readability */
tbody tr:nth-child(even) {
    background: var(--table-row-alt-bg);
}

/* Row hover for scan-ability */
tbody tr:hover {
    background: var(--table-row-hover-bg);
}

/* ==========================================================================
   Images - Alt Text Enforcement
   ========================================================================== */

/* Images without alt text - should not happen but visual indicator */
img:not([alt]) {
    border: 3px solid var(--form-border-error);
}

/* ==========================================================================
   Headings - Proper Hierarchy
   ========================================================================== */

/* Ensure heading hierarchy is maintained visually */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* ==========================================================================
   Dark Mode - Accessibility in Dark Theme
   ========================================================================== */

[data-theme="dark"] .required::after,
[data-theme="dark"] label.required::after {
    color: var(--form-required-color);
}

[data-theme="dark"] input:invalid,
[data-theme="dark"] select:invalid,
[data-theme="dark"] textarea:invalid {
    border-color: var(--form-border-error);
}

[data-theme="dark"] .error-message {
    color: var(--form-border-error);
}

[data-theme="dark"] .invalid-feedback {
    color: var(--form-border-error);
}

/* ==========================================================================
   Print Styles - Accessibility in Print
   ========================================================================== */

@media print {
    /* Show URL for links */
    a[href]::after {
        content: " (" attr(href) ")";
    }

    /* Remove skip links */
    .skip-link {
        display: none;
    }

    /* Ensure sufficient contrast */
    body {
        background: white;
        color: black;
    }
}