/**
 * HMVIP Creator Nav — Responsive Navigation Override
 *
 * Layout Strategy:
 * - SMARTPHONE (≤768px): ALL navs (#object-nav + subnav) become horizontal swipe-scroll
 * - TABLET/NOTEBOOK (≥769px): Only .hmvip-swipe-nav (subnav) gets flex-wrap double-row.
 *                              #object-nav (sidebar) is NEVER touched on desktop.
 *
 * @since 1.5.0
 */

/* ====================================================================
 * SMARTPHONE: Swipe-Scroll Horizontal for ALL navs (max-width: 768px)
 * ==================================================================== */
@media screen and (max-width: 768px) {

    /* Both the primary member nav AND the subnav get horizontal swipe */
    #object-nav > ul,
    nav.bp-navs > ul,
    .hmvip-swipe-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding-right: 24px !important;
        gap: 2px;
        max-height: none !important;
        height: auto !important;
    }

    #object-nav > ul::-webkit-scrollbar,
    nav.bp-navs > ul::-webkit-scrollbar,
    .hmvip-swipe-nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #object-nav > ul > li,
    nav.bp-navs > ul > li,
    .hmvip-swipe-nav > li {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start;
        white-space: nowrap !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        max-width: none !important;
        position: static !important;
        transform: none !important;
    }

    /* Hide the hideshow overflow containers on mobile */
    #object-nav > ul > li.hideshow,
    nav.bp-navs > ul > li.hideshow,
    .hmvip-swipe-nav > li.hideshow,
    #object-nav > ul > li.more,
    nav.bp-navs > ul > li.more,
    .hmvip-swipe-nav > li.more {
        display: none !important;
    }

    /* Restored items from hideshow */
    #object-nav > ul > li[data-hmvip-restored="true"],
    nav.bp-navs > ul > li[data-hmvip-restored="true"],
    .hmvip-swipe-nav > li[data-hmvip-restored="true"] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Kill overlay on mobile */
    .bb_more_dropdown_overlay,
    .bb_nav_more_dropdown {
        display: none !important;
    }

    /* Force horizontal even if BB sets vertical */
    nav.bp-navs.vertical > ul,
    nav.bb-single-main-nav--vertical > ul {
        flex-direction: row !important;
    }
}

/* ====================================================================
 * TABLET & NOTEBOOK: Double-row wrap ONLY for .hmvip-swipe-nav
 * #object-nav (sidebar) is NOT touched here — it stays vertical natively.
 * ==================================================================== */
@media screen and (min-width: 769px) {

    .hmvip-swipe-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px 6px;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .hmvip-swipe-nav > li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        position: static !important;
        transform: none !important;
    }

    .hmvip-swipe-nav > li.hideshow,
    .hmvip-swipe-nav > li.more {
        display: none !important;
    }

    .hmvip-swipe-nav > li[data-hmvip-restored="true"] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ====================================================================
 * SHARED: Polish and micro-animations
 * ==================================================================== */
.hmvip-swipe-nav > li > a,
#object-nav > ul > li > a,
nav.bp-navs > ul > li > a {
    transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.2s;
    border-radius: 8px !important;
}

.hmvip-swipe-nav > li.current > a,
.hmvip-swipe-nav > li > a:hover {
    transform: scale(1.02);
}

.hmvip-menu-icon {
    margin-right: 4px;
}