/**
 * JA Enterprise Child - Responsive Style Sheet (Media Queries)
 *
 * @package JA_Enterprise_Child
 */

/* Breakpoint: Desktop (1200px and below) */
@media (max-width: 1200px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Breakpoint: Tablet (1024px and below) */
@media (max-width: 1024px) {
    h1, .ja-title-h1 { font-size: 38px; }
    h2, .ja-title-h2 { font-size: 30px; }
    h3, .ja-title-h3 { font-size: 24px; }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Breakpoint: Small Tablet & Mobile (1000px and below) */
@media (max-width: 1000px) {
    .ja-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    /* Responsive WooCommerce Product Grid */
    .woocommerce ul.products[class*="columns-"] li.product,
    .woocommerce-page ul.products[class*="columns-"] li.product {
        width: 48% !important;
        float: left !important;
        margin: 0 1% 20px 1% !important;
    }
    
    .woocommerce-page.columns-4 ul.products li.product {
        width: 48% !important;
    }

    /* Single Product layout mobile */
    .woocommerce #content div.product div.images, 
    .woocommerce #content div.product div.summary, 
    .woocommerce div.product div.images, 
    .woocommerce div.product div.summary, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page #content div.product div.summary, 
    .woocommerce-page div.product div.images, 
    .woocommerce-page div.product div.summary {
        width: 100% !important;
        float: none !important;
    }

    /* Mobile Header Updates */
    .ja-top-bar {
        font-size: 11px;
        text-align: center;
        padding: 8px 10px;
    }
    .ja-top-bar .ja-container > div {
        flex-direction: column;
        gap: 10px;
    }
    .ja-main-header .ja-container {
        flex-wrap: wrap;
    }
    .ja-logo-text {
        order: 1;
    }
    .ja-logo-text h1 {
        font-size: 22px;
    }
    .ja-header-actions {
        order: 2;
        margin-left: auto;
        margin-right: 15px;
    }
    .ja-mobile-menu-toggle {
        display: block !important;
        order: 3;
        margin-left: 0;
    }
    .ja-search-container {
        order: 4;
        width: 100%;
        max-width: 100%;
        margin: 15px 0 0 0;
    }
    .ja-search-form {
        flex-direction: row;
        border-radius: 30px; /* Fully rounded like the reference */
        overflow: hidden;
    }
    .ja-search-cat-select {
        display: none !important; /* Hide categories dropdown on mobile */
    }
    .ja-search-input {
        flex-grow: 1;
        padding-left: 20px;
        padding-top: 4px; /* Center text vertically */
    }
    .ja-search-btn {
        width: 60px; /* Ensure button isn't too wide */
    }
    
    /* Mobile Menu Drawer */
    .ja-nav-bar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 999999;
        overflow-y: auto;
        background-color: #ffffff;
        padding-top: 60px; /* Space for close button */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .ja-mobile-menu-open .ja-nav-bar {
        display: block;
    }
    .ja-mobile-menu-open .ja-mobile-menu-close {
        display: block !important;
    }
    .ja-nav-bar .ja-container > div {
        flex-direction: column;
        align-items: stretch;
    }
    .ja-main-menu {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        margin-top: 15px;
    }
    .ja-main-menu li {
        width: 100%;
        border-bottom: 1px solid var(--ja-border, #E5E7EB);
    }
    .ja-main-menu li:last-child {
        border-bottom: none;
    }
    .ja-main-menu a {
        padding: 12px 0;
        display: block;
        width: 100%;
    }
    .ja-category-dropdown-wrapper {
        width: 100%;
    }
    .ja-category-btn {
        width: 100%;
        justify-content: center;
    }
    .ja-todays-deals-btn {
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }

    /* Tablet Footer */
    .ja-footer-grid {
        grid-template-columns: repeat(3, 1fr);
        text-align: left;
    }
    .ja-footer-grid > div:first-child {
        grid-column: 1 / -1;
        text-align: center;
        margin-bottom: 20px;
    }
    .ja-footer-grid > div:last-child {
        grid-column: 1 / -1;
        text-align: center;
        margin-top: 20px;
    }
    .ja-footer-grid .ja-social-icons {
        justify-content: center;
    }
    .ja-footer-menu-style {
        margin: 5px 0 20px 0;
    }
    
    /* Center the bottom copyright bar on tablets */
    .ja-footer .ja-container:last-child {
        flex-direction: column;
        gap: 15px;
    }
}

/* Breakpoint: Small Tablet & Mobile (768px and below) */
@media (max-width: 768px) {
    .ja-carousel-section-title {
        font-size: 20px !important;
    }
    .ja-featured-products-carousel-wrapper .ja-carousel-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    /* Restrict to max 2 rows on mobile (4 products total) */
    .ja-featured-products-carousel-wrapper .ja-carousel-item:nth-child(n+5) {
        display: none !important;
    }
}

/* Breakpoint: Mobile (576px and below) */
@media (max-width: 576px) {
    /* Mobile Phone Footer */
    .ja-footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ja-footer-grid > div:first-child,
    .ja-footer-grid > div:last-child {
        grid-column: 1; /* Reset full width override on mobile */
    }

    h1, .ja-title-h1 { font-size: 32px; }
    h2, .ja-title-h2 { font-size: 26px; }
    
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .woocommerce ul.products[class*="columns-"] li.product,
    .woocommerce-page ul.products[class*="columns-"] li.product {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
    
    /* Accessibility skip link focus style */
    .skip-link:focus {
        top: 10px;
        left: 10px;
        padding: 10px 15px;
        background: #ffffff;
        border: 2px solid var(--ja-primary);
        z-index: 99999;
    }
}

/* Breakpoint: Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .ja-logo-text h1 {
        font-size: 18px !important;
    }
    .ja-logo-text span {
        font-size: 9px !important;
    }
    .ja-header-actions {
        margin-right: 6px !important;
    }
    .ja-mobile-menu-toggle {
        padding: 2px !important;
    }
}