/**
 * Mobile Whitespace Fix - Custom CSS
 * Fixes excessive padding on WordPress block groups that creates 2/3rds whitespace on mobile devices
 * 
 * Issue: WordPress block groups were applying 120px left + 120px right padding on mobile
 * Result: Only 135px content width on 375px screens (375px - 240px = 135px)
 * Solution: Responsive padding reduction for mobile and tablet devices
 */

/* Mobile devices - Fix critical whitespace issue */
@media screen and (max-width: 768px) {
    /* WordPress Block Groups - Primary fix for excessive padding */
    /* Exclude cover blocks, full-width, and wide blocks from padding reduction */
    .wp-block-group:not(.wp-block-cover):not(.alignfull):not(.alignwide):not(.has-background-image) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* WordPress Block Columns - but not full-width ones */
    .wp-block-columns:not(.alignfull):not(.alignwide) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Cover blocks should maintain full width - ensure no padding */
    .wp-block-cover {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    .wp-block-cover__inner-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* Full-width and wide alignment blocks should maintain their intended width */
    .wp-block-group.alignfull,
    .wp-block-columns.alignfull,
    .wp-block-image.alignfull,
    .wp-block-gallery.alignfull,
    .wp-block-media-text.alignfull {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    /* Wide alignment blocks */
    .wp-block-group.alignwide,
    .wp-block-columns.alignwide,
    .wp-block-image.alignwide,
    .wp-block-gallery.alignwide {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: calc(100vw - 10px) !important;
    }
    
    /* Hero sections and banner areas should be full width */
    .wp-block-group.is-style-hero,
    .wp-block-group[class*="hero"],
    .wp-block-group[class*="banner"],
    .wp-block-group[class*="cover"] {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    /* Additional block elements that may have excessive padding - but preserve full-width elements */
    .wp-block-group__inner-container:not(.alignfull):not(.alignwide) {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    
    /* Media and text blocks - but not full width ones */
    .wp-block-media-text:not(.alignfull):not(.alignwide) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Button groups */
    .wp-block-buttons:not(.alignfull):not(.alignwide) {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* Tablet devices - Moderate padding reduction */
@media screen and (min-width: 769px) and (max-width: 992px) {
    /* Only apply padding reduction to regular blocks, not full-width ones */
    .wp-block-group:not(.wp-block-cover):not(.alignfull):not(.alignwide):not(.has-background-image) {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    
    .wp-block-columns:not(.alignfull):not(.alignwide) {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    
    /* Cover blocks should maintain full width on tablet */
    .wp-block-cover {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        position: relative !important;
    }
    
    .wp-block-cover__inner-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* Full-width blocks on tablet */
    .wp-block-group.alignfull,
    .wp-block-columns.alignfull,
    .wp-block-image.alignfull,
    .wp-block-gallery.alignfull {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        position: relative !important;
    }
    
    /* Wide alignment blocks on tablet */
    .wp-block-group.alignwide,
    .wp-block-columns.alignwide {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .wp-block-media-text:not(.alignfull):not(.alignwide) {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* Small tablets - Additional breakpoint */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .wp-block-group:not(.wp-block-cover):not(.alignfull):not(.alignwide):not(.has-background-image) {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    
    .wp-block-columns:not(.alignfull):not(.alignwide) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Preserve full-width elements */
    .wp-block-cover,
    .wp-block-group.alignfull,
    .wp-block-columns.alignfull {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        position: relative !important;
    }
}

/* Very small mobile devices */
@media screen and (max-width: 480px) {
    .wp-block-group:not(.wp-block-cover):not(.alignfull):not(.alignwide):not(.has-background-image) {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .wp-block-columns:not(.alignfull):not(.alignwide) {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Ensure cover blocks remain full width on very small screens */
    .wp-block-cover,
    .wp-block-group.alignfull,
    .wp-block-columns.alignfull {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        position: relative !important;
    }
    
    /* Ensure minimum usable content width for regular blocks */
    .wp-block-group__inner-container:not(.alignfull):not(.alignwide) {
        min-width: calc(100% - 20px) !important;
    }
}

/* DESKTOP FIX - Reduce excessive whitespace between header and content */
@media screen and (min-width: 993px) {
    /* Reduce Astra's default 4em top margin on #primary for page builder templates */
    .ast-page-builder-template #primary,
    #primary {
        margin-top: 1em !important;
        margin-bottom: 2em !important;
    }
    
    /* WHITE STRIP FIX - Remove white strip at top for pages with cover blocks */
    body.home #primary,
    body.page-id-275 #primary,
    body.page-id-276 #primary,
    body.page-id-277 #primary,
    body.page-id-279 #primary {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.home .entry-content,
    body.page-id-275 .entry-content,
    body.page-id-276 .entry-content,
    body.page-id-277 .entry-content,
    body.page-id-279 .entry-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
        /* Force position to eliminate any inherited spacing */
        position: relative !important;
        top: -16px !important;
    }

    /* Remove any default margins from Astra containers on these pages */
    body.home .ast-container,
    body.page-id-275 .ast-container,
    body.page-id-276 .ast-container,
    body.page-id-277 .ast-container,
    body.page-id-279 .ast-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Eliminate all potential spacing sources on these pages */
    body.home .site-content,
    body.page-id-275 .site-content,
    body.page-id-276 .site-content,
    body.page-id-277 .site-content,
    body.page-id-279 .site-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Force cover blocks to start at absolute top on these pages */
    body.home .wp-block-cover.alignfull:first-child,
    body.page-id-275 .wp-block-cover.alignfull:first-child,
    body.page-id-276 .wp-block-cover.alignfull:first-child,
    body.page-id-277 .wp-block-cover.alignfull:first-child,
    body.page-id-279 .wp-block-cover.alignfull:first-child {
        margin-top: -16px !important;  /* Pull up by 16px to compensate for inherited spacing */
        padding-top: 64px !important;  /* Adjust padding to maintain visual spacing (48px + 16px) */
        position: relative !important;
        top: 0 !important;
    }
    
    /* Remove excessive top margin from entry headers */
    .ast-page-builder-template .entry-header {
        margin-top: 1em !important;
    }
    
    /* Reduce spacing in archive descriptions */
    .ast-page-builder-template .ast-archive-description {
        margin-top: 1em !important;
    }
    
    /* Tighter content spacing for better desktop layout */
    .site-content {
        padding-top: 0 !important;
    }
    
    /* Ensure proper spacing for blog layouts */
    .ast-separate-container #primary {
        margin-top: 2em !important;
        margin-bottom: 2em !important;
    }
}

/* Additional Astra theme container fixes for mobile */
@media screen and (max-width: 768px) {
    /* Reduce excessive Astra container padding on mobile */
    .ast-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .ast-container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Grid columns in Astra */
    .ast-grid-common-col {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Page builder templates */
    .ast-page-builder-template .entry-header {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .ast-page-builder-template .ast-archive-description {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Ensure images and media still display properly */
@media screen and (max-width: 768px) {
    .wp-block-image,
    .wp-block-gallery,
    .wp-block-video {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Ensure buttons remain properly spaced */
    .wp-block-button {
        margin: 10px 5px !important;
    }
    
    /* WooCommerce Cart Block - Mobile Overflow Fix */
    /* Fix alignwide blocks causing horizontal scroll on mobile */
    .wp-block-woocommerce-cart.alignwide {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    
    /* WooCommerce Checkout Block - Preventive fix */
    .wp-block-woocommerce-checkout.alignwide {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    
    /* Other WooCommerce blocks that might use alignwide */
    .wp-block-woocommerce-product-search.alignwide,
    .wp-block-woocommerce-product-category.alignwide,
    .wp-block-woocommerce-products.alignwide {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        width: auto !important;
        max-width: 100% !important;
    }
    
    /* BLOG PAGE HERO BANNER FIX - Specific fix for right offset issue */
    .blog-hero-banner .wp-block-cover.alignfull,
    body.blog .wp-block-cover.alignfull,
    body.category .wp-block-cover.alignfull,
    body.archive .wp-block-cover.alignfull {
        left: 0 !important;
        right: 0 !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        transform: none !important;
    }
    
    /* Fix any container within blog hero that might be causing the offset */
    .blog-hero-banner,
    body.blog .wp-block-cover__inner-container,
    body.category .wp-block-cover__inner-container,
    body.archive .wp-block-cover__inner-container {
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* OFF-CANVAS MENU BUTTON - White font color on mobile */
    .menu-toggle,
    .main-header-menu-toggle,
    .ast-mobile-menu-trigger-minimal,
    .mobile-menu-toggle-icon,
    .ast-mobile-header-wrap button {
        color: white !important;
        fill: white !important;
    }
    
    /* Mobile menu toggle icon and SVG */
    .mobile-menu-toggle-icon svg,
    .mobile-menu-toggle-icon svg path,
    .menu-toggle svg,
    .menu-toggle svg path,
    .ast-mobile-menu-trigger-minimal svg,
    .ast-mobile-menu-trigger-minimal svg path {
        fill: white !important;
        stroke: white !important;
        color: white !important;
    }
    
    /* Screen reader text should also be white */
    .menu-toggle .screen-reader-text {
        color: white !important;
    }
    
    /* Additional mobile menu button selectors for comprehensive coverage */
    .ast-mobile-header-wrap .menu-toggle,
    .ast-button-wrap .menu-toggle,
    button.menu-toggle {
        color: white !important;
    }
    
    /* CART BADGE POSITIONING FIX - Mobile Off-Canvas Menu */
    /* ULTRA-SPECIFIC targeting based on exact DOM structure found */
    
    @media screen and (max-width: 768px) {
        /* Target the EXACT element chain from DOM inspection */
        .ast-mobile-header-content .ast-builder-menu-mobile ul#ast-hf-mobile-menu li.menu-item-1132 a.menu-link span.cart-count-badge {
            /* NUCLEAR override approach - use transform to move from current position */
            transform: translateX(-340px) translateY(-50%) !important; /* Move left from screen edge to near Cart text */
            top: 50% !important;
            left: auto !important;
            right: auto !important;
            position: fixed !important; /* Use fixed to override any parent positioning */
            z-index: 9999 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #e74c3c !important;
            color: white !important;
            width: 20px !important;
            height: 20px !important;
            border-radius: 4px !important;
            font-size: 11px !important;
            font-weight: bold !important;
        }
        
        /* Alternative approach - try to override the specific left positioning */
        span.cart-count-badge.empty[style*="left: 367px"] {
            left: 50px !important; /* Force to a visible position */
            transform: none !important;
            background: #00ff00 !important; /* Green to test if this selector works */
        }
        
        /* Third approach - use CSS animation to apply positioning after JS runs */
        @keyframes fixCartBadge {
            0% { left: 367px; }
            100% { left: 50px !important; top: 8px !important; }
        }
        
        .cart-count-badge {
            animation: fixCartBadge 0.1s ease-out 0.5s forwards !important;
        }
    }
    
    /* SEARCH WIDGET POSITIONING - Position between breadcrumbs and page title */
    @media screen and (max-width: 768px) {
        /* Create proper layout structure - target the specific shop page container */
        body.woocommerce-shop .entry-content,
        body.tax-product_cat .entry-content,
        body.woocommerce .entry-content,
        .woocommerce-page .entry-content,
        .single-product .entry-content {
            display: flex !important;
            flex-direction: column !important;
            position: relative !important;
        }
        
        /* Position breadcrumb at the top */
        .woocommerce-breadcrumb {
            order: -100 !important; /* First element */
            margin-top: 15px !important; /* Space below header */
            margin-bottom: 10px !important; /* Reduce space below breadcrumb */
            position: relative !important;
        }
        
        /* Position search widget between breadcrumb and title */
        .vojia-shop-search-widget {
            order: -90 !important; /* After breadcrumb, before title */
            margin-top: 10px !important; /* Small space from breadcrumb above */
            margin-bottom: 20px !important; /* Space to title below */
            position: relative !important;
            z-index: 10 !important;
            width: 100% !important;
            display: block !important;
        }
        
    }
    
    /* SEARCH WIDGET ICON - Apply to both mobile and desktop */
    .vojia-shop-search-widget .search-form {
        position: relative !important;
        display: block !important;
    }
    
    .vojia-shop-search-widget input[type="search"],
    .vojia-shop-search-widget input[type="text"] {
        width: 100% !important;
        padding: 12px 50px 12px 15px !important; /* Extra right padding for icon */
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
        font-size: 14px !important;
        background: #fff !important;
    }
    
    .vojia-shop-search-widget button[type="submit"],
    .vojia-shop-search-widget .search-submit {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        border: none !important;
        padding: 8px !important;
        cursor: pointer !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .vojia-shop-search-widget button svg,
    .vojia-shop-search-widget .search-submit svg {
        width: 18px !important;
        height: 18px !important;
        fill: #666 !important;
        stroke: #666 !important;
        
        /* Position page title/header after search widget */
        .woocommerce-products-header {
            order: -80 !important; /* After search widget */
            margin-top: 0 !important;
            margin-bottom: 20px !important;
        }
        
        /* Products and other content come after */
        .products,
        .woocommerce .products {
            order: 20 !important;
        }
        
        .woocommerce-notices-wrapper {
            order: 5 !important;
        }
        
        .woocommerce-result-count,
        .woocommerce-ordering {
            order: 15 !important;
        }
    }
    
    /* SHOP PAGES MOBILE LAYOUT FIX - Remove excessive white space */
    body.woocommerce-shop #content,
    body.woocommerce-page #content,
    body.woocommerce #content,
    body.tax-product_cat #content,
    body.tax-product_tag #content {
        padding-top: 0px !important; /* Removed all padding for minimal white space */
        margin-top: 0 !important;
    }
    
    /* Shop page main content area - remove redundant padding */
    body.woocommerce-shop .site-content,
    body.woocommerce-page .site-content,
    body.woocommerce .site-content,
    body.tax-product_cat .site-content,
    body.tax-product_tag .site-content {
        padding-top: 0px !important; /* Removed redundant padding */
        margin-top: 0 !important;
    }
    
    /* Ensure shop page header/title area has proper spacing */
    body.woocommerce-shop .woocommerce-products-header,
    body.woocommerce-page .woocommerce-products-header,
    body.tax-product_cat .woocommerce-products-header {
        margin-top: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    /* Fix any potential negative margins that might cause overlap */
    body.woocommerce-shop .entry-content,
    body.woocommerce-page .entry-content,
    body.woocommerce .entry-content,
    body.tax-product_cat .entry-content {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }
}