/****************************
 * Common
****************************/
.vii-menu-row {
    min-height:var(--vii-header-height);
    background-color:var(--vii-header-bg);
    padding-left:var(--vii-gap-container);
    padding-right:var(--vii-gap-container);
}
/* Scroll middle down: hide menu */
body.menu-sticky.scroll-middle.scroll-down:not(.scroll-bottom) [data-menu*="sticky"] {
    opacity:0; transform:translateY(-100%);
}
/* menu-sticky */
.menu-sticky {padding-top:var(--vii-body-padding-top);}
body:not(.scroll-top) .vii-menu,
html.menu-open .vii-menu {box-shadow:0 8px 15px -15px rgba(0, 0, 0, .18);}
/* menu logo */
.vii-menu-logo {
    height:var(--vii-logo-height);
    aspect-ratio:130/30;
    position:relative;
    img {
        width:auto;position:absolute;
        transition:all .3s;
        &.sticky-logo {
            opacity:0;visibility:hidden;
        }
    }
}
html.menu-open body.menu-transparent .vii-menu-logo .sticky-logo,
body.menu-transparent.scroll-middle.scroll-up .vii-menu-logo .sticky-logo,
body.menu-transparent.scroll-bottom .vii-menu-logo .sticky-logo {opacity:1;visibility:visible;}

.vii-menu-col.right {gap:24px;align-items:center;}
/* open/close */
html:not(.menu-open) .vii-menu-mobile {visibility:hidden; opacity:0;}

/* wrapper */
.vii-menu-mobile-container {
    max-width:var(--vii-mobile-menu-width);
    padding-top:var(--vii-header-height);
    background-color:var(--vii-color-white);
}
html:not(.menu-open) .vii-menu-mobile-container {transform:translateX(-105%);}
body.admin-bar .vii-menu-mobile-container {padding-top:calc(var(--vii-header-height) + 32px);}

/* section */
.vii-menu-mobile__section {padding:var(--vii-gap-container);}

/* Accordion Button */
.open-sub-menu {background:none; padding:5px;}
.open-sub-menu.active {transform:rotate(180deg);}
.open-sub-menu.active, .open-sub-menu:hover {color:var(--vii-color-primary);}

/* Toggle menu */
.vii-menu-mobile-toggle_menu {
    background-color:rgba(0, 0, 0, 0.3);
}

/* vii-hamburger-button */
.vii-hamburger-button {background-color:transparent; transform:translateX(2px)}
.vii-hamburger-button__inner {width:20px;height:16px;}
.vii-hamburger-button__inner i {height:2px; background-color:var(--vii-hambuger-bg);}

.vii-hamburger-button__inner i:nth-child(2) {top:7px;}
.vii-hamburger-button__inner i:nth-child(3) {width:15px;}
html.menu-open .vii-hamburger-button__inner i:nth-child(1) {
    top:9px;
    transform:rotate(45deg);
}
html.menu-open .vii-hamburger-button__inner i:nth-child(2) {
    width:0; left:50%;
}
html.menu-open .vii-hamburger-button__inner i:nth-child(3) {
    width:100%;
    bottom:5px;transform:rotate(-45deg);
}

/****************************
 * Menu
****************************/
/* Common Menu */
.mobile-menu ul > li:not(:last-child) {margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #eee;}
.mobile-menu ul {list-style:none; margin:0;}
.mobile-menu ul > li {padding:0;}
.mobile-menu ul > li > a {
    position:relative; display:block;
    padding:5px 0; text-decoration:none;
}
.mobile-menu ul > li[class*="current-"] > a,
.mobile-menu ul > li > a:hover,
.mobile-menu ul > li > a:focus {color:var(--vii-color-primary);text-decoration:underline;}

/* Common Sub Menu */
.mobile-menu ul.sub-menu {margin-top:5px; padding-top:5px; width:100%; padding-left:15px;}
.mobile-menu ul.sub-menu > li:first-child {padding-top:10px; border-top:1px solid #eee;}

/* Menu level 1 */
/*.mobile-menu ul.menu > li > a {}*/


/****************************
 * Menu Has Child
****************************/
.menu-item-has-children {display:flex; flex-wrap:wrap; justify-content:space-between; position:relative;align-items:center;}
.menu-item-has-children > a {order:1; max-width:calc(100% - 40px);}
.menu-item-has-children > .menu-item-arrow {order:2; width:40px;}
.menu-item-has-children > ul {order:3; width:100%;}

/* Arrow button */
.menu-item-arrow {text-align:right;}
.menu-item-arrow__button {
    font-size:15px;
    padding:5px; margin-right:-5px;
    background:transparent;
}
.menu-item-arrow__button i {display:inline-block; transition:transform .3s ease;}
.menu-item-arrow__button.active i {transform:rotate(180deg);}

/****************************
 * Mobile Menu Responsive
****************************/
@media only screen and (max-width:1180px) {
    html.menu-open {overflow:hidden; height:100%;}
    .vii-menu-mobile.hidden {display:block;}
}
@media screen and (max-width:782px) {
    body.admin-bar .vii-menu-mobile-container {padding-top:var(--vii-header-height);}
    body.menu-transparent .menu-sticky {padding-top:0;}
}
@media screen and (max-width:480px) {
    .vii-menu-mobile-container {max-width:100%;}
    .vii-menu-col.right {gap:16px;}
}