/****************************
 * Menu > Common
****************************/
/* menu-sticky */

.menu-sticky:not(.menu-transparent) {
    padding-top:var(--vii-body-padding-top);
}
body.scroll-middle .vii-menu {
    transform:translateY(calc(var(--vii-header-height) * -1));
}
html.menu-open .menu-open,
body.scroll-bottom .vii-menu,
body.scroll-up .vii-menu {
    transform:translateY(0);
}

body:not(.scroll-top) .vii-menu {box-shadow:0 8px 15px -15px rgba(0, 0, 0, .18);}

.vii-menu-row {
    min-height:var(--vii-header-height);
    background-color:var(--vii-header-bg);
    position:relative;z-index:1;
    padding:9px 27px;
}
.vii-menu-row::before {
    content:"";
    position:absolute;
    inset:9px;z-index:-1;
    border-radius:9px;
    background-color:var(--vii-header-overlay);
}
/* 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;
        }
    }
}
body.menu-transparent.scroll-middle.scroll-up .vii-menu-logo img,
body.menu-transparent.scroll-bottom .vii-menu-logo .sticky-logo {
    opacity:1;visibility:visible;
}


.vii-menu-col.right {gap:16px;align-items:baseline;}
.desktop-menu {
    /* clear list style */
    ul {
        list-style:none; margin:0;

        & > li {
            position:relative;

            & > :where(a,span) {
                text-decoration:none; display:inline-block; font-size:var(--vii-size-body); color:var(--vii-header-color);
            }
        }

        /* hover */
        & > li > :where(a,span):hover,
        & > li > :where(a,span):focus,
        & > li[class*="current"] > :where(a,span) {
            color:var(--vii-header-color-hover);
        }

        /* current */
        & > li[class*="current"] > :where(a,span) {font-weight:500; color:var(--vii-header-color-hover);}

        /* hide unused submenus */
        &.sub-menu ul.sub-menu ul.sub-menu {display:none;}

        /* show/hide submenu */
        & li:not(:hover) > ul.sub-menu {opacity:0; visibility:hidden; pointer-events:none;}

        /* submenu animation (search submenuAnimationDelay to edit stagger time) */
        & li[class*="has-child"]:hover > ul.sub-menu > li {
            animation:slide-fade-in .4s ease forwards;
            opacity:0;
        }

        /* has submenu arrow */
        & > li[class*="has-child"] > :where(a,span) {
            position:relative; padding-right:16px;

            &:after {
                position:absolute; right:0; top:50%;
                display:inline-block; transform:translateY(-50%);
                content:"\e931"; font-family:var(--vii-font-icomoon); font-size:.5em;
                transition:transform .3s ease;
            }
        }
        /*& li[class*="has-child"].active > :where(a,span):after,*/
        /*& li[class*="has-child"]:hover > :where(a,span):after {transform:translateY(-50%) rotate(180deg);}*/
    }
}

@keyframes slide-fade-in {
    0% {transform:translate(-15px); opacity:0;}
    100% {transform:translate(0); opacity:1;}
}

/* has submenu arrow */
.desktop-menu ul > li[class*="has-child"] > :where(a,span) {position:relative; padding-right:16px;}
.desktop-menu ul > li[class*="has-child"] > :where(a,span):after {
    position:absolute; right:0; top:50%;
    display:inline-block; transform:translateY(-50%);
    content:"\e931"; font-family:var(--vii-font-icomoon); font-size:.5em;
    transition:transform .3s ease;
}
/*.desktop-menu li[class*="has-child"].active > :where(a,span):after,*/
/*.desktop-menu li[class*="has-child"]:hover > :where(a,span):after {transform:translateY(-50%) rotate(180deg);}*/

/* a11y */
.desktop-menu ul.menu > li > :where(a,span):focus-visible {
    outline:2px solid var(--vii-color-on-primary); border-radius:3px; text-decoration:none;
    background:transparent; color:var(--vii-color-on-primary);
    transition:none;
}

/****************************
 * Menu > Lv1
****************************/
.desktop-menu ul.menu {display:flex; gap:0 24px;margin-right:40px}

.desktop-menu ul.menu > li > :where(a,span) {
    display:flex; align-items:center; justify-content:center;
    padding-top:5px; padding-bottom:5px;
}


