/**
 * Stili per i template part header e footer (parts/header.html, parts/footer.html).
 *
 * I blocchi Group qui usati NON hanno l'attributo "layout" (flex/constrained
 * con contentSize): quell'attributo farebbe generare a Gutenberg, lato
 * editor, una classe univoca + uno <style> inline che non possiamo
 * replicare a mano nel file .html, causando l'errore "il contenuto non
 * è valido". Il layout (max-width, flex, gap) è quindi gestito qui,
 * puramente via CSS, sulle className statiche del template.
 *
 * Il comportamento responsive dell'overlay (hamburger che diventa icona
 * "chiudi", apertura fullscreen sotto i 600px) resta invece gestito dal
 * blocco core/navigation nativo di WordPress: è un blocco dinamico senza
 * markup statico da validare, quindi il suo attributo "layout" è sicuro.
 */

.site-header__inner,
.site-footer__inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30, 1rem);
}

.site-header__brand {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	min-width: 0; /* consente al titolo di troncarsi invece di forzare l'overflow del flex item */
}

/* Forza il "trim" visivo (troncamento con ellissi se troppo lungo) e il
   lower case sul titolo del sito. Font Input Mono, dimensione ridotta
   rispetto al default del tema per stare in riga con la nav. */
.site-header__title,
.site-header__title a {
	font-family: var(--wp--preset--font-family--input-mono);
	font-size: var(--wp--preset--font-size--medium);
	text-transform: lowercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

/* Forza il lower case sulle voci del menu di navigazione (link diretti e
   Page List di fallback), font Input Mono in linea col titolo, dimensione
   ridotta. */
.site-header__nav .wp-block-navigation-item__label,
.site-header__nav .wp-block-pages-list__item__link,
.site-header__nav .wp-block-page-list a {
	font-family: var(--wp--preset--font-family--input-mono);
	font-size: var(--wp--preset--font-size--small);
	text-transform: lowercase;
	transition: color 150ms ease;
	padding-left:20px;
}

/* Hover sulle voci di navigazione: shift di colore Primary → Primary Light,
   coerente con le regole di interazione del design system (nessun
   effetto scale/press). */
.site-header__nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.site-header__nav .wp-block-pages-list__item__link:hover,
.site-header__nav .wp-block-page-list a:hover {
	color: var(--wp--preset--color--primary-light);
}

/* Voce di navigazione corrispondente alla pagina corrente: WordPress core
   marca il link attivo con aria-current="page" (e la li con
   .current-menu-item, per i menu classici/Page List). Nessun titolo pagina
   in pagina (rimosso da templates/page.html): l'unico segnale visivo di
   "dove sono" è questo stato nel menu, quindi va reso evidente con Black
   (Input Mono ha solo Regular/Black) e colore Primary Light. */
.site-header__nav .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label,
.site-header__nav .current-menu-item > .wp-block-pages-list__item__link,
.site-header__nav .current-menu-item > a,
.site-header__nav .wp-block-page-list a[aria-current="page"] {
	font-weight: 900;
	color: var(--wp--preset--color--primary-light);
}

/* Fallback: quando l'overlay mobile è aperto il menu passa da riga a
   colonna, quindi "justifyContent: right" del blocco (che agisce
   sull'asse principale) va rinforzato con align-items per ottenere
   davvero l'allineamento a destra degli elementi impilati. */
.site-header__nav.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	align-items: flex-end;
	text-align: right;
}

.wp-block-navigation__responsive-dialog {
	margin-right: 20px;
	margin-bottom: 6px;
}

/* Sposta il breakpoint mobile/overlay del blocco core/navigation dal suo
   default (600px) a 840px: sotto agli 840px resta l'hamburger con overlay
   fullscreen, sopra il menu torna in linea. Il blocco non espone questo
   breakpoint come attributo, quindi va forzato via CSS con specificità
   pari/maggiore alle regole native (che restano attive tra 600px e 840px
   e vanno annullate qui). */
@media (max-width: 839.98px) {
	.site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none;
	}
}

@media (min-width: 840px) {
	.site-header__nav .wp-block-navigation__responsive-container-open {
		display: none;
	}

	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block;
		width: 100%;
		position: relative;
		z-index: auto;
		background-color: inherit;
	}

	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
		display: none;
	}
}

/* Icona hamburger/chiudi coerente con la palette del tema. */
.site-header__nav .wp-block-navigation__responsive-container-open,
.site-header__nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}