/**
 * Header/Footer (nma_header/nma_footer, vedi includes/header-footer.php):
 * scheletro INDIPENDENTE dal breakpoint mobile e dai dati salvati per un
 * Header/Footer preciso - quella parte (posizione fixed sì/no, colore/
 * gradiente sfondo a scroll, preset layout hamburger sotto il breakpoint
 * editabile in Impostazioni Tema) è iniettata dinamicamente da
 * nma_header_footer_frontend_overrides() sull'handle 'nma-header-footer'
 * (stesso handle di questo file, vedi nma_assets() in includes/assets.php).
 */

.nma-header,
.nma-footer {
	width: 100%;
	box-sizing: border-box;
}

/* Default neutro (nessuna classe --desktop-* / --mobile-* corrisponde ancora
   al viewport corrente durante il primo paint): le regole VERE, responsive
   (fixed/overlay sopra/sotto il breakpoint, scostamento sotto la barra di
   wp-admin) sono in nma_header_footer_breakpoint_css() - includes/header-footer.php -
   serve il numero esatto del breakpoint (editabile in Impostazioni Tema),
   non esprimibile qui in un file .css statico. */
/* z-index qui, non solo nella variante fixed/overlay (nma_header_footer_breakpoint_css()
   in includes/header-footer.php, stesso valore 500): senza, un header in
   posizione "Statica" (scorre col resto del sito, nessuna classe --desktop-fixed/
   --desktop-overlay applicata) resta position:relative ma con z-index:auto -
   un contenitore Strip qualsiasi piu' in basso nella pagina con un proprio
   z-index esplicito (anche solo 1, es. .strip__rows in assets/css/strip.css,
   che lo usa per lo stacking del proprio sfondo) lo scavalcherebbe per
   regola CSS (un livello di stacking con z-index positivo dipinge SEMPRE
   sopra un livello con z-index:auto, indipendentemente dal valore o
   dall'ordine nel DOM): la tendina/dropdown del menu (dentro l'header)
   finirebbe visivamente SOTTO quel contenuto invece che sopra. */
.nma-header {
	position: relative;
	z-index: 500;
}

/* --nma-header-height: misurata a runtime da assets/js/header-footer.js
   (l'altezza reale dipende dal contenuto a blocchi, non nota in anticipo). */
body.nma-has-fixed-header {
	padding-top: var( --nma-header-height, 0px );
}

.nma-header--scroll-bg {
	background: transparent;
}

/* Nav */
.nma-nav {
	display: flex;
	align-items: center;
	/* NIENTE position:relative qui apposta: il preset "Tendina dall'alto"
	   (vedi nma_header_footer_breakpoint_css() in includes/header-footer.php)
	   deve ancorarsi a .nma-header (sempre position:relative o fixed, vedi
	   sopra), non a .nma-nav - cosi' la tendina parte SOTTO tutto l'header
	   (a tutta larghezza) invece che sovrapposta al bottone hamburger, che
	   vive proprio dentro .nma-nav. */
}

/* Riga Strip che contiene un menu (es. logo + menu affiancati nell'header,
   vedi nma_hf_menu_is_manual()/shortcode [nma_menu] in includes/header-footer.php):
   MAI flex-wrap qui, a differenza del comportamento di default di
   .strip__row (assets/css/strip.css) che va a capo da solo in base allo
   spazio - qui deve SEMPRE restare su una riga sola, altrimenti diventa
   ambiguo per updateNavHamburgerState() (assets/js/header-footer.js) capire
   quanto spazio ha davvero a disposizione il menu: se la riga puo' andare a
   capo da sola, lo spazio "disponibile" per il menu cambia a seconda che sia
   gia' andato a capo o no (circolare, nessuna misura stabile possibile). Con
   nowrap qui, il menu che non ci sta trabocca visibilmente finche' il JS non
   lo riduce a hamburger - un solo istante, stesso giro di resize/load, mai
   visibile. :has() scelto apposta (non .nma-header .strip__row): vale per
   OGNI riga Strip che contiene un menu, anche fuori dall'header via
   shortcode manuale, non serve conoscere la struttura di chi lo usa. */
