/****************************
 * Menu > Menu Desktop
****************************/
/* follow banner style */
body:is(.banner-small, .banner-detail, .banner-simple-detail) .vii-menu {padding:0;}
body:is(.banner-small, .banner-detail, .banner-simple-detail) .vii-menu-row {
    border-radius:0;
    position:relative;
    padding:0 var(--vii-gap-container);
}
body:is(.banner-small, .banner-detail, .banner-simple-detail).scroll-top .vii-menu-row {
    box-shadow:none;
}
body:is(.banner-detail, .banner-simple-detail).scroll-top .vii-menu-row::after {
    content:"";
    bottom:0;
    display:block;height:1px;
    position:absolute;
    background-color:var(--vii-color-light-gold);
    left:calc(2 * var(--vii-gap-container)); right:calc(2 * var(--vii-gap-container));
}

/* desktop menu */
.desktop-menu {
    /* clear list style */
    ul {
        list-style:none; margin:0;
        & > li {
            padding:0; position:relative;
            & > :where(a,span) {
                display:inline-block; font-size:var(--vii-size-14); color:var(--vii-color-dark);
                text-decoration:none;font-weight:700;text-transform:uppercase;
            }
        }

        /* hover */
        & > li > :where(a,span):hover,
        & > li > :where(a,span):focus {color:var(--vii-color-primary);}

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

        /* 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 .3s 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-dark); border-radius:3px; text-decoration:none;
    background:transparent; color:var(--vii-color-dark);
    transition:none;
}


/****************************
 * Menu > Lv1
****************************/
.desktop-menu ul.menu {display:flex; gap:0 40px;}
.desktop-menu ul.menu > li > :where(a,span) {
    display:flex; align-items:center; justify-content:center;
    padding-top:5px; padding-bottom:5px;
    height:var(--vii-header-height);
}
.desktop-menu ul.menu > li > ul.sub-menu::before,
.desktop-menu ul.menu > li > ul.sub-menu::after {
    content:unset;
}


/****************************
 * Menu > Lv2
****************************/
.desktop-menu ul.sub-menu {
    position:absolute; top:100%; left:-20px; z-index:2;
    min-width:max-content;
    max-width:400px;
    background:#fff; box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.16);
    transition:var(--vii-transition);
}
.desktop-menu ul.sub-menu > li:not(:last-child) {border-bottom:var(--border-light-gold);}
.desktop-menu ul.sub-menu > li > :where(a,span) {
    display:block; padding:12px 35px 12px 20px;position:relative;
    max-width:100%;
}
.desktop-menu ul.sub-menu > li > :where(a,span)::before {
    content:""; inset:0;
    display:block;width:6px;height:6px;border-radius:50%;
    line-height:1;
    position:absolute;top:50%;left:20px;
    transform:translateY(-50%);
    opacity:0;pointer-events:none;
    background-color:var(--vii-color-primary);
    transition:var(--vii-transition);
}
.desktop-menu ul.sub-menu > li:not([class*="has-child"]) > a:hover,
.desktop-menu ul.sub-menu > li:not([class*="has-child"])[class*="current-"] > a {
    color:var(--vii-color-primary);
    padding-left:35px;padding-right:20px;
}
.desktop-menu ul.sub-menu > li[class*="has-child"] > a:hover,
.desktop-menu ul.sub-menu > li[class*="has-child"][class*="current-"] > a {
    padding-left:35px;padding-right:35px;
}
.desktop-menu ul.sub-menu > li > a:hover::before,
.desktop-menu ul.sub-menu > li[class*="current-"] > a::before {
    opacity:1;pointer-events:auto;
}

/* pointer */
.desktop-menu ul.sub-menu:before {
    content:unset; position:absolute; bottom:100%; left:20%;
    width:0; height:0;
    border-bottom:7px solid #fff;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
}

/* 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:50px;}
.desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span):after {right:14px;}
.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;
    margin-left:0; margin-top:0;
    border-left:var(--border-light-gold);
}

/* pointer */
.desktop-menu ul.sub-menu ul.sub-menu:before {
    right:100%; top:15%; left:auto;
    border-top:7px solid transparent;
    border-right:7px solid #fff;
    border-bottom:7px solid transparent;
}

/* placeholder for pointer icon */
.desktop-menu ul.sub-menu ul.sub-menu:after {
    top:0; bottom:0; right:100%; left:auto;
    width:10px; height:auto;
}


/****************************
 * Menu > Last menu item
****************************/
.desktop-menu ul.menu > li:is(:last-child) > ul.sub-menu {left:auto; right:-20px;}
.desktop-menu ul.menu > li:is(:last-child) > ul.sub-menu:before {left:auto; right:17.5%;}
.desktop-menu ul.menu > li:is(:last-child) > ul.sub-menu > li[class*="has-child"] > :where(a,span) {
    padding-left:30px; padding-right:20px;
}
.desktop-menu ul.menu > li:is(:last-child) > ul.sub-menu > li[class*="has-child"] > :where(a,span)::before {
    content:unset;
}
.desktop-menu ul.menu > li:is(:last-child) > ul.sub-menu > li[class*="has-child"] > :where(a,span):after {
    right:auto; left:15px;
}
.desktop-menu ul.menu > li:is(:last-child) > ul.sub-menu > li[class*="has-child"]:hover > :where(a,span):after {
    transform:translateY(-50%) rotate(90deg);
}
.desktop-menu ul.menu > li:is(:last-child) > ul.sub-menu > li > ul.sub-menu {
    left:auto; right:100%;
    margin-left:0; margin-right:0;
    border-right:var(--border-light-gold);
}
.desktop-menu ul.menu > li:is(:last-child) > ul.sub-menu > li > ul.sub-menu:before {
    right:-14px;
    transform:rotate(180deg); transform-origin:center;
}
.desktop-menu ul.sub-menu ul.sub-menu > li[class*="has-child"] > :where(a,span)::after {
    content:unset;
}


/****************************
 * Menu Responsive
****************************/
@media only screen and (max-width:1380px) {
    .desktop-menu ul.menu {gap:0 25px;}
}