/* =====================================================================
 * Accessibility Stylesheet (WCAG 2.1 AA)
 *
 * Phase 33: Skip navigation, focus indicators, screen-reader utilities,
 * reduced motion, high contrast mode, live region styles, and link
 * distinguishability.
 *
 * Loaded AFTER mobile.css in all storefront layouts and after admin.css
 * in admin_layout.php.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Skip Navigation Link
 * ------------------------------------------------------------------- */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: #6366f1;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    transition: top 0.15s ease;
}

.skip-nav:focus,
.skip-nav:focus-visible {
    top: 0;
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * 2. Focus Indicators — Visible, High-Contrast
 * ------------------------------------------------------------------- */
*:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}

/* Ensure focus is visible on dark backgrounds */
.glass *:focus-visible,
.glass-dark *:focus-visible,
[style*="background"] *:focus-visible {
    outline-color: #a78bfa;
}

/* Specific focus styles for form inputs to not conflict with existing */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 0;
}

/* Focus ring for buttons */
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}

/* Focus ring adjustments for theme variants */
body.theme-premium *:focus-visible {
    outline-color: #fbbf24;
}

body.theme-elite *:focus-visible {
    outline-color: #22d3ee;
}

/* Admin focus uses the primary color */
.admin-body *:focus-visible {
    outline-color: var(--primary, #1f4fff);
    outline-offset: 2px;
}

/* Remove default outline since we use focus-visible */
*:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------------
 * 3. Screen Reader Only Utility
 * ------------------------------------------------------------------- */
.sr-only {
    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 to become visible when focused (for skip links etc.) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ---------------------------------------------------------------------
 * 4. Link Distinguishability
 *
 * WCAG 1.4.1: Links must be distinguishable from surrounding text by
 * more than color alone. We add underlines to in-content links.
 * ------------------------------------------------------------------- */
main a:not(.btn):not(.btn-gradient):not(.btn-shimmer):not([role="button"]):not(.nav-link):not(.nav-cmd):not(.card-hover):not(.mobile-bottom-nav__link):not(.skip-nav):not(.variant-option):not(.network-option):not(.hx-btn):not(.hx-pill):not(.hx-pager__link):not(.hx-plain):not([class*="rounded"]):not([class*="flex"]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

main a:not(.btn):not(.btn-gradient):not(.btn-shimmer):not([role="button"]):not(.hx-btn):not(.hx-pill):not(.hx-pager__link):not(.hx-plain):hover {
    text-decoration-thickness: 2px;
}

/* Footer links: underline on hover/focus for distinguishability */
footer a:hover,
footer a:focus,
.site-footer a:hover,
.site-footer a:focus {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * 5. Reduced Motion
 * ------------------------------------------------------------------- */
@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;
    }

    .blob,
    .blob-delay-2,
    .blob-delay-4 {
        animation: none !important;
    }

    .animated-bg {
        animation: none !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .card-hover:hover {
        transform: none !important;
    }

    .btn-shimmer {
        animation: none !important;
    }

    .btn-gradient:hover {
        transform: none !important;
    }

    img[loading="lazy"] {
        opacity: 1 !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------
 * 6. High Contrast Mode
 * ------------------------------------------------------------------- */
@media (prefers-contrast: high) {
    /* Increase border visibility */
    .glass,
    .glass-dark {
        border-width: 2px !important;
        border-color: currentColor !important;
    }

    /* Ensure text contrast */
    .text-white\/40,
    .text-white\/30 {
        opacity: 1 !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .text-white\/50,
    .text-white\/60 {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Stronger focus indicators */
    *:focus-visible {
        outline-width: 4px;
        outline-style: solid;
    }

    /* Make badges more readable */
    .status-badge,
    [class*="rounded-full"][class*="text-xs"] {
        border: 1px solid currentColor;
    }

    /* Ensure buttons have visible borders */
    button,
    .btn,
    [role="button"] {
        border: 2px solid currentColor !important;
    }

    /* Gradient text → solid for readability */
    .gradient-text {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: currentColor !important;
        background-clip: initial !important;
    }
}

/* Windows High Contrast Mode (forced-colors) */
@media (forced-colors: active) {
    *:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    .skip-nav:focus {
        background: Highlight;
        color: HighlightText;
    }

    a {
        text-decoration: underline;
    }
}

/* ---------------------------------------------------------------------
 * 7. Focus Trap Styles for Modals/Dialogs
 * ------------------------------------------------------------------- */
[role="dialog"],
.modal,
#lightbox-modal {
    /* When visible, trap focus within */
}

[role="dialog"][aria-modal="true"],
.modal[aria-modal="true"] {
    /* Visual indicator that this is a modal */
}

/* Overlay behind modal should not be focusable */
.modal-overlay {
    pointer-events: auto;
}

/* ---------------------------------------------------------------------
 * 8. Live Region Styles
 * ------------------------------------------------------------------- */
#a11y-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Alert and status roles */
[role="alert"] {
    /* Ensure alerts are announced immediately */
}

[role="status"] {
    /* Polite announcements */
}

/* ---------------------------------------------------------------------
 * 9. Color Contrast Fixes
 * ------------------------------------------------------------------- */

/* Fix low-contrast placeholder text */
::placeholder {
    opacity: 1;
    color: rgba(255, 255, 255, 0.45);
}

/* Light theme placeholder fix */
body.theme-light ::placeholder,
body.theme-white ::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

/* Fix low-contrast muted text in light/white themes */
body.theme-light .text-white\/40,
body.theme-white .text-white\/40 {
    color: #64748b !important; /* 4.55:1 against white */
}

body.theme-light .text-white\/30,
body.theme-white .text-white\/30 {
    color: #64748b !important;
}

/* Dark theme: ensure minimum contrast for muted text */
.text-white\/30 {
    color: rgba(255, 255, 255, 0.5) !important; /* Bumped from 0.3 to 0.5 for 4.5:1 on #0a0f1e */
}

/* Footer text contrast fix */
.site-footer .text-white\/30,
footer .text-white\/30 {
    color: rgba(255, 255, 255, 0.55) !important;
}

footer .text-white\/40 {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Fix copyright text contrast */
.footer-copy {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Fix nav link contrast on dark */
.nav-link {
    color: rgba(255, 255, 255, 0.75);
}

/* Admin badge contrast fixes */
.admin-body .badge-muted,
.admin-body .text-muted {
    color: var(--text-muted, #475569);
}

/* Admin placeholder contrast */
.admin-body ::placeholder {
    color: var(--text-soft, #94a3b8);
}

/* Ensure price text always meets contrast */
.gradient-text-green {
    /* Green gradient already meets 4.5:1 on dark */
}

/* Ensure error text contrast */
.text-red-300 {
    /* #fca5a5 on dark bg ≈ 7:1 — OK */
}

.text-green-300 {
    /* #86efac on dark bg ≈ 8:1 — OK */
}

/* ---------------------------------------------------------------------
 * 10. Decorative Image Handling
 * ------------------------------------------------------------------- */
img[alt=""],
[aria-hidden="true"] img {
    /* Decorative images are correctly hidden from AT */
}

/* SVG icons in bottom nav should be hidden from AT if label exists */
.mobile-bottom-nav__link svg {
    /* aria-hidden="true" should be added in HTML */
}

/* ---------------------------------------------------------------------
 * 11. Keyboard-Navigable Interactive Elements
 * ------------------------------------------------------------------- */

/* Theme switcher items need to be keyboard accessible */
.theme-switcher-item {
    cursor: pointer;
}

.theme-switcher-item:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: -2px;
    border-radius: 8px;
}

/* Variant and network radio cards: show focus on the label */
.variant-option:focus-within .variant-card,
.network-option:focus-within .network-pill {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}

/* Payment method card focus */
label:has(input[name="payment_method"]):focus-within .payment-method-card {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
}

/* Gallery thumbnail focus */
.gallery-thumb:focus-visible {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
    border-color: transparent;
}

/* Ensure disabled elements look disabled */
[disabled],
[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}