/* ========================================
   CANNAPEACE MOBILE RESPONSIVENESS
   Complete mobile optimization for all devices
   ======================================== */

/* ===== PREVENT HORIZONTAL SCROLL ===== */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    body > * {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .site,
    .site-content,
    .site-header,
    .main-header-bar,
    .ast-container,
    #primary,
    .entry-content {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ===== LOADING SCREEN - MOBILE FIT ===== */
#loading-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: #000 !important;
}

#loading-screen video,
#loading-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* On mobile, use contain to show full logo */
@media (max-width: 768px) {
    #loading-screen video,
    #loading-video {
        object-fit: contain !important;
    }
}

/* ===== AGE GATE - MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    #age-gate-modal > div {
        margin: 20px !important;
        padding: 32px 24px !important;
        max-width: calc(100vw - 40px) !important;
    }

    #age-gate-modal h2 {
        font-size: 22px !important;
    }

    #age-gate-modal p {
        font-size: 14px !important;
    }

    #age-gate-modal button {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    #age-gate-modal > div > div:last-child {
        flex-direction: column !important;
        gap: 12px !important;
    }

    #age-gate-modal button {
        width: 100% !important;
    }
}

/* ===== HEADER & NAVIGATION - MOBILE ===== */
@media (max-width: 768px) {

    /* Header container */
    .site-header,
    .main-header-bar {
        padding: 12px 20px !important;
        height: auto !important;
    }

    /* Logo */
    .site-logo img,
    .custom-logo,
    .site-logo-img,
    .cannapeace-logo {
        display: block !important;
        max-width: 140px !important;
        height: auto !important;
    }

    /* Ensure site branding is visible */
    .site-branding {
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
        justify-content: center !important;
        margin: 0 50px !important; /* Space for hamburger and language switcher */
    }

    /* Hide desktop menu by default on mobile */
    .main-header-menu,
    .main-navigation {
        display: none;
    }

    /* Mobile menu when open (triggered by custom toggle) */
    .cp-mobile-menu-open .main-header-menu,
    .cp-mobile-menu-open .main-navigation {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(2, 45, 35, 0.98) !important;
        padding: 80px 20px 20px !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        z-index: 9998 !important;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-100%);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Mobile menu items */
    .cp-mobile-menu-open .main-header-menu li,
    .cp-mobile-menu-open .main-navigation li {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(117, 186, 45, 0.2) !important;
    }

    .cp-mobile-menu-open .main-header-menu a,
    .cp-mobile-menu-open .main-navigation a {
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        display: block !important;
        padding: 20px 15px !important;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }

    .cp-mobile-menu-open .main-header-menu a:hover,
    .cp-mobile-menu-open .main-navigation a:hover {
        background: rgba(117, 186, 45, 0.1) !important;
        padding-left: 25px !important;
    }
}

/* ===== PRODUCTS - MOBILE GRID ===== */
@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Product images should be responsive */
    .woocommerce ul.products li.product img,
    .woocommerce-page ul.products li.product img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Product content padding */
    .woocommerce ul.products li.product .product-content,
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .price {
        padding: 0 5px !important;
    }
}

/* ===== CART & CHECKOUT - MOBILE ===== */
@media (max-width: 768px) {
    .woocommerce-cart table.cart,
    .woocommerce-checkout table {
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }

    .woocommerce-cart table.cart td,
    .woocommerce-cart table.cart th,
    .woocommerce-checkout table td,
    .woocommerce-checkout table th {
        padding: 10px 5px !important;
        font-size: 14px !important;
    }

    .woocommerce-cart .cart-collaterals,
    .woocommerce-checkout .checkout-fields {
        margin-top: 30px !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals,
    .woocommerce-checkout .order-review {
        width: 100% !important;
        float: none !important;
    }
}

/* ===== LANGUAGE SWITCHER - MOBILE ===== */
@media (max-width: 768px) {
    .lang-switcher,
    .polylang-switcher,
    .pll-parent-menu-item {
        font-size: 14px !important;
    }

    .lang-switcher ul,
    .polylang-switcher ul,
    .pll-parent-menu-item ul {
        position: relative !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.1) !important;
        padding: 10px !important;
        margin-top: 10px !important;
    }
}

/* ===== CONTENT - MOBILE TYPOGRAPHY ===== */
@media (max-width: 768px) {
    h1 {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    p,
    li {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .entry-content {
        padding: 0 20px !important;
    }
}

/* ===== BUTTONS - MOBILE TOUCH FRIENDLY ===== */
@media (max-width: 768px) {
    button:not(.cp-mobile-menu-toggle),
    .button,
    .wp-block-button__link,
    .ast-custom-button,
    input[type="submit"],
    .woocommerce button.button,
    .woocommerce a.button {
        min-height: 48px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* Mobile menu toggle should NOT be full width */
    .cp-mobile-menu-toggle {
        width: auto !important;
        min-width: auto !important;
        padding: 8px !important;
        margin: 0 !important;
    }
}

/* ===== FOOTER - MOBILE ===== */
@media (max-width: 768px) {
    .site-footer .widget,
    .site-footer .footer-widget-area {
        width: 100% !important;
        float: none !important;
        margin-bottom: 30px !important;
        padding: 0 20px !important;
    }
}

/* ===== FORMS - MOBILE ===== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }
}

/* ===== TABLET (PORTRAIT) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 48% !important;
    }

    .site-logo img,
    .custom-logo {
        max-width: 180px !important;
    }
}

/* ===== SMALL MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    .site-logo img,
    .custom-logo {
        max-width: 120px !important;
    }

    #age-gate-modal h2 {
        font-size: 20px !important;
    }

    #age-gate-modal > div {
        padding: 24px 16px !important;
    }

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }
}

/* ===== FIX SPECIFIC ELEMENTS ===== */

/* Cart icon counter */
.cart-container .count,
.ast-cart-menu-wrap .count {
    display: inline-block !important;
    background: #75ba2d !important;
    color: white !important;
    border-radius: 50% !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    min-width: 20px !important;
    text-align: center !important;
}

/* Ensure all images are responsive */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix any iframe embeds */
iframe {
    max-width: 100% !important;
}

/* Accessibility - larger touch targets on mobile */
@media (max-width: 768px) {
    a,
    button,
    input[type="submit"],
    .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}