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

   Due righe: sopra il marchio, i recapiti e la chiamata all'azione; sotto la
   navigazione, da sola. Il menu ha nove voci — accanto al logo e al bottone si
   stringevano fino ad andare a capo, e il rosso dell'invito competeva con le
   voci invece di risaltare.

   Chiara per necessita', non per gusto: il logo ha il profilo del Regno Unito
   disegnato come linea navy su trasparente, e su fondo scuro sparisce.
   ========================================================================= */

.testata {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--carta);
	border-bottom: 3px solid var(--rosso);
}

/* --- riga alta -------------------------------------------------------------- */

.testata-alta-in {
	display: flex;
	align-items: center;
	gap: var(--s6);
	min-height: 5rem;
}

.marchio { flex: 0 0 auto; margin-right: auto; }

.marchio img,
.marchio .custom-logo {
	display: block;
	width: auto;
	height: clamp(2.7rem, 4.6vw, 3.6rem);
	max-height: none;
}

.marchio-testo {
	font-size: 1.05rem;
	font-weight: var(--peso-nero);
	color: var(--navy);
	text-decoration: none;
	letter-spacing: -0.02em;
}

/* Recapiti: chi cerca una scuola di paese cerca prima di tutto il telefono.
   Stanno incollati alle azioni, non a meta' strada fra logo e bottone: cosi'
   la destra della testata si legge come un gruppo solo. */
.testata-servizio {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
	font-size: var(--t-picc);
	line-height: 1.35;
	text-align: right;
}

.testata-telefono {
	font-weight: var(--peso-nero);
	color: var(--navy);
	text-decoration: none;
	white-space: nowrap;
}

.testata-telefono:hover { color: var(--rosso-scuro); }

.testata-sede { color: var(--grigio); white-space: nowrap; }

/* --- azioni ------------------------------------------------------------------ */

.testata-azioni {
	display: flex;
	align-items: center;
	gap: var(--s4);
	flex: 0 0 auto;
	padding-left: var(--s5);
	border-left: 1px solid var(--filo);
}

.testata-carrello {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--navy);
	text-decoration: none;
	padding: var(--s1);
}

.testata-carrello:hover { color: var(--rosso-scuro); }

.testata-carrello-segno {
	display: block;
	width: 1.3rem;
	height: 1.3rem;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h2.5l2.2 11.2a2 2 0 0 0 2 1.6h8.1a2 2 0 0 0 2-1.5L21 7H5.2"/></svg>') center / contain no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h2.5l2.2 11.2a2 2 0 0 0 2 1.6h8.1a2 2 0 0 0 2-1.5L21 7H5.2"/></svg>') center / contain no-repeat;
}

.testata-carrello .pallino {
	position: absolute;
	top: -0.2rem;
	right: -0.45rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding-inline: 0.28rem;
	border-radius: var(--raggio-pil);
	background: var(--rosso);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: var(--peso-nero);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* L'invito porta il prezzo: «8 €» dice piu' di qualunque aggettivo. */
.testata-invito {
	gap: var(--s2);
	padding: 0.7rem 1.15rem;
	font-size: 0.875rem;
	white-space: nowrap;
}

.testata-invito b {
	font-weight: var(--peso-nero);
	padding-left: var(--s2);
	border-left: 1px solid rgba(255, 255, 255, .38);
	font-variant-numeric: tabular-nums;
}

/* --- navigazione -------------------------------------------------------------
   Niente maiuscoletto spaziato: nove voci in MAIUSCOLO diventano un muro.
   Le etichette sono gia' scritte come vanno lette. */

.navigazione { border-top: 1px solid var(--filo); background: var(--carta); }

.menu-primario {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0 var(--s1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-primario > li { position: relative; }

.menu-primario a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0.8rem 0.7rem;
	font-size: 0.9375rem;
	font-weight: var(--peso-forte);
	letter-spacing: -0.006em;
	color: var(--navy);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}

.menu-primario a:hover,
.menu-primario a:focus-visible {
	color: var(--rosso-scuro);
	border-bottom-color: var(--rosso);
}

.menu-primario .current-menu-item > a,
.menu-primario .current-menu-ancestor > a,
.menu-primario .current-menu-parent > a {
	color: var(--rosso-scuro);
	border-bottom-color: var(--rosso);
}

/* Le voci con figli lo dichiarano con un segno, invece di lasciarlo scoprire. */
.menu-primario .menu-item-has-children > a::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	margin-left: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .5;
}

/* Secondo livello: si apre col passaggio del mouse E con la tastiera —
   `:focus-within` e' cio' che lo rende raggiungibile senza mouse. */
.menu-primario .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 15rem;
	margin: 0;
	padding: var(--s2);
	list-style: none;
	background: var(--carta);
	border: 1px solid var(--filo);
	border-top: 3px solid var(--rosso);
	border-radius: 0 0 var(--raggio-g) var(--raggio-g);
	box-shadow: var(--ombra-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transizione), transform var(--transizione), visibility var(--transizione);
	z-index: 2;
}

