/* =============================================================================================================
   VDU — Menu ad hamburger su telefono v1 — RUN-VDU-RIORDINO-12, 27.10.2026 — lavalledegliulivi.com
   Sotto i 768 px (punto di rottura mobile di Brizy: max-width 767px) i menu principali scritti per esteso — la banda
   #menu-mobile in cima alla pagina e il menu dell'intestazione animata che compare scorrendo — lasciano il posto a un
   bottone «Menu» che apre un pannello con le stesse voci, nello stesso ordine. Lo script vdu-menu-mobile-v1.js aggiunge
   bottoni e pannello e SOLO DOPO mette la classe vdu-hm-pronto su <html>: senza script la pagina resta com'era.
   Da 768 px in su nessuna regola di questo foglio si applica (bottoni e pannello restano display:none).
   Gli elementi di Brizy si prendono per le classi che lo script mette sui contenitori trovati (vdu-hm-origine,
   vdu-hm-origine-testata, vdu-hm-testata-ospite), mai per le classi generate brz-css-*.
   Colore: il rosso del menu del telefono #F52817 scurito nella stessa tinta (HSL, luminosita' giu' a passi di 0,1%) fino
   al primo valore a 8 bit che da' 4,5:1 sul bianco: #EA1B0A (4,51:1); il bianco su #EA1B0A da' lo stesso valore. Bottoni
   e pannello hanno fondo bianco proprio: il contrasto non dipende da cio' che sta dietro.
   Strati: pannello z-index 99995, sopra la barra fissa (99990, che contiene la nuvoletta di Lella) e sotto il banner del
   consenso; bottone dell'intestazione animata dentro lo strato dell'intestazione (1056).
   ============================================================================================================= */
.vdu-hm-btn,
.vdu-hm-pannello,
.vdu-hm-riga { display: none; }

@media (max-width: 767px) {
	/* i menu scritti per esteso, solo quando lo script ha messo bottoni e pannello */
	html.vdu-hm-pronto .vdu-hm-origine nav.brz-menu { display: none !important; }
	html.vdu-hm-pronto .vdu-hm-origine-testata { display: none !important; }
	html.vdu-hm-pronto .vdu-hm-testata-ospite { position: relative; }

	/* riga del bottone nella banda: alta quanto il menu che sostituisce (misurato dallo script), cosi' la pagina non scorre */
	html.vdu-hm-pronto .vdu-hm-riga {
		display: flex; align-items: center; justify-content: center;
		flex: 1 1 100%; width: 100%; min-height: var(--vdu-hm-h, 44px); box-sizing: border-box;
	}

	html.vdu-hm-pronto .vdu-hm-btn {
		display: inline-flex; align-items: center; justify-content: center; gap: 10px;
		min-width: 44px; min-height: 44px; margin: 0; padding: 0 18px; box-sizing: border-box;
		border: 2px solid #EA1B0A; border-radius: 8px; background: #fff; color: #EA1B0A;
		font-family: var(--vdu-hm-font, inherit); font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: .02em;
		text-transform: none; text-decoration: none; cursor: pointer; box-shadow: none;
		-webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
		transition: background-color .15s ease, color .15s ease;
	}
	html.vdu-hm-pronto .vdu-hm-btn--testata {
		position: absolute; left: 8px; top: 50%; z-index: 2; transform: translateY(-50%);
		width: 44px; height: 44px; padding: 0;
	}
	html.vdu-hm-pronto .vdu-hm-btn[aria-expanded="true"],
	html.vdu-hm-pronto .vdu-hm-btn:active { background: #EA1B0A; color: #fff; }
	@media (hover: hover) {
		html.vdu-hm-pronto .vdu-hm-btn:hover { background: #EA1B0A; color: #fff; }
	}
	html.vdu-hm-pronto .vdu-hm-btn:focus { outline: none; }
	html.vdu-hm-pronto .vdu-hm-btn:focus-visible { outline: 3px solid #1B355A; outline-offset: 2px; }

	/* icona: tre barre che diventano una X a pannello aperto */
	.vdu-hm-icona { position: relative; display: block; flex: 0 0 auto; width: 22px; height: 16px; }
	.vdu-hm-icona > span {
		position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: currentColor;
		transition: transform .2s ease, opacity .2s ease, top .2s ease;
	}
	.vdu-hm-icona > span:nth-child(1) { top: 0; }
	.vdu-hm-icona > span:nth-child(2) { top: 6.75px; }
	.vdu-hm-icona > span:nth-child(3) { top: 13.5px; }
	.vdu-hm-btn[aria-expanded="true"] .vdu-hm-icona > span:nth-child(1) { top: 6.75px; transform: rotate(45deg); }
	.vdu-hm-btn[aria-expanded="true"] .vdu-hm-icona > span:nth-child(2) { opacity: 0; }
	.vdu-hm-btn[aria-expanded="true"] .vdu-hm-icona > span:nth-child(3) { top: 6.75px; transform: rotate(-45deg); }
	.vdu-hm-testo { display: block; }

	/* pannello: fisso sotto l'elemento che lo ha aperto, a tutta larghezza, scorrevole se non ci sta */
	html.vdu-hm-pronto .vdu-hm-pannello:not([hidden]) {
		display: block; position: fixed; left: 0; right: 0; top: var(--vdu-hm-top, 0px); z-index: 99995;
		max-height: var(--vdu-hm-max, calc(100vh - var(--vdu-hm-top, 0px))); overflow-y: auto; overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch; background: #fff; border-top: 1px solid #ececec;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .18); font-family: var(--vdu-hm-font, inherit);
	}
	.vdu-hm-voci { list-style: none; margin: 0; padding: 6px 0 10px; }
	.vdu-hm-voci > li { margin: 0; padding: 0; list-style: none; }
	html.vdu-hm-pronto a.vdu-hm-voce {
		display: flex; align-items: center; min-height: 48px; margin: 0; padding: 0 24px; box-sizing: border-box;
		border-bottom: 1px solid #f0f0f0; background: #fff; color: #EA1B0A;
		font-family: var(--vdu-hm-font, inherit); font-size: 18px; font-weight: 500; line-height: 1.3;
		text-decoration: none; -webkit-tap-highlight-color: transparent;
	}
	html.vdu-hm-pronto a.vdu-hm-voce:hover,
	html.vdu-hm-pronto a.vdu-hm-voce:active { color: #EA1B0A; background: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
	html.vdu-hm-pronto a.vdu-hm-voce:focus { outline: none; }
	html.vdu-hm-pronto a.vdu-hm-voce:focus-visible { outline: 3px solid #1B355A; outline-offset: -3px; text-decoration: underline; text-underline-offset: 4px; }
}