/* =========================================================================
   Mulhern Mobile Menu — self-contained mobile header + hamburger styling
   -------------------------------------------------------------------------
   Lifted verbatim from custom-styles.css "section 4) MOBILE HEADER &
   HAMBURGER FIX" so the look is unchanged, with two edits:
     - the old `.mb-nav-hidden` rule was replaced by a single FOUC-safe
       `.mb-nav-open` show class (see below), and
     - nested sub-menu indentation was folded in.

   After this plugin is active, DELETE the original section 4 from
   custom-styles.css (it was lines 215-446, between the "4) MOBILE HEADER"
   comment and the "5) Desktop/Tablet" comment). Keep everything else.

   The show/hide + accordion contract this file relies on is driven by
   assets/js/mobile-menu.js (bundled in this same plugin).
   ========================================================================= */

/* =========================================================
   4) MOBILE HEADER & HAMBURGER FIX (≤767px)
   
   Strategy: The green bar (89d8823) is a flex row containing:
     - c37e93a (search icon, 1%)
     - 4968653 (logo + contact, 60%, flex-grow:1)
     - 90b8492 (hamburger container, 15%)
   
   We CANNOT make 89d8823 fixed without fixing the logo too.
   Instead: c37e93a and 90b8492 become individually position:fixed,
   floating at top corners. 89d8823 stays in normal flow so the
   logo/contact scroll with the page.
   
   Icons float as small green circular buttons over page content.
   No full-width green strip — just the individual buttons.
   ========================================================= */
@media (max-width: 767px) {

    /* ── Green bar: stays in normal document flow ─────────── */
    .elementor-198462 .elementor-element.elementor-element-89d8823 {
        position: relative !important;
        background: #008345 !important;
        height: auto !important;
        min-height: 60px;
        align-items: center !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        overflow: visible !important;
    }

    /* No ::before green strip — icons float independently */

    /* ── Logo container (4968653) — push down to clear fixed status pill ── */
    .elementor-198462 .elementor-element.elementor-element-4968653 {
        margin-top: 30px !important;
    }

    /* ── Search icon container (c37e93a) — FIXED top-left ── */
    .elementor-198462 .elementor-element.elementor-element-c37e93a {
        position: fixed !important;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px) !important;
        left: 10px !important;
        z-index: 99999 !important;
        width: auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
        flex-shrink: 0 !important;
        padding-top: 0 !important;
        background: transparent !important;
    }

    /* ── Replace magnifying glass with sliders icon ──────── */
    #mb-advanced-search-link svg {
        display: none !important;
    }
    #mb-advanced-search-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        position: relative !important;
        background: #008345 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    #mb-advanced-search-link::before {
        content: '' !important;
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center !important;
    }

    /* ── Hamburger container (90b8492) — FIXED top-right ─── */
    .elementor-198462 .elementor-element.elementor-element-90b8492 {
        position: fixed !important;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px) !important;
        right: 10px !important;
        left: auto !important;
        z-index: 99999 !important;
        --width: auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        padding-top: 0 !important;
        background: transparent !important;
    }

    /* ── Hamburger widget (195bf08) ─────────────────────── */
    .elementor-198462 .elementor-element.elementor-element-195bf08 {
        width: auto !important;
        max-width: none !important;
        --container-widget-width: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    /* Widget container - prevent collapse */
    .elementor-198462 .elementor-element.elementor-element-195bf08 > .elementor-widget-container {
        display: block !important;
        visibility: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ── The toggle button itself — green circle ───────────── */
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 44px !important;
        height: 44px !important;
        justify-content: center;
        align-items: center;
        border-radius: 50% !important;
        background-color: #008345 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
        margin-left: auto !important;
    }

    /* Toggle icon always white */
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-menu-toggle svg {
        fill: #ffffff !important;
    }

    /* When menu is open — slightly lighter green */
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-menu-toggle.elementor-active {
        background-color: #006d38 !important;
    }
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-menu-toggle.elementor-active svg {
        fill: #ffffff !important;
    }

    /* ── Hamburger dropdown — FIXED below floating icons ── */
    /* position:fixed breaks free of ALL ancestor overflow clipping.
       Positioned just below the floating icon buttons (44px + 8px top + 8px gap = 60px). */
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        position: fixed !important;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 60px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 0px)) !important;
        overflow-y: auto !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
        z-index: 99998 !important;
        background: #ffffff !important;
    }

    /* ── Sub-menu accordion ────────────────────────────────── */
    /* Sub-menus hidden by default, toggled via JS .mb-submenu-open class */
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-nav-menu .sub-menu {
        display: none !important;
    }
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-nav-menu .menu-item-has-children.mb-submenu-open > .sub-menu {
        display: block !important;
    }

    /* Dropdown arrow indicator for expandable items */
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-nav-menu .menu-item-has-children > a::after {
        content: '▸' !important;
        display: inline-block !important;
        margin-left: 6px !important;
        transition: transform 0.2s ease !important;
        font-size: 14px !important;
    }
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-nav-menu .menu-item-has-children.mb-submenu-open > a::after {
        transform: rotate(90deg) !important;
    }

    /* Hide Elementor's default sub-menu caret SVG icons */
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-nav-menu .sub-menu-toggle,
    .elementor-198462 .elementor-element.elementor-element-195bf08 .elementor-nav-menu .e-font-icon-svg.e-fas-caret-down {
        display: none !important;
    }


    /* ── Kill Elementor sticky on hamburger widget ──────── */
    /* Elementor wraps 195bf08 in a sticky wrapper with inline
       position:fixed. We kill it since 90b8492 is already fixed. */
    .elementor-198462 .elementor-element.elementor-element-195bf08.elementor-sticky--active {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: none !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    /* Kill ALL sticky wrappers inside the mobile header.
       width:100% not auto — auto collapses %-width children. */
    .elementor-198462 .elementor-element.elementor-element-89d8823 .elementor-sticky__wrapper {
        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 spacer on mobile */
    .elementor-198462 .elementor-sticky__spacer {
        display: none !important;
        height: 0 !important;
    }

    /* ── Show/hide driven entirely by the plugin (FOUC-safe) ──────────────
       Elementor hides .elementor-nav-menu--dropdown by default, so the menu
       starts closed with no flash. The plugin JS adds .mb-nav-open to reveal
       it and .elementor-active to the toggle (for the X icon + green state).
       No dependency on Elementor's native toggle handler. */
    .elementor-198462 .elementor-element.elementor-element-195bf08
    .elementor-nav-menu__container.elementor-nav-menu--dropdown.mb-nav-open {
        display: block !important;
    }

    /* ── Uniform centering (prevents staggered rows) ─────────────────────
       The mobile menu is centered by design, including sub-menu items. Reset
       any inherited indentation so every level lines up, and keep parent
       (has-children) links centered with the ▸ caret right after the label
       rather than a flex row that pushes the caret to the edge. */
    .elementor-198462 .elementor-element.elementor-element-195bf08
    .elementor-nav-menu--dropdown .elementor-item,
    .elementor-198462 .elementor-element.elementor-element-195bf08
    .elementor-nav-menu--dropdown .elementor-sub-item {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .elementor-198462 .elementor-element.elementor-element-195bf08
    .elementor-nav-menu .menu-item-has-children > a {
        display: block !important;
        text-align: center !important;
    }
    .elementor-198462 .elementor-element.elementor-element-195bf08
    .elementor-nav-menu .menu-item-has-children > a::after {
        margin-left: 6px !important;
    }

}