/**
 * Framework: Hyper-Fast WP
 * File mobile-menu.css
 * Aggiornato al 07-07-2023
 * Incluso da css-lista-mobile.php
 * Da https://codepen.io/tiffachoo/pen/yzZRXK
 * Nota bene: il codice originale è in SCSS e va convertito qui in CSS normale: https://jsonformatter.org/scss-to-css
 */

nav#mobile-menu { font-family: var(--menu-fontfamily); }

nav#mobile-menu li a { color: var(--menumobile-link-color_MB); font-size: var(--menumobile-link-fontsize_MB); 
	padding: var(--menumobile-link-padding_MB) !important; text-decoration: none; text-transform: var(--menumobile-link-texttransform_MB); }

nav#mobile-menu .mb-menu-top-stripe, 
nav#mobile-menu .mb-menu-top-stripe div,
nav#mobile-menu .mb-menu-top-stripe a { display: flex; align-items: center; }

.mobile-menu .nav-expand-content .sfondo-sei-in {background: var(--menumobile-seiin-backgroundcolor_MB) !important; 
	color: var(--menumobile-seiin-color_MB) !important;  }

.mobile-menu .nav-expand-content .nav-back-link { background-color: var(--menumobile-indietro-backgroundcolor_MB) !important; 
	color: var(--menumobile-indietro-color_MB) !important; }

.mobile-menu * { box-sizing: border-box; }

.mobile-menu hr { border: 0; clear:both; display:block; width: 96%; background-color: black; height: 1px; }

.mobile-menu .nav-top { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; /* position: sticky; */ position: fixed; right: 30px; top: 30px; 
  z-index: 101; padding: 10px 10px 10px 10px; /* width: 100%; */ width: auto; height: 50px; background-color: var(--col2); border: 1px black solid; }

.mobile-menu .menu-right { margin-left: auto; }

.mobile-menu .apri-chiudi-menu::after { opacity: 1; visibility: visible; }

/* RESTART */
.mobile-menu .nav-items { -webkit-box-flex: 0; flex: 0 0 100%; }
.mobile-menu .nav-item:not(:last-child) { border-bottom: var(--menumobile-link-borderbottom_MB); }

.mobile-menu .nav-link { display: flex; align-items: center; background-color: var(--menumobile-link-backgroundcolor_MB); /* sfondo link livello uno */ }

.mobile-menu .nav-expand-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.3s; transition: 0.3s; visibility: hidden;
}
.mobile-menu .nav-expand-content .nav-item:not(:last-child) { border-bottom: var(--menumobile-link-borderbottom_MB); /* bordo link */ }

	.mobile-menu .nav-expand-content .nav-back-link { display: flex; align-items: center; }

.mobile-menu .nav-expand-content .nav-back-link::before { margin-right: 0.5em; }

	.mobile-menu .nav-expand-link { display: flex; justify-content: space-between !important; }
	.mobile-menu .nav-expand-link span { display: flex; align-items: center !important; }

.mobile-menu .nav-expand.active > .nav-expand-content { -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; }

/* Sfondi colonne livello due/cinque */
.mobile-menu .nav-expand .nav-expand-content, 
.mobile-menu .nav-expand .nav-expand-content .nav-link, 
.mobile-menu .nav-expand .nav-expand-content .nav-expand-content, 
.mobile-menu .nav-expand .nav-expand-content .nav-expand-content .nav-link, 
.mobile-menu .nav-expand .nav-expand-content .nav-expand-content .nav-expand-content, 
.mobile-menu .nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-link, 
.mobile-menu .nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-expand-content, 
.mobile-menu .nav-expand .nav-expand-content .nav-expand-content .nav-expand-content .nav-expand-content .nav-link { 
	background-color: var(--menumobile-level-backgroundcolor_MB); 
}

/*************/
/* ICONE SVG */
/*************/
nav .icona-svg { fill: var(--menumobile-link-icona-color_MB); display: inline-block !important; margin-right: 10px !important; }
nav .icona-svg path { fill: var(--menumobile-link-icona-color_MB); }
nav .icona-dx { float: right !important; }
nav .icona-chiudi path { fill: var(--menumobile-chiudi-icona-color_MB) !important; }
nav .icona-avanti path { fill: var(--menumobile-avanti-icona-color_MB) !important; }
nav .icona-indietro path { fill: var(--menumobile-indietro-icona-color_MB) !important; }
nav .icona-svg { width: var(--menumobile-link-icona-width_MB); height: var(--menumobile-link-icona-width_MB); }
nav svg { display: inline-block !important; }

/* Correzione per icone social in menu mobile accanto alle bandierine */
#mobile-menu .mb-menu-top-stripe .ico-social { display: inline-block; margin: 0px; padding: 0px; }
#mobile-menu .mb-menu-top-stripe .ico-social a { margin: 0px !important; padding: 0px !important; }
#mobile-menu .mb-menu-top-stripe .ico-social svg { height: 27px; width: 27px; }
#mobile-menu .mb-menu-top-stripe .ico-fb { margin-right: 20px; }
#mobile-menu .mb-menu-top-stripe .ico-social path { fill: #555555; }

/**************/
/* Bandierine */
/**************/
/* Per l'allineamento centrale del div mb-menu-top-stripe il <li> contenitore deve avere style="text-align:center" */
#mobile-menu .bandierine { margin-right: 30px; }
#mobile-menu .bandierine img { margin-left: 0px; margin-top: 0px; width: auto; width: 27px !important; height: 18px !important; }
#mobile-menu .mb-menu-top-stripe .bandierine .wpml-ls-statics-shortcode_actions { padding: 1px; }

/*********/
/* Cerca */
/*********/
.mobile #mobile-menu .mobile-menu-cerca { text-align: left; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; background: var(--menumobile-cerca-backgroundcolor_MB); }
.mobile #mobile-menu .mobile-menu-cerca .search-submit { margin-left: 5px; }

/*************/
/* Hamburger */
/*************/
.hamburger { background: #333 !important; display: block !important; padding: 0px !important; position: absolute; right: 10px; top: 10px; }
.hamburger .icona-svg { width: 20px !important; height: 20px !important; margin-right: 0px !important; margin-bottom: 0px !important; }
.hamburger .icona-svg path { fill: white !important; }