/**
 * Responsive Styles
 * Your Electrics - Global Mobile-First Responsive Overrides
 *
 * This file contains responsive adjustments that span multiple components.
 * Component-specific responsive styles live in their own files:
 * - navigation.css handles nav breakpoints
 * - products.css handles product grid breakpoints
 *
 * This file handles:
 * 1. Mobile Base (default, up to 767px)
 * 2. Tablet (768px - 1023px)
 * 3. Desktop (1024px+)
 * 4. Wide screens (1400px+)
 * 5. Print styles
 *
 * Approach: Mobile-first
 * Default styles = mobile, then enhance for larger screens
 */


/* ============================================
   1. MOBILE BASE STYLES
   Default styles for phones (320px - 767px)
   These apply to ALL screen sizes as the base
   ============================================ */

/**
 * Global mobile layout
 * Single column, full-width elements
 */
body {
    font-size: var(--font-size-base); /* 16px - readable on mobile */
    -webkit-text-size-adjust: 100%; /* Prevent iOS text inflation */
}

/**
 * Container width - full width with padding on mobile
 */
.ast-container,
.site-content .ast-container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/**
 * Mobile typography
 * Slightly smaller headings on small screens
 */
h1 { font-size: var(--font-size-2xl); }   /* 24px on mobile */
h2 { font-size: var(--font-size-xl); }    /* 20px on mobile */
h3 { font-size: var(--font-size-lg); }    /* 18px on mobile */
h4 { font-size: var(--font-size-base); }  /* 16px on mobile */

/**
 * Mobile header adjustments
 * Stack elements vertically, compact spacing
 */
.site-header .ast-container {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/**
 * Search bar - full width below logo on mobile
 */
.ye-search-bar {
    order: 3; /* Push below logo and cart */
    flex-basis: 100%;
    max-width: 100%;
    margin: 0;
}

/**
 * Mobile touch targets
 * All interactive elements must be at least 48px
 */
a,
button,
input[type="submit"],
input[type="button"],
select {
    min-height: 48px;
}

/**
 * Mobile images
 * Prevent horizontal scrolling
 */
img {
    max-width: 100%;
    height: auto;
}

/**
 * Mobile tables
 * Horizontal scroll for data tables
 */
table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/**
 * WooCommerce cart table - responsive on mobile
 */
.woocommerce table.shop_table {
    display: block;
    overflow-x: auto;
}

/**
 * Single product - stacked layout on mobile
 */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    width: 100%;
    float: none;
}

/**
 * Sticky add-to-cart bar — mobile & tablet only
 * Keeps quantity + button visible while scrolling product specs.
 * Resets to normal flow at 1024px+ (desktop section below).
 */
@media (max-width: 1023px) {
    .woocommerce div.product form.cart {
        position: sticky;
        bottom: 0;
        background: var(--white);
        padding: var(--spacing-md);
        margin-left: calc(var(--spacing-md) * -1);
        margin-right: calc(var(--spacing-md) * -1);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: var(--z-index-sticky);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        border-top: 1px solid var(--border-color);
    }

    .woocommerce div.product form.cart .quantity {
        flex-shrink: 0;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex: 1;
    }
}

/**
 * Footer - single column on mobile
 */
.site-footer .ast-container {
    text-align: center;
}

.site-footer .ast-row {
    flex-direction: column;
    gap: var(--spacing-lg);
}


/* ============================================
   2. TABLET STYLES
   768px and above
   ============================================ */

@media (min-width: 768px) {

    /**
     * Tablet typography
     * Slightly larger than mobile
     */
    h1 { font-size: var(--font-size-3xl); }   /* 30px */
    h2 { font-size: var(--font-size-2xl); }    /* 24px */
    h3 { font-size: var(--font-size-xl); }     /* 20px */

    /**
     * Tablet header
     * Search bar inline with logo
     */
    .site-header .ast-container {
        flex-wrap: nowrap;
    }

    .ye-search-bar {
        order: unset;
        flex-basis: auto;
        max-width: 400px;
        margin: 0 var(--spacing-md);
    }

    /**
     * Tablet containers
     * Add more padding
     */
    .ast-container,
    .site-content .ast-container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    /**
     * WooCommerce result bar
     * Count and ordering side by side
     */
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        display: inline-block;
    }

    .woocommerce .woocommerce-result-count {
        float: left;
        line-height: 48px; /* Align with dropdown */
    }

    .woocommerce .woocommerce-ordering {
        float: right;
    }

    /**
     * Footer - 2 column layout on tablet
     */
    .site-footer .ast-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .site-footer .ast-row > * {
        flex: 1 1 45%;
    }
}


/* ============================================
   3. DESKTOP STYLES
   1024px and above
   ============================================ */

@media (min-width: 1024px) {

    /**
     * Desktop typography
     * Full-size headings
     */
    h1 { font-size: var(--font-size-4xl); }   /* 36px */
    h2 { font-size: var(--font-size-3xl); }    /* 30px */
    h3 { font-size: var(--font-size-2xl); }    /* 24px */
    h4 { font-size: var(--font-size-xl); }     /* 20px */

    /**
     * Desktop container
     * Centered with max width
     */
    .ast-container,
    .site-content .ast-container {
        max-width: var(--max-width-container);
        margin-left: auto;
        margin-right: auto;
    }

    /**
     * Desktop search bar
     * Larger on desktop
     */
    .ye-search-bar {
        max-width: 600px;
    }

    /* Single product layout moved to css/single-product.css (CSS Grid) */

    /**
     * Desktop footer - multi-column
     */
    .site-footer .ast-row {
        flex-wrap: nowrap;
    }

    .site-footer .ast-row > * {
        flex: 1;
    }

    .site-footer .ast-container {
        text-align: left;
    }
}


/* ============================================
   4. WIDE SCREEN STYLES
   1400px and above
   ============================================ */

@media (min-width: 1400px) {

    /**
     * Wide screen product grid
     * 4 columns for very large screens
     */
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
    }

    /**
     * Wider container padding
     */
    .ast-container,
    .site-content .ast-container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }
}


/* ============================================
   5. PRINT STYLES
   Clean output when customers print pages
   ============================================ */

@media print {

    /* Hide non-essential elements */
    .site-header,
    .ye-main-nav,
    .ye-breadcrumbs,
    .site-footer,
    .woocommerce-ordering,
    .woocommerce-pagination,
    .add_to_cart_button,
    .single_add_to_cart_button,
    .related.products {
        display: none;
    }

    /* Clean white background */
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    /* Show full product info */
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100%;
        float: none;
    }

    /* Show URLs after links */
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 10pt;
        color: #666;
    }
}


/* ============================================
   6. UTILITY CLASSES
   Responsive show/hide helpers
   ============================================ */

/**
 * Show/hide elements based on screen size
 * Usage: <div class="ye-hide-mobile">Only on tablet+</div>
 */
.ye-hide-mobile {
    display: none;
}

.ye-hide-desktop {
    display: block;
}

@media (min-width: 768px) {
    .ye-hide-mobile {
        display: block;
    }

    .ye-hide-tablet {
        display: none;
    }
}

@media (min-width: 1024px) {
    .ye-hide-desktop {
        display: none;
    }

    .ye-hide-tablet {
        display: block;
    }
}