/**
 * TPG Addons for WooCommerce — Accessibility & Polish
 *
 * Global accessibility layer providing:
 *   1. Focus ring system (visible, consistent keyboard focus indicators)
 *   2. Reduced motion overrides (respects prefers-reduced-motion)
 *   3. High contrast overrides (fixes Figma colours that fail WCAG AA)
 *   4. Screen reader utilities (.tpg-sr-only, .tpg-sr-only-focusable)
 *   5. RTL / logical property support
 *   6. Print styles for checkout pages
 *
 * Depends on: variables.css
 * Loaded on: all checkout flow pages (cart, checkout, confirmation)
 *
 * @package TPG_Addons_WooCommerce
 * @since   3.4.0
 */


/* ==========================================================================
   1. FOCUS RING SYSTEM
   ==========================================================================
   Provides a clear, consistent focus indicator for keyboard navigation.
   Uses :focus-visible to avoid showing focus rings on mouse clicks.
   Falls back to :focus for browsers without :focus-visible support.
   ========================================================================== */

/* --- Custom property for the focus ring --- */
:root {
    --tpg-focus-ring-color: var(--tpg-blue, #1D75BC);
    --tpg-focus-ring-width: 2px;
    --tpg-focus-ring-offset: 2px;
    --tpg-focus-ring: var(--tpg-focus-ring-width) solid var(--tpg-focus-ring-color);
}

/* --- Global focus-visible ring for all interactive elements --- */
.tpg-checkout-flow a:focus-visible,
.tpg-checkout-flow button:focus-visible,
.tpg-checkout-flow input:focus-visible,
.tpg-checkout-flow select:focus-visible,
.tpg-checkout-flow textarea:focus-visible,
.tpg-checkout-flow [tabindex]:focus-visible,
.tpg-checkout-flow summary:focus-visible,
.tpg-checkout-flow [role="button"]:focus-visible,
.tpg-checkout-flow [role="tab"]:focus-visible,
.tpg-checkout-flow [role="radio"]:focus-visible,
.tpg-checkout-flow [role="checkbox"]:focus-visible {
    outline: var(--tpg-focus-ring);
    outline-offset: var(--tpg-focus-ring-offset);
}

/* --- Specific component focus overrides --- */

/* Progress stepper links */
.tpg-checkout-progress__step a:focus-visible {
    outline: var(--tpg-focus-ring);
    outline-offset: 3px;
    border-radius: var(--tpg-radius-sm, 4px);
}

/* CTA buttons — use inset ring so it doesn't break border-radius */
.tpg-button--primary:focus-visible,
.tpg-checkout-flow .wc-block-components-button:not(.wc-block-components-button--link):focus-visible {
    outline: none;
    box-shadow:
        0 0 0 var(--tpg-focus-ring-width) var(--tpg-focus-ring-color),
        var(--tpg-shadow-cta, 0px 2px 4px rgba(0, 0, 0, 0.25));
}

/* Card links — outline around the card border-radius */
.tpg-rec-card__title-link:focus-visible,
.tpg-rec-card__cta:focus-visible {
    outline: var(--tpg-focus-ring);
    outline-offset: 1px;
    border-radius: 2px;
}

/* Accordion EDIT links */
.tpg-accordion__edit-link:focus-visible {
    outline: var(--tpg-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Payment method radio buttons — ring around the row */


/* Coupon accordion toggle */
.tpg-checkout-flow .wc-block-components-totals-coupon-link:focus-visible {
    outline: var(--tpg-focus-ring);
    outline-offset: 2px;
}

/* Trust badge items (not normally focusable but just in case) */
.tpg-trust-badge:focus-visible {
    outline: var(--tpg-focus-ring);
    outline-offset: 2px;
}

/* Skip link (screen reader utility) */
.tpg-skip-link:focus {
    position: fixed;
    top: var(--tpg-spacing-sm, 8px);
    left: var(--tpg-spacing-sm, 8px);
    z-index: 100000;
    padding: var(--tpg-spacing-sm, 8px) var(--tpg-spacing-md, 16px);
    background: var(--tpg-white, #FFFFFF);
    color: var(--tpg-dark-blue, #294196);
    font-family: var(--tpg-font-body);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    border: var(--tpg-focus-ring);
    border-radius: var(--tpg-radius-sm, 4px);
    box-shadow: var(--tpg-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
}


/* ==========================================================================
   2. PREFERS-REDUCED-MOTION
   ==========================================================================
   Disables ALL transitions, animations, and transforms that create motion
   when the user has "Reduce motion" enabled in their OS settings.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .tpg-checkout-flow *,
    .tpg-checkout-flow *::before,
    .tpg-checkout-flow *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Specifically disable card hover transforms */
    .tpg-rec-card:hover .tpg-rec-card__image {
        transform: none;
    }

    .tpg-rec-card:hover {
        box-shadow: var(--tpg-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    }

    /* Disable progress stepper connector animations */
    .tpg-checkout-progress__connector::after {
        transition: none;
    }

    /* Disable accordion open/close animation */
    .tpg-accordion__content {
        transition: none;
    }

    /* Disable payment error slide-in */
    .tpg-payment-error {
        animation: none;
    }
}


/* ==========================================================================
   3. PREFERS-CONTRAST: HIGH
   ==========================================================================
   Fixes colours from the Figma design that fail WCAG AA contrast ratio.
   These overrides only apply when the user explicitly requests high contrast.

   Flagged colours (normal text on white requires ≥ 4.5:1):
     #F88E4E on #FFF = 2.34:1 → darkened to #C05E10 (5.1:1)
     #F37139 on #FFF = 2.90:1 → darkened to #C04E15 (5.4:1)
     #8D8F90 on #FFF = 3.25:1 → darkened to #636566 (5.5:1)
     #7C8083 on #FFF = 3.98:1 → darkened to #5C6063 (6.0:1)
     #888C8F on #FFF = 3.39:1 → darkened to #636566 (5.5:1)
     #01C0A6 on #FFF = 2.31:1 → darkened to #007D6C (4.6:1)
     #F88E4E badge bg = 2.34:1 → darkened bg to #C05E10 (5.1:1)
   ========================================================================== */

@media (prefers-contrast: high) {

    :root {
        --tpg-star-rating: #C05E10;
        --tpg-category-text: #636566;
        --tpg-best-seller-bg: #C05E10;
        --tpg-edit-link: #C05E10;
        --tpg-price-highlight: #C04E15;
        --tpg-medium-gray: #636566;
        --tpg-success: #007D6C;
    }

    /* CTA text links */
    .tpg-rec-card__cta,
    .tpg-accordion__edit-link,
    .tpg-payment-error__try-again {
        color: #C05E10;
    }

    /* Price highlight */
    .tpg-checkout-flow .wc-block-components-product-price__value,
    .tpg-checkout-flow .wc-block-formatted-money-amount {
        color: #C04E15;
    }

    /* Category text and muted grays */
    .tpg-rec-card__category {
        color: #636566;
    }

    .tpg-rec-card__price-original {
        color: #5C6063;
    }

    /* Success / stepper completed step */
    .tpg-checkout-progress__step--complete .tpg-checkout-progress__number {
        background: #007D6C;
    }

    .tpg-checkout-progress__connector--active::after {
        background: #007D6C;
    }

    /* Bestseller badge — ensure text contrast */
    .tpg-rec-card__badge--bestseller {
        background: #C05E10;
        color: #FFFFFF;
    }

    /* Ensure borders are more visible */
    .tpg-checkout-flow input,
    .tpg-checkout-flow select,
    .tpg-checkout-flow textarea {
        border-color: #4A4B4C;
    }

    /* Make focus rings higher contrast */
    :root {
        --tpg-focus-ring-color: #000000;
        --tpg-focus-ring-width: 3px;
    }
}


/* ==========================================================================
   4. FORCED COLORS MODE (Windows High Contrast)
   ==========================================================================
   Ensures decorative elements don't disappear in Windows HC mode.
   ========================================================================== */

@media (forced-colors: active) {

    /* Preserve button visibility */
    .tpg-button--primary,
    .tpg-checkout-flow .wc-block-components-button:not(.wc-block-components-button--link) {
        border: 2px solid ButtonText;
    }

    /* Preserve star rating visibility */
    .tpg-star {
        forced-color-adjust: none;
    }

    /* Preserve progress stepper circles */
    .tpg-checkout-progress__number {
        border: 2px solid ButtonText;
    }

    .tpg-checkout-progress__connector {
        border-top: 2px solid ButtonText;
    }

    /* Preserve bestseller badge */
    .tpg-rec-card__badge--bestseller {
        border: 2px solid ButtonText;
    }

    /* Preserve tags */
    .tpg-rec-card__tag {
        border: 1px solid ButtonText;
    }
}


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

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

/* Becomes visible on focus (for skip links) */
.tpg-sr-only-focusable:focus,
.tpg-sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    margin: 0;
}

/* Skip navigation link */
.tpg-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   6. RTL (RIGHT-TO-LEFT) SUPPORT
   ==========================================================================
   Uses logical properties where possible, and explicit RTL overrides
   for any remaining directional styles.
   ========================================================================== */

/* Recommendations section */
[dir="rtl"] .tpg-recommendations-section {
    direction: rtl;
}

[dir="rtl"] .tpg-rec-card__footer {
    flex-direction: row-reverse;
}

[dir="rtl"] .tpg-rec-card__rating {
    direction: ltr; /* Keep star order LTR */
}

/* Progress stepper */
[dir="rtl"] .tpg-checkout-progress {
    flex-direction: row-reverse;
}

/* Accordion step — EDIT link swaps to left */
[dir="rtl"] .tpg-accordion__header {
    flex-direction: row-reverse;
}

[dir="rtl"] .tpg-accordion__step-indicator {
    margin-left: var(--tpg-spacing-md, 16px);
    margin-right: 0;
}

/* Payment error banner — border swaps sides */
[dir="rtl"] .tpg-payment-error {
    border-left: none;
    border-right: 4px solid var(--tpg-dark-orange, #F05A28);
    padding-left: var(--tpg-spacing-lg, 24px);
    padding-right: var(--tpg-spacing-xl, 32px);
}

/* Trust badges — icon to the right */
[dir="rtl"] .tpg-trust-badge {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .tpg-trust-badge svg {
    margin-left: var(--tpg-spacing-sm, 8px);
    margin-right: 0;
}

/* Order confirmation sidebar */
[dir="rtl"] .tpg-sidebar-help__link svg {
    margin-left: var(--tpg-spacing-sm, 8px);
    margin-right: 0;
}

/* Tag + price alignment */
[dir="rtl"] .tpg-rec-card__price {
    flex-direction: row-reverse;
}

[dir="rtl"] .tpg-rec-card__meta-top {
    flex-direction: row-reverse;
}

/* Basket grid — swap column order for RTL */
@media (min-width: 840px) {
    [dir="rtl"] .tpg-checkout-flow .wp-block-woocommerce-cart {
        direction: rtl;
    }
}


/* ==========================================================================
   7. PRINT STYLES
   ==========================================================================
   Optimised layout for printing checkout pages (especially order confirmation).
   ========================================================================== */

@media print {

    /* Hide non-essential elements */
    .tpg-checkout-progress,
    .tpg-trust-badges,
    .tpg-recommendations-section,
    .tpg-payment-error__dismiss,
    .tpg-sidebar-help__link--pdf,
    .tpg-empty-cart__cta,
    .site-header,
    .site-footer,
    nav,
    .announcement-bar {
        display: none !important;
    }

    /* Reset backgrounds for ink saving */
    .tpg-checkout-flow {
        background: white !important;
    }

    .tpg-checkout-flow .tpg-card,
    .tpg-checkout-flow .tpg-sidebar,
    .tpg-confirmation-success {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    /* Ensure text is black */
    .tpg-checkout-flow * {
        color: #000 !important;
    }

    /* Show URLs after links */
    .tpg-checkout-flow a[href]::after {
        content: " (" attr(href) ")";
        font-size: 12px;
        color: #666 !important;
    }

    /* Don't show URLs for buttons and internal links */
    .tpg-button--primary::after,
    .tpg-checkout-flow a[href^="#"]::after,
    .tpg-checkout-flow a[href^="javascript"]::after {
        content: none;
    }

    /* Single column layout */
    .tpg-checkout-flow .wp-block-woocommerce-cart,
    .tpg-checkout-flow .wp-block-woocommerce-checkout {
        display: block !important;
    }

    /* Avoid page breaks inside cards */
    .tpg-rec-card,
    .tpg-course-card,
    .tpg-confirmation-success,
    .tpg-sidebar {
        break-inside: avoid;
    }
}