/* =====================================================================
   Mulhern Advanced Search — LISTING PAGE styles (/belts, /fabrications)
   Version: 1.2.0

   Loaded ONLY on the belts / fabrications listing pages (see
   mulhern_should_show_advanced_search() in functions.php): sticky header,
   full-width results grid, compare bar, etc.

   The Advanced Search link, modal, Belts/Fabrications choice and dialogs
   are styled by css/mb-advanced-search.css, which loads on every page
   (2026-10: Advanced Search is available site-wide). Those rules were
   moved out of this file unchanged.
   =====================================================================


/* =====================================================================
   STICKY HEADER FIX - No gap, proper layering, FULL WIDTH
   ===================================================================== */

/* Mobile ONLY - Green header with padding */
@media (max-width: 767px) {
    /* Remove default body/html margins on mobile */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Green background behind header to cover any gap */
    html {
        background-color: var(--mb-primary-color) !important;
    }
    
    /* Page content stays white */
    body {
        background-color: #fff !important;
    }
    
    /* Header is green on mobile */
    .elementor-location-header {
        background: var(--mb-primary-color) !important;
    }
    
    /* Add internal padding to header for icon spacing */
    .elementor-location-header > .elementor-section,
    .elementor-location-header > .e-con {
        padding-top: 20px !important;
        padding-bottom: 10px !important;
    }
}

/* Base header state - ALL SCREEN SIZES */
/* CRITICAL: Only set position: relative when NOT sticky */
/* This allows Elementor's sticky to change to position: fixed */
.elementor-location-header:not(.elementor-sticky--active) {
    position: relative !important;
    z-index: 9999 !important;
}

/* Z-index for both sticky and non-sticky states */
.elementor-location-header,
.elementor-sticky--active {
    z-index: 9999 !important;
}

/* Desktop - ensure no background override, let Elementor control it */
@media (min-width: 768px) {
    .elementor-location-header {
        background: none !important;  /* Don't force green on desktop */
    }
    
    .elementor-location-header > .elementor-section,
    .elementor-location-header > .e-con {
        padding-top: 0 !important;  /* No extra padding on desktop */
        padding-bottom: 0 !important;
    }
}

/* Sticky state - FORCE top: 0 to prevent gap + FULL WIDTH */
/* DESKTOP/TABLET ONLY: On mobile, nothing is sticky — the header scrolls
   with the page. This scope prevents the broad .elementor-sticky--active
   selector from affecting mobile. */
@media (min-width: 768px) {
    .elementor-sticky--active,
    .elementor-sticky--active.elementor-section,
    .elementor-sticky--active.e-con,
    .elementor-sticky--active.elementor-widget {
        position: fixed !important;
        top: 0 !important;  /* CRITICAL: Forces to top, no gap */
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;  /* Full viewport width */
        max-width: none !important;  /* Remove any max-width constraints */
        z-index: 9999 !important;
        margin: 0 !important;
    }
}

/* MOBILE: Kill Elementor sticky behavior on header elements.
   The search icon (c37e93a) and hamburger (90b8492) are individually
   position:fixed via custom-styles.css section 4. Elementor's sticky
   JS should not interfere by adding its own fixed positioning.

   Elementor's sticky JS does two things:
   1) Adds .elementor-sticky--active class to the sticky element
   2) Wraps it in a <div class="elementor-sticky__wrapper" style="position:fixed">

   We kill the wrapper's fixed positioning but NOT the icon containers'
   fixed positioning (which we set ourselves). */
@media (max-width: 767px) {
    /* Kill sticky on the header itself and inner sections */
    .elementor-location-header.elementor-sticky--active,
    .elementor-location-header > .elementor-sticky--active {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        transform: none !important;
    }

    /* Kill sticky wrapper divs — but preserve width */
    .elementor-location-header .elementor-sticky__wrapper,
    .elementor-198462 .elementor-sticky__wrapper,
    .elementor-sticky__wrapper:has(.elementor-location-header),
    .elementor-sticky__wrapper:has(.elementor-198462) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        margin: 0 !important;
    }

    /* Kill any sticky spacers */
    .elementor-location-header .elementor-sticky__spacer,
    .elementor-198462 .elementor-sticky__spacer {
        display: none !important;
        height: 0 !important;
    }

    /* 89d8823 green bar stays in normal flow */
    .elementor-198462 .elementor-element.elementor-element-89d8823 {
        position: relative !important;
    }
}

/* Desktop sticky state - no background override */
@media (min-width: 768px) {
    .elementor-sticky--active {
        background: none !important;  /* Let Elementor control desktop background */
    }
}

/* Remove Elementor's auto-calculated top offset — DESKTOP ONLY */
@media (min-width: 768px) {
    .elementor-sticky--active[style*="top"] {
        top: 0 !important;
    }
}

