/****************************
 * Desktop Menu
****************************/
/* STICKY HEADER */
.site-nav--desktop {
    position:fixed; top:0; left:0; right:0; z-index:30;
    transition:var(--vii-transition);
}
.site-nav--row.main {padding:var(--vii-header-padding);}
.site-nav-col.left, .site-nav-col.right {width:300px;}
.site-nav-col.right > .nav-block:not(:first-child) {margin-left:20px;}

/* Scroll middle down: hide header */
@media only screen and (min-width:1025px) {
    html:not(.accordion-moving) body:not(.home).scroll-middle.scroll-down:not(.scroll-bottom) .site-nav--desktop {opacity:0; transform:translateY(-100%);}
    html:not(.accordion-moving) body.scroll-middle.home .site-nav--desktop {opacity:0; transform:translateY(-100%);}
}

/* Scroll middle: show header with separator */
body.top-spacing-default .site-nav--desktop {backdrop-filter:blur(25px);}
body.scroll-middle .site-nav--desktop {
    background:rgb(255 255 255 / 20%);
    -webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);
}

@media only screen and (max-width:1024px) {
    .site-nav--desktop {box-shadow:0 0 0 1px rgb(102 102 102 / .5);}
    html.menu-open body.scroll-middle .site-nav--desktop {
        background:transparent; backdrop-filter:none; box-shadow:none;
    }
}


/* LOGO */
.nav-logo-link {display:block; height:var(--vii-logo-height);}
.nav-logo-link img {height:100%; width:auto;}

/* HAMBURGER MENU */
button.nav-hamburger {padding:5px 0; background:transparent;}
.nav-hamburger--lines {display:block; width:32px; height:20px; position:relative;}
.nav-hamburger--lines i {
    position:absolute; right:0;
    display:block; width:100%; height:2px; background:#000;
    transition:var(--vii-transition);
}
.nav-hamburger--lines i:nth-child(1) {top:5px;}
.nav-hamburger--lines i:nth-child(2) {top:12px; width:71%;}
.menu-open .nav-hamburger--lines i:nth-child(1) {transform:rotate(45deg); top:9px;}
.menu-open .nav-hamburger--lines i:nth-child(2) {transform:rotate(-45deg); top:9px; width:100%;}

/* DESKTOP MENU */
.desktop-menu ul {list-style:none; margin:0;}
.desktop-menu ul > li {padding:0; position:relative;}
.desktop-menu ul > li > a {text-decoration:none;}
.desktop-menu ul.sub-menu ul.sub-menu {display:none;}
.desktop-menu ul > li > a:hover,
.desktop-menu ul > li > a:focus {color:var(--vii-color-text); text-decoration:underline;}

/* DESKTOP MENU > Lv1 */
.desktop-menu ul.menu {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.desktop-menu ul.menu > li:not(:last-child) {margin-right:48px;}
.desktop-menu ul.menu > li > a {padding:5px; display:block;}
.desktop-menu ul.menu > li > a:hover {}


/* a11y */
.desktop-menu ul.menu > li > a:focus-visible {outline:2px solid var(--vii-color-primary); border-radius:3px; text-decoration:none;}
.desktop-menu ul.menu > li > a:focus-visible:before {display:none;}


/* DESKTOP MENU > Lv1 active */
.site-nav ul.menu > li[class*="current"] > a {position:relative;}
.site-nav ul.menu > li[class*="current"] > a:before {
    content:"\e958"; font-family:var(--vii-font-icomoon);
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    font-size:55px;
}
.site-nav .mobile-menu ul.menu > li[class*="current"] > a:before {font-size:3.2em;}

/* DESKTOP MENU > Lv1 has submenu */
.desktop-menu ul.menu > li[class*="has-child"] > a:after {
    content:"\e931"; font-family:var(--vii-font-icomoon); font-size:.7em;
    margin-left:10px; display:inline-block;
    transition:transform .3s ease;
}
.desktop-menu ul.menu > li[class*="has-child"]:hover > a:after {transform:rotate(180deg);}

/* DESKTOP MENU > Lv2 */
.desktop-menu li:not(:hover) > ul.sub-menu {opacity:0; visibility:hidden; pointer-events:none;}
.desktop-menu ul.sub-menu {
    position:absolute; top:100%; left:50%; min-width:calc(100% + 40px); transform:translateX(-50%);
    background:#fff; padding:10px 0;
    transition:var(--vii-transition); border-radius:10px;
    border:2px solid var(--vii-color-dark-black);
    box-shadow:var(--vii-box-shadow);
}
.desktop-menu ul.sub-menu > li > a {
    display:block; padding:5px 20px;
    white-space:nowrap;
}

/* DESKTOP MENU > submenu animation (search submenuAnimationDelay to edit stagger time) */
.desktop-menu ul.menu > li[class*="has-child"]:hover > ul.sub-menu > li {
    animation:slide-fade-in .4s ease forwards;
    opacity:0;
}
@keyframes slide-fade-in {
    0% {transform:translate(-15px); opacity:0;}
    100% {transform:translate(0); opacity:1;}
}