@charset "UTF-8";
/*
 * Testata e piè di pagina.
 * Separati perché stanno su tutte e 400+ le pagine: quando cambiano, il
 * design system non deve riscaricarsi, e viceversa.
 */

/* ============================================================
   Barra di servizio
   ------------------------------------------------------------
   Nera con due fili sottilissimi: cobalto sopra, viola sotto. Sono i due
   estremi del gradiente separati, e chiudono la barra come una cornice.
   Contrasto misurato: bianco su #0B0B12 = 19,61:1.
   ============================================================ */

.pb-barra {
	background: var(--pb-nero);
	border-top: 2px solid var(--pb-cobalto);
	border-bottom: 2px solid var(--pb-viola);
	color: var(--pb-bianco);
	font-size: var(--pb-t-xs);
}

.pb-barra__interno {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pb-s-2) var(--pb-s-5);
	min-height: 36px;
	padding-block: var(--pb-s-1);
}

.pb-barra p { margin: 0; max-width: none; }

.pb-barra__citta,
.pb-barra__contatti {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pb-s-3);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---- Selettore di lingua ----
   La lingua attiva è bianca piena, l'altra grigia: il contrasto fra le due
   dice quale è in uso senza bisogno di scriverlo. Il bersaglio è 44 px
   d'altezza anche se il testo ne occupa 12 (WCAG 2.5.8). */
.pb-barra__lingue {
	display: flex;
	align-items: center;
	gap: 2px;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.pb-barra__lingua {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 var(--pb-s-2);
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	border-radius: 2px;
}

.pb-barra__lingua:hover,
.pb-barra__lingua:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	text-decoration: none;
}

.pb-barra__lingua--attiva {
	color: #fff;
	/* Il filo in gradiente sotto la lingua attiva è lo stesso segno della
	   testata: lega il selettore al resto invece di farlo sembrare un
	   widget appiccicato. */
	box-shadow: inset 0 -2px 0 0 var(--pb-viola);
}

.pb-barra__citta span + span::before {
	content: '/';
	margin-right: var(--pb-s-3);
	color: var(--pb-bordo-controllo);
}

/* La sede reale si distingue dai presidi operativi. */
.pb-barra__sede { color: var(--pb-bianco); }
.pb-barra__citta span:not(.pb-barra__sede) { color: #b9bac6; }
.pb-barra__sede .pb-icona { color: var(--pb-viola); }

#page-container .pb-barra a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--pb-bianco);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
}

#page-container .pb-barra a:hover { color: #9fc0ff; }
.pb-barra a .pb-icona { color: var(--pb-cobalto); }
.pb-barra a:hover .pb-icona { color: #9fc0ff; }

/* Su telefono resta solo la sede e il numero: quattro città e due
   indirizzi su 375 px diventano tre righe di rumore sopra il menu. */
@media (max-width: 860px) {
	.pb-barra__citta span:not(.pb-barra__sede) { display: none; }
	.pb-barra__mail { display: none; }
}

/* ============================================================
   Testata
   ============================================================ */

.pb-testata {
	position: sticky;
	top: 0;
	z-index: 999;
	border-bottom: 1px solid var(--pb-bordo);
}

/* La sfocatura sta su uno pseudo-elemento, non sulla testata: un elemento
   con backdrop-filter diventa il blocco contenitore dei discendenti
   position:fixed, e il pannello del menu mobile collassava. */
.pb-testata::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
}

/* Il filo in gradiente: firma grafica, costa 3 px. */
.pb-testata::after {
	content: '';
	position: absolute;
	inset: auto 0 -3px 0;
	height: 3px;
	background: var(--pb-gradiente);
}

.pb-testata__interno {
	display: flex;
	align-items: center;
	gap: var(--pb-s-5);
	min-height: 84px;
	padding-block: var(--pb-s-3);
}

/* --- Marchio: segno angolare + logo + città --- */

.pb-marchio {
	display: flex;
	align-items: center;
	gap: var(--pb-s-3);
	flex: 0 0 auto;
	text-decoration: none;
}

.pb-segno { width: 26px; height: 26px; flex: 0 0 auto; }

/*
 * Proporzioni bloccate.
 * aspect-ratio più height:auto: se un'altra regola dovesse mai imporre
 * un'altezza, l'immagine resta comunque nelle sue proporzioni invece di
 * schiacciarsi. È già successo per una collisione di nomi di classe, e la
 * deformazione non dà nessun errore: si vede e basta.
 */
.pb-logo {
	display: block;
	width: 176px;
	height: auto;
	aspect-ratio: 480 / 124;
	object-fit: contain;
}

/*
 * Città accanto al logo.
 * Non è decorazione: dichiarare tre presidi è prova di scala, e la scala
 * riduce il rischio percepito nella scelta di un fornitore. Sono separate
 * da una barra verticale sottile per leggersi come un'unità.
 */
