/****************************
 * Common
****************************/
/* open/close */
html:not(.menu-open) .twc-menu-mobile {visibility:hidden; opacity:0;}
html:not(.menu-open) .twc-menu-mobile-container {transform:translateX(-105%);}

/* wrapper */
[data-menu*="default"][data-menu*="mobile"] {display:block;}
.twc-menu-mobile-container {
    width:100%; max-width:var(--twc-mobile-menu-width); padding-top:calc(var(--twc-header-height) + 30px);
}
.twc-menu-mobile-container:before {
    content:""; display:block;
    position:absolute; inset:0; background:var(--twc-color-primary);
    border-radius:0 25px 25px 0;
}
.twc-menu-mobile-inner {height:100%;}

/* close layer */
.twc-menu-mobile__close {background:rgba(0, 0, 0, .3);}

/* sections */
.twc-menu-mobile__section {padding:var(--twc-gap-container) var(--twc-gap-container) 40px 35px;}

/****************************
 * Menu
****************************/
/* Common Menu */
.mobile-menu ul > li:not(:last-child) {margin-bottom:10px;}
.mobile-menu ul {
    list-style:none; margin:0;
    --mobile-menu-item-color:#fff;
    --mobile-menu-item-color-hover:#fff;
    --mobile-menu-item-weight:500;
    --mobile-menu-item-weight-hover:600;
}
.mobile-menu ul > li {padding:0;}
.mobile-menu ul > li > a {
    position:relative; display:block; width:fit-content; padding:5px 0;
    text-decoration:none; letter-spacing:.03em; line-height:1.4;
    color:var(--mobile-menu-item-color); font-weight:var(--mobile-menu-item-weight);
}
.mobile-menu ul > li > a:before {
    content:""; display:block;
    width:0; height:2px; background:#fff;
    position:absolute; left:0; bottom:8px; transition:var(--twc-transition);
}
.mobile-menu ul > li[class*="current-"] > a {font-weight:var(--mobile-menu-item-weight-hover);}
.mobile-menu ul > li[class*="current-"] > a,
.mobile-menu ul > li > a:hover, .mobile-menu ul > li > a:focus {color:var(--mobile-menu-item-color-hover);}
.mobile-menu ul > li[class*="current-"] > a:before,
.mobile-menu ul > li > a:hover:before, .mobile-menu ul > li > a:focus:before {width:100%;}

/* Common Sub Menu */
.mobile-menu ul.sub-menu {width:100%; padding-top:10px;}

/* Main menu */
.main-menu.mobile-menu {margin-bottom:40px;}
.main-menu.mobile-menu ul > li > a {font-size:23px;}
.main-menu.mobile-menu ul.sub-menu > li > a {font-size:15px;}
.main-menu.mobile-menu ul.sub-menu > li > a:before {bottom:2px;}

/* Bottom menu */
.bottom-menu.mobile-menu ul {
    --mobile-menu-item-color:rgba(255, 255, 255, .6);
    --mobile-menu-item-weight:400;
}
.bottom-menu.mobile-menu ul > li:not(:last-child) {margin-bottom:5px;}
.bottom-menu.mobile-menu ul > li > a {font-size:14px;}
.bottom-menu.mobile-menu ul > li > a:before {bottom:5px;}
.bottom-menu.mobile-menu .menu-item-has-children > .menu-item-arrow {width:20px;}
.bottom-menu.mobile-menu .menu-item-arrow__button {font-size:10px; color:rgba(255, 255, 255, .6); line-height:1;}
.bottom-menu.mobile-menu .menu-item-arrow__button:hover {color:#fff;}

/* Current main menu */
.mobile-menu.main-menu.is-current > ul > li:not([class*="current"]) {
    --mobile-menu-item-color:rgba(255, 255, 255, .2);
}
.mobile-menu.main-menu.is-current ul > li:not([class*="current"]) .menu-item-arrow__button {color:rgba(255, 255, 255, .2);}
.mobile-menu.main-menu.is-current ul > li:not([class*="current"]) .menu-item-arrow__button:hover {color:#fff;}


/****************************
 * Menu Has Child
****************************/
.menu-item-has-children {display:flex; flex-wrap:wrap; align-items:center; position:relative;}
.menu-item-has-children > a {order:1; max-width:calc(100% - 40px);}
.menu-item-has-children > .menu-item-arrow {order:2; width:40px;}
.menu-item-has-children > ul {order:3; width:100%;}

/* Arrow button */
.menu-item-arrow {text-align:right;}
.menu-item-arrow__button {
    font-size:15px; color:#fff;
    padding:5px; margin-right:-5px;
    background:rgba(0, 0, 0, 0);
}
.menu-item-arrow__button i {display:inline-block; transition:transform .3s ease;}
.menu-item-arrow__button.active i {transform:rotate(180deg);}


/****************************
 * Mobile Menu Responsive
****************************/
@media only screen and (max-width:1180px) {
    html.menu-open {overflow:hidden; height:100%;}
    .twc-menu-mobile.hidden {display:block;}
}
@media only screen and (max-width:480px) {
    .twc-menu-mobile-container {max-width:calc(100% - var(--menu-spacing-hamburger)); background:var(--twc-color-light-gray);}
    .twc-menu-mobile__close { background:var(--twc-color-light-gray);}
}
@media only screen and (max-width:375px) {
    .twc-menu-mobile__section {padding-left:var(--twc-gap-container);}
}