/****************************
 * Menu > Lv2
****************************/
.desktop-menu ul.sub-menu {
    --vii-offset-top:14px;
    position:absolute;
    top:100%;
    left:-16px;
    z-index:2;
    min-width:max-content;
    max-width:360px;
    padding-top:var(--vii-offset-top);
    border-radius:4px;
    transition:var(--vii-transition);
}
.desktop-menu ul.sub-menu > li:not(:last-of-type) {border-bottom:1px solid #eee;}
.desktop-menu ul.sub-menu > li > :where(a,span) {
    display:block; padding:12px 20px;
    width:100%; max-width:100%;
    color:var(--vii-header-submenu-color);
}
.desktop-menu ul.sub-menu > li:not([class*="current"]) > :where(a,span):hover,
.desktop-menu ul.sub-menu > li:not([class*="current"]) > :where(a,span):focus {
    color:var(--vii-header-submenu-color-hover);
    transform:translateX(4px);
}
.desktop-menu ul.sub-menu > li[class*="current"] > :where(a,span) {
    color:var(--vii-header-submenu-color-hover);
}

/* pointer */
.desktop-menu ul.sub-menu:before {
    content:"";
    position:absolute;
    inset:var(--vii-offset-top) 0 0;
    background:#fff;
    border-radius:4px;
    box-shadow:0 -3px 15px 5px rgb(0 0 0 / 10%);
    transition:var(--vii-transition);
}

/* placeholder for pointer icon */
.desktop-menu ul.sub-menu:after {
    content:""; position:absolute; left:0; bottom:100%; right:0;
    height:10px;
}

/* has submenu arrow */
.desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span) {padding-right:38px;}
.desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span):after {
    right:24px;
    content:"\e92f";
}
/*.desktop-menu ul.sub-menu > li[class*="has-child"]:hover > :where(a,span):after {transform:translateY(-50%) rotate(-90deg);}*/


/****************************
 * Menu > Lv3
****************************/
.desktop-menu ul.sub-menu ul.sub-menu {
    left:100%; top:0;background-color:#fff;
    margin-left:1px; margin-top:0;padding-top:0;
}

/* pointer */
.desktop-menu ul.sub-menu ul.sub-menu:before {inset:0;}

/* placeholder for pointer icon */
.desktop-menu ul.sub-menu ul.sub-menu:after {
    content:unset;
    top:0; bottom:0; right:100%; left:auto;
    width:10px; height:auto;
}
.desktop-menu ul.sub-menu ul.sub-menu > li[class*="has-child"] > :where(a,span):after {
    content:unset;
}

/****************************
 * Menu > Last menu item
****************************/
.vii-menu-col.right:not(:has(.cta-primary):has(.cta-secondary)) .desktop-menu ul.menu > li:last-of-type > ul.sub-menu {left:auto; right:-20px;}
.vii-menu-col.right:not(:has(.cta-primary):has(.cta-secondary)) .desktop-menu ul.menu > li:last-of-type > ul.sub-menu > li > :where(a,span) {margin-left:auto;}
.vii-menu-col.right:not(:has(.cta-primary):has(.cta-secondary)) .desktop-menu ul.menu > li:last-of-type > ul.sub-menu > li[class*="has-child"] > :where(a,span) {
    padding-left:38px; padding-right:20px;
}
.vii-menu-col.right:not(:has(.cta-primary):has(.cta-secondary)) .desktop-menu ul.menu > li:last-of-type > ul.sub-menu > li[class*="has-child"] > :where(a,span):after {
    right:auto; left:18px;content:"\e92e";
}
/*.vii-menu-col.right:not(:has(.cta-primary):has(.cta-secondary)) .desktop-menu ul.menu > li:last-of-type > ul.sub-menu > li[class*="has-child"]:hover > :where(a,span):after {*/
/*    transform:translateY(-50%) rotate(90deg);*/
/*}*/
.vii-menu-col.right:not(:has(.cta-primary):has(.cta-secondary)) .desktop-menu ul.menu > li:last-of-type > ul.sub-menu > li > ul.sub-menu {
    left:auto; right:100%;
    margin-left:0; margin-right:1px;
}


/****************************
 * Menu Responsive
****************************/
@media only screen and (min-width:1700px) {
    .desktop-menu ul > li[class*="has-child"] > :where(a,span) {padding-right:0.85vw;}
}
@media only screen and (max-width:1380px) {
    .desktop-menu ul.menu {gap:0 20px;margin-right:20px;}
}

@media only screen and (max-width:1280px) {
    .desktop-menu ul.menu {gap:0 16px;margin-right:8px;}
    .desktop-menu ul.menu > li > :where(a,span) {font-size:15px;}
    .vii-header-cta-buttons__inner .btn_primary {min-width:115px;}
}