/*
 * Menu mobile a drawer (off-canvas) — pattern replicato da italiafideiussioni.
 *
 * Markup in primary_nav_transparent-html.php (fuori dalle .navbar: la loro
 * opacity .9 creerebbe stacking context e drawer semitrasparente), walker
 * wbg_drawer_navwalker, comportamento in drawer.js. Sotto i 992px il drawer
 * SOSTITUISCE il collapse Bootstrap (nascosto qui sotto); sopra i 992px non
 * esiste (display:none) e resta il mega menu desktop (megamenu.css).
 * Enqueue in private.php. Solo front-end.
 */

.wbg-drawer,
.wbg-drawer-overlay {
	display: none;
}

@media (max-width: 991.98px) {

	/* il vecchio menu mobile (collapse) e' sostituito dal drawer */
	#navbarprimary_nav_transparent {
		display: none !important;
	}

	.wbg-drawer-overlay {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		z-index: 1090;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}

	.wbg-drawer-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}

	.wbg-drawer {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(320px, 85vw);
		background: #fff;
		z-index: 1100;
		transform: translateX(-100%);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		overflow-y: auto;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
		padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
	}

	.wbg-drawer.is-open {
		transform: translateX(0);
	}

	/* pagina bloccata mentre il drawer e' aperto (drawer.js) */
	body.wbg-drawer-open {
		overflow: hidden;
	}

	.wbg-drawer-inner {
		display: flex;
		flex-direction: column;
		gap: 1.1rem;
		min-height: 100%;
	}

	/* --- ricerca in cima --- */
	.wbg-dw-search {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		background: #f2f4f3;
		border-radius: 0.5rem;
		padding: 0.55rem 0.8rem;
	}

	.wbg-dw-search .fa-search {
		color: #9aa19c;
		font-size: 0.85rem;
	}

	.wbg-dw-search input {
		flex: 1;
		min-width: 0;
		border: 0;
		background: transparent;
		font-size: 0.9rem;
		color: #212529;
	}

	.wbg-dw-search input:focus {
		outline: none;
	}

	/* --- lista voci --- */
	.wbg-dw-list,
	.wbg-dw-sub,
	.wbg-dw-top {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.wbg-dw-list {
		display: flex;
		flex-direction: column;
	}

	.wbg-dw-item > a,
	.wbg-dw-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		/* doc Federica: "nel menu che si apre ingrandire e spaziare" */
		padding: 0.8rem 0.6rem;
		font-size: 1.05rem;
		font-weight: 500;
		color: #212529;
		text-decoration: none;
		background: transparent;
		border: 0;
		border-radius: 0.4rem;
		cursor: pointer;
		text-align: left;
		line-height: 1.3;
		transition: background 0.15s ease, color 0.15s ease;
	}

	.wbg-dw-item > a:hover,
	.wbg-dw-toggle:hover,
	.wbg-dw-item.is-current > a {
		background: #e6f0e1; /* verde di sezione del sito */
		color: #227c26;
	}

	/* Voci di primo livello sempre in maiuscolo: le etichette del menu lo sono
	 * gia' tutte tranne "Home" (doc Federica: "Menu mobile: home scrivere tutto
	 * in maiuscolo"). Via CSS -> vale anche per la traduzione EN. */
	.wbg-dw-item.wbg-dw-depth-0 > a,
	.wbg-dw-item.wbg-dw-depth-0 > .wbg-dw-toggle {
		text-transform: uppercase;
	}

	.wbg-dw-caret {
		flex-shrink: 0;
		margin-left: 0.6rem;
		color: #9aa19c;
		transition: transform 0.2s ease;
	}

	.wbg-dw-toggle[aria-expanded="true"] .wbg-dw-caret {
		transform: rotate(180deg);
		color: #227c26;
	}

	/* --- sottomenu (accordion) --- */
	.wbg-dw-sub {
		display: flex;
		flex-direction: column;
		margin-left: 0.5rem;
		padding: 0.15rem 0 0.3rem 0.6rem;
		border-left: 1.5px solid #e4e8e5;
	}

	.wbg-dw-sub[hidden] {
		display: none;
	}

	.wbg-dw-sub .wbg-dw-item > a {
		padding: 0.55rem 0.6rem;
		font-size: 0.95rem;
		font-weight: 400;
	}

	/* "Vai a <voce>": link alla pagina del parent, evidenziato */
	.wbg-dw-sub a.wbg-dw-featured {
		color: #227c26;
		font-weight: 600;
	}

	/* collezioni (terzo livello): uppercase piccole come nel mega desktop */
	.wbg-dw-item.wbg-dw-depth-2 > a {
		font-size: 0.85rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	/* --- contatti in fondo --- */
	.wbg-dw-contacts {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		padding-top: 0.9rem;
		border-top: 1px solid #e4e8e5;
	}

	.wbg-dw-contacts-label {
		font-size: 0.66rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: #9aa19c;
		margin-bottom: 0.3rem;
	}

	a.wbg-dw-contact {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.45rem 0.2rem;
		font-size: 0.88rem;
		font-weight: 500;
		color: #212529;
		text-decoration: none;
	}

	a.wbg-dw-contact:hover {
		color: #227c26;
	}

	a.wbg-dw-contact .fas {
		color: #227c26;
		font-size: 0.85rem;
	}

	/* Area riservata + social + lingue (voci del "Menu Top").
	 * doc Federica: "nel menu che si apre ingrandire e spaziare: icone social a
	 * capo e piu' grandi". Griglia a 3 colonne su 3 righe:
	 *   riga 1 = area riservata (span intero)
	 *   riga 2 = le 3 icone social (grandi)
	 *   riga 3 = ITA / ENG
	 * L'ordine nel DOM e' sempre [area riservata, social x3, lingue] -> niente
	 * dipendenza da ID di menu (che cambiano tra IT ed EN): la prima voce e'
	 * l'area riservata, le lingue hanno le classi WPML, il resto sono i social. */
	.wbg-dw-top {
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		align-items: center;
		gap: 0.6rem 1.1rem;
		margin-top: 0.6rem;
	}

	.wbg-dw-top > li {
		margin: 0;
	}

	/* area riservata: riga tutta sua */
	.wbg-dw-top > li:first-child {
		grid-column: 1 / -1;
	}

	/* le lingue tornano a capo (colonna 1 della riga successiva ai social) */
	.wbg-dw-top > li.wpml-ls-first-item {
		grid-column: 1;
	}

	.wbg-dw-top > li > a {
		display: block;
		padding: 0.2rem 0;
		font-size: 0.85rem;
		color: #212529;
		text-decoration: none;
	}

	.wbg-dw-top > li > a:hover {
		color: #227c26;
	}

	/* icone social piu' grandi */
	.wbg-dw-top > li > a > i {
		font-size: 1.6rem;
		line-height: 1;
	}

	.wbg-dw-top > li.wpml-ls-current-language > a {
		font-weight: 700;
	}

	/* --- CTA in chiusura --- */
	.wbg-dw-cta {
		margin-top: auto;
		text-align: center;
		text-transform: uppercase;
		border-radius: 0;
	}
}