/* ═══════════════════════════════════════════════════════════════
   mobile-menu-fix.css
   Loaded last so every rule here wins cleanly.
   Covers: mobile header layout, logo sizing, hamburger colour,
   nav dropdown design, backdrop overlay, z-index stacking,
   and the click-blocking fix.
═══════════════════════════════════════════════════════════════ */

/* ─── 1. HEADER BAR (≤ 1199 px) ────────────────────────────── */
@media (max-width: 1199px) {

    /* Dark bar — keep site-navigation as the positioning root */
    #site-header-menu {
        background-color: #000 !important;
    }

    #site-header-menu .site-navigation {
        position: relative !important;   /* nav dropdown anchors here */
        height: 70px        !important;
        display: flex       !important;
        align-items: center !important;
        padding: 0 15px     !important;
    }

    /* ─── 2. LOGO ───────────────────────────────────────────── */
    /* Cap logo height across the full tablet/mobile range */
    .site-branding-02,
    .prt-header-style-01 .site-branding-02 {
        display: flex        !important;
        align-items: center  !important;
        padding: 0           !important;
    }

    .site-branding-02 a.home-link img,
    #logo-imgs {
        max-height: 50px !important;
        width: auto      !important;
        object-fit: contain;
    }

    /* ─── 3. HAMBURGER BUTTON ───────────────────────────────── */
    .btn-show-menu-mobile.menubar {
        /* Override the absolute-positioned default from megamenu.css */
        position: relative  !important;
        top: auto           !important;
        right: auto         !important;
        bottom: auto        !important;
        margin-left: auto   !important;   /* push to right edge */
        display: flex       !important;
        align-items: center !important;
        justify-content: center !important;
        width:  44px        !important;
        height: 44px        !important;
        flex-shrink: 0      !important;
        z-index: 10001      !important;
        cursor: pointer     !important;
    }

    /* White bars on the dark header */
    .menubar-inner,
    .menubar-inner::after,
    .menubar-inner::before {
        background-color: #fff !important;
    }

    /* ─── 4. NAV DROPDOWN ───────────────────────────────────── */
    /* Hidden state — ensure it's truly gone and non-interactive */
    nav.main-menu.menu-mobile:not(.show) {
        display:        none          !important;
        pointer-events: none          !important;
        visibility:     hidden        !important;
    }

    /* Visible state */
    nav.main-menu.menu-mobile.show {
        display:         block        !important;
        visibility:      visible      !important;
        pointer-events:  auto         !important;
        position:        absolute     !important;
        top:             100%         !important;
        left:            0            !important;
        right:           0            !important;
        background-color: #fff        !important;
        border-top: 3px solid var(--base-skin, #e84545) !important;
        box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;
        z-index: 10000                !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto              !important;
    }

    /* Nav link colours */
    nav.main-menu.menu-mobile ul.menu > li > a {
        color: #222 !important;
        font-size: 15px !important;
        padding: 14px 20px !important;
    }

    nav.main-menu.menu-mobile ul.menu > li > a.active,
    nav.main-menu.menu-mobile ul.menu > li > a:hover {
        color: var(--base-skin, #e84545) !important;
        background: rgba(0,0,0,.03)      !important;
    }

    /* ─── 5. BACKDROP ───────────────────────────────────────── */
    /* Appears via body.menu-opened (synced by MutationObserver in header.php) */
    body.menu-opened::before {
        content:  '';
        position: fixed;
        inset:    0;
        background: rgba(0,0,0,.50);
        z-index:  9998;
        pointer-events: none;   /* click-through — JS handles outside-tap */
    }

    /* ─── 6. Z-INDEX STACKING ───────────────────────────────── */
    /* Header sits above backdrop */
    body.menu-opened #site-header-menu {
        position: relative !important;
        z-index:  9999     !important;
    }

    /* ─── 7. INNER FLEX WRAPPER FIX ─────────────────────────── */
    /* The .d-flex wrapper inside site-navigation wraps the nav +
       header_extra button. On mobile we don't need it as a flex
       container — the nav is absolute, header_extra is hidden. */
    .site-navigation .d-flex.justify-content-between.align-items-center {
        display:  block    !important;
        position: static   !important;
    }
}

/* ─── 8. EXTRA SMALL (≤ 480 px) ─────────────────────────── */
@media (max-width: 480px) {

    .site-branding-02 a.home-link img,
    #logo-imgs {
        max-height: 42px !important;
    }

    #site-header-menu .site-navigation {
        padding: 0 10px !important;
    }
}