/****************************
 * Sticky Header
****************************/
.site-nav--desktop {
    --menu-color:#000; --logo-color:var(--vii-color-primary);
    position:fixed; top:0; left:0; right:0; z-index:30;
    background:#fff; transition:var(--vii-transition);
    box-shadow:0 0 0 1px #000;
}
.site-nav--row {min-height:var(--vii-header-height); padding:0 var(--vii-gap-container);}

/* Scroll middle down: hide header */
html:not(.accordion-moving) .scroll-middle.scroll-down:not(.scroll-bottom) .site-nav--desktop {opacity:0; transform:translateY(-100%);}

/* Scroll middle up: show header with separator */
.scroll-up:not(.scroll-top) .site-nav--desktop {box-shadow:0 0 0 1px rgba(0, 0, 0, .1);}


/****************************
 * Desktop Menu
****************************/
.nav-block-divider {
    margin:0 22px;
    border-left:1px solid var(--menu-color); height:20px;
}
body:not(.home) .nav-block-divider.for-hamburger {display:none;}


/* LOGO */
.nav-logo-link {display:block; height:var(--vii-logo); aspect-ratio:8/5;}
.nav-logo-link img {height:100%; width:auto;}
.nav-logo-link path {fill:var(--logo-color);}

/* HAMBURGER MENU */
button.nav-hamburger {padding:5px 0; background:none; color:var(--menu-color);}
.nav-hamburger--lines {
    display:block; width:45px; height:45px; position:relative;
    border:1px solid rgba(0, 0, 0, .3); border-radius:50%;
    background:#f6f6f6; margin-right:10px;
}
.nav-hamburger--lines i {
    position:absolute; left:13px;
    display:block; width:16px; height:2px; background:#000;
    transition:var(--vii-transition);
}
.nav-hamburger--lines i:nth-child(1) {top:15px;}
.nav-hamburger--lines i:nth-child(2) {top:21px;}
.nav-hamburger--lines i:nth-child(3) {top:27px;}
.menu-open .nav-hamburger--lines i:nth-child(1) {transform:rotate(45deg); top:20px;}
.menu-open .nav-hamburger--lines i:nth-child(3) {transform:rotate(-45deg); top:20px;}
.menu-open .nav-hamburger--lines i:nth-child(2) {width:0; left:50%;}

/* 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; text-transform:capitalize;}
.desktop-menu ul.sub-menu ul.sub-menu {display:none;}

/* DESKTOP MENU > Lv1 */
.desktop-menu ul.menu {display:flex; align-items:center;}
.desktop-menu ul.menu > li {padding:5px 0;}
.desktop-menu ul.menu > li:not(:last-child) {margin-right:40px;}
.desktop-menu ul.menu > li > a {display:block;}
.desktop-menu ul.menu > li > a:hover,
.desktop-menu ul.menu > li > a:focus {color:var(--vii-color-primary); text-decoration:underline;}

.desktop-menu ul.menu > li[class*="current"] > a {
    min-height:34px; background:var(--vii-color-primary); color:var(--vii-color-on-primary);
    padding:3px 18px; border-radius:20px;
    display:flex; align-items:center; justify-content:center;
}
.desktop-menu ul.menu > li[class*="current"] > a:hover,
.desktop-menu ul.menu > li[class*="current"] > a:focus {text-decoration:none;}

/* 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:.6em;
    margin-left:10px; display:inline-block; line-height:1;
    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:-20px; min-width:calc(100% + 40px);
    background:var(--vii-color-gray); padding:10px 0;
    transition:var(--vii-transition); box-shadow:0 0 0 1px #ccc; border-radius:5px;
}
.desktop-menu ul.sub-menu > li {text-align:center;}
.desktop-menu ul.sub-menu > li > a {
    display:block; padding:5px 20px;
    white-space:nowrap;
}
.desktop-menu ul.sub-menu > li[class*="current"] > a {color:var(--vii-color-primary);}
.desktop-menu ul.sub-menu > li > a:hover,
.desktop-menu ul.sub-menu > li > a:focus {color:var(--vii-color-primary); text-decoration:underline;}

/* 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;}
}

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

/****************************
 * Desktop Menu Responsive
****************************/
@media only screen and (max-width:1425px) {
    .desktop-menu ul.menu > li:not(:last-child) {margin-right:20px;}
    .desktop-menu ul.menu > li > a {font-size:15px;}
}