/****************************
 * Common
****************************/
.vii-menu-row {padding:0 var(--vii-gap-container);}
.vii-menu-row.main {
    min-height:var(--vii-header-height);
    padding-top:var(--vii-header-padding);
    padding-left:var(--vii-gap-side);
}


/****************************
 * Logo
****************************/
.vii-menu-logo {height:var(--vii-logo-height);}
.vii-menu-logo img {height:100%; width:auto;}

/* light/dark */
.vii-menu-logo img.is-white {opacity:0;}
.txt_color_white .vii-menu-logo img.is-white {opacity:1;}
.txt_color_white .vii-menu-logo img.is-black {opacity:0;}
body.menu-sticky.scroll-middle .vii-menu-logo img.is-black {opacity:1;}
body.menu-sticky.scroll-middle .vii-menu-logo img.is-white {opacity:0;}


/* Center */
@media only screen and (min-width:1181px) {
    body.is-logo-center .vii-menu-row.main {max-width:unset;
        padding-top:var(--vii-header-padding);
        padding-left:var(--vii-header-padding);
    }
    body.is-logo-center .vii-menu-block.hamburger.for-mobile {display:none;}

    body.is-logo-center .vii-menu-sticky-right {opacity:1; visibility:visible;}

    body.is-logo-center .vii-menu-row.main:before {content:"";}
    body.is-logo-center .vii-menu-row.main:before,
    body.is-logo-center .vii-menu-col.right {min-width:150px;}
    body.is-logo-center .vii-menu-block.logo {transform:translate(0, 40px);}
}

/****************************
 * Hamburger button
****************************/
.vii-hamburger-button {
    background:var(--vii-color-primary);
    width:var(--vii-hamburger-size); height:var(--vii-hamburger-size);
}
.vii-hamburger-button__inner {width:16px; height:11px;}

/* Lines */
.vii-hamburger-button__inner i {width:100%; height:1px; background:var(--vii-color-on-primary);}
.vii-hamburger-button__inner i:nth-child(1) {top:0;}
.vii-hamburger-button__inner i:nth-child(2) {top:5px; left:50%; transform:translateX(-50%);}
.vii-hamburger-button__inner i:nth-child(3) {bottom:0;}

/* hover */
html:not(.menu-open) .vii-hamburger-button:hover i:nth-child(2) {width:0;}
html:not(.menu-open) .vii-hamburger-button:hover i:nth-child(1) {transform:translate(0, 2px);}
html:not(.menu-open) .vii-hamburger-button:hover i:nth-child(3) {transform:translate(0, -2px);}

/* Open */
html.menu-open .vii-hamburger-button {background:#fff;}
html.menu-open .vii-hamburger-button i {background:#000;}
html.menu-open .vii-hamburger-button i:nth-child(1) {transform:rotate(45deg); top:5px;}
html.menu-open .vii-hamburger-button i:nth-child(3) {transform:rotate(-45deg); bottom:5px; width:100%;}
html.menu-open .vii-hamburger-button i:nth-child(2) {width:0; left:50%;}

/****************************
 * Menu Sticky
****************************/
body.menu-sticky {padding-top:var(--vii-header-height);}
[data-menu*="sticky"] {position:fixed; top:0; left:0; right:0;}

body.menu-sticky.is-overlay-menu-bar {padding-top:0;}

/* wrapper */
.vii-menu-row.main .vii-menu-row-inner {min-height:var(--vii-header-height);}

/* Scroll middle down: hide menu */
@media only screen and (min-width:1181px) {
    html:not(.accordion-moving) body.menu-sticky.scroll-middle [data-menu*="sticky"] {
        opacity:0;
        /* transform:translateY(-100%); */
    }
}
@media only screen and (max-width:1180px) {
    html:not(.accordion-moving) body.menu-sticky.scroll-middle.scroll-down:not(.scroll-bottom) [data-menu*="sticky"] {
        opacity:0; transform:translateY(-100%);
    }

    /* Scroll middle up: change header background */
    body.menu-sticky.scroll-up:not(.scroll-top) [data-menu*="sticky"] {
        background:var(--vii-color-text-primary-900-dark); box-shadow:0 0 5px 0 rgba(0, 0, 0, .2);
    }

    /* Scroll middle: reduce header size */
    body.menu-sticky.scroll-middle .vii-menu-row.main {
        padding-bottom:var(--vii-header-padding);
        min-height:var(--vii-header-height-sticky);
        align-items:center;
    }
    body.menu-sticky.scroll-middle {
        --vii-logo-height:var(--vii-logo-height-sticky);
        --vii-header-padding:var(--vii-header-padding-sticky);
    }
}