/**
 * Accessibility Improvements CSS
 * This file improves accessibility scores without changing layout
 */

/* ============================================
   1. Touch Target Size Improvements
   Minimum 44x44px for iOS, 48x48px for Android
   ============================================ */

/* Social Icons - increase clickable area */
.social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
}

/* Swiper Navigation Buttons */
.swiper-nav,
.swiper-nav-prev,
.swiper-nav-next,
.swiper-button-prev,
.swiper-button-next {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Tab Navigation Arrows */
.tab-nav-arrow {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Swiper Pagination Bullets */
.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    margin: 0 6px !important;
}

/* ============================================
   2. Color Contrast Improvements
   WCAG AA requires 4.5:1 for normal text
   ============================================ */

/* Footer text - darken for better contrast */
footer .text-gray-400,
.footer-links a,
footer a.text-gray-400 {
    color: #d1d5db !important;
    /* gray-300 instead of gray-400 */
}

/* Ensure footer headings have good contrast */
footer .text-gray-500 {
    color: #9ca3af !important;
    /* gray-400 instead of gray-500 */
}

/* Product metadata text */
.item-text,
.item-text a {
    color: #6b7280 !important;
    /* gray-500 for better contrast */
}

/* Muted text improvements */
.text-muted {
    color: #6b7280 !important;
    /* Darker than default */
}

/* ============================================
   3. Focus States for Keyboard Navigation
   ============================================ */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--primary_color, #20c997) !important;
    outline-offset: 2px !important;
}

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
    transition: top 0.3s;
}

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

/* ============================================
   4. Screen Reader Only Content
   ============================================ */

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

/* ============================================
   5. 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;
    }
}

/* ============================================
   6. Enhanced Focus Visible States
   For better keyboard navigation visibility
   ============================================ */

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--primary_color, #20c997) !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}

/* ============================================
   7. Heading Hierarchy & Readability
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
}

/* ============================================
   8. Interactive Elements - Touch Targets
   Ensure minimum 44x44px for all clickable elements on mobile
   ============================================ */

@media (max-width: 768px) {
    button,
    a.btn,
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
}