/*
 * ============================================================================
 * St. Cloud State University - Accessibility Utilities
 * ============================================================================
 * 
 * WCAG 2.1 AA Compliant Accessibility Styles
 * 
 * PURPOSE:
 * Provides accessibility utilities including:
 * - Screen reader only content
 * - Skip links for keyboard navigation
 * - Focus indicators
 * - ARIA live regions
 * - High contrast mode support
 * 
 * MIGRATION PATH:
 * This entire file can be copied to scsu-main-styles.css as-is.
 * These are universal accessibility patterns that benefit all applications.
 * 
 * STANDARDS:
 * - WCAG 2.1 Level AA compliance
 * - Section 508 compliance
 * - Keyboard navigation support
 * - Screen reader compatibility (NVDA, JAWS, VoiceOver)
 * 
 * ============================================================================
 */

/* ============================================
   SCREEN READER ONLY CONTENT
   Hide content visually but keep it available to screen readers
   ============================================ */

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

/* Focusable SR-only content (e.g., skip links) */
.sr-only-focusable:active,
.sr-only-focusable:focus,
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ============================================
   SKIP NAVIGATION LINKS
   Allow keyboard users to skip repetitive content
   WCAG 2.1 SC 2.4.1 Bypass Blocks
   ============================================ */

.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    z-index: var(--scsu-z-tooltip, 1070);
    padding: var(--scsu-spacing-3, 0.75rem) var(--scsu-spacing-5, 1.5rem);
    background-color: var(--scsu-color-primary, #b31b34);
    color: var(--scsu-text-inverse, #ffffff);
    font-weight: var(--scsu-font-weight-semibold, 600);
    text-decoration: none;
    border-radius: 0 0 var(--scsu-border-radius, 0.25rem) 0;
    transition: top var(--scsu-transition-fast, 0.15s ease-in-out);
}

.skip-link:focus,
.skip-link:active {
    top: 0;
    outline: 3px solid var(--scsu-color-secondary-dark, #000000);
    outline-offset: 2px;
}

.skip-link:hover {
    background-color: var(--scsu-color-secondary-dark, #000000);
    color: var(--scsu-text-inverse, #ffffff);
}

/* Skip link container for multiple skip links */
.skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--scsu-z-tooltip, 1070);
}

/* ============================================
   FOCUS INDICATORS
   Visible, high-contrast focus states for keyboard navigation
   WCAG 2.1 SC 2.4.7 Focus Visible
   ============================================ */

/* Default focus style for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
    outline: 3px solid var(--scsu-color-primary, #b31b34);
    outline-offset: 2px;
    box-shadow: none;
}

/* Focus style for elements with dark backgrounds */
.bg-dark a:focus-visible,
.bg-dark button:focus-visible,
.sidebar a:focus-visible,
.sidebar button:focus-visible {
    outline-color: var(--scsu-text-inverse, #ffffff);
}

/* Remove default browser focus outline when :focus-visible is supported */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:not([tabindex="-1"]):focus {
        outline: 3px solid var(--scsu-color-primary, #b31b34);
        outline-offset: 2px;
    }
}

/* ============================================
   REQUIRED FIELD INDICATORS
   ============================================ */

.required-indicator,
.field-required-indicator {
    color: var(--scsu-color-danger, #dc3545);
    font-weight: var(--scsu-font-weight-bold, 700);
    margin-left: 0.25rem;
}

/* For screen readers */
.required-indicator::after,
.field-required-indicator::after {
    content: " (required)";
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   ARIA LIVE REGIONS
   Announce dynamic content changes to screen readers
   ============================================ */

.aria-live-polite,
[aria-live="polite"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aria-live-assertive,
[aria-live="assertive"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   ACCESSIBLE HIDING
   Hide elements from both visual and assistive technology
   ============================================ */

.hidden,
[hidden],
[aria-hidden="true"] {
    display: none !important;
}

/* ============================================
   MINIMUM TOUCH TARGET SIZE
   Ensure interactive elements meet 44x44 pixel minimum
   WCAG 2.1 SC 2.5.5 Target Size (Level AAA, aim for Level A)
   ============================================ */

.accessible-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Apply to small buttons/links */
button.btn-sm,
a.btn-sm,
.small-interactive {
    min-width: 44px;
    min-height: 44px;
    padding: var(--scsu-spacing-2, 0.5rem) var(--scsu-spacing-4, 1rem);
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   Ensure content is visible in Windows High Contrast Mode
   ============================================ */

@media (prefers-contrast: high) {
    *:focus-visible {
        outline-width: 4px;
        outline-offset: 3px;
    }
    
    .btn-scsu-red,
    .btn-scsu-primary {
        border-width: 3px !important;
    }
}

/* ============================================
   REDUCED MOTION
   Respect user's motion preferences
   WCAG 2.1 SC 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;
    }
}

/* ============================================
   FORCED COLORS MODE (Windows High Contrast)
   ============================================ */

@media (forced-colors: active) {
    *:focus-visible {
        outline: 3px solid;
    }
    
    .btn-scsu-red,
    .btn-scsu-primary,
    .btn-scsu-secondary {
        border: 2px solid;
    }
}

/* ============================================
   ACCESSIBLE TEXT UTILITIES
   ============================================ */

/* Ensure sufficient line spacing for readability */
.accessible-text {
    line-height: var(--scsu-line-height-lg, 1.75);
    letter-spacing: 0.02em;
}

/* Large text for better readability */
.text-large {
    font-size: var(--scsu-font-size-lg, 1.125rem);
    line-height: var(--scsu-line-height-lg, 1.75);
}

/* ============================================
   ERROR ANNOUNCEMENTS
   Link errors to form fields for screen readers
   ============================================ */

.error-message,
.validation-error {
    color: var(--scsu-color-danger, #dc3545);
    font-size: var(--scsu-font-size-sm, 0.875rem);
    margin-top: var(--scsu-spacing-1, 0.25rem);
    display: block;
}

/* Associate error with form field */
.form-control[aria-invalid="true"] {
    border-color: var(--scsu-color-danger, #dc3545);
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* ============================================
   ACCESSIBLE TABLES
   Ensure table headers are properly associated
   ============================================ */

.accessible-table caption {
    padding-top: var(--scsu-spacing-3, 0.75rem);
    padding-bottom: var(--scsu-spacing-3, 0.75rem);
    color: var(--scsu-text-secondary, #6c757d);
    text-align: left;
    caption-side: top;
    font-weight: var(--scsu-font-weight-semibold, 600);
}

/* Hide caption visually but keep for screen readers */
.accessible-table .sr-only-caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   ACCESSIBLE MODALS
   Trap focus within modal dialogs
   ============================================ */

.modal[aria-modal="true"] {
    /* Focus trap implementation should be handled by JavaScript */
    /* This ensures proper ARIA attributes are respected */
}

/* Prevent background scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* ============================================
   ACCESSIBLE LOADING INDICATORS
   ============================================ */

.loading-spinner[role="status"] {
    /* Ensure loading state is announced to screen readers */
}

.loading-spinner .sr-only {
    /* "Loading..." text for screen readers */
}

/* ============================================
   COLOR CONTRAST UTILITIES
   Ensure text meets WCAG AA contrast requirements
   ============================================ */

/* Light text on dark background (contrast ratio ≥ 4.5:1) */
.text-on-dark {
    color: var(--scsu-text-inverse, #ffffff);
}

/* Dark text on light background (contrast ratio ≥ 4.5:1) */
.text-on-light {
    color: var(--scsu-text-primary, #212529);
}

/* End of SCSU Accessibility Utilities */