/****************************
 * Menu > Common
****************************/

@media only screen and (min-width:1181px) {
    /* clear list style */
    .desktop-menu ul {list-style:none; margin:0;}
    .desktop-menu ul > li {padding:0; position:relative;}
    .desktop-menu ul > li > :where(a,span) {
        text-decoration:none; display:inline-block;
        font-size:14px; font-weight:500; text-transform:uppercase;
        color:var(--vii-color-dark);
    }

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

    /* current */
    .desktop-menu ul > li[class*="current"] > :where(a,span) {font-weight:700; color:var(--vii-color-primary);}

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

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

    /* submenu animation (search submenuAnimationDelay to edit stagger time) */
    .desktop-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;}
    }

    /* has submenu arrow */
    .desktop-menu ul > li[class*="has-child"] > :where(a,span) {position:relative; padding-right:14px;}
    .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:.6em;
        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-primary); border-radius:3px; text-decoration:none;
        background:transparent; color:var(--vii-color-primary);
        transition:none;
    }

    /****************************
     * Menu > Lv1
    ****************************/
    .desktop-menu ul.menu {display:flex; gap:0 36px;}
    .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 {
        position:absolute; top:calc(100% + 7px); right:-20px; z-index:2;
        min-width:calc(100% + 40px); max-width:300px; background:#fff;
        box-shadow:0 -3px 15px 5px rgb(0 0 0 / 10%);
        border-radius:4px;
        transition:var(--vii-transition);
    }
    .desktop-menu ul.sub-menu > li:not(:last-child) {border-bottom:1px solid var(--vii-color-light-gray);}
    .desktop-menu ul.sub-menu > li > :where(a,span) {
        display:block; padding:12px 20px 10px;
        width:max-content; max-width:100%;
    }

    /* pointer */
    .desktop-menu ul.sub-menu:before {
        content:""; position:absolute; bottom:100%; right: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:14px;
    }

    /* has submenu arrow */
    .desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span) {padding-left:32px;}
    .desktop-menu ul.sub-menu > li[class*="has-child"] > :where(a,span):after {left:12px;top:52.5%;right:auto;}
    .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 {right:100%; top:0; margin-right:10px; min-width:unset;}

    /* pointer */
    .desktop-menu ul.sub-menu ul.sub-menu:before {
        right:-13px; top:15px; left:auto;
        transform:rotate(180deg); transform-origin:center;
        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; left:100%;
        width:10px; height:auto;
    }


    /****************************
     * Menu with banner has single
    ****************************/
    body.banner-has-single {
        --vii-logo-height:40px;
    }
    body.banner-has-single .vii-menu-row.top-panel {background:#fff;}
    body.banner-has-single .vii-menu-row.main {background:rgba(0, 0, 0, 0); border-bottom:none; position:relative;}
    body.banner-has-single .vii-menu-row.main:before {
        content:"";
        position:absolute; top:50%; transform:translateY(-50%);
        left:calc(var(--vii-gap-container) / 2); right:calc(var(--vii-gap-container) / 2);
        height:72px; border-radius:4px; background:rgba(255, 255, 255, .3); backdrop-filter:blur(45px);
    }
    body.banner-has-single .vii-menu-row.main > .vii-menu-col {position:relative; z-index:1;}
    body.banner-has-single.scroll-middle .vii-menu-row.main:before {box-shadow:0 0 5px 1px var(--vii-color-light-gray);}
    html.menu-open body.banner-has-single .vii-menu-row.main:before {
        border-radius:4px 4px 0 0; border:1px solid #e7e7e7;
    }


    /****************************
     * Mega menu
    ****************************/
    /* Show mega menu */
    html:not(.menu-open) .vii-menu-overlay,
    html:not(.menu-open) .vii-menu-overlay li.is-active > ul.sub-menu {opacity:0; pointer-events:none; visibility:hidden}

    /* Position with admin bar */
    html.has-admin-bar .vii-menu-overlay {top:calc(var(--vii-header-height) + 32px);}

    /* General mega menu */
    .vii-menu-overlay ul {list-style:none;margin:0;position:relative;}
    .vii-menu-overlay ul > li {padding:0;}
    .vii-menu-overlay > li > :where(a, span) {
        text-decoration:none; display:inline-block;
        font-size:14px; font-weight:500;
        text-transform:uppercase; color:var(--vii-color-dark);
    }
    .vii-menu-overlay ul.sub-menu {
        position:absolute; left:100%; top:0;
        opacity:0; pointer-events:none; visibility:hidden;
        transition:opacity 0.3s ease;
    }
    .vii-menu-overlay li.is-active > ul.sub-menu {
        opacity:1;pointer-events:auto;visibility:visible;
    }
    .vii-menu-overlay {left:0; right:0; top:var(--vii-header-height);}
    .vii-menu-overlay__menu {
        border-radius:0 0 8px 8px;
        border:1px solid #e7e7e7; border-top:none;
    }

    /* Sticky */
    body.scroll-middle.scroll-down:not(.scroll-bottom) .vii-menu-overlay {
        opacity:0; pointer-events:none;
        transform:translateY(calc(-1 * var(--vii-header-top-height)));
    }
    body.scroll-middle .vii-menu-overlay {top:var(--vii-header-main-height);}
    html.has-admin-bar body.scroll-middle .vii-menu-overlay {top:calc(var(--vii-header-main-height) + 32px);}

    /* Menu level 1 */
    .vii-menu-overlay ul.menu {
        --height-menu:100px;
        width:clamp(200px, 298px, 33.33%); background:var(--vii-color-blue);
        padding:36px 0; counter-reset:menu_order;
        transition:height 0.6s ease;
    }
    .vii-menu-overlay ul.menu > li {
        counter-increment:menu_order;
        padding:12px clamp(var(--vii-gap-container), 48px, var(--vii-gap-side));
        z-index:1;
    }
    .vii-menu-overlay ul.menu > li.is-active {z-index:10;}
    .vii-menu-overlay ul.menu > li > a {
        position:relative; padding-left:22px;
        font-size:var(--vii-size-h6); color:#fff;
    }
    .vii-menu-overlay ul.menu > li > a:before {
        content:"0" counter(menu_order);
        font-size:12px;font-weight:400;
        color:rgba(255, 255, 255, 0.4);letter-spacing:-0.04em;line-height:1;
        position:absolute;left:0;top:9px;
    }
    .vii-menu-overlay ul.menu > li > a:after {
        content:"";
        position:absolute;left:22px;bottom:-2px;
        width:0;height:2px;background:#fff;
        transition:var(--vii-transition);
    }
    .vii-menu-overlay ul.menu > li.is-active > a:after,
    .vii-menu-overlay ul.menu > li[class*="current"] > a:after {
        width:calc(100% - 22px);
    }

    /* Menu level 2 */
    .vii-menu-overlay ul.menu > li > ul.sub-menu {
        width:140%;height:100%;padding:48px 0;
        z-index:5;
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu:after {
        content:"";
        position:absolute;right:0;top:48px;
        width:1px;height:calc(var(--height-menu) - 96px);background:rgba(0, 0, 0, 0.2);
        pointer-events:none;
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li {padding:0 48px;}
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li:not(:last-child) {margin-bottom:4px;}
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li > a {
        min-height:56px;width:100%;border-radius:8px;
        position:relative;padding-right:100px;
        display:inline-flex;align-items:center;
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li > a:before {
        font-family:var(--vii-font-icomoon), fantasy; content:"\e902";
        color:var(--vii-color-turquoise);line-height:1;font-size:20px;
        position:absolute;left:8px;top:50%;transform:translateY(-50%);
        opacity:0;transition:opacity 0.3s ease;
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li > a:after {
        font-family:var(--vii-font-icomoon), fantasy;content:"\e915";
        width:16px;height:16px;
        display:flex;align-items:center;justify-content:center;
        line-height:1;color:rgba(0, 0, 0, 0.3);font-size:9px;
        position:absolute;top:50%;right:0;transform:translateY(-50%);
        transition:var(--vii-transition);
    }

    .vii-menu-overlay ul.menu > li > ul.sub-menu > li[class*="current"]:not(.custom-link-scroll) > a,
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li.is-active > a {
        background:var(--vii-color-blue); color:var(--vii-color-white);
        padding-left:36px; padding-right:64px;
    }

    .vii-menu-overlay ul.menu > li > ul.sub-menu > li[class*="current"]:not(.custom-link-scroll) > a:after,
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li.is-active > a:after {
        color:#fff; transform:translate(-8px, -50%);
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li[class*="current"]:not(.custom-link-scroll) > a:before,
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li.is-active > a:before {
        opacity:1;
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li:not([class*="has-child"]) > a {padding-right:56px;}
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li:not([class*="has-child"]) > a:after {opacity:0;}
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li:not([class*="has-child"]):hover > a,
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li:not([class*="has-child"]).is-active > a {padding-right:20px;}

    /* Menu level 3 */
    .vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu {
        min-width:100%; padding:48px; height:100%;
        z-index:10;left:calc(100% - 2px);
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li:not(:last-child) {margin-bottom:16px;}
    .vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li[class*="current"] > a,
    .vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li > a:hover,
    .vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li.is-active > a {
        color:var(--vii-color-blue);
        text-decoration:underline;
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu > li[class*="current"] > a {font-weight:700;}

    /* Layout with banner has single image */
    body.banner-has-single .vii-menu-overlay {
        --vii-gap-container:20px;
        top:calc(var(--vii-header-height) - 19px);
    }

    html.has-admin-bar body.banner-has-single .vii-menu-overlay {top:calc(var(--vii-header-height) + 13px);}
    body.scroll-middle.banner-has-single .vii-menu-overlay {top:calc(var(--vii-header-main-height) - 19px);}
    html.has-admin-bar body.scroll-middle.banner-has-single .vii-menu-overlay {
        top:calc(var(--vii-header-main-height) + 13px);
    }

}

/* Update height for menu */
@media only screen and (min-width:1181px) and (max-height:700px) {
    .vii-menu-overlay ul.menu {padding-top:2.5vh; padding-bottom:2.5vh;}
    .vii-menu-overlay ul.menu > li > ul.sub-menu,
    .vii-menu-overlay ul.menu > li > ul.sub-menu ul.sub-menu {
        padding-top:calc(2.5vh + 12px); padding-bottom:calc(2.5vh + 12px);
    }
    .vii-menu-overlay ul.menu > li > ul.sub-menu > li > a {min-height:50px; line-height:1.25;}
    .vii-menu-overlay ul.menu > li > ul.sub-menu:after {height:calc(95vh - 24px);}
}