/* Ensure container inside sticky header expands to full width — DESKTOP ONLY */
@media (min-width: 768px) {
    .elementor-sticky--active .elementor-container {
        max-width: none !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure inner content wrapper also expands */
    .elementor-sticky--active .e-con-inner,
    .elementor-sticky--active .elementor-widget-wrap {
        max-width: none !important;
        width: 100% !important;
    }
}

/* Force full width on wide viewports (> 1460px) */
@media (min-width: 1461px) {
    .elementor-sticky--active {
        width: 100vw !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .elementor-sticky--active .elementor-container,
    .elementor-sticky--active .e-con-inner {
        max-width: none !important;
        width: 100% !important;
    }
}

/* =====================================================================
   CONTENT AREA - Full width for grid expansion
   With the search widget in a modal, the grid gets the entire page.
   Remove Elementor container max-width constraints so the grid can
   fill the available space at every viewport width.
   
   Override both CSS variables AND direct properties to ensure the
   width busts through regardless of how Elementor consumes --width.
   ===================================================================== */
@media (min-width: 768px) {
    #search-parent .elementor-container,
    #search-parent .e-con,
    #search-parent .e-con-inner,
    #search-data-div .elementor-container,
    #search-data-div .e-con,
    #search-data-div .e-con-inner,
    #search-parent,
    #search-data-div {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Also bust the global kit container max-width on ALL .e-con
       elements in the search page content area                      */
    .elementor-196785 .e-con {
        --container-max-width: 100% !important;
    }
    
    .elementor-196785 .e-con > .e-con-inner {
        max-width: 100% !important;
    }
}


/* First content element needs proper spacing from sticky header */
.elementor-location-header ~ * {
    margin-top: 0 !important;
}

#search-parent,
#search-data-div {
    margin-top: 0 !important;
    padding-top: 8px !important;
    /* Kill Elementor kit default container padding */
    --container-default-padding-top: 0px !important;
    --container-default-padding-bottom: 0px !important;
}

/* The loop grid widget should have a lower stacking context so
   card images/shadows don't overlap the result status text above */
.elementor-widget-loop-grid {
    position: relative !important;
    z-index: 1 !important;
}

/* Grid PARENT containers (.e-con holding the loop-grid) must also
   have a lower z-index. overflow-x:hidden on .e-con creates separate
   stacking contexts, so sibling containers stack by z-index.
   The nav shortcode container (z-index:10) must beat these. — Issue #1 */
.e-con:has(.elementor-widget-loop-grid) {
    position: relative !important;
    z-index: 1 !important;
}

#search-parent {
    position: relative !important;
    z-index: 1 !important;
}



/* =====================================================================
   MOBILE: Compare bar sticky + spacing below status bar
   ===================================================================== */
@media (max-width: 767px) {
    #mb-compare-bar {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 60px);
        z-index: 99;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        margin-bottom: 10px;
    }
}

/* Click-outside menu dismiss handled by capture-phase JS listener — no backdrop needed */




/* =====================================================================
   RESULTS GRID - Always visible on page
   After JS moves the search widget into the modal, #search-widget-div
   is empty. Hide it so it doesn't steal space from the results grid.
   ===================================================================== */

/* Hide the empty widget container (its content is now in the modal).
   Target BOTH the custom ID and Elementor's own class, since the ID
   may not be set in Elementor's panel.                                 */
#search-widget-div,
#search-widget-div.e-con,
.elementor-page-196785 .elementor-element.elementor-element-a3b1c51 {
    display: none !important;
}

/* =====================================================================
   OVERRIDE ELEMENTOR WIDTH CONSTRAINTS
   post-196785.css sets CSS variables consumed by Elementor's base CSS:
     --content-width: 80% on the outer wrapper (7940c64)
     --width: 90% on #search-parent (f5b2f50)
     --width: 0%  on #search-data-div (a8ef7a9)
   post-7.css (kit) sets:
     --container-max-width: 1120px on all .e-con
   Combined: 1120 × 0.8 × 0.9 = ~806px — only 2 cards fit.
   
   Override BOTH the CSS variables AND the computed properties directly.
   The belt-and-suspenders approach ensures the override works even if
   Elementor's base CSS consumes variables in unexpected ways.
   ===================================================================== */

/* --- Outer boxed container (7940c64) --- */
.elementor-196785 .elementor-element.elementor-element-7940c64 {
    --content-width: 100% !important;
    --container-max-width: 100% !important;
    max-width: 100% !important;
}

/* Issue #3: Add side padding so grid cards don't go edge-to-edge
   on tablet/smaller desktop viewports. Uses % so it scales with viewport.
   Mobile has its own padding in the <768px rules.
   Issue #4: Reduce top padding for less vertical space after nav menu. */
