/****************************
 * Desktop Menu
****************************/
/* STICKY HEADER */
.site-nav--desktop {
    position:fixed; top:0; left:0; right:0; z-index:30;
    background:var(--twc-color-bg); height:var(--twc-header-height); padding:25px 0;
    transition:var(--twc-transition);
}
html.menu-open .site-nav--desktop {background:#fff;}
.site-nav--row__inner {margin-right:-15px; position:relative;}
.site-nav--row__inner:before {
    content:""; display:block;
    width:calc(100% - 85px); height:5px; background:var(--twc-color-primary);
    position:absolute; top:50px; right:0;
    transition:var(--twc-transition);
}
body.has-language-switcher .site-nav--row__inner:before {
    right:110px; width:calc(100% - 85px - 110px);
}
.site-nav--row.top {transition:var(--twc-transition);}

/* 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,
.scroll-bottom .site-nav--desktop {
    height:var(--twc-header-height-sticky); padding:10px 0;
    box-shadow:0 0 0 1px rgba(0, 0, 0, .1);
    background:#fff;
}
.scroll-up:not(.scroll-top) .site-nav-col.left,
.scroll-bottom .site-nav-col.left {padding-top:5px;}
.scroll-up:not(.scroll-top) .site-nav--row__inner:before,
.scroll-bottom .site-nav--row__inner:before {top:40px;}
.scroll-up:not(.scroll-top) .site-nav--row.top,
.scroll-bottom .site-nav--row.top {--twc-spacing-45:20px;}

/* LOGO */
.site-nav-col.left {padding-top:15px; transition:var(--twc-transition);}
.nav-logo-link {display:block; height:40px;}
.nav-logo-link img {height:100%; width:auto;}

/* HAMBURGER MENU */
.hamburger {margin-left:var(--twc-gap-container);}
button.nav-hamburger {padding:5px 0; background:none;}
.nav-hamburger--lines {display:block; width:30px; height:20px; position:relative;}
.nav-hamburger--lines i {
    position:absolute; left:0;
    display:block; width:100%; height:2px; background:#000;
    transition:var(--twc-transition);
}
.nav-hamburger--lines i:nth-child(1) {top:0;}
.nav-hamburger--lines i:nth-child(2) {top:9px;}
.nav-hamburger--lines i:nth-child(3) {bottom:0;}
.menu-open .nav-hamburger--lines i:nth-child(1) {transform:rotate(45deg); top:9px;}
.menu-open .nav-hamburger--lines i:nth-child(3) {transform:rotate(-45deg); bottom:9px;}
.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;}

/* DESKTOP MENU > Lv1 */
.desktop-menu, .desktop-menu ul.menu {width:100%;}
.desktop-menu ul.menu {
    --menu-item-color:#1d1b1b;
    --menu-item-color-hover:var(--twc-color-primary);
    display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
    justify-content:flex-end;
}
.desktop-menu ul.menu > li:not(:last-child) {margin-right:65px;}
.desktop-menu ul > li > a {color:var(--menu-item-color); font-weight:500;}
.desktop-menu ul > li[class*="current"] > a {font-weight:700;}
.desktop-menu ul > li[class*="current"] > a,
.desktop-menu ul > li > a:hover,
.desktop-menu ul > li > a:focus {color:var(--menu-item-color-hover);}

/* DESKTOP MENU > Lv1 has submenu */
.desktop-menu ul.menu > li[class*="has-child"] > a {position:relative; padding-right:15px;}
.desktop-menu ul.menu li[class*="has-child"] > a:after {
    content:"\e931"; font-family:var(--twc-font-icomoon); font-size:.5em;
    position:absolute; top:50%; right:0; transform:translateY(-40%);
    transition:transform .3s ease;
}
.desktop-menu ul.menu li[class*="has-child"]:hover > a:after {transform:rotate(180deg) translateY(40%);}

/* 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:#fff; padding:10px 0; z-index:5;
    box-shadow:0 0 10px 5px rgba(0, 0, 0, .1);
    transition:var(--twc-transition);
}
.desktop-menu ul.menu > li:last-child > ul.sub-menu {left:auto; right:-20px;}
.desktop-menu ul.sub-menu > li > a {
    display:block; padding:5px 20px;
    white-space:nowrap; width:fit-content; position:relative;
}
/* DESKTOP MENU > Lv3 */
.desktop-menu ul.sub-menu ul.sub-menu {top:0; left:100%;}
.desktop-menu ul.menu > li:last-child > ul.sub-menu ul.sub-menu {left:auto; right:100%;}
.desktop-menu ul.sub-menu li[class*="has-child"] > a:after {right:0;}
.desktop-menu ul.sub-menu li[class*="has-child"]:hover > a:after {transform:rotate(-90deg) translate(60%, 0);}

/* 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;}
}

/* Top menu */
.site-nav--row.top .desktop-menu ul.menu {
    --menu-item-color:rgba(29, 27, 27, .5);
}
.site-nav--row.top .desktop-menu ul.menu > li:not(:last-child) {margin-right:55px;}
.site-nav--row.top .desktop-menu ul.menu > li > a,
.site-nav--row.top .desktop-menu ul.sub-menu > li > a {font-size:var(--twc-size-15);}

/* Custom menu for homepage */
body.home .desktop-menu ul.menu {--menu-item-color:#fff;}
body.home .site-nav--row.top .desktop-menu ul.menu {--menu-item-color:rgba(255, 255, 255, .6);}
body.home .desktop-menu ul.sub-menu > li > a {color:#000;}
body.home .desktop-menu ul.sub-menu > li > a:hover {color:var(--twc-color-primary);}
body.home .twc-language-switcher__icon {color:#fff;}
body.home .nav-hamburger--lines i {background:#fff;}
body.home .site-nav--desktop {background:rgba(0, 0, 0, 0);}
body.home.scroll-up:not(.scroll-top) .site-nav--desktop,
body.home.scroll-bottom .site-nav--desktop {background:#000;}


/****************************
 * Desktop Menu - Responsive
****************************/
/* Touch devices */
@media only screen and (max-width:1180px) {
    .site-nav--desktop {padding:0;}
    .site-nav--desktop .container, .site-nav--row, .site-nav--row__inner {height:100%;}
    .site-nav--row__inner {margin-right:0; align-items:center;}
    .site-nav--row__inner:before {display:none;}
    .site-nav-col.left,
    .scroll-up:not(.scroll-top) .site-nav-col.left,
    .scroll-bottom .site-nav-col.left {padding-top:0;}
    .twc-language-switcher__icon {margin-left:var(--twc-gap-container);}
}
