/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   WCAG 2.1 Level AA Compliance
   ============================================ */

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

/* Default Focus Styles */
*:focus {
    outline: 3px solid #2D5016;
    outline-offset: 2px;
}

/* Better Focus for Interactive Elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid #2D5016;
    outline-offset: 3px;
}

/* Focus Within (for containers) */
.form-group:focus-within {
    /* Highlight form group when input is focused */
}

/* Remove Outline for Mouse Users Only */
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid #2D5016;
    outline-offset: 3px;
}

/* ============================================
   SKIP LINKS
   Allow keyboard users to skip navigation
   ============================================ */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #2D5016;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    font-weight: 700;
    z-index: 10000;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

/* HTML Usage:
<a href="#main-content" class="skip-link">Skip to main content</a>
*/

/* ============================================
   COLOR CONTRAST
   WCAG AA: 4.5:1 for normal text, 3:1 for large text
   ============================================ */

/* Good Contrast Examples */
.high-contrast-text {
    color: #2c2c2c;
    /* #2c2c2c on white = 12.6:1 ✓ */
    background: white;
}

.button-contrast {
    background: #2D5016;
    /* Dark green */
    color: white;
    /* White text = 8.2:1 ✓ */
}

/* Link Visibility */
a {
    color: #1a5c1a;
    /* Darker green for better contrast */
    text-decoration: underline;
    /* Always underline links */
}

a:hover,
a:focus {
    color: #0d3d0d;
    text-decoration: underline;
}

/* Error Messages */
.error-message {
    color: #c62828;
    /* Dark red, 4.6:1 contrast ✓ */
}

.success-message {
    color: #2e7d32;
    /* Dark green, 4.5:1 contrast ✓ */
}

/* ============================================
   HIGH CONTRAST MODE
   Support for Windows High Contrast Mode
   ============================================ */

@media (prefers-contrast: high) {

    /* Increase all contrast */
    body {
        background: white;
        color: black;
    }

    button,
    .btn {
        border: 2px solid currentColor;
    }

    a {
        text-decoration: underline;
        font-weight: 700;
    }

    .product-card {
        border: 2px solid #000;
    }
}

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

    /* Keep essential transitions for state changes */
    button:active,
    .btn:active {
        transition: opacity 0.1s ease;
    }
}

/* ============================================
   SCREEN READER ONLY TEXT
   Hide visually, but keep for screen readers
   ============================================ */

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

/* Focusable sr-only elements */
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Usage:
<span class="sr-only">Close modal</span>
<button aria-label="Close modal">×</button>
*/

/* ============================================
   ARIA LIVE REGIONS
   Announce dynamic content changes
   ============================================ */

.status-message {
    /* Announces changes to screen readers */
}

/* HTML Usage:
<div role="status" aria-live="polite" aria-atomic="true">
  Item added to cart
</div>
*/

.alert-message {
    /* Interrupts screen reader */
}

/* HTML Usage:
<div role="alert" aria-live="assertive">
  Error: Please fill required fields
</div>
*/

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

/* Tab Order (natural DOM order is best) */
/* Use tabindex="-1" to remove from tab order */
/* Use tabindex="0" to add to tab order */
/* Avoid tabindex > 0 */

/* Focus Trap in Modals */
.modal-focus-trap {
    /* Keep focus within modal when open */
    /* Implement in JavaScript */
}

/* Arrow Key Navigation for Carousels */
.carousel-navigation {
    /* Add arrow key support in JS */
}

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

/* Always Associate Labels with Inputs */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c2c2c;
}

/* Use for attribute OR wrap input */
/* Method 1: For attribute */
/*
<label for="email">Email</label>
<input type="email" id="email" name="email">
*/

/* Method 2: Wrap input */
/*
<label>
  Email
  <input type="email" name="email">
</label>
*/

/* Required Field Indicators */
.required-indicator {
    color: #c62828;
    margin-left: 4px;
}

input:required {
    /* Don't rely only on color */
}

/* Error Messages */
.input-error {
    border-color: #c62828;
    background: #ffebee;
}

