/**
 * Line Innovations - Accessibility (A11y) Styles
 *
 * WCAG 2.1 Level AA Compliance
 *
 * Includes:
 * - Skip to main content link
 * - Focus indicators
 * - Screen reader only text
 * - High contrast mode support
 * - Reduced motion support
 * - Keyboard navigation improvements
 */

/* ========================================
 * SKIP TO MAIN CONTENT LINK
 * ========================================
 * Allows keyboard users to skip navigation and jump to main content
 */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: 1rem 1.5rem;
    background: #667eea;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
    transition: top 0.3s ease;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid #764ba2;
    outline-offset: 2px;
}

/* ========================================
 * FOCUS INDICATORS
 * ========================================
 * Visible focus states for keyboard navigation
 */

/* Links */
a:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Buttons */
button:focus,
.btn:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* Form inputs */
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

/* Remove default focus outline only if custom is applied */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

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

/* Show on focus (useful for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ========================================
 * HIGH CONTRAST MODE SUPPORT
 * ========================================
 * Ensure elements are visible in Windows High Contrast Mode
 */
@media (prefers-contrast: high) {
    /* Increase border visibility */
    .btn,
    input,
    select,
    textarea {
        border: 2px solid currentColor;
    }

    /* Ensure focus is visible */
    :focus {
        outline: 3px solid currentColor;
        outline-offset: 3px;
    }

    /* Increase text contrast */
    body {
        color: #000000;
        background: #ffffff;
    }

    a {
        color: #0000ff;
        text-decoration: underline;
    }
}

/* ========================================
 * REDUCED MOTION SUPPORT
 * ========================================
 * Respect user's preference for reduced motion
 */
@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;
    }
}

/* ========================================
 * TOUCH TARGET SIZE
 * ========================================
 * Ensure interactive elements are at least 44x44px (WCAG 2.5.5)
 */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.5rem;
}

/* Mobile: increase touch targets */
@media (max-width: 768px) {
    button,
    .btn,
    a.btn {
        min-height: 48px;
        min-width: 48px;
    }

    /* Navigation links */
    .nav-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ========================================
 * COLOR CONTRAST IMPROVEMENTS
 * ========================================
 * Ensure WCAG AA contrast ratio (4.5:1 for normal text, 3:1 for large text)
 */

/* Light text on dark backgrounds */
.footer,
.hero-section {
    /* Ensure sufficient contrast if using colored backgrounds */
    color: #ffffff;
}

/* Links need 3:1 contrast against background */
a {
    /* Using default link color with sufficient contrast */
    color: #0056b3; /* 4.51:1 contrast on white */
}

a:hover,
a:focus {
    color: #003d82; /* Higher contrast on hover */
}

/* Error messages (red) */
.error,
.form-message-error {
    color: #721c24; /* 7.0:1 contrast */
    background-color: #f8d7da;
}

/* Success messages (green) */
.success,
.form-message-success {
    color: #155724; /* 7.4:1 contrast */
    background-color: #d4edda;
}

/* ========================================
 * KEYBOARD NAVIGATION IMPROVEMENTS
 * ========================================
 */

/* Tabindex -1 elements should not receive focus outline */
[tabindex="-1"]:focus {
    outline: none !important;
}

/* Ensure interactive elements are keyboard accessible */
[role="button"],
[role="link"],
[role="tab"] {
    cursor: pointer;
}

[role="button"]:focus,
[role="link"]:focus,
[role="tab"]:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* ========================================
 * FORM ACCESSIBILITY
 * ========================================
 */

/* Required field indicator */
.required-indicator,
label .required {
    color: #d32f2f;
}

label .required::before {
    content: "* ";
}

/* Error state for form fields */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #d32f2f;
    border-width: 2px;
}

/* Associated error message */
.field-error[role="alert"] {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ========================================
 * HEADING HIERARCHY
 * ========================================
 * Ensure proper heading levels for screen readers
 */

/* Visually style headings consistently while maintaining semantic hierarchy */
.h1-style {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.h2-style {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
}

.h3-style {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ========================================
 * ICON ACCESSIBILITY
 * ========================================
 * Ensure icons have accessible alternatives
 */

/* Hide decorative icons from screen readers */
.icon[aria-hidden="true"] {
    /* Purely decorative, adjacent text provides context */
}

/* Icons that convey meaning need labels */
.icon:not([aria-hidden="true"]) {
    /* Must have aria-label or sr-only text */
}

/* ========================================
 * TABLE ACCESSIBILITY
 * ========================================
 */
table {
    /* Ensure tables have proper structure */
}

th {
    /* Ensure headers are properly marked */
    font-weight: 600;
}

/* Table caption for context */
caption {
    font-weight: 600;
    text-align: left;
    padding: 0.5rem 0;
}

/* ========================================
 * LANGUAGE SWITCHER ACCESSIBILITY
 * ========================================
 */
.language-switcher a {
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.language-switcher a:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* ========================================
 * MOBILE MENU ACCESSIBILITY
 * ========================================
 */
.mobile-menu-toggle {
    min-height: 44px;
    min-width: 44px;
}

.mobile-menu-toggle:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Hide mobile menu properly when closed */
.nav-menu[aria-hidden="true"] {
    display: none;
}

/* ========================================
 * PRINT ACCESSIBILITY
 * ========================================
 */
@media print {
    /* Show link URLs when printing */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.875em;
    }

    /* Don't print navigation, headers, footers */
    .nav,
    .header,
    .footer,
    .skip-to-main {
        display: none;
    }

    /* Ensure sufficient contrast */
    * {
        color: #000000 !important;
        background: #ffffff !important;
    }
}

/* ========================================
 * DARK MODE SUPPORT (Optional)
 * ========================================
 */
@media (prefers-color-scheme: dark) {
    /* Uncomment and customize if implementing dark mode */
    /*
    body {
        background: #1a1a1a;
        color: #e0e0e0;
    }

    a {
        color: #8ab4f8;
    }

    .btn-primary {
        background: #8ab4f8;
        color: #1a1a1a;
    }
    */
}