/**
 * Glaxfy Accessibility Styles
 * Comprehensive accessibility enhancements for WCAG compliance
 * 
 * Requirements: 13.1, 13.2, 13.4, 13.6, 13.7, 13.8
 */

/* ========== Focus Ring Variables ========== */
:root {
    /* Enhanced focus ring for better visibility */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;
    --focus-ring-color: rgba(99, 102, 241, 0.5);
    --focus-ring-color-solid: #6366f1;
    --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    --focus-ring-inset: inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    --focus-ring-error: 0 0 0 var(--focus-ring-width) rgba(239, 68, 68, 0.5);
    --focus-ring-success: 0 0 0 var(--focus-ring-width) rgba(16, 185, 129, 0.5);
    --focus-ring-warning: 0 0 0 var(--focus-ring-width) rgba(245, 158, 11, 0.5);
}

/* Dark mode focus ring adjustments for better contrast */
[data-theme="dark"] {
    --focus-ring-color: rgba(129, 140, 248, 0.6);
    --focus-ring-color-solid: #818cf8;
    --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    --focus-ring-error: 0 0 0 var(--focus-ring-width) rgba(248, 113, 113, 0.6);
    --focus-ring-success: 0 0 0 var(--focus-ring-width) rgba(52, 211, 153, 0.6);
    --focus-ring-warning: 0 0 0 var(--focus-ring-width) rgba(251, 191, 36, 0.6);
}

/* ========== Global Focus Visible Styles ========== */

/* Base focus-visible for all interactive elements */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
}

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

/* ========== Button Focus States ========== */

button:focus-visible,
[role="button"]:focus-visible,
.gx-btn:focus-visible,
.gx-header-btn:focus-visible,
.gx-quick-add-btn:focus-visible,
.gx-wishlist-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring);
}

/* Primary buttons - enhanced glow effect */
.gx-btn-primary:focus-visible {
    outline-color: var(--focus-ring-color-solid);
    box-shadow: var(--focus-ring), var(--shadow-glow-sm);
}

/* Danger buttons */
.gx-btn-danger:focus-visible {
    outline-color: #ef4444;
    box-shadow: var(--focus-ring-error);
}

/* Success buttons */
.gx-btn-success:focus-visible {
    outline-color: #10b981;
    box-shadow: var(--focus-ring-success);
}

/* ========== Link Focus States ========== */

a:focus-visible,
.gx-section-link:focus-visible,
.gx-footer-links a:focus-visible,
.gx-social-link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs, 4px);
}

/* Product card links */
.gx-product-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring), var(--shadow-lg);
}

/* Category card links */
.gx-category-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring), var(--shadow-lg);
}

/* ========== Form Input Focus States ========== */

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.gx-search-input:focus-visible,
.gx-newsletter-input:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: 0;
    border-color: var(--focus-ring-color-solid);
    box-shadow: var(--focus-ring);
}

/* Input with error state */
input.invalid:focus-visible,
input.error:focus-visible,
textarea.invalid:focus-visible,
textarea.error:focus-visible {
    outline-color: #ef4444;
    border-color: #ef4444;
    box-shadow: var(--focus-ring-error);
}

/* Input with success state */
input.valid:focus-visible,
input.success:focus-visible,
textarea.valid:focus-visible,
textarea.success:focus-visible {
    outline-color: #10b981;
    border-color: #10b981;
    box-shadow: var(--focus-ring-success);
}

/* Checkbox and radio focus */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
}

/* ========== Navigation Focus States ========== */

/* Header navigation */
.gx-category-trigger:focus-visible,
.gx-category-menu-item:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
    background-color: var(--surface-secondary, rgba(99, 102, 241, 0.1));
}

/* Slider navigation */
.gx-slider-nav-btn:focus-visible,
.gx-slider-dot:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring);
}

/* Tab navigation */
[role="tab"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
}

/* ========== Modal and Dialog Focus States ========== */

[role="dialog"]:focus-visible,
[role="alertdialog"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
}

/* Close buttons in modals */
.modal-close:focus-visible,
[aria-label*="close"]:focus-visible,
[aria-label*="Close"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring);
}

/* ========== Card Focus States ========== */

.card:focus-visible,
.gx-feature-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring), var(--shadow-lg);
}

/* ========== Skip Link ========== */