.pb-citta {
	display: flex;
	align-items: center;
	gap: var(--pb-s-2);
	padding-left: var(--pb-s-4);
	margin-left: var(--pb-s-1);
	border-left: 1px solid var(--pb-bordo);
	font-family: var(--pb-font-testo);
	font-size: var(--pb-t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pb-testo-tenue);
	line-height: 1.3;
	white-space: nowrap;
}

.pb-citta span:not(:last-child)::after {
	content: '/';
	margin-left: var(--pb-s-2);
	color: var(--pb-bordo-controllo);
}

/* La sede operativa si distingue dalle altre: dire il vero costa poco e
   rende credibile il resto. */
.pb-citta__sede { color: var(--pb-nero); }

@media (max-width: 640px) {
	.pb-citta { display: none; }
}

/* --- Interruttore del menu --- */

.pb-testata__interruttore {
	display: none;
	width: 48px; height: 48px;
	margin-left: auto;
	align-items: center; justify-content: center;
	padding: 0;
	font-size: 1.1rem;
	color: var(--pb-nero);
	background: transparent;
	border: 1px solid var(--pb-bordo-controllo);
	border-radius: var(--pb-r-tonda);
	cursor: pointer;
}

.pb-testata__interruttore[aria-expanded='true'] .fa-bars::before {
	/* f00d = xmark. Il backslash DEVE sopravvivere: se sparisce, al posto
	   dell'icona compare la stringa "f00d". */
	content: '\f00d';
}

/* --- Navigazione --- */

.pb-nav { display: flex; align-items: center; gap: var(--pb-s-5); margin-left: auto; }

.pb-nav__lista { display: flex; align-items: center; gap: var(--pb-s-1); list-style: none; margin: 0; padding: 0; }

.pb-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--pb-s-2);
	font-family: var(--pb-font-testo);
	/* 0,875rem invece di 0,9375: sette voci più le città più la CTA non
	   stanno in 1280 px alla misura piena. */
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pb-nero);
	text-decoration: none;
	white-space: nowrap;
}

/* Sottolineatura in gradiente che cresce da sinistra: movimento minimo,
   molto letto. */
.pb-nav__link::after {
	content: '';
	position: absolute;
	left: var(--pb-s-3); right: var(--pb-s-3); bottom: 8px;
	height: 2px;
	background: var(--pb-gradiente);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--pb-transizione);
}

.pb-nav__link:hover::after,
.pb-nav__voce.current-menu-item > .pb-nav__link::after,
.pb-nav__voce.current-menu-ancestor > .pb-nav__link::after { transform: scaleX(1); }

.pb-nav__voce--ha-figli > .pb-nav__link .pb-nav__freccia {
	margin-left: var(--pb-s-2);
	font-size: 0.7em;
	transition: transform var(--pb-transizione);
}

.pb-nav__azioni { display: flex; align-items: center; gap: var(--pb-s-3); }

.pb-nav__tel {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--pb-t-s);
	font-weight: 600;
	color: var(--pb-nero);
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Fra 1081 e 1440 px non ci sta tutto: marchio con tre città 433 px,
 * menu 560, telefono 157, CTA 176, più i vuoti. Misurato: la CTA usciva
 * di 70 px dal contenitore.
 *
 * Sacrifichiamo il telefono, non le città e non la CTA: il numero resta
 * nel piè di pagina, nella pagina Contatti e nel pannello su telefono —
 * dove peraltro è cliccabile davvero. La CTA è l'unico elemento che non
 * può sparire.
 */
@media (max-width: 1440px) {
	.pb-nav__tel { display: none; }
}

@media (max-width: 1180px) {
	.pb-citta { display: none; }
}

.pb-nav__tel .pb-icona { color: var(--pb-cobalto); }
.pb-nav__tel:hover { color: var(--pb-cobalto); }

.pb-nav__avviso { margin: 0; font-size: var(--pb-t-xs); color: var(--pb-rosso); }

/* --- Sotto i 1080 px: pannello --- */

