/* 
 * KhoobLife Accessibility Enhancements
 * Ensuring WCAG 2.1 AA compliance
 */

/* ==========================================================================
   SCREEN READER IMPROVEMENTS
   ========================================================================== */

/* Screen reader only content */
.sr-only,
.screen-reader-text {
    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;
}

/* Show screen reader text when focused */
.sr-only:focus,
.screen-reader-text:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: var(--text-secondary, #36454F) !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    z-index: 999999 !important;
}

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

/* Focus improvements - using KhoobLife colors */
*:focus-visible {
    outline: 3px solid var(--primary-color, #A8B8A0) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(168, 184, 160, 0.3) !important;
}

/* Remove focus outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Specific focus styles for links and buttons */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--primary-color, #A8B8A0) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(168, 184, 160, 0.3) !important;
}

/* Card focus for keyboard navigation */
.post-card:focus-within {
    outline: 2px solid var(--primary-color, #A8B8A0);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(168, 184, 160, 0.2);
}

/* ==========================================================================
   HIGH CONTRAST MODE SUPPORT
   ========================================================================== */

@media (prefers-contrast: high) {
    /* Ensure sufficient contrast in high contrast mode */
    .homepage-hero {
        background: #000 !important;
        color: #fff !important;
        border: 3px solid #fff !important;
    }
    
    .hero-cta {
        background: #fff !important;
        color: #000 !important;
        border: 3px solid #000 !important;
    }
    
    .post-card {
        border: 2px solid currentColor !important;
        background: #fff !important;
    }
    
    .post-category {
        background: #000 !important;
        color: #fff !important;
        border: 2px solid #fff !important;
    }
    
    .newsletter-section {
        background: #f0f0f0 !important;
        border: 2px solid #000 !important;
    }
    
    .newsletter-input {
        border: 2px solid #000 !important;
    }
    
    .newsletter-button {
        background: #000 !important;
        color: #fff !important;
        border: 2px solid #fff !important;
    }
    
    /* Override any KhoobLife colors for high contrast */
    :root {
        --primary-color: #2D5016 !important;
        --secondary-color: #D2691E !important;
        --text-primary: #000000 !important;
        --bg-primary: #FFFFFF !important;
    }
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */

@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;
    }
    
    /* Remove parallax and complex transforms */
    .homepage-hero::before {
        animation: none !important;
        transform: none !important;
    }
    
    .post-card:hover {
        transform: none !important;
    }
    
    .hero-cta:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   FONT SIZE AND ZOOM SUPPORT
   ========================================================================== */

/* Ensure content is readable at 200% zoom */
@media screen and (min-width: 1280px) {
    html {
        font-size: 18px;
    }
}

/* Support for user font size preferences */
html {
    font-size: clamp(14px, 1vw, 18px);
}

/* Ensure minimum touch target sizes (44px × 44px) */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.hero-cta,
.read-more,
.newsletter-button,
.post-category,
a[role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   ARIA LIVE REGIONS
   ========================================================================== */

[aria-live] {
    position: relative;
}

[aria-live="polite"],
[aria-live="assertive"] {
    /* Ensure live regions are announced */
    speak: auto;
}

/* Style for loading states */
.loading[aria-busy="true"]::after {
    content: "در حال بارگذاری...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* ==========================================================================
   COLOR CONTRAST IMPROVEMENTS
   ========================================================================== */

/* Ensure all text meets WCAG AA contrast requirements */
.post-meta,
.post-excerpt {
    color: var(--text-muted, #718096) !important;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.95) !important; /* Better contrast on gradient */
}

/* ==========================================================================
   RESPONSIVE TEXT AND SPACING
   ========================================================================== */

/* Improve readability on small screens */
@media (max-width: 480px) {
    body {
        font-size: 16px !important; /* Prevent iOS zoom on form focus */
    }
    
    .post-excerpt {
        font-size: 1rem !important; /* Larger text on mobile */
        line-height: 1.7 !important;
    }
    
    .post-meta {
        font-size: 0.9rem !important;
    }
}

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

/* Better form field styling using KhoobLife colors */
input[type="email"],
input[type="text"],
textarea,
select {
    border: 2px solid var(--accent-beige, #D8C3A5);
    border-radius: 4px;
    padding: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.2s ease;
}

input[type="email"]:focus,
input[type="text"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color, #A8B8A0);
    box-shadow: 0 0 0 3px rgba(168, 184, 160, 0.2);
}

/* Error states */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--error, #EF4444);
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
    border-color: var(--error, #EF4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

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

@media print {
    /* Ensure good contrast in print */
    * {
        background: transparent !important;
        color: black !important;
        text-shadow: none !important;
        filter: none !important;
        -ms-filter: none !important;
    }
    
    /* Show URLs for links */
    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* Hide non-essential elements */
    .newsletter-section,
    .hero-cta,
    .skip-link {
        display: none !important;
    }
    
    /* Ensure readability */
    body {
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid !important;
    }
    
    .post-card {
        page-break-inside: avoid !important;
        margin-bottom: 1rem !important;
        border: 1px solid #ccc !important;
        padding: 1rem !important;
    }
}