.skip-link:focus,
.gx-skip-link:focus {
    position: fixed;
    top: var(--space-4, 1rem);
    left: var(--space-4, 1rem);
    z-index: var(--z-max, 9999);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--surface-primary, #ffffff);
    color: var(--text-primary, #1e293b);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    font-weight: var(--font-semibold, 600);
    outline: var(--focus-ring-width) solid var(--focus-ring-color-solid);
    outline-offset: var(--focus-ring-offset);
}

[data-theme="dark"] .skip-link:focus,
[data-theme="dark"] .gx-skip-link:focus {
    background: var(--surface-secondary, #1e293b);
    color: var(--text-primary, #f1f5f9);
}

/* ========== High Contrast Mode Support ========== */

@media (forced-colors: active) {
    :focus-visible {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
    }
    
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}

/* ========== Reduced Motion Support ========== */

@media (prefers-reduced-motion: reduce) {
    /* Disable all animations */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Keep focus visible without animation */
    :focus-visible {
        transition: none !important;
    }
    
    /* Disable hover animations */
    .gx-product-card:hover,
    .gx-category-card:hover,
    .gx-btn:hover {
        transform: none !important;
    }
    
    /* Disable slider auto-advance indicator */
    .gx-slider-progress-bar {
        animation: none !important;
    }
    
    /* Disable floating animations */
    .gx-floating-card,
    .animate-float,
    .animate-bounce {
        animation: none !important;
    }
    
    /* Disable shimmer effect on skeletons */
    .skeleton,
    .gx-skeleton {
        animation: none !important;
        background: var(--surface-tertiary, #e2e8f0) !important;
    }
}

/* ========== Screen Reader Only Utility ========== */

.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: 0;
}

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

/* ========== Live Regions ========== */

/* Hidden live region for screen reader announcements */
.live-region,
.gx-live-region,
[aria-live] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Visible live region for status messages */
.live-region-visible {
    position: relative;
    width: auto;
    height: auto;
    padding: var(--space-3, 0.75rem);
    margin: var(--space-2, 0.5rem) 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--surface-secondary, #f8fafc);
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-default, #e2e8f0);
}

/* ========== Form Error Accessibility ========== */

/* Error messages linked via aria-describedby */
.form-error,
.gx-form-error,
.error-message,
[role="alert"] {
    color: var(--color-error-600, #dc2626);
    font-size: var(--text-sm, 0.875rem);
    margin-top: var(--space-1, 0.25rem);
}

[data-theme="dark"] .form-error,
[data-theme="dark"] .gx-form-error,
[data-theme="dark"] .error-message,
[data-theme="dark"] [role="alert"] {
    color: var(--color-error-400, #f87171);
}

/* Success messages */
.form-success,
.gx-form-success,
.success-message {
    color: var(--color-success-600, #059669);
    font-size: var(--text-sm, 0.875rem);
    margin-top: var(--space-1, 0.25rem);
}

[data-theme="dark"] .form-success,
[data-theme="dark"] .gx-form-success,
[data-theme="dark"] .success-message {
    color: var(--color-success-400, #34d399);
}

/* ========== Touch Target Size ========== */

/**
 * Mobile Touch Target Enhancements
 * Ensures all interactive elements meet the 44x44px minimum touch target requirement
 * per WCAG 2.1 Success Criterion 2.5.5 (Target Size)
 * 
 * Requirements: 14.2
 */

/* CSS Custom Property for touch target minimum */
:root {
    --touch-target-min: 44px;
}

/* Ensure minimum 44x44px touch targets on mobile/touch devices */
@media (pointer: coarse) {
    /* ===== Base Interactive Elements ===== */
    button,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"],
    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* Links need special handling - use padding to expand touch area */
    a {
        display: inline-flex;
        align-items: center;
        min-height: var(--touch-target-min);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    /* Block-level links (cards, etc.) don't need the inline-flex treatment */
    a.gx-product-card,
    a.gx-category-card,
    a.card,
    a[class*="card"] {
        display: flex;
        min-height: auto;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    /* ===== Header Elements ===== */
    .gx-header-btn,
    .gx-wishlist-header-btn,
    .navbar-icon,
    .action-icon,
    .mobile-icon-btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* Header actions spacing */
    .gx-header-actions,
    .navbar-actions,
    .action-icons {
        gap: var(--space-2, 0.5rem);
    }
    
    /* Category dropdown trigger */
    .gx-category-trigger {
        min-height: var(--touch-target-min);
        padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    }
    
    /* ===== Navigation Elements ===== */
    .nav-link,
    .nav-item,
    .drawer-link {
        min-height: var(--touch-target-min);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    /* Bottom navigation items */
    .bottom-nav .nav-item,
    .gx-bottom-nav-item {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* Mobile drawer links */
    .drawer-link {
        min-height: var(--touch-target-min);
        padding: 0.875rem 1rem;
    }
    
    /* ===== Slider/Carousel Controls ===== */
    .gx-slider-nav-btn,
    .carousel-btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* Slider dots - smaller touch target is acceptable for dots */
    .gx-slider-dot,
    .promo-dot {
        min-width: 20px;
        min-height: 20px;
    }
    
    /* Slider dots need adequate spacing */
    .gx-slider-dots,
    .promo-dots {
        gap: var(--space-2, 0.5rem);
    }
    
    /* ===== Product Card Elements ===== */
    .gx-wishlist-btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        width: var(--touch-target-min);
        height: var(--touch-target-min);
    }
    
    .gx-quick-add-btn,
    .gx-btn-buy-now {
        min-height: var(--touch-target-min);
    }
    
    /* ===== Form Elements ===== */
    .gx-btn,
    .btn,
    .gx-btn-primary,
    .gx-btn-secondary,
    .gx-btn-outline,
    .gx-btn-ghost {
        min-height: var(--touch-target-min);
    }
    
    /* Small buttons should still meet touch target on mobile */
    .gx-btn-sm,
    .btn-sm {
        min-height: var(--touch-target-min);
        padding-left: var(--space-4, 1rem);
        padding-right: var(--space-4, 1rem);
    }
    
    /* Icon-only buttons */
    .gx-btn-icon-only,
    .btn-icon {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
        width: var(--touch-target-min);
        height: var(--touch-target-min);
    }
    
    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select,
    .form-input,
    .gx-search-input,
    .gx-newsletter-input {
        min-height: var(--touch-target-min);
    }
    
    /* Quantity selector buttons */
    .quantity-btn,
    .gx-quantity-btn,
    [class*="quantity"] button {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* ===== Tab Navigation ===== */
    [role="tab"],
    .tab-btn,
    .gx-tab-btn {
        min-height: var(--touch-target-min);
        padding: 0.75rem 1rem;
    }
    
    /* ===== Footer Elements ===== */
    .gx-social-link,
    .social-link,
    .footer-social a {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    .gx-footer-links a,
    .footer-links a {
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
    }
    
    /* ===== Modal/Dialog Elements ===== */
    .modal-close,
    .drawer-close,
    .location-close,
    [aria-label*="close"],
    [aria-label*="Close"] {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* ===== Pagination ===== */
    .pagination a,
    .pagination button,
    .page-link {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* ===== Filter/Sort Controls ===== */
    .filter-btn,
    .sort-btn,
    .filter-chip,
    .gx-filter-chip {
        min-height: var(--touch-target-min);
        padding: 0.5rem 1rem;
    }
    
    /* ===== Breadcrumb Links ===== */
    .breadcrumb a,
    .gx-breadcrumb a {
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
    }
    
    /* ===== Rating/Review Elements ===== */
    /* Only apply touch targets to interactive star elements, not display stars */
    .gx-star-input .gx-star,
    .gx-star-rating-input .gx-star,
    .star-rating button,
    .rating-star[role="button"],
    .rating-star:not([aria-readonly="true"]) {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* Display-only stars should remain small */
    .gx-product-rating .gx-star,
    .gx-stars .gx-star {
        min-width: unset;
        min-height: unset;
    }
    
    /* ===== Theme Toggle ===== */
    .gx-theme-toggle,
    .theme-toggle,
    [aria-label*="theme"],
    [aria-label*="Theme"] {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* ===== Search Suggestions ===== */
    .gx-search-suggestion-item,
    .search-suggestion {
        min-height: var(--touch-target-min);
        padding: 0.75rem;
    }
    
    /* ===== Category Menu Items ===== */
    .gx-category-menu-item {
        min-height: var(--touch-target-min);
        padding: 0.75rem 1rem;
    }
    
    /* ===== Toast/Notification Actions ===== */
    .gx-toast-close,
    .toast-close,
    .notification-close {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* ===== Accordion/Collapsible Headers ===== */
    .accordion-header,
    .collapsible-header,
    details summary,
    .link-group-title {
        min-height: var(--touch-target-min);
    }
    
    /* ===== Image Gallery Controls ===== */
    .gallery-nav,
    .gallery-thumb,
    .lightbox-close,
    .zoom-btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* ===== Cart Item Controls ===== */
    .cart-item-remove,
    .cart-quantity-btn,
    .remove-item-btn {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }
    
    /* ===== Checkout Elements ===== */
    .payment-option,
    .shipping-option {
        min-height: var(--touch-target-min);
        padding: 1rem;
    }
    
    /* ===== Empty State CTAs ===== */
    .empty-state-cta,
    .gx-empty-cta {
        min-height: var(--touch-target-min);
    }
    
    /* ===== Retry/Action Buttons ===== */
    .retry-btn,
    .gx-retry-btn,
    .action-btn {
        min-height: var(--touch-target-min);
    }
}