/****************************
 * Common
****************************/
.vii-menu-row.main {
    min-height:var(--vii-header-height); gap:4px; max-width:100%;
    padding-top:calc(var(--vii-header-height) - var(--vii-height-menu));
}


/****************************
 * Logo
****************************/
.vii-menu-logo {--height-box:var(--vii-logo-height); aspect-ratio:11/12; padding:5px;}
.vii-menu-logo img {height:100%; width:auto;}


/****************************
 * Hamburger button
****************************/
.vii-hamburger-button {width:44px; height:44px; padding:4px;}
.vii-hamburger-button__inner {width:20px; height:14px;}

/* Lines */
.vii-hamburger-button__inner i {width:100%; height:2px; background:var(--vii-color-primary); border-radius:2px;}
.vii-hamburger-button__inner i:nth-child(1) {top:0; left:auto; right:0; width:14px;}
.vii-hamburger-button__inner i:nth-child(2) {top:6px;}
.vii-hamburger-button__inner i:nth-child(3) {bottom:0;}

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

/****************************
 * Menu Sticky
****************************/
[data-menu*="sticky"] {position:fixed; top:0; left:0; right:0;}

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

/* Scroll middle down: hide menu */
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"],
body.menu-sticky.scroll-bottom [data-menu*="sticky"],
html.menu-open [data-menu*="sticky"] {
    background:var(--vii-color-primary); border-bottom:1px solid rgba(255, 255, 255, .1);
}
body.menu-sticky.scroll-up:not(.scroll-top) .vii-menu-row.main,
body.menu-sticky.scroll-bottom .vii-menu-row.main {
    --vii-header-height:var(--vii-header-height-sticky);
    padding-top:calc((var(--vii-header-height) - var(--vii-height-menu)) / 2);
}


/****************************
 * Menu Responsive
****************************/
@media only screen and (max-width:1180px) {
    .vii-menu-row.main {
        padding-top:calc((var(--vii-header-height) - var(--vii-height-menu)) / 2) !important;
        padding-bottom:calc((var(--vii-header-height) - var(--vii-height-menu)) / 2);
        justify-content:space-between;
    }
    .vii-menu-col.left .vii-menu-col__inner {display:none;}
    .vii-menu-col.right {gap:8px; align-items:flex-start;}

    /* cta button in column right with header center */
    body.is-center-header .vii-header-cta-buttons a,
    body.menu-sticky.scroll-up:not(.scroll-top) .vii-header-cta-buttons a,
    body.menu-sticky.scroll-bottom .vii-header-cta-buttons a,
    html.menu-open .vii-header-cta-buttons a {
        --btn-bg-color:var(--vii-color-white); --btn-color:var(--vii-color-primary);
        --btn-color-hover:var(--vii-color-white); --btn-bg-color-hover:rgba(0, 0, 0, 0);
        --btn-border-color:var(--vii-color-white); --btn-border-color-hover:var(--vii-color-white);
    }

    body.menu-sticky.scroll-up:not(.scroll-top) .vii-menu-logo,
    body.menu-sticky.scroll-bottom .vii-menu-logo {--height-box:44px; padding:2px;}
    body.menu-sticky.scroll-up:not(.scroll-top) .vii-menu-row.main,
    body.menu-sticky.scroll-bottom .vii-menu-row.main {
        --vii-height-menu:44px;
    }
}
@media only screen and (max-width:480px) {
    html.menu-open [data-menu*="sticky"] {border-bottom-color:rgba(0, 0, 0, 0) !important;}
    html.menu-open .vii-menu-row.main {padding-top:calc((var(--vii-header-height) - var(--vii-height-menu)) / 2)}
}