@media (min-width: 768px) {
    .elementor-196785 .elementor-element.elementor-element-7940c64 {
        padding-left: max(20px, 3%) !important;
        padding-right: max(20px, 3%) !important;
        padding-top: 8px !important;  /* Was 20px from Elementor */
    }
}
@media (max-width: 767px) {
    .elementor-196785 .elementor-element.elementor-element-7940c64 {
        padding-top: 8px !important;  /* Issue #4: Reduce mobile spacing too */
    }
}

/* The boxed container's inner wrapper — this is where --content-width
   is actually consumed as max-width by Elementor's base CSS.           */
.elementor-196785 .elementor-element.elementor-element-7940c64 > .e-con-inner {
    max-width: 100% !important;
    width: 100% !important;
}

/* --- Search parent (f5b2f50) --- */
.elementor-196785 .elementor-element.elementor-element-f5b2f50 {
    --width: 100% !important;
    --container-max-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- Search data div (a8ef7a9) — post-196785.css sets --width:0% --- */
.elementor-196785 .elementor-element.elementor-element-a8ef7a9 {
    --width: 100% !important;
    --container-max-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* Also override by ID for any pages using generic IDs                   */
#search-parent {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 8px !important;     /* Issue #4: Reduced from 20px (60% reduction) */
    padding-bottom: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Issue #3: Side padding on search-parent for both belts & fabrications pages */
@media (min-width: 768px) {
    #search-parent {
        padding-left: max(20px, 3%) !important;
        padding-right: max(20px, 3%) !important;
    }
}

#search-data-div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* =====================================================================
   RESPONSIVE GRID COLUMNS — auto-fill replaces fixed breakpoints
   Now that the widget is in a modal the grid gets the full page width.
   auto-fill with minmax lets columns adapt to ANY viewport width
   without hard-coded breakpoint math.
   Card min-width 280px → 3 cols at ~900px, 4 at ~1200px, 5 at ~1500px
   
   Competing fixed-column rules have been removed from belts-search.css,
   fabrications-search.css, and custom-styles.css.
   
   Target through .elementor-widget-loop-grid to also beat Elementor
   Pro's widget-loop-grid.min.css which uses --grid-columns.
   ===================================================================== */
@media (min-width: 768px) {
    /* High-specificity rule to beat Elementor Pro's widget CSS */
    .elementor-widget-loop-grid .elementor-loop-container.elementor-grid,
    .elementor-widget-loop-grid .elementor-grid,
    .elementor-widget-loop-grid .e-loop-container,
    /* Fallback generic selectors */
    .elementor-loop-container.elementor-grid,
    .elementor-grid,
    .e-loop-container {
        display: grid !important;
        /* grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; */
        /* ^^^ DISABLED: custom-styles.css controls column count via fixed
           breakpoints (.mb-search-page .elementor-widget-loop-grid
           .elementor-loop-container) scaling 2→8 columns. This auto-fill
           rule loaded after custom-styles.css and overrode those. */
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* On small screens, single centered column */
@media (max-width: 767px) {
    .elementor-loop-container.elementor-grid,
    .elementor-grid,
    .e-loop-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
    }

    .elementor-loop-container .elementor-grid-item,
    .e-loop-container .e-loop-item,
    .elementor-grid > * {
        width: 500px !important;
        max-width: calc(100% - 40px) !important;
    }
}

/* =====================================================================
   MOBILE FLOATING BUTTON
   ===================================================================== */
/* .mb-mobile-search-btn removed — floating icons now handled by
   custom-styles.css section 4 (fixed hamburger + search icon) */


/* =====================================================================
   MOBILE HAMBURGER COLOR INVERSION
   ===================================================================== */
/* Scroll-based color inversion removed — icons are always 
   white bg / green icon (styled in custom-styles.css section 4) */

/* =====================================================================
   MOBILE MENU
   =====================================================================
   The mobile hamburger menu is styled and driven entirely by the
   mulhern-mobile-menu-fix plugin (mobile-menu.css / mobile-menu.js).
   The old positioning + .mb-nav-hidden rules were removed 2026-10-14:
   they only loaded on /belts and /fabrications and kept the dropdown
   hidden (visibility:hidden !important) when the plugin opened it. */


/* =====================================================================
   BELTS PAGE FIX - Remove body margin/padding
   ===================================================================== */
/* Belts page (post-196785) has body margin/padding that causes spacing issues */
body.elementor-page-196785 {
    margin: 0 !important;
    padding: 0 !important;
}

/* On mobile, still need the margins for proper layout */
@media (max-width: 767px) {
    body.elementor-page-196785 {
        margin: 0 !important;
        padding: 0 !important;
    }
}
.elementor-element {
--widgets-spacing-row: 0px !important;
}