.menu-primario > li:hover > .sub-menu,
.menu-primario > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.menu-primario .sub-menu a {
	padding: 0.55rem 0.7rem;
	font-size: var(--t-picc);
	font-weight: var(--peso-medio);
	border-bottom: 0;
	border-radius: var(--raggio);
	margin: 0;
}

.menu-primario .sub-menu a:hover { background: var(--carta-calda); }

/* --- bottone del menu, su schermi stretti ------------------------------------- */

.apri-menu {
	display: none;
	align-items: center;
	gap: var(--s2);
	padding: 0.6rem 0.85rem;
	border: 0;
	border-radius: var(--raggio);
	background: var(--navy);
	color: #fff;
	font: var(--peso-nero) 0.75rem/1 var(--carattere);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.apri-menu-tratti { display: grid; gap: 3px; width: 1.05rem; }

.apri-menu-tratti i {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform var(--transizione), opacity var(--transizione);
}

.menu-aperto .apri-menu-tratti i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-aperto .apri-menu-tratti i:nth-child(2) { opacity: 0; }
.menu-aperto .apri-menu-tratti i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- adattamenti --------------------------------------------------------------- */

@media (max-width: 74rem) {
	.testata-sede { display: none; }
}

@media (max-width: 62rem) {
	.apri-menu { display: inline-flex; }

	/* Bersagli da toccare: sotto i 40px il dito sbaglia. La regola sta qui e
	   non in base.css perche' questo foglio e' accodato dopo e vincerebbe. */
	.testata-carrello { padding: 0.65rem 0.5rem; }
	.apri-menu { padding-block: 0.8rem; }
	.testata-servizio { display: none; }
	.testata-azioni { border-left: 0; padding-left: 0; gap: var(--s3); }

	.navigazione {
		display: none;
		padding-block: var(--s3) var(--s6);
		max-height: calc(100dvh - 5rem);
		overflow-y: auto;
	}

	.menu-aperto .navigazione { display: block; }

	.menu-primario { flex-direction: column; gap: 0; }

	.menu-primario a {
		padding: 0.85rem 0;
		font-size: 1rem;
		border-bottom: 1px solid var(--filo);
		margin: 0;
	}

	.menu-primario a:hover,
	.menu-primario .current-menu-item > a { border-bottom-color: var(--filo); }

	/* Su telefono il secondo livello resta aperto: un menu a comparsa dentro
	   un pannello a comparsa e' un buon modo per perdere la gente. */
	.menu-primario .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 var(--s3) var(--s5);
		background: transparent;
	}

	.menu-primario .sub-menu a { padding: 0.6rem 0; border-bottom: 0; }
	.menu-primario .menu-item-has-children > a::after { display: none; }
}

@media (max-width: 30rem) {
	.testata-invito { padding: 0.6rem 0.85rem; font-size: 0.8125rem; }
	.testata-invito b { display: none; }
	.apri-menu-testo { display: none; }
	.testata-alta-in { min-height: 4rem; gap: var(--s3); }
}