/**
 * Gapli Starter — Base CSS
 * Reset, critical layout, utility classes, micro-animations
 * Mobile-first approach
 */

/* ============================================================
   RESET & FOUNDATION
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Fade-in on scroll */
.gapli-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.gapli-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children */
.gapli-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.gapli-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.gapli-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.gapli-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.gapli-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }

/* Hover lift effect for cards */
.gapli-lift {
    transition: transform var(--wp--custom--transition--base),
                box-shadow var(--wp--custom--transition--base);
}

.gapli-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp--preset--shadow--card-hover);
}

/* Pulse animation for badges */
@keyframes gapli-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.gapli-pulse {
    animation: gapli-pulse 2s ease-in-out infinite;
}

/* ============================================================
   MOBILE-FIRST LAYOUT HELPERS
   ============================================================ */

/* Sticky header */
.wp-block-group[class*="header"] {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Product grid — responsive columns */
@media (max-width: 768px) {
    .wp-block-columns {
        flex-wrap: wrap;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Two-column product grid on mobile */
    .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Stack archive layout on mobile — hide sidebar */
    .wp-block-columns > .wp-block-column:first-child[style*="25%"] {
        display: none;
    }
    
    .wp-block-columns > .wp-block-column:last-child[style*="75%"] {
        flex-basis: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Single column product grid on very small screens */
    .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   FOCUS & ACCESSIBILITY
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 999;
    padding: 0.5rem 1rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--text-inverse);
}

.skip-link:focus {
    top: 0;
}