@media (max-width: 1080px) {
	.pb-testata__interruttore { display: inline-flex; }

	.pb-nav {
		position: fixed;
		inset: 84px 0 0 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--pb-s-4);
		margin-left: 0;
		padding: var(--pb-s-6) 1.25rem;
		background: var(--pb-bianco);
		border-top: 1px solid var(--pb-bordo);
		overflow-y: auto;
		/* Chiuso: fuori dal flusso di tabulazione e non raggiungibile dal
		   puntatore. opacity da sola lascerebbe un pannello invisibile ma
		   cliccabile sopra la pagina. */
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--pb-transizione), transform var(--pb-transizione),
			visibility var(--pb-transizione);
	}

	.pb-nav.e-aperto { visibility: visible; opacity: 1; transform: none; }

	.pb-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }

	.pb-nav__link {
		min-height: 56px;
		padding-inline: 0;
		font-size: var(--pb-t-m);
		border-bottom: 1px solid var(--pb-bordo);
	}

	/* Nel pannello il telefono torna: lì è un bersaglio che si tocca e
	   che chiama davvero. */
	.pb-nav__tel { display: inline-flex; }

	.pb-nav__link::after { display: none; }

	/* Nel pannello i sottomenu restano aperti e rientrati: nascondere un
	   secondo livello dietro un altro tocco aggiunge un gesto e non toglie
	   niente. */
	.pb-nav__lista .sub-menu {
		list-style: none;
		margin: 0 0 var(--pb-s-3);
		padding-left: var(--pb-s-4);
		border-left: 2px solid var(--pb-bordo);
	}

	.pb-nav__lista .sub-menu .pb-nav__link {
		min-height: 48px;
		font-size: var(--pb-t-base);
		border-bottom: none;
	}

	.pb-nav__voce--ha-figli > .pb-nav__link .pb-nav__freccia { display: none; }

	.pb-nav__azioni { flex-direction: column; align-items: stretch; gap: var(--pb-s-3); }
	.pb-nav__tel { justify-content: center; min-height: 52px; }
}

/* --- Da 1080 px in su: barra orizzontale con menu a discesa --- */

@media (min-width: 1081px) {
	.pb-nav__lista > .pb-nav__voce { position: relative; }

	.pb-nav__lista .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 15rem;
		list-style: none;
		margin: 0;
		padding: var(--pb-s-2);
		background: var(--pb-bianco);
		border: 1px solid var(--pb-bordo);
		border-radius: var(--pb-r-m);
		box-shadow: var(--pb-ombra-3);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-4px);
		transition: opacity var(--pb-transizione), transform var(--pb-transizione),
			visibility var(--pb-transizione);
		z-index: 10;
	}

	/* :focus-within e non solo :hover — un menu che si apre soltanto col
	   puntatore è inaccessibile da tastiera. */
	.pb-nav__lista > .pb-nav__voce:hover > .sub-menu,
	.pb-nav__lista > .pb-nav__voce:focus-within > .sub-menu {
		visibility: visible; opacity: 1; transform: none;
	}

	.pb-nav__lista > .pb-nav__voce:hover > .pb-nav__link .pb-nav__freccia,
	.pb-nav__lista > .pb-nav__voce:focus-within > .pb-nav__link .pb-nav__freccia {
		transform: rotate(180deg);
	}

	.pb-nav__lista .sub-menu .pb-nav__link {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: var(--pb-s-3);
		border-radius: var(--pb-r-s);
	}

	.pb-nav__lista .sub-menu .pb-nav__link::after { display: none; }
	.pb-nav__lista .sub-menu .pb-nav__link:hover { background: var(--pb-cobalto-tenue); }
}

/* ============================================================
   Piè di pagina — chiaro, come il resto del sito
   ============================================================ */

.pb-pie {
	background: var(--pb-fondino);
	border-top: 1px solid var(--pb-bordo);
	color: var(--pb-testo);
	padding-block: var(--pb-s-8) var(--pb-s-5);
}

.pb-pie a { color: var(--pb-nero); }
.pb-pie a:hover { color: var(--pb-cobalto); }

.pb-pie__griglia {
	display: grid;
	gap: var(--pb-s-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.pb-pie__titolo {
	margin: 0 0 var(--pb-s-4);
	font-size: var(--pb-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--pb-testo-tenue);
}

.pb-pie__lista {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: var(--pb-s-2);
	font-size: var(--pb-t-s); line-height: 1.5;
}

.pb-pie__lista a { display: inline-block; padding-block: var(--pb-s-2); min-height: 32px; text-decoration: none; }
.pb-pie__lista .pb-icona { color: var(--pb-cobalto); }

.pb-pie__claim { max-width: 30ch; margin: var(--pb-s-4) 0; font-size: var(--pb-t-s); color: var(--pb-testo-tenue); }
.pb-pie__nota { display: block; font-size: var(--pb-t-xs); color: var(--pb-testo-tenue); }

.pb-pie__social {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 48px; height: 48px;
	font-size: 1.125rem;
	color: var(--pb-nero);
	border: 1px solid var(--pb-bordo-controllo);
	border-radius: var(--pb-r-tonda);
	text-decoration: none;
}

.pb-pie__social:hover { background: var(--pb-nero); color: var(--pb-bianco); border-color: var(--pb-nero); }

.pb-pie__legale {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--pb-s-3);
	margin-top: var(--pb-s-7);
	padding-top: var(--pb-s-5);
	border-top: 1px solid var(--pb-bordo);
	font-size: var(--pb-t-xs);
	color: var(--pb-testo-tenue);
}

.pb-pie__legale p { margin: 0; max-width: none; }
.pb-pie__legale a { display: inline-block; padding-block: var(--pb-s-2); min-height: 32px; line-height: 16px; }
.pb-pie__legale a + a { margin-left: var(--pb-s-4); }