.error-message {
    color: #c62828;
    font-size: 14px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.error-message::before {
    content: '⚠';
    /* Visual indicator */
}

/* Success States */
.input-success {
    border-color: #2e7d32;
    background: #e8f5e9;
}

/* Placeholder Text */
::placeholder {
    color: #757575;
    /* Ensure 4.5:1 contrast */
    opacity: 1;
}

/* ============================================
   BUTTON ACCESSIBILITY
   ============================================ */

/* Disabled Buttons */
button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon-Only Buttons Need Labels */
.icon-button {
    /* Add aria-label */
}

/* HTML Usage:
<button aria-label="Close menu">
  <svg>...</svg>
</button>
*/

/* Loading State Announcement */
.button-loading {
    position: relative;
}

.button-loading::after {
    content: '';
    /* Spinner */
}

/* HTML Usage:
<button aria-busy="true" aria-live="polite">
  <span aria-hidden="true">Loading...</span>
  <span class="sr-only">Loading, please wait</span>
</button>
*/

/* ============================================
   IMAGE ACCESSIBILITY
   ============================================ */

/* All Images Need Alt Text */
img {
    /* alt="" for decorative images */
    /* alt="Description" for content images */
}

/* Decorative Images */
.decorative-image {
    alt: '';
    role: 'presentation';
}

/* Complex Images (charts, graphs) */
.complex-image {
    /* Provide long description */
}

/* HTML Usage:
<img src="chart.png" alt="Sales chart" 
     aria-describedby="chart-description">
<div id="chart-description" class="sr-only">
  Detailed description of chart data
</div>
*/

/* ============================================
   VIDEO & AUDIO ACCESSIBILITY
   ============================================ */

/* Captions for Videos */
video {
    /* Add <track> for captions */
}

/* HTML Usage:
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>
*/

/* Transcripts for Audio */
.audio-transcript {
    margin-top: 16px;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
}

/* ============================================
   TABLES ACCESSIBILITY
   ============================================ */

/* Use <th> for Headers */
table th {
    text-align: left;
    font-weight: 700;
    background: #f5f5f5;
}

/* Scope Attribute */
/* HTML Usage:
<th scope="col">Column Header</th>
<th scope="row">Row Header</th>
*/

/* Caption for Tables */
caption {
    font-weight: 700;
    margin-bottom: 8px;
    text-align: left;
}

/* ============================================
   NAVIGATION ACCESSIBILITY
   ============================================ */

/* Landmark Roles */
header {
    /* role="banner" (implicit) */
}

nav {
    /* role="navigation" (implicit) */
}

main {
    /* role="main" (implicit) */
}

footer {
    /* role="contentinfo" (implicit) */
}

/* Multiple Navs Need Labels */
/* HTML Usage:
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Footer navigation">...</nav>
*/

/* Current Page Indicator */
.nav-link[aria-current="page"] {
    font-weight: 700;
    color: #2D5016;
}

/* Breadcrumb Navigation */
.breadcrumb {
    /* Add aria-label="Breadcrumb" */
}

/* ============================================
   MODAL ACCESSIBILITY
   ============================================ */

/* HTML Usage:
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Modal Title</h2>
  <button aria-label="Close modal">×</button>
</div>
*/

.modal {
    /* Focus trap implementation in JS */
    /* Return focus to trigger on close */
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
    /* Strong backdrop for clear separation */
}

/* ============================================
   TOOLTIP ACCESSIBILITY
   ============================================ */

/* HTML Usage:
<button aria-describedby="tooltip-1">
  Help
</button>
<div role="tooltip" id="tooltip-1">
  Tooltip content
</div>
*/

.tooltip {
    /* Show on focus, not just hover */
}

button:focus+.tooltip,
button:hover+.tooltip {
    display: block;
}

/* ============================================
   CARDS & LINKS
   ============================================ */

/* Entire Card Clickable */
.card-link {
    /* Wrap entire card or use ::after trick */
}

.card-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Announce Card Purpose */
/* HTML Usage:
<article aria-labelledby="product-1-title">
  <h3 id="product-1-title">Product Name</h3>
  <a href="/product/1">View product</a>
</article>
*/

/* ============================================
   FONT SIZE & READABILITY
   ============================================ */

/* Minimum 16px Base Font */
body {
    font-size: 16px;
    line-height: 1.6;
    /* 1.5-2.0 recommended */
}

/* Allow Text Scaling */
html {
    /* Don't use max-width on body text */
    /* Allow up to 200% zoom */
}

/* Line Length */
.readable-text {
    max-width: 75ch;
    /* 45-75 characters per line */
}

/* Line Height */
p,
li {
    line-height: 1.6;
    /* At least 1.5 */
}

/* Paragraph Spacing */
p+p {
    margin-top: 1em;
}

/* ============================================
   LANGUAGE SUPPORT
   ============================================ */

/* HTML lang attribute */
/* <html lang="hi"> for Hindi */
/* <html lang="en"> for English */

/* Language-specific content */
/* <span lang="en">Hello</span> in Hindi page */

/* ============================================
   PRINT ACCESSIBILITY
   ============================================ */

@media print {

    /* High contrast for printing */
    body {
        background: white;
        color: black;
    }

    /* Show URLs for links */
    a[href]::after {
        content: ' (' attr(href) ')';
    }

    /* Don't show decorative images */
    img[role="presentation"] {
        display: none;
    }
}

/* ============================================
   CHECKLIST FOR ACCESSIBILITY
   ============================================ */

/*
✓ Color contrast ≥ 4.5:1
✓ Keyboard accessible
✓ Focus visible
✓ Skip links
✓ Alt text for images
✓ Labels for form inputs
✓ ARIA where needed
✓ Heading hierarchy (h1 > h2 > h3)
✓ Semantic HTML
✓ Reduced motion support
✓ Screen reader testing
✓ Keyboard navigation testing
✓ Zoom up to 200%
✓ Touch targets ≥ 44x44px
*/

/* ============================================
   TESTING TOOLS
   ============================================ */

/*
- axe DevTools (Chrome extension)
- WAVE (Web Accessibility Evaluation Tool)
- Lighthouse Accessibility audit
- Screen readers: NVDA, JAWS, VoiceOver
- Keyboard only navigation
- Color contrast tools
*/

/* ============================================
END OF ACCESSIBILITY ENHANCEMENTS
Test with real users with disabilities!
============================================ */