/**
 * La testata: barra nera, marchio, griglia delle sezioni
 *
 * Parte del tema Squagliasole Solleone. Caricato da inc/assets.php.
 */

/* ------------------------------------------------------------------ *
 * Tre fasce, una sotto l'altra, tutte a tutta larghezza:
 *
 *   1. la barra nera con il motto e la ricerca;
 *   2. il marchio, su una riga, largo quanto la pagina;
 *   3. la griglia delle sezioni con i conteggi, Cinema in blu.
 *
 * Il marchio e la griglia sono misurati in cqi sulla testata stessa: cosi' la
 * parola SQUAGLIASOLE e' per costruzione larga quanto la pagina, a qualunque
 * larghezza, e non sfonda mai. Nel mock era a 166px con "nowrap": a 1100px
 * sarebbe uscita dal bordo.
 * ------------------------------------------------------------------ */
.sq-testata {
	container-type: inline-size;
}

/* --- 1. la barra nera ---------------------------------------------- */
.sq-barra {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding: 0.55rem var(--sq-bordo);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.75rem, 1.15cqi, 0.95rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	gap: 1rem;
}

.sq-barra__motto {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* La ricerca: un campo con il bordo giallo, senza bottone. Invio cerca. */
.sq-cerca {
	margin: 0;
}

.sq-cerca .wp-block-search__inside-wrapper {
	border: 2px solid currentColor;
}

.sq-cerca .wp-block-search__input {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	padding: 0.35rem 0.8rem;
	width: clamp(7rem, 22cqi, 17rem);
	min-width: 0;
}

.sq-cerca .wp-block-search__input::placeholder {
	color: inherit;
	opacity: 0.85;
}

.sq-cerca .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

/* --- 2. il marchio --------------------------------------------------- */
/*
 * 12,9cqi: la parola ha dodici lettere e a questo corpo tocca quasi i due
 * bordi. E' l'unico posto del sito in cui il testo e' misurato per riempire
 * la larghezza invece che per essere letto: e' un marchio, si guarda.
 */
.sq-marchio {
	margin: 0;
	padding: 0.06em var(--sq-bordo) 0.02em;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 12.9cqi;
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
}

.sq-marchio a {
	color: inherit;
	text-decoration: none;
}

.sq-marchio a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

/* --- 3. le sezioni ----------------------------------------------------- */
.sq-sezioni {
	border-block: var(--sq-filo) solid var(--wp--preset--color--contrast);
}

/*
 * Una griglia a 14 colonne: sei sezioni e Cinema occupano due colonne
 * ciascuno (7 x 2 = 14) e stanno su una riga; le due pagine di servizio
 * (Tabellino, Perche'?) ne occupano sette ciascuna e vanno nella seconda.
 * Le classi sq-cinema e sq-servizio le mette inc/blocchi.php al render, dal
 * tipo di voce: il menu salvato non si tocca.
 *
 * !important perche' il blocco navigation impone display:flex e il gap con
 * la sua classe di layout generata, e senza questo la griglia non parte.
 */
.sq-sezioni .wp-block-navigation__container {
	display: grid !important;
	grid-template-columns: repeat(14, minmax(0, 1fr));
	gap: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-sezioni .wp-block-navigation-item {
	grid-column: span 2;
	display: block;
	border-inline-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	min-width: 0;
}

.sq-sezioni .wp-block-navigation-item:nth-child(7) {
	border-inline-end: 0;
}

.sq-sezioni .wp-block-navigation-item__content {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	padding: 1rem calc(var(--sq-bordo) * 0.5);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	/*
	 * 1,32cqi e non 1,55: la voce piu' lunga e' DESCRIZIONI, undici lettere,
	 * e nella sua cella ci sta insieme al conteggio solo sotto questa misura.
	 * Sopra, veniva troncata con i puntini - e i puntini in una testata da
	 * giornale sembrano un errore, non una scelta.
	 */
	font-size: clamp(0.8rem, 1.22cqi, 1.2rem);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.sq-sezioni .wp-block-navigation-item__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sq-sezioni .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.sq-conta {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-size: 0.72em;
	letter-spacing: 0;
	flex: none;
}

.sq-sezioni .sq-cinema .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bianco);
}

.sq-sezioni .sq-cinema .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sq-sezioni .sq-servizio {
	grid-column: span 7;
	border-block-start: var(--sq-filo) solid var(--wp--preset--color--contrast);
}

.sq-sezioni .sq-servizio:last-child {
	border-inline-end: 0;
}

.sq-sezioni .sq-servizio .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-size: clamp(0.72rem, 1.05cqi, 0.9rem);
	letter-spacing: 0.06em;
	padding-block: 0.6rem;
}

.sq-sezioni .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.12em;
}

/*
 * Sotto i 960 pixel: due colonne. Ogni sezione mezza riga, Cinema una riga
 * intera in blu, le pagine di servizio mezza riga in piccolo. Stessa griglia
 * a 14: cambia solo quante colonne occupa ogni voce.
 *
 * La soglia e' 60rem e non 48 perche' non dipende dal telefono ma dalla parola
 * piu' lunga: a 768 pixel le sette celle sono larghe 109 e DESCRIZIONI veniva
 * troncata. Sotto i 960 le sezioni stanno meglio in due colonne larghe che in
 * sette strette, tablet compresi.
 */
@media (max-width: 59.999rem) {
	.sq-sezioni .wp-block-navigation-item {
		grid-column: span 7;
		border-block-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	}

	.sq-sezioni .wp-block-navigation-item:nth-child(even) {
		border-inline-end: 0;
	}

	.sq-sezioni .wp-block-navigation-item:nth-child(7) {
		border-inline-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	}

	.sq-sezioni .sq-cinema {
		grid-column: span 14;
		border-inline-end: 0 !important;
	}

	.sq-sezioni .sq-servizio {
		border-block-start: 0;
		border-block-end: 0;
	}

	.sq-sezioni .wp-block-navigation-item__content {
		font-size: clamp(0.95rem, 4.3cqi, 1.15rem);
		padding: 0.85rem var(--sq-bordo);
	}

	/* Sul telefono la barra tiene solo il motto e la parola Cerca. */
	.sq-cerca .wp-block-search__inside-wrapper {
		border: 0;
	}

	.sq-cerca .wp-block-search__input {
		width: 5.5rem;
		padding-inline: 0;
		text-align: end;
	}
}

/* --- la barra di avanzamento della lettura, sopra tutto --- */
.sq-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--sq-filo);
	z-index: 50;
	pointer-events: none;
}

.sq-progress span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform-origin: 0 50%;
	transform: scaleX(0);
}