.strip__row:has( .nma-nav ) {
	flex-wrap: nowrap;
}

/* Blocchi che condividono la riga con un menu (es. il logo affiancato al
   menu nell'header) MA non sono loro stessi il menu: MAI flex-shrink, a
   differenza del comportamento di default di .strip__block--fit-content
   (assets/css/strip.css, shrink:1 voluto li' per NON causare overflow su
   una riga Strip generica qualsiasi) - qui invece il nav (nowrap sopra) e'
   l'UNICO a dover "cedere" spazio, passando ad hamburger via JS
   (updateNavHamburgerState(), assets/js/header-footer.js) invece di
   restringersi via CSS: senza questa regola, in mancanza di spazio la
   pressione di squeeze cadrebbe sugli ALTRI blocchi della riga (es. il logo,
   che si rimpicciolerebbe visibilmente per un istante prima che il JS
   scattasse) invece che risolversi tutta nel nav. :not(:has(.nma-nav))
   esclude il blocco del nav stesso, che deve restare libero di traboccare
   (e essere quindi rilevato) finche' il JS non lo riduce. */
.strip__row:has( .nma-nav ) > .strip__block:not( :has( .nma-nav ) ) {
	flex-shrink: 0;
}

/* Blocco Strip che contiene DIRETTAMENTE il menu (stesso caso [nma_menu]
   manuale di sopra): overflow:visible qui sovrascrive l'overflow:hidden di
   default di .strip__block (assets/css/strip.css, li' serve a
   .strip__block-bg per non far uscire un'immagine di sfondo dagli angoli
   arrotondati) - senza, la tendina/drawer del menu (.nma-nav__menu-wrap,
   position:absolute o fixed secondo il preset, vedi nma_header_footer_breakpoint_css()
   in includes/header-footer.php) verrebbe tagliata all'altezza del blocco
   invece di comparire per intero sopra al resto della pagina: la voce che ci
   sta nello spazio visibile rimasto (spesso solo la prima) e' l'unica a
   sembrare "nel menu", le altre paiono sparite anche se sono li', presenti
   nel DOM. */
.strip__block:has( .nma-nav ) {
	overflow: visible;
}

.nma-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
	margin-left: auto;
}

.nma-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.nma-nav__menu-wrap {
	display: block;
}

/* Preset drawer-left/drawer-top (vedi nma_header_footer_breakpoint_css() in
   includes/header-footer.php): il pannello e' position:fixed a tutta
   larghezza/altezza sopra al bottone hamburger stesso (z-index 600 > 500
   dell'header) - senza questo, il bottone resta coperto ad aperto e non c'e'
   piu' modo di richiuderlo. z-index piu' alto SOLO da aperto: da chiuso il
   bottone deve restare all'interno del normale stacking dell'header. */
.nma-nav--open .nma-nav__toggle {
	position: relative;
	z-index: 700;
}

.nma-nav__menu {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.nma-nav__menu li {
	position: relative;
}

/* Solo le voci di primo livello (non le sottovoci in tendina, quelle restano
   libere di andare a capo nel drawer mobile stretto): senza questo, una
   voce troppo lunga per lo spazio rimasto potrebbe spezzarsi su piu' righe
   invece di far traboccare .nma-nav nel suo insieme - updateNavHamburgerState()
   (assets/js/header-footer.js) misura proprio quel traboccamento
   (nav.scrollWidth) per capire se il menu "non ci sta piu' su una riga
   sola": una voce che si spezza silenziosamente nasconderebbe il problema
   invece di farlo emergere come misura di larghezza. */
.nma-nav__menu > li > a {
	white-space: nowrap;
}

.nma-nav__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	min-width: 180px;
}

/* Sottomenu a tendina di default sopra il breakpoint mobile (hover/focus):
   sovrascrivibile dal CSS libero di ogni Header/Footer. */
.nma-nav__menu li:hover > .sub-menu,
.nma-nav__menu li:focus-within > .sub-menu {
	display: block;
}