/**
 * Responsive & Performance Optimizations
 * Mobile-first enhancements and performance improvements
 */

/* ============================================
   TOUCH-FRIENDLY INTERACTIONS
   ============================================ */

/* Larger tap targets for mobile */
@media (max-width: 768px) {
    button,
    a.btn,
    .btn {
        min-height: 3rem;
        min-width: 3rem;
        padding: var(--space-3) var(--space-4);
    }

    .product-action-btn,
    .carousel-nav-btn,
    .qty-minus,
    .qty-plus {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .thumbnail-btn {
        min-width: 3rem;
        min-height: 3rem;
    }

    .filter-section label,
    .cat-item a {
        padding: var(--space-3);
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 1.5rem;
        min-height: 1.5rem;
    }
}

/* Touch feedback */
@media (hover: none) and (pointer: coarse) {
    button:active,
    a.btn:active,
    .btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    .product-card:active {
        transform: scale(0.98);
    }

    .category-card:active {
        transform: scale(0.98);
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for animations */
.hero-section,
.product-card,
.category-card,
.testimonial-card,
.newsletter-card,
.carousel-nav-btn,
.thumbnail-btn {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reduce motion for users who prefer it */
@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;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
    content-visibility: auto;
}

/* Text rendering optimization */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container queries support */
@supports (container-type: inline-size) {
    .product-layout-grid {
        container-type: inline-size;
    }

    .shop-layout {
        container-type: inline-size;
    }

    .checkout-layout {
        container-type: inline-size;
    }
}

/* ============================================
   MOBILE-SPECIFIC ENHANCEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Safe area insets for notched devices */
    .site-main,
    .hero-content,
    .shop-page,
    .single-product-page,
    .woocommerce-cart,
    .woocommerce-checkout {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }

    /* Sticky header adjustments */
    .site-header {
        padding-top: max(0, env(safe-area-inset-top));
    }

    /* Larger touch targets for navigation */
    .main-navigation a {
        padding: var(--space-4);
        min-height: 3rem;
        display: flex;
        align-items: center;
    }

    /* Mobile menu improvements */
    .mobile-menu {
        padding: var(--space-6);
        padding-top: max(var(--space-6), env(safe-area-inset-top));
    }

    /* Form improvements */
    input,
    select,
    textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Carousel improvements */
    .products-track,
    .testimonials-track,
    .thumbnails-track {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .product-card-slide,
    .testimonial-card,
    .thumbnail-btn {
        scroll-snap-align: start;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a2e;
        --bg-secondary: #16213e;
        --bg-tertiary: #0f3460;
        --text-primary: #eaeaea;
        --text-secondary: #a0a0a0;
        --text-tertiary: #707070;
        --color-gray-200: #2a2a4a;
        --color-gray-300: #3a3a5a;
    }

    .glass-card {
        background: rgba(26, 26, 46, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .hero-overlay {
        background: linear-gradient(135deg, rgba(27, 77, 62, 0.9) 0%, rgba(10, 10, 20, 0.85) 100%);
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --color-primary: #1b4d3e;
        --color-secondary: #d4a373;
        --text-primary: #000000;
        --text-secondary: #333333;
    }

    .btn-primary {
        border: 2px solid #000;
    }

    .btn-secondary {
        border: 2px solid #000;
    }

    input,
    select,
    textarea {
        border: 2px solid #000;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .hero-section,
    .featured-products-section,
    .categories-section,
    .testimonials-section,
    .newsletter-section,
    .shop-sidebar,
    .cart-sidebar,
    .checkout-sidebar,
    .product-actions,
    .carousel-nav,
    .filters-toggle,
    .mobile-menu,
    .back-to-top {
        display: none !important;
    }

    .product-layout-grid,
    .shop-layout,
    .checkout-layout,
    .cart-layout {
        display: block !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
        color: black;
    }

    .product-info,
    .cart-items,
    .checkout-main {
        page-break-inside: avoid;
    }
}