/*
 * Header + Footer (.pz-footer-*) - caricati sitewide (non solo Home) perche'
 * compaiono su ogni pagina. L'header e' quello nativo di Kadence
 * (#masthead.site-header) con il "Trasparent Header" disattivato via
 * theme_mod: qui sovrascriviamo solo colori e sticky positioning.
 */

/* Font di base per TUTTO il sito (Century Gothic). Selettore "html body"
 * (2 elementi, specificita' 0,0,2) invece del solo "body" (0,0,1): Kadence
 * stampa un <style> INLINE nell'head con "body{font-family:var(--global-
 * body-font-family)}" DOPO i fogli di stile esterni (stessa specificita',
 * quindi vincerebbe per ordine di sorgente) - la specificita' maggiorata
 * qui vince sempre, indipendentemente dall'ordine. I 6 titoli di sezione
 * (selettori piu' specifici con --pz-font-title) continuano a
 * sovrascriverla correttamente. */
html body {
	font-family: var(--pz-font-secondary);
}

/* ---------- Header (Kadence #masthead) ---------- */

#masthead.site-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	background-color: rgba(var(--pz-header-bg-rgb), var(--pz-header-bg-opacity)) !important;
}

#masthead .site-header-row-container-inner,
#masthead .site-main-header-inner-wrap {
	background-color: transparent;
}

#masthead .main-navigation ul.menu > li.menu-item > a,
#masthead .main-navigation ul.menu > li.menu-item > a > .item-text {
	color: var(--pz-color-white) !important;
}

#masthead .main-navigation ul.menu > li.menu-item > a:hover,
#masthead .main-navigation ul.menu > li.menu-item > a.pz-nav-active {
	color: var(--pz-color-header-nav-hover) !important;
}

#masthead .custom-logo {
	max-height: var(--pz-logo-header-height);
	width: auto;
}

/* Altezza della barra: Kadence stampa un <style> INLINE con
 * ".site-main-header-inner-wrap{min-height:80px}" (impostazione Customizer) -
 * selettore con l'ID #masthead in piu' (1,1,0 contro 0,1,0) per vincere
 * sempre, indipendentemente dall'ordine di stampa. Stesso valore di
 * --pz-logo-header-height cosi' il logo continua a riempire la barra. */
#masthead .site-main-header-inner-wrap {
	min-height: var(--pz-logo-header-height);
}

/* Punto 5: il file del logo ha un margine trasparente asimmetrico (il
 * marchio vero e proprio occupa solo la parte superiore dell'immagine), per
 * cui il centro verticale del *file* non coincide col centro visivo del
 * *marchio". Spostamento in percentuale (indipendente dalla dimensione
 * renderizzata) per far coincidere il centro visivo del marchio con quello
 * del testo delle voci di menu, entrambi centrati nella stessa riga.
 * Valore ricalibrato per il marchio ESTESO (594x270, contenuto in
 * y[0,112] - center-offset -29.26%), diverso da quello usato in
 * precedenza per il marchio contratto (aveva un'altra proporzione tra
 * marchio e margine trasparente). */
#masthead .custom-logo {
	transform: translateY(29.26%);
}

/* Kadence aggiunge margin-top/bottom:5rem a .content-area e padding:2rem a
 * .entry-content-wrap per default (spaziatura verticale generica dei
 * contenuti) - sulla Home questo staccava la Hero dalla navbar e l'ultima
 * sezione dal footer, E lasciava 24-32px di margine bianco a sx/dx su ogni
 * sezione (a differenza di header/footer, il cui sfondo vive fuori da
 * questo wrapper). Azzerato su tutti e 4 i lati solo sulla front page (le
 * sezioni gestiscono gia' da sole il proprio padding interno). */
body.home .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

body.home .entry-content-wrap {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

/* Kadence applica max-width:1290px (centrato) a .content-container.site-container
 * anche con "Content Width: Full Width" attivo - risultato: su schermi piu' larghi
 * di 1290px lo sfondo di ogni sezione si fermava li', lasciando margini bianchi a
 * destra/sinistra (diversamente da header/footer, il cui sfondo e' sull'elemento
 * esterno, non dentro un container con max-width). Rimosso solo sulla Home: ogni
 * sezione gestisce gia' da sola il proprio max-width interno (--pz-*-max-width),
 * quindi la disposizione interna non cambia. */
body.home .content-container.site-container {
	max-width: none;
}

/* Punto 2: centra verticalmente logo e voci di menu sulla stessa linea */
#masthead .site-main-header-inner-wrap {
	align-items: center;
}

#masthead .site-branding,
#masthead .site-branding .brand {
	display: flex;
	align-items: center;
}

#masthead .main-navigation ul.menu {
	display: flex;
	align-items: center;
}

/* Kadence stampa il testo "PIZZETTANDO 2" (site title) accanto al logo
 * quando e' impostato un Custom Logo - ridondante (il logo ha gia' l'alt
 * text corretto) e poco leggibile su sfondo header scuro. Nascosto: */
#masthead .site-title-wrap {
	display: none;
}

/* ---------- Footer (.pz-footer-*) ---------- */

.pz-footer {
	background-color: var(--pz-color-footer-bg);
	color: var(--pz-color-footer-text);
	padding: 56px 24px 24px;
}

.pz-footer a {
	color: var(--pz-color-footer-text);
	text-decoration: none;
}

.pz-footer a:hover {
	color: var(--pz-color-accent-light);
}

.pz-footer__top {
	max-width: var(--pz-container-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(var(--pz-color-footer-text-rgb), 0.15);
}

.pz-footer__logo {
	height: var(--pz-logo-footer-height);
	width: auto;
}

.pz-footer__columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pz-footer-columns-gap);
}

.pz-footer__col-title {
	margin: 0 0 16px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pz-color-white);
}

.pz-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--pz-color-footer-text-muted);
}

.pz-footer__bottom {
	max-width: var(--pz-container-max-width);
	margin: 0 auto;
	padding-top: 20px;
	font-size: 0.8rem;
	color: var(--pz-color-footer-text-faint);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
}

.pz-footer__bottom p {
	margin: 0;
}

@media (max-width: 640px) {
	.pz-footer__top {
		flex-direction: column;
	}

	.pz-footer__columns {
		gap: 32px;
	}

	.pz-footer__bottom {
		flex-direction: column;
	}
}