/*
 * Mobile Menu Fix for MMS
 * Pure CSS — no jQuery dependency
 */

/* Force toggle button visibility on mobile */
@media only screen and (max-width: 991px) {

    /* ── Hamburger button ─────────────────────────────────────── */
    .horizontal-navtoggle,
    .animated-arrow.horizontal-toggle,
    .animated-arrow {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 15px !important;
        top: 18px !important;
        z-index: 10002 !important;
        cursor: pointer !important;
        padding: 14px 35px 16px 0px !important;
    }

    .animated-arrow span {
        background: #22252f !important;
        height: 2px !important;
        width: 17px !important;
        display: block !important;
        position: absolute !important;
    }
    .animated-arrow span:before,
    .animated-arrow span:after {
        background: #22252f !important;
        height: 2px !important;
        width: 17px !important;
        display: block !important;
        content: '' !important;
        position: absolute !important;
    }
    .animated-arrow span:before { top: -7px; width: 23px !important; }
    .animated-arrow span:after  { bottom: -7px; }

    /* ── X state when menu is open ────────────────────────────── */
    body.active .animated-arrow span,
    body.menu-open .animated-arrow span {
        background-color: transparent !important;
    }
    body.active .animated-arrow span:before,
    body.menu-open .animated-arrow span:before {
        transform: rotate(45deg) !important;
        top: -3px !important;
    }
    body.active .animated-arrow span:after,
    body.menu-open .animated-arrow span:after {
        transform: rotate(-45deg) !important;
        top: -3px !important;
    }

    /* ── Main header ──────────────────────────────────────────── */
    .main-header.hor-header {
        position: relative !important;
        z-index: 10001 !important;
        width: 100% !important;
    }
    .main-header-left {
        position: relative;
        min-height: 60px;
        display: flex;
        align-items: center;
    }
    .main-header-left .header-brand { margin-left: 60px !important; }

    /* ── Horizontal menu panel (hidden by default) ────────────── */
    .horizontalMenu {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        visibility: hidden !important;
        overflow: hidden !important;
        z-index: 10000 !important;
    }

    /* Show menu when body.active */
    body.active .horizontalMenu,
    body.menu-open .horizontalMenu,
    body.active.menu-open .horizontalMenu {
        visibility: visible !important;
        overflow-y: auto !important;
    }

    /* ── Menu list (slides in from left) ──────────────────────── */
    .horizontalMenu > .horizontalMenu-list {
        background: #fff !important;
        width: 240px !important;
        height: 100% !important;
        overflow-y: auto !important;
        margin-left: -240px !important;
        transition: margin-left 0.25s ease-in-out !important;
        position: relative !important;
        z-index: 10001 !important;
        display: block !important;
        padding: 0 !important;
    }

    body.active .horizontalMenu > .horizontalMenu-list,
    body.menu-open .horizontalMenu > .horizontalMenu-list,
    body.active.menu-open .horizontalMenu > .horizontalMenu-list {
        margin-left: 0 !important;
    }

    /* ── Overlay ──────────────────────────────────────────────── */
    .horizontal-overlapbg {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.45) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease !important;
        z-index: 9999 !important;
    }

    body.active .horizontal-overlapbg,
    body.menu-open .horizontal-overlapbg,
    body.active.menu-open .horizontal-overlapbg {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ── Menu items ───────────────────────────────────────────── */
    .horizontalMenu > .horizontalMenu-list > li {
        display: block !important;
        float: none !important;
        position: relative !important;
        border-bottom: 1px solid #e7eaf3 !important;
    }

    .horizontalMenu > .horizontalMenu-list > li > a {
        padding: 12px 32px 12px 17px !important;
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
        color: #22252f !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }

    .horizontalMenu > .horizontalMenu-list > li > a i,
    .horizontalMenu > .horizontalMenu-list > li > a .fas,
    .horizontalMenu > .horizontalMenu-list > li > a .fa {
        display: inline-block !important;
        margin-right: 10px !important;
        width: 20px !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    /* Hide desktop chevron */
    .horizontalMenu > .horizontalMenu-list > li > a .horizontal-icon {
        display: none !important;
    }

    /* ── Submenu click target ─────────────────────────────────── */
    .horizontalMenu-click {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 50px !important;
        height: 49px !important;
        cursor: pointer !important;
        z-index: 2 !important;
        text-align: center !important;
    }

    .horizontalMenu-click i {
        display: block !important;
        margin-top: 14px !important;
        font-size: 16px !important;
        color: #888aaf !important;
        transition: transform 0.2s ease !important;
    }

    .horizontalMenu-click.horizontal-active i {
        transform: rotate(180deg) !important;
    }

    /* ── Submenus — override Valex template with matching specificity ── */

    /* Level 1 sub-menu (default hidden, JS toggles to display:block) */
    .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu {
        display: none;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        min-width: unset !important;
        background: #f8f9fa !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        list-style: none !important;
    }

    /* Level 2 sub-menu (nested inside level 1) */
    .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > ul.sub-menu {
        display: none;
        position: relative !important;
        position: static !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        min-width: unset !important;
        background: #f0f1f5 !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        list-style: none !important;
    }

    /* Level 3 sub-menu (nested inside level 2) */
    .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu {
        display: none;
        position: relative !important;
        position: static !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        min-width: unset !important;
        background: #e8eaf0 !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        list-style: none !important;
    }

    /* All sub-menu li items at every level must be visible */
    .horizontalMenu .sub-menu > li {
        display: block !important;
        position: relative !important;
        float: none !important;
        border-bottom: 1px solid #eef0f7 !important;
    }

    /* Sub-menu links — level 2 */
    .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > a {
        padding: 10px 50px 10px 35px !important;
        color: #565a75 !important;
        font-size: 13px !important;
        display: block !important;
        text-decoration: none !important;
    }

    /* Sub-menu links — level 3 */
    .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a {
        padding: 10px 50px 10px 55px !important;
        color: #565a75 !important;
        font-size: 13px !important;
        display: block !important;
        text-decoration: none !important;
    }

    /* Sub-menu links — level 4 */
    .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
        padding: 10px 50px 10px 75px !important;
        color: #565a75 !important;
        font-size: 13px !important;
        display: block !important;
        text-decoration: none !important;
    }

    .horizontalMenu .sub-menu > li > a:hover {
        background: #e9ecef !important;
        color: #0162e8 !important;
    }

    /* Hide the ::before arrow icons from template on mobile */
    .sub-menu li a:before {
        display: none !important;
    }

    /* Hide the .sub-menu-sub::after arrow from template */
    .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu .sub-menu-sub:after {
        display: none !important;
    }

    /* ── Submenu click02 arrows (all nested levels) ───────────── */
    .horizontalMenu-click02 {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 50px !important;
        height: 40px !important;
        cursor: pointer !important;
        z-index: 2 !important;
        text-align: center !important;
    }

    .horizontalMenu-click02 i {
        display: block !important;
        margin-top: 10px !important;
        font-size: 14px !important;
        color: #888aaf !important;
        transition: transform 0.2s ease !important;
    }

    .horizontalMenu-click02 i.horizontalMenu-rotate {
        transform: rotate(180deg) !important;
    }

    /* ── Body scroll lock ─────────────────────────────────────── */
    body.active,
    body.menu-open,
    body.active.menu-open {
        overflow: hidden !important;
    }

    /* ── Container shift ──────────────────────────────────────── */
    .horizontalMenucontainer {
        transition: margin-left 0.25s ease-in-out !important;
    }

    body.active .horizontalMenucontainer,
    body.menu-open .horizontalMenucontainer,
    body.active.menu-open .horizontalMenucontainer {
        margin-left: 240px !important;
    }

    /* ── Sticky bar mobile ────────────────────────────────────── */
    .sticky {
        position: relative !important;
    }

    .horizontal-main.hor-menu {
        display: none !important;
    }

    body.active .horizontal-main.hor-menu,
    body.menu-open .horizontal-main.hor-menu {
        display: block !important;
    }
}

/* ── Desktop (≥ 992px) ────────────────────────────────────────── */
@media only screen and (min-width: 992px) {
    .horizontal-navtoggle,
    .animated-arrow {
        display: none !important;
    }

    .horizontalMenu > .horizontalMenu-list > li > a i,
    .horizontalMenu > .horizontalMenu-list > li > a .fas {
        display: inline-block !important;
        margin-right: 8px !important;
    }

    /* Fix: push page content below both the fixed header AND the menu bar.
       margin-top is set dynamically by JS to account for menu wrapping. 
       Do NOT use !important here — JS inline style must be able to override. */
    .main-content.horizontal-content {
        margin-left: 0 !important;
    }
}