/****************************
 * Common
****************************/
.vii-menu-row {
    min-height:var(--vii-header-height);
    padding:0 calc(var(--vii-spacing-right) + var(--vii-hambuger-width) + 16px) 0 0;
}

/* Logo */
.vii-menu-block.logo {
    height:var(--vii-header-height); aspect-ratio:224/191;
    padding-bottom:30px; padding-right:36px;
}
.vii-menu-block.logo:before {
    content:"";
    width:155%; aspect-ratio:347/324; background:var(--vii-color-white); border-radius:50%;
    position:absolute; right:0; bottom:0;
}
.vii-menu-logo {
    height:var(--vii-logo-height);
    img {width:auto;}
}

/* column right */
.vii-menu-col.right {padding-bottom:18px;}


/****************************
 * Menu
****************************/
.vii-menu-overlay {
    --menu-color:var(--vii-color-dark-blue);
    --menu-color-hover:var(--vii-color-primary);

    top:calc(var(--vii-spacing-right) + var(--admin-bar-height));
    padding-right:var(--vii-spacing-right);
}
.vii-menu-overlay__inner {
    top:37.5%; right:calc(37.5% + 4px);
    max-width:var(--vii-mobile-menu-width);
    box-shadow:0 0 40px 10px rgba(0, 0, 0, .05);
    opacity:0;
}
html.menu-open .vii-menu-overlay__inner {opacity:1;pointer-events:auto}
body.page-template-has-home-banner:not(.finish-loading) .vii-menu-overlay {overflow:visible;}

/* Hamburger button */
.vii-menu-button {background:rgba(0, 0, 0, 0); width:var(--vii-hambuger-width);}
.vii-menu-button span.icon i {font-size:var(--vii-hambuger-width);}
.vii-menu-button span.text {line-height:1.2; letter-spacing:-0.02em;}
html.menu-open .vii-menu-button {transform:rotate(11.68deg)}

/* menu > general */
.vii-menu-overlay__menu {
    padding:32px 36px;
    max-height:calc(var(--vii-100vh) - var(--admin-bar-height) - var(--vii-hambuger-width));
}
.vii-menu-overlay ul > li > a {color:var(--menu-color);}
.vii-menu-overlay ul > li > a:hover, .vii-menu-overlay ul > li > a:focus,
.vii-menu-overlay ul > li[class*="current"] > a {color:var(--menu-color-hover);}

/* menu > lv1 */
.vii-menu-overlay ul.menu > li {padding:15px 0; border-bottom:1px dashed rgba(16, 2, 73, .3);}
.vii-menu-overlay ul.menu > li:last-child {padding-bottom:0; border-bottom:none;}
.vii-menu-overlay ul.menu > li:first-child {padding-top:0;}
.vii-menu-overlay ul.menu > li > a {order:1;}

/* menu > lv2 */
.vii-menu-overlay ul.sub-menu {
    --menu-color:rgba(16, 2, 73, .5);
    --menu-color-hover:var(--vii-color-dark-blue);
    order:3; padding-left:8px; padding-top:5px;
}
.vii-menu-overlay ul.sub-menu > li > a {
    line-height:1.5;
    padding:2px 0 2px 14px;
}
.vii-menu-overlay ul.sub-menu > li > a:before {
    content:""; display:block;
    width:4px; aspect-ratio:1; border-radius:50%; background:var(--menu-color);
    position:absolute; top:12px; left:0;
    transition:var(--vii-transition);
}
.vii-menu-overlay ul.sub-menu > li > a:hover:before,
.vii-menu-overlay ul.sub-menu > li > a:focus:before,
.vii-menu-overlay ul.sub-menu > li[class*="current"] > a:before {background:var(--menu-color-hover);}

/* Arrow button */
.menu-item-has-children {gap:0 6px}
.menu-item-has-children > .menu-item-arrow {order:2;}
.menu-item-arrow__button {
    font-size:10px; padding:4px;
    background:rgba(0, 0, 0, 0); color:var(--menu-color);
}
.menu-item-arrow__button i {display:inline-block; transition:transform .3s ease;}
.menu-item-arrow__button.active i {transform:rotate(180deg);}
.vii-menu-overlay ul.menu > li[class*="current"] .menu-item-arrow__button,
.menu-item-arrow__button:hover {
    color:var(--menu-color-hover);
}

/* desktop */
@media only screen and (min-width:1025px) {
    .vii-menu-button:hover {transform:rotate(11.68deg)}
}


/****************************
 * Menu Responsive
****************************/
@media only screen and (max-width:1180px) {
    html.menu-open {overflow:hidden;}

    /* column right */
    .vii-menu-col.right {padding-bottom:0; padding-top:22px;}

    /* logo */
    .vii-menu-block.logo {padding-bottom:20px; padding-right:24px;}
    .vii-menu-button span.text {font-size:14px;}

    /* menu */
    .vii-menu-overlay__menu {padding:var(--vii-gap-container);}
}
@media only screen and (max-width:480px) {
    /* column right */
    .vii-menu-col.right {padding-top:8px;}

    /* logo */
    .vii-menu-block.logo {padding-bottom:10px; padding-right:14px;}
    .vii-menu-button span.text {font-size:11px;}
    .vii-menu-overlay__logo {
        --vii-logo-height:50px;
        padding:var(--vii-gap-container) var(--vii-gap-container) 0;
    }

    /* menu */
    .vii-menu-overlay__menu {padding-top:32px; height:var(--vii-100vh); max-height:unset;}
    .vii-menu-overlay__inner {
        position:fixed; inset:0;
        border-radius:0; box-shadow:none;
    }
}