/**
 * Accessibility Improvements
 * WCAG 2.1 AA Compliance
 * 
 * @package Delicio_Child_FOODSE
 */

/* ========================================
   1. FOCUS STATES
   ======================================== */

/* High contrast focus outline for keyboard navigation */
*:focus {
    outline: 2px solid var(--primary-orange, #FF8533) !important;
    outline-offset: 2px !important;
}

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

/* Visible focus for keyboard users */
*:focus-visible {
    outline: 3px solid var(--primary-orange, #FF8533) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(255, 133, 51, 0.3) !important;
}

/* Button focus states */
button:focus-visible,
.button:focus-visible,
a.button:focus-visible,
input[type="submit"]:focus-visible {
    outline: 3px solid var(--primary-yellow, #FFD700) !important;
    outline-offset: 2px !important;
}

/* ========================================
   2. SKIP LINKS
   ======================================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-orange, #FF8533);
    color: #FFFFFF;
    padding: 12px 24px;
    z-index: 100000;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #FFFFFF !important;
}

/* ========================================
   3. COLOR CONTRAST FIXES
   ======================================== */

/* Ensure text has sufficient contrast (WCAG AA: 4.5:1) */
.product-description,
.text-muted,
.product-meta {
    color: #B0B0B0 !important; /* Lighter gray for better contrast on dark bg */
}

/* Price should be clearly visible */
.price,
.woocommerce-Price-amount {
    color: #FF8533 !important; /* Orange with good contrast */
    font-weight: 700 !important;
}

/* Links should be distinguishable */
a:not(.button) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:not(.button):hover {
    text-decoration-thickness: 2px;
}

/* ========================================
   4. MOTION PREFERENCES
   ======================================== */

/* Respect reduced motion preference */
@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;
    }
}

/* ========================================
   5. SCREEN READER UTILITIES
   ======================================== */

/* Visually hidden but accessible to screen readers */
.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;
}

/* Allow sr-only elements to be focusable */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ========================================
   6. FORM ACCESSIBILITY
   ======================================== */

/* Required field indicator */
.required {
    color: #FF6B6B;
}

/* Error states */
.woocommerce-error,
.error,
[aria-invalid="true"] {
    border-color: #FF6B6B !important;
}

/* Error message styling */
.woocommerce-error li,
.error-message {
    color: #FF6B6B;
    font-weight: 600;
}

/* Input labels should be visible */
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Placeholder text contrast */
::placeholder {
    color: #888888;
    opacity: 1;
}

/* ========================================
   7. INTERACTIVE ELEMENT SIZING
   ======================================== */

/* Minimum touch target size (44x44px per WCAG) */
button,
.button,
a.button,
input[type="button"],
input[type="submit"],
.add_to_cart_button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 24px;
}

/* Quantity buttons */
.qty-increase,
.qty-decrease,
.qty-minus,
.qty-plus {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Quick action buttons */
.quick-action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   8. MODAL ACCESSIBILITY
   ======================================== */

/* Trap focus in modal */
.quickview-modal.active {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

/* Modal close button */
.quickview-close {
    min-width: 44px;
    min-height: 44px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   9. HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {
    :root {
        --bg-black: #000000;
        --bg-dark: #1A1A1A;
        --text-white: #FFFFFF;
        --border-dark: #666666;
    }
    
    a:not(.button) {
        text-decoration: underline !important;
    }
    
    button,
    .button {
        border: 2px solid currentColor !important;
    }
}

/* ========================================
   10. LOADING STATES
   ======================================== */

/* Indicate loading state */
[aria-busy="true"] {
    cursor: wait;
    opacity: 0.7;
}

/* Loading spinner should have text alternative */
.loading-spinner::after {
    content: "Loading...";
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}