/*
Theme Name: TWT Completo 3
Theme URI: https://topolovac-webcraft.ch/temi/twt-completo-3
Author: Topolovac WebCraft
Author URI: https://topolovac-webcraft.ch
Description: Completo 3 «Brunch». Una bacheca di quartiere: apertura con due polaroid attaccate con il nastro e il bigliettino del giorno, il sole disegnato, i pois sul fondo, sezioni come schede pastello con gli angoli tondi, la carta a schede con l'indice a pillole e l'adesivo «veg», i piatti in polaroid, gli eventi come post-it. Titoli in Jost 700 compatto, bottoni a caramella con l'ombra colorata. Prima «Prenota», poi «Ordina da portare via».
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
Version: 1.5.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twt-completo-3
Tags: full-site-editing, block-patterns, editor-style, translation-ready, wide-blocks, block-styles
*/


/*
 * Qui sta solo ciò che theme.json non sa esprimere.
 * Colori, font e spaziature vivono in theme.json; le variabili dei plugin
 * stanno in assets/css/twc-ponte.css. Non duplicare valori qui.
 */

/* --- Accessibilità ------------------------------------------------------- */

.twt-salta-al-contenuto {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--on-accent);
	text-decoration: none;
}

.twt-salta-al-contenuto:focus {
	left: 0;
}

/*
 * L'anello del fuoco ha il colore del testo, non dell'accento: il testo
 * si legge sempre sul suo fondo, l'accento no (nella sezione scura il
 * fondo è proprio il colore dell'accento, e l'anello spariva). Dentro la
 * sezione scura l'anello prende il colore del suo testo.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--twt-fuoco, var(--wp--preset--color--contrast));
	outline-offset: 2px;
}

.is-style-sezione-scura {
	--twt-fuoco: var(--wp--preset--color--base);
}

/* Lo stesso sugli altri fondi pieni: sul colore dell'accento l'anello
 * prende il colore della scritta che ci sta sopra, su un fondo scuro il
 * colore chiaro. Solo sui contenitori: su un pulsante colorato l'anello
 * sta fuori, sul fondo della pagina, e lì il colore del testo va bene. */
:where(.wp-block-group, .wp-block-columns, .wp-block-column).has-accent-1-background-color {
	--twt-fuoco: var(--wp--preset--color--on-accent);
}

:where(.wp-block-group, .wp-block-columns, .wp-block-column).has-contrast-background-color {
	--twt-fuoco: var(--wp--preset--color--base);
}

/* I pulsanti ricevono l'anello un po' più staccato: sta fuori dagli
 * angoli tondi e non si confonde con il bordo. */
:where(.wp-element-button, .wp-block-button__link):focus-visible {
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Testata -------------------------------------------------------------
 * La classe twt-testata--fissa rende la testata sempre visibile durante lo
 * scorrimento: non è attiva di serie, si aggiunge alla parte "Testata" dal
 * Site Editor quando il sito ha le ordinazioni online.
 * ------------------------------------------------------------------------- */

/* Niente z-index qui: creerebbe un livello a parte, e il menu a comparsa
 * finirebbe sotto la barra azioni del telefono. */
.twt-testata {
	background: var(--wp--preset--color--base);
}

/*
 * Una riga sola, a ogni larghezza: nome a sinistra, azioni a destra.
 * Una testata che va a capo e' la prima cosa che fa sembrare un sito
 * fatto in fretta.
 */
.twt-testata > .alignwide {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
}

.twt-testata > .alignwide > :first-child {
	flex: 0 1 auto;
	min-width: 0;
}

.twt-testata .wp-block-site-title {
	min-width: 0;
	margin: 0;
	font-size: clamp(1rem, 0.8rem + 0.9vw, 1.4rem);
	letter-spacing: clamp(0.04em, 0.4vw, 0.1em);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.twt-testata .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.twt-testata .wp-block-site-logo img {
	width: clamp(40px, 6vw, 56px);
	height: auto;
}

/* Ad appendersi è il pezzo di modello che contiene la testata: un
 * elemento appeso si muove solo dentro il suo genitore, e il genitore
 * della testata è alto esattamente quanto lei. */
.wp-site-blocks > .wp-block-template-part:has(> .twt-testata--fissa) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 80;
}

.twt-testata .twt-testata__destra {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	gap: 0.75rem;
}

/*
 * Un solo account e un solo carrello: quelli del tema. WooCommerce aggiunge
 * i suoi accanto al menu; functions.php glielo impedisce, e questa regola
 * copre le testate in cui sono gia' stati salvati.
 */
.twt-testata__destra:has(> .twt-icone) > :is(.wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart) {
	display: none;
}

/* Il pulsante che apre il menu: grande come un dito, discreto. */
.twt-testata .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	min-width: var(--twc-tap, 44px);
	min-height: var(--twc-tap, 44px);
	border-radius: var(--wp--custom--raggio--medio);
}

.twt-testata .wp-block-navigation__responsive-container-open svg {
	width: 26px;
	height: 26px;
}

/* --- Menu a tendina ------------------------------------------------------ */

/* WordPress da' alle tendine un fondo bianco e la scritta nera, con una
 * regola che pesa piu' di una classe: con una palette scura (o con i
 * colori scelti dal ristoratore) la tendina restava bianca. Qui prende i
 * colori della palette; se il ristoratore da' un colore al menu
 * nell'editor (has-background, has-text-color), vince il suo. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--border);
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--raggio--medio);
	box-shadow: 0 10px 28px rgb(0 0 0 / 10%);
	padding-block: 0.35rem;
	min-width: 15rem;
}

.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--twc-tap, 44px);
	padding: 0.25rem 1rem;
}

.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item:hover
	> .wp-block-navigation-item__content {
	background: var(--wp--preset--color--base-2);
}

/* La freccina che apre una tendina, da computer: WordPress la disegna
 * larga mezza lettera, un bersaglio da 10 pixel. Qui resta piccola da
 * vedere ma grande da toccare e da cliccare, alta e larga come un dito.
 * Solo nel menu in riga: nel menu aperto WordPress la nasconde, perché le
 * sottovoci sono già tutte a vista. */
@media (min-width: 1100px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
		min-width: var(--twc-tap, 44px);
		min-height: var(--twc-tap, 44px);
		margin-left: -0.6rem;
		padding: 0;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle svg {
		width: 0.7em;
		height: 0.7em;
		margin-top: 0;
	}
}

/*
 * Il menu a comparsa (telefono e tablet): a tutto schermo con i colori del
 * tema, non il bianco e nero di WordPress. Le voci principali nel carattere
 * dei titoli, le sottovoci piu' piccole e rientrate.
 */
.twt-testata
	.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--40);
	padding-bottom: max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom));
	/* Le voci si leggono da sinistra, anche se in testata il menu sta a
	 * destra. */
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	text-align: left;
}

.twt-testata .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--twc-tap, 44px);
	min-height: var(--twc-tap, 44px);
	border-radius: 50%;
	background: var(--wp--preset--color--base-2);
}

/* Prefisso .twt-testata e .is-menu-open ripetuto: le regole di WordPress
 * per il menu a comparsa sono molto specifiche, e queste devono vincere
 * senza !important. */
.twt-testata .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 36rem;
	margin-inline: auto;
	gap: 0;
	align-items: stretch;
}

.twt-testata .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	width: 100%;
	gap: 0;
	align-items: stretch;
}

.twt-testata .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	align-items: flex-start;
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.twt-testata .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--twc-tap, 44px);
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	text-decoration: none;
}

.twt-testata .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
	.wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	gap: 0;
	width: 100%;
	min-width: 0;
	margin: 0 0 0.4rem;
	padding: 0 0 0 1rem;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.twt-testata .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
	align-items: flex-start;
}

.twt-testata .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--twc-tap, 44px);
	padding: 0;
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

/* --- Icone di account e carrello ----------------------------------------- */

.twt-icone {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.15rem;
}

.twt-icona {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--twc-tap, 44px);
	min-height: var(--twc-tap, 44px);
	padding-inline: 0.5rem;
	border-radius: var(--wp--custom--raggio--medio);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color var(--wp--custom--transizione), color var(--wp--custom--transizione);
}

.twt-icona:focus-visible {
	background: var(--wp--preset--color--base-2);
}

/* Il colore al passaggio solo dove c'e' un mouse: sul telefono restava
 * acceso dopo il tocco. */
@media (hover: hover) {
	.twt-icona:hover {
		background: var(--wp--preset--color--base-2);
		color: var(--wp--preset--color--accent-1);
	}
}

/* Il nome dell'icona resta per chi usa uno screen reader. */
.twt-icona__testo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Piè di pagina -------------------------------------------------------- */

.wp-block-group:has(> .wp-block-columns) .twt-orari td {
	padding-block: 0.35rem;
}

/* --- Barra avvisi -------------------------------------------------------- */

.twt-avviso {
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* --- Barra azioni mobile -------------------------------------------------
 * Visibile solo su schermi stretti: quattro azioni della stessa larghezza,
 * sempre a portata di pollice. L'angolo in basso a destra resta libero per
 * i pulsanti flottanti dei plugin (lingua, accessibilita').
 * ------------------------------------------------------------------------- */

/* :root davanti: la regola di WordPress "body .is-layout-flex" pesa di
 * piu' di una classe sola, e su computer la barra compariva in fondo
 * alla pagina. */
:root .twt-barra-azioni {
	display: none;
}

@media (max-width: 781px) {
	:root .twt-barra-azioni {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 90;
		display: flex;
		justify-content: center;
		padding: 0.5rem 0.75rem;
		padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -8px 24px rgb(0 0 0 / 6%);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.twt-barra-azioni .wp-block-buttons {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		gap: 0.4rem;
		max-width: 30rem;
		margin: 0;
	}

	.twt-barra-azioni .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}

	.twt-barra-azioni .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: var(--twc-tap, 44px);
		padding: 0.4rem 0.25rem;
		font-size: 0.85rem;
		line-height: 1.15;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.twt-barra-azioni .is-style-outline .wp-block-button__link {
		border-width: 1px;
		border-color: var(--wp--preset--color--border);
		background: var(--wp--preset--color--base);
	}

	/* A destra si lascia posto solo se c'è un pulsante flottante
	 * (lingua di TranslatePress): sempre, rubava un quarto della barra. */
	body:has(.trp-floating-switcher) .twt-barra-azioni {
		padding-right: 4.5rem;
	}

	/* Con il menu aperto la barra non serve, e ne coprirebbe il fondo. */
	body:has(.is-menu-open) .twt-barra-azioni {
		display: none;
	}

	/* Con il tasto Tab la pagina scorre fino al collegamento scelto: senza
	 * questo margine poteva fermarsi con il collegamento sotto la barra. */
	:root:has(.twt-barra-azioni) {
		scroll-padding-bottom: 5rem;
	}

	/* Il contenuto non deve finire sotto la barra: solo dove la barra
	 * c'è, e non nella pagina degli ordini, dove c'è quella di TWC
	 * Ordini al suo posto. */
	body:has(.twt-barra-azioni):not(:has(.twc-ord__barra:not([hidden]))) {
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
	}

	/*
	 * Nella pagina degli ordini TWC Ordini ha la sua barra in basso, con il
	 * carrello: due barre una sopra l'altra sarebbero troppe.
	 */
	body:has(.twc-ord__barra:not([hidden])) .twt-barra-azioni {
		display: none;
	}
}

/* --- Voci di menu --------------------------------------------------------
 * Nome a sinistra, prezzo a destra, filo punteggiato in mezzo.
 * ------------------------------------------------------------------------- */

.twt-piatto {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 1px dotted var(--wp--preset--color--border);
	padding-bottom: 0.35rem;
}

.twt-piatto > :last-child {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.twt-piatto__descrizione {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.25rem;
}

/* --- Piatti in tendenza --------------------------------------------------
 * Tre riquadri affiancati, tutti della stessa altezza: prezzo e bottone
 * restano in fondo anche se le descrizioni hanno lunghezze diverse.
 * ------------------------------------------------------------------------- */

.twt-tendenza .wp-block-column {
	display: flex;
}

/*
 * Sul telefono i piatti in tendenza scorrono di lato, uno e un pezzo del
 * successivo: si capisce subito che ce ne sono altri, e la pagina non
 * diventa lunga tre schermate.
 */
@media (max-width: 781px) {
	.wp-block-columns.twt-tendenza:not(.is-not-stacked-on-mobile) {
		flex-wrap: nowrap !important;
		gap: var(--wp--preset--spacing--30);
		/* Fino ai bordi dello schermo: si vede che la riga continua. Il
		 * layout di WordPress centra i blocchi con !important. */
		width: auto;
		max-width: none !important;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem)) !important;
		padding: 0 var(--wp--style--root--padding-left, 1rem) 0.75rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--style--root--padding-left, 1rem);
		scrollbar-width: none;
	}

	.wp-block-columns.twt-tendenza::-webkit-scrollbar {
		display: none;
	}

	.wp-block-columns.twt-tendenza:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex: 0 0 min(82%, 20rem) !important;
		scroll-snap-align: start;
	}
}

.twt-scheda-piatto {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--raggio--grande);
	padding: var(--wp--preset--spacing--30);
}

.twt-scheda-piatto > * {
	margin-block: 0;
}

.twt-scheda-piatto__immagine {
	margin: 0;
}

.twt-scheda-piatto__immagine img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--raggio--medio);
}

.twt-scheda-piatto__descrizione {
	color: var(--wp--preset--color--contrast-2);
}

.twt-scheda-piatto__piede {
	margin-top: auto;
	padding-top: 0.5rem;
	width: 100%;
}

/* In una scheda stretta (tablet, tre colonne) prezzo e pulsante si
 * mettono uno sopra l'altro invece di schiacciarsi. */
@container (max-width: 15rem) {
	.twt-scheda-piatto__piede {
		flex-direction: column;
		align-items: stretch !important;
		gap: 0.5rem;
	}

	.twt-scheda-piatto__piede .wp-block-button,
	.twt-scheda-piatto__piede .wp-block-button__link {
		width: 100%;
	}
}

/* --- Righe del listino ordinabile ----------------------------------------
 * Immagine a sinistra con proporzioni fisse, testo a destra, tutto dentro un
 * riquadro con angoli smussati e sfondo diverso dalla pagina. La colonna
 * dell'immagine ha larghezza costante: così le righe restano allineate.
 * ------------------------------------------------------------------------- */

.twt-riga-piatto {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--raggio--grande);
	padding: var(--wp--preset--spacing--30);
}

.twt-riga-piatto > * {
	margin-block: 0;
}

.twt-riga-piatto__immagine {
	margin: 0;
}

.twt-riga-piatto__immagine img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--raggio--medio);
}

.twt-riga-piatto__testo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.twt-riga-piatto__testo > * {
	margin-block: 0;
}

.twt-riga-piatto__testo .twt-legenda {
	color: var(--wp--preset--color--contrast-2);
}

.twt-riga-piatto__piede {
	margin-top: 0.35rem;
	width: 100%;
}

/* Sul telefono l'immagine passa sopra al testo. */
@media (max-width: 600px) {
	.twt-riga-piatto {
		grid-template-columns: 1fr;
	}
}

/* Legenda allergeni e caratteristiche: mai solo icone, sempre con testo. */
.twt-legenda {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
}

/* --- Orari ---------------------------------------------------------------- */

.twt-orari td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.5rem 0;
}

.twt-orari td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* --- Stili dei blocchi registrati in functions.php ------------------------ */

.wp-block-group.is-style-scheda {
	background: var(--wp--preset--color--base-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--raggio--grande);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-image.is-style-arco img {
	border-radius: 50% 50% var(--wp--custom--raggio--medio) var(--wp--custom--raggio--medio);
}

.wp-block-separator.is-style-ornamento {
	border: 0;
	height: auto;
	text-align: center;
	max-width: none;
}

.wp-block-separator.is-style-ornamento::before {
	content: "❦";
	color: var(--wp--preset--color--accent-3);
	font-size: 1.5rem;
	line-height: 1;
}

/* --- Pagina prenotazioni --------------------------------------------------- */

.twt-prenota__intro {
	color: var(--wp--preset--color--contrast-2);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* --- Segnaposto per i moduli dei plugin ----------------------------------
 * Usato nei pattern quando un plugin TWC non è attivo: mai un vuoto,
 * mai uno shortcode nudo.
 * ------------------------------------------------------------------------- */

.twt-segnaposto {
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--raggio--medio);
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-2);
	text-align: center;
}

/* --- Tipografia su ogni schermo -------------------------------------------
 * Titoli bilanciati su piu' righe, niente parole orfane nei paragrafi,
 * nessuna parola lunga che esce dallo schermo del telefono.
 * ------------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
	overflow-wrap: break-word;
}

:where(p, li, figcaption, blockquote) {
	text-wrap: pretty;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-webkit-tap-highlight-color: transparent;
	overflow-x: clip;
}

img,
video,
iframe {
	max-width: 100%;
}

/* Le citazioni senza il rientro di 40px del browser: su un telefono
 * lasciava al testo meta' dello schermo. */
.wp-block-quote {
	margin-inline: 0;
}

/* Le tabelle larghe scorrono dentro la loro cornice, non la pagina. */
.wp-block-table {
	overflow-x: auto;
}

/* --- Apertura (copertina) ---------------------------------------------- */

.wp-block-cover .wp-block-cover__inner-container > * {
	margin-inline: auto;
}

.wp-block-cover .has-xxx-large-font-size {
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.wp-block-cover .wp-block-cover__inner-container p {
	max-width: 36rem;
}

/* --- Tablet: menu a comparsa ----------------------------------------------
 * WordPress mostra il menu completo da 600px in su. Fra 600 e 1100 pixel
 * (tablet, telefoni girati) le voci non ci stanno accanto a nome, icone e
 * pulsante, e la testata andrebbe a capo: qui resta il menu a comparsa.
 * ------------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.twt-testata .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

	/* Prima le icone e il pulsante, il menu per ultimo, sul bordo. */
	.twt-testata .twt-testata__destra {
		gap: 0.35rem;
	}

	.twt-testata__destra > .wp-block-navigation {
		order: 3;
	}
}

/* --- Telefono ------------------------------------------------------------ */

@media (max-width: 781px) {
	/* "Prenota" c'e' gia' nella barra in basso: in testata ruberebbe il
	 * posto al nome del locale. */
	.twt-testata__destra > .wp-block-buttons {
		display: none;
	}

	.twt-testata .twt-testata__destra {
		gap: 0;
	}

	.twt-testata {
		padding-block: 0.6rem !important;
	}

	/* Il nome del locale non si taglia mai: piu' piccolo e, se proprio
	 * e' lungo, su due righe. */
	.twt-testata .wp-block-site-title {
		font-size: clamp(0.9rem, 3.9vw, 1.1rem);
		letter-spacing: 0.03em;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: anywhere;
		line-height: 1.15;
	}

	.twt-icona {
		padding-inline: 0.2rem;
	}

	/* Il selettore della lingua (TranslatePress, in basso) sale sopra la
	 * barra invece di coprirne un pulsante. */
	:root .trp-floating-switcher.trp-switcher-position-bottom {
		bottom: calc(4.75rem + env(safe-area-inset-bottom));
	}

	/* I pulsanti della copertina, uno sotto l'altro e larghi uguali. */
	.wp-block-cover .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: min(100%, 20rem);
		margin-inline: auto;
	}

	.wp-block-cover .wp-block-button,
	.wp-block-cover .wp-block-button__link {
		width: 100%;
	}

	/* Solo l'apertura del tema (72vh): una copertina che il ristoratore
	 * ha voluto a tutto schermo resta com'e'. */
	.wp-block-cover.alignfull[style*="min-height:72vh"] {
		min-height: min(72vh, 34rem) !important;
	}

	/* Le schede con sfondo respirano meno: sul telefono ogni pixel conta. */
	.wp-block-group.is-style-scheda,
	.twt-scheda-piatto,
	.twt-riga-piatto {
		padding: var(--wp--preset--spacing--30);
	}

	/* Il nome del piatto e il prezzo: se il nome e' lungo va a capo lui,
	 * il prezzo resta intero sulla destra. */
	.twt-piatto > :first-child {
		min-width: 0;
	}

	.twt-orari td {
		padding-block: 0.6rem;
	}

	.wp-block-quote {
		padding-left: var(--wp--preset--spacing--30);
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* Telefoni piccoli. */
@media (max-width: 380px) {
	.twt-testata .wp-block-site-logo img {
		width: 36px;
	}
}

/* --- Piè di pagina -------------------------------------------------------- */

/* Tablet: quattro colonne sarebbero troppo strette, due per riga. */
@media (min-width: 600px) and (max-width: 1023px) {
	.twt-piede > .wp-block-columns {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--50);
	}

	.twt-piede > .wp-block-columns > .wp-block-column {
		flex: 1 1 calc(50% - var(--wp--preset--spacing--40)) !important;
	}
}

@media (max-width: 599px) {
	.twt-piede > .wp-block-columns {
		row-gap: var(--wp--preset--spacing--50);
	}

	/* I collegamenti in fondo, uno per riga invece di una riga che va a
	 * capo a caso. */
	.twt-piede > .wp-block-group.alignwide:last-child {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
}

/* Le pagine nel piede: toccabili, ma una sotto l'altra come un elenco,
 * non distanziate come paragrafi. Solo nel menu in colonna (is-vertical):
 * nel piede su una riga, senza spazio, le voci si attaccavano
 * («La cartaChi siamoContatti»). */
.twt-piede .wp-block-navigation.is-vertical .wp-block-navigation__container {
	gap: 0;
}

/* Il menu in riga del piede: sempre staccato, anche se il modello non
 * dice di quanto. */
.twt-piede .wp-block-navigation:not(.is-vertical) .wp-block-navigation__container {
	gap: 0.25rem 1.25rem;
}

.twt-piede .wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--twc-tap, 44px);
}

@media (min-width: 782px) {
	.twt-piede .wp-block-navigation .wp-block-navigation-item__content {
		min-height: 2.25rem;
	}
}

/* --- Telefono in orizzontale ---------------------------------------------
 * Poca altezza: la copertina non deve prendersi tutto lo schermo.
 * ------------------------------------------------------------------------- */

@media (max-height: 500px) and (orientation: landscape) {
	.wp-block-cover .has-xxx-large-font-size {
		font-size: var(--wp--preset--font-size--xx-large) !important;
	}
}

/* --- Icone social --------------------------------------------------------
 * Nel piede le icone hanno il colore del testo, in ogni palette e nella
 * variante scura: i colori dei marchi (rosa, blu, verde) su un fondo
 * scelto dal ristoratore spesso non si vedono. Se il ristoratore sceglie
 * un colore per le icone nell'editor, vince il suo.
 * ------------------------------------------------------------------------- */

.twt-piede .wp-block-social-links:not(.has-icon-color) .wp-social-link {
	color: var(--wp--preset--color--contrast);
}

/* --- Copertina: la scritta del colore giusto ------------------------------
 * WordPress scrive bianco sopra ogni copertina. Con il velo del colore
 * del testo va bene finché il testo è scuro; nella variante «Scuro» il
 * velo diventa chiaro e la scritta bianca spariva. La scritta prende il
 * colore opposto al velo, quale che sia la palette. Se il ristoratore
 * sceglie un colore per la scritta, vince il suo.
 * ------------------------------------------------------------------------- */

.wp-block-cover:not(.has-text-color):has(> .wp-block-cover__background.has-contrast-background-color) {
	color: var(--wp--preset--color--base);
	--twt-fuoco: var(--wp--preset--color--base);
}

.wp-block-cover:not(.has-text-color):has(> .wp-block-cover__background.has-base-background-color) {
	color: var(--wp--preset--color--contrast);
	--twt-fuoco: var(--wp--preset--color--contrast);
}

/* Sopra la foto il pulsante secondario è solo un bordo con la scritta,
 * nel colore della scritta della copertina: con il colore dell'accento,
 * su un velo scuro, non si leggeva. */
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: none;
	color: inherit;
	text-decoration: none;
}

/* --- Occhiello -------------------------------------------------------------
 * La riga piccola sopra il titolo dell'apertura: dove si è, o che cosa
 * si fa. Maiuscola e spaziata, nel colore del testo secondario; sopra una
 * foto o un fondo colorato prende il colore della scritta.
 * ------------------------------------------------------------------------- */

.twt-occhiello {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-2);
}

:where(.wp-block-cover, .has-background) .twt-occhiello {
	color: inherit;
}

/* --- Tipografia fine -------------------------------------------------------
 * Crenatura e legature accese, sottolineature staccate dalle lettere,
 * cifre dei prezzi tutte larghe uguali. Cose che non si notano una per
 * una e che insieme fanno la differenza fra un sito curato e uno no.
 * ------------------------------------------------------------------------- */

body {
	font-kerning: normal;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, .wp-block-site-title) {
	font-feature-settings: "kern" 1, "liga" 1;
	hyphens: manual;
}

a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--wp--custom--transizione, 180ms ease), text-decoration-color var(--wp--custom--transizione, 180ms ease);
}

.twt-piatto > :last-child,
.twt-scheda-piatto__piede,
.twt-orari td:last-child {
	font-variant-numeric: tabular-nums lining-nums;
}

::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 24%, transparent);
}

/* --- Movimenti -------------------------------------------------------------
 * Brevi e discreti: il pulsante cambia colore in un attimo e si abbassa
 * di un pixel quando si preme, la scheda di un piatto si stacca appena
 * dalla pagina, la foto si avvicina di un niente. Tutto dentro
 * prefers-reduced-motion: no-preference — e la regola in cima al foglio
 * azzera comunque ogni movimento per chi ha chiesto di non vederne.
 * ------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--wp--custom--transizione, 180ms ease),
		border-color var(--wp--custom--transizione, 180ms ease),
		color var(--wp--custom--transizione, 180ms ease),
		box-shadow var(--wp--custom--transizione, 180ms ease),
		transform 120ms ease;
}

.twt-scheda-piatto,
.twt-riga-piatto {
	transition: border-color var(--wp--custom--transizione, 180ms ease), box-shadow var(--wp--custom--transizione, 180ms ease);
}

.twt-scheda-piatto__immagine,
.twt-riga-piatto__immagine {
	overflow: hidden;
	border-radius: var(--wp--custom--raggio--medio);
}

@media (prefers-reduced-motion: no-preference) {

	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: translateY(1px);
	}

	.twt-scheda-piatto__immagine img,
	.twt-riga-piatto__immagine img {
		transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
	}
}

/* Solo dove c'è un mouse: sul telefono il passaggio non esiste, e un
 * effetto rimasto acceso dopo il tocco sembra un errore. */
@media (hover: hover) {

	.twt-scheda-piatto:hover,
	.twt-riga-piatto:hover {
		border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 28%, var(--wp--preset--color--border));
		box-shadow: var(--twc-shadow, 0 6px 18px -6px rgb(0 0 0 / 16%));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

	.twt-scheda-piatto:hover .twt-scheda-piatto__immagine img,
	.twt-riga-piatto:hover .twt-riga-piatto__immagine img {
		transform: scale(1.03);
	}
}

/* L'apertura entra con calma: occhiello, riga e pulsanti salgono di poco,
 * uno dopo l'altro. Il nome e la foto no: sono la prima cosa che si deve
 * vedere, subito e ferma. Mai nell'editor, dove ogni clic rifarebbe
 * l'entrata. */
@media (prefers-reduced-motion: no-preference) {

	:where(body:not(.editor-styles-wrapper)) .twt-apertura :is(.twt-occhiello, .wp-block-heading + p, .wp-block-buttons) {
		animation: twt-entra 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	:where(body:not(.editor-styles-wrapper)) .twt-apertura .wp-block-heading + p {
		animation-delay: 80ms;
	}

	:where(body:not(.editor-styles-wrapper)) .twt-apertura .wp-block-buttons {
		animation-delay: 160ms;
	}

	/* La testata appesa getta un'ombra appena si scorre (dove il browser
	 * sa legare un'animazione allo scorrimento). */
	@supports (animation-timeline: scroll()) {

		.wp-site-blocks > .wp-block-template-part > .twt-testata--fissa {
			animation: twt-ombra-fissa linear both;
			animation-timeline: scroll(root);
			animation-range: 0 6rem;
		}
	}
}

@keyframes twt-entra {
	from {
		opacity: 0;
		transform: translateY(0.6rem);
	}
}

@keyframes twt-ombra-fissa {
	to {
		box-shadow: 0 10px 24px -12px rgb(0 0 0 / 35%);
	}
}

/* =========================================================================
 * Compatibilità con la 1.4.1: le forme di prima, per le pagine create allora
 * ====================================================================== */

/* Il racconto con tre foto tonde che si toccano, come piatti sul tavolo
 * visti dall'alto; quella di mezzo un po' più in basso. */
:root .twt-tonde {
	justify-content: center;
	gap: 0;
	margin-bottom: var(--wp--preset--spacing--50);
}

:root .twt-tonde > .wp-block-image {
	flex: 0 1 12rem;
	margin: 0;
}

:root .twt-tonde > .wp-block-image + .wp-block-image {
	margin-left: -1.5rem;
}

:root .twt-tonde > .wp-block-image:nth-child(2) {
	z-index: 1;
	transform: translateY(1.25rem);
}

:root .twt-tonde img {
	border: 6px solid var(--wp--preset--color--base);
	border-radius: 50%;
	box-shadow: var(--twc-shadow, 0 6px 18px -6px rgb(0 0 0 / 16%));
}

@media (max-width: 781px) {

	:root .twt-tonde > .wp-block-image {
		flex-basis: 7.5rem;
	}

	:root .twt-tonde > .wp-block-image + .wp-block-image {
		margin-left: -1rem;
	}
}

/* =========================================================================
 * La forma di questo modello: TWT Completo 3 «Brunch»
 *
 * Testata doppia (tono chiaro), griglia laterale, ritmo schede,
 * apertura lavagna, carta indice, galleria griglia,
 * contatti colonne, piede compatto, pulsanti pillola.
 * Menu pillola (telefono: foglio), pulsante principale apertura, foto del racconto collage.
 * Dettagli: titoli-evidenziati.
 * ====================================================================== */

/* Testata a due fasce.
 *
 * Sopra una striscia di servizio con orari e recapiti, sotto il menu. La
 * striscia si modifica come qualsiasi altro blocco: è lì che il locale
 * scrive "oggi chiuso" o "consegne sospese". Il fondo lo dà questo foglio
 * e non il blocco: se il ristoratore ne sceglie uno nell'editor, vince il
 * suo. */
.twt-fascia-servizio:not(.has-background) {
	background-color: var(--wp--preset--color--base-2);
}

.twt-fascia-servizio {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.twt-fascia-servizio p {
	margin: 0;
}

/* Sotto la striscia: nome a sinistra, menu e pulsante a destra. */
.twt-testata--doppia > .alignwide {
	gap: var(--wp--preset--spacing--30);
}

.twt-testata--doppia .twt-testata__destra {
	flex: 0 1 auto;
	flex-wrap: wrap;
	justify-content: flex-end;
}

@media (max-width: 781px) {

	.twt-fascia-servizio .alignwide {
		justify-content: center;
		text-align: center;
		gap: 0.15rem;
	}

	.twt-testata--doppia > .alignwide {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}

	/* La firma sul telefono: la fascia degli avvisi, nel colore del
	 * locale, resta appesa in alto. È la cosa che il cliente cerca per
	 * prima («è aperto adesso?»), e non deve tornare in cima per leggerla.
	 *
	 * Ad appendersi è tutto il pezzo «header», cioè la fascia e sotto la
	 * riga con il nome e il menu: un elemento appeso si muove solo dentro
	 * il suo genitore, e la fascia da sola, dentro il pezzo alto quanto la
	 * testata, se ne andrebbe con lei. Per questo lo spazio lasciato alle
	 * ancore (scroll-padding-top) è quello delle due righe insieme.
	 *
	 * Della fascia resta una riga sola, quella degli orari: telefono e
	 * indirizzo sono già nella barra in basso, con «Chiama» e «Mappa». */
	.wp-site-blocks > .wp-block-template-part:has(> .twt-fascia-servizio) {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 80;
	}

	.twt-fascia-servizio:not(.has-background) {
		background-color: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--on-accent);
		border-bottom-color: transparent;
		--twt-fuoco: var(--wp--preset--color--on-accent);
	}

	.twt-fascia-servizio:not(.has-background) a {
		color: inherit;
	}

	.twt-fascia-servizio .alignwide > :not(:first-child) {
		display: none;
	}

	.twt-fascia-servizio .alignwide > :first-child::before {
		content: "";
		display: inline-block;
		width: 0.5em;
		height: 0.5em;
		margin-right: 0.5em;
		border-radius: 50%;
		background-color: currentColor;
		vertical-align: 0.1em;
	}

	:root:has(.twt-fascia-servizio) {
		scroll-padding-top: 6.5rem;
	}
}

/* Il pallino batte tre volte all'arrivo, poi sta fermo: meno di cinque
 * secondi, e niente per chi ha chiesto meno movimento. */
@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {

	.twt-fascia-servizio .alignwide > :first-child::before {
		animation: twt-battito 1.5s ease-in-out 3;
	}
}

@keyframes twt-battito {
	50% {
		opacity: 0.35;
	}
}

@media (min-width: 782px) and (max-width: 1099px) {

	.twt-testata--doppia > .alignwide {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}


/* Il menu a pillola, che galleggia in basso al centro.
 *
 * Da computer il menu esce dalla testata e diventa una pillola nel colore
 * del testo, appesa in fondo allo schermo, sempre sotto la mano; la
 * testata in alto tiene solo il nome e il pulsante principale. Le tendine
 * si aprono verso l'alto. Sotto i 1100 pixel il menu torna nella testata,
 * a scomparsa, come in tutti i modelli. */
@media (min-width: 1100px) {

	:root .twt-menu--pillola .twt-testata__destra > .wp-block-navigation {
		position: fixed;
		right: 0;
		bottom: max(1.25rem, env(safe-area-inset-bottom));
		left: 0;
		z-index: 85;
		width: max-content;
		max-width: calc(100% - 2rem);
		margin-inline: auto;
		padding: 0.3rem 0.5rem;
		border-radius: var(--twc-radius-pill, 999px);
		background-color: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
		box-shadow: var(--twc-shadow-lg, 0 18px 44px -14px rgb(0 0 0 / 26%));
		--twt-fuoco: var(--wp--preset--color--base);
	}

	.twt-menu--pillola .wp-block-navigation__container {
		gap: 0.15rem;
	}

	:root .twt-menu--pillola .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: var(--twc-tap, 44px);
		padding: 0 0.9rem;
		border-radius: var(--twc-radius-pill, 999px);
		color: inherit;
		text-decoration: none;
	}

	:root .twt-menu--pillola .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation-item__content {
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
	}

	:root .twt-menu--pillola .wp-block-navigation .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
		top: auto;
		right: auto;
		bottom: calc(100% + 0.75rem);
		left: 50%;
		transform: translateX(-50%);
		color: var(--wp--preset--color--contrast);
		--twt-fuoco: var(--wp--preset--color--contrast);
	}

	/* Il ponte fra la voce e la tendina, che qui sta sopra. */
	.twt-menu--pillola .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::after {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: 0.85rem;
	}

	/* Con il tasto Tab la pagina scorre fino al collegamento scelto e si
	 * ferma sopra la pillola, non sotto. */
	:root:has(.twt-menu--pillola) {
		scroll-padding-bottom: 6rem;
	}

	/* L'ultima riga della pagina non deve finire sotto la pillola: il
	 * piede si allunga di quanto serve, nel suo stesso colore. */
	body:has(.twt-menu--pillola) .twt-piede::after {
		content: "";
		display: block;
		height: 4.5rem;
	}
}


/* Sul telefono il menu si apre dal basso, come un foglio.
 *
 * Le voci stanno dove arriva il pollice, la pagina resta visibile sopra
 * sotto un velo e la maniglia in cima dice che il foglio si chiude (con
 * la X o con Esc). */
@media (max-width: 1099px) {

	:root .twt-testata.twt-menu-tel--foglio .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		padding: 0;
		background-color: var(--twc-overlay, color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent));
		justify-content: flex-end;
	}

	:root .twt-testata.twt-menu-tel--foglio .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		box-sizing: border-box;
		margin: 0;
		overflow: auto;
		overscroll-behavior: contain;
		padding: var(--wp--preset--spacing--40);
		padding-bottom: max(var(--wp--preset--spacing--40), env(safe-area-inset-bottom));
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
		box-shadow: var(--twc-shadow-lg, 0 18px 44px -14px rgb(0 0 0 / 26%));
		max-height: min(88vh, 44rem);
		border-radius: max(1rem, var(--wp--custom--raggio--grande)) max(1rem, var(--wp--custom--raggio--grande)) 0 0;
	}

	:root .twt-testata.twt-menu-tel--foglio .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		margin-top: 0;
	}

	:root .twt-testata.twt-menu-tel--foglio .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
		content: "";
		display: block;
		width: 2.75rem;
		height: 0.3rem;
		margin: 0 auto 0.5rem;
		border-radius: var(--twc-radius-pill, 999px);
		background-color: var(--wp--preset--color--border);
	}
}

@media (max-width: 1099px) and (prefers-reduced-motion: no-preference) {

	:root .twt-testata.twt-menu-tel--foglio .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		animation: twt-dal-basso 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
}

@keyframes twt-dal-basso {
	from {
		transform: translateY(100%);
	}
}


/* La lavagna dei piatti di oggi: fondo scuro, scritta chiara, righe con
 * il prezzo a destra. Da computer sale sul bordo della foto. */
.twt-lavagna {
	border-radius: var(--wp--custom--raggio--grande);
	--twt-fuoco: var(--wp--preset--color--base);
}

.twt-lavagna > .wp-block-heading {
	margin-top: 0;
}

.twt-lavagna .twt-piatto {
	border-bottom-color: color-mix(in srgb, currentColor 35%, transparent);
}

.twt-lavagna .twt-piatto p {
	margin: 0;
}

.twt-apertura--lavagna .twt-apertura__foto img {
	border-radius: var(--wp--custom--raggio--grande);
}

@media (min-width: 782px) {

	.twt-apertura--lavagna .twt-lavagna {
		position: relative;
		margin: -4rem 1.5rem 0;
		box-shadow: var(--twc-shadow-lg, 0 18px 40px -20px rgb(0 0 0 / 45%));
	}
}


/* Sezioni a scheda.
 *
 * La pagina ha il fondo grigio e ogni sezione è una scheda bianca con il
 * bordo. Sul telefono le schede restano, con meno margine interno: sono
 * loro a dare il ritmo al posto dei titoli. */
.twt-sezione--schede {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--raggio--grande);
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {

	.twt-sezione--schede {
		padding-left: var(--wp--preset--spacing--50);
		padding-right: var(--wp--preset--spacing--50);
	}
}


/* Titolo di sezione in una colonna sua.
 *
 * Da computer il titolo resta fermo a lato mentre il contenuto scorre:
 * si sa sempre che cosa si sta leggendo. Sul telefono le colonne di
 * WordPress si impilano da sole e il titolo torna sopra. */
@media (min-width: 782px) {

	.twt-sezione--laterale .twt-sezione__titolo {
		position: sticky;
		top: var(--wp--preset--spacing--40);
		align-self: flex-start;
	}

	.twt-sezione--laterale .twt-sezione__titolo .wp-block-heading {
		text-wrap: balance;
	}
}


/* Pulsanti a pillola.
 *
 * Il secondario resta a pillola ma vuoto, con il filo del bordo. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-radius: 999px;
	padding: 0.75rem 1.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.86em;
}

/* La barra in basso sul telefono: una forma sola per tutti i modelli. */
@media (max-width: 781px) {

	:root .twt-barra-azioni .wp-block-button > .wp-block-button__link {
		padding: 0.4rem 0.25rem;
		border-radius: var(--wp--custom--raggio--medio);
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.85rem;
		font-variant-caps: normal;
		letter-spacing: 0;
		text-transform: none;
		text-decoration: none;
	}

	:root .twt-barra-azioni .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
		border: 0;
		background-color: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--on-accent);
	}

	:root .twt-barra-azioni .wp-block-button.is-style-outline > .wp-block-button__link {
		border: 1px solid var(--wp--preset--color--border);
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
	}
}


/* Carta con l'indice delle portate.
 *
 * Sul telefono l'indice è una fila di pulsanti che scorre di lato e
 * resta appesa sotto la testata: su una carta lunga è la differenza fra
 * trovare i dolci e rinunciare. Da tablet in su torna una colonna ferma
 * a lato. */
.twt-indice__dentro {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 0.5rem;
}

.twt-indice__dentro p {
	margin: 0;
}

.twt-indice__dentro a {
	display: inline-flex;
	align-items: center;
	min-height: var(--twc-tap, 44px);
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	white-space: nowrap;
	text-decoration: none;
}

.twt-carta--indice .twt-indice {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: var(--wp--preset--color--base);
	padding-top: 0.5rem;
}

/* Un'ancora cliccata non deve finire sotto l'indice appeso. */
.twt-carta--indice .wp-block-heading[id] {
	scroll-margin-top: 5.5rem;
}

@media (min-width: 782px) {

	.twt-carta--indice .twt-indice {
		align-self: flex-start;
		top: var(--wp--preset--spacing--40);
		padding-top: 0;
		background: none;
	}

	.twt-indice__dentro {
		flex-direction: column;
		gap: 0.25rem;
		overflow: visible;
		padding-bottom: 0;
	}

	.twt-indice__dentro a {
		min-height: 0;
		padding: 0.35rem 0;
		border: 0;
		border-radius: 0;
		background: none;
	}
}


/* Il racconto con il collage: una foto grande e una piccola che le si
 * appoggia sopra, sfalsata in basso a destra. Anche sul telefono. */
.twt-collage {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	padding-bottom: 2.5rem;
}

:root .twt-collage > .wp-block-image {
	margin: 0;
}

.twt-collage > .twt-collage__grande {
	grid-row: 1;
	grid-column: 1 / 9;
}

.twt-collage > .twt-collage__piccola {
	z-index: 1;
	grid-row: 1;
	grid-column: 6 / 11;
	align-self: end;
	transform: translateY(2.5rem);
}

:root .twt-collage > .twt-collage__piccola img {
	border: 6px solid var(--wp--preset--color--base);
	box-shadow: var(--twc-shadow-lg, 0 18px 44px -14px rgb(0 0 0 / 26%));
}


/* Piede compatto.
 *
 * Una colonna sola, centrata, a ogni larghezza: niente colonne da far
 * collassare e niente righe vuote sul telefono. */
.twt-piede--compatto .wp-block-navigation__container {
	justify-content: center;
	gap: 0.4rem 1.25rem;
}

.twt-piede--compatto .wp-block-social-links {
	justify-content: center;
}


/* I titoli di sezione evidenziati come a pennarello: una riga spessa e
 * trasparente passa dietro la parte bassa delle lettere. */
.twt-sezione > .wp-block-heading,
.twt-sezione__titolo .wp-block-heading {
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 45%, transparent);
	text-decoration-thickness: 0.38em;
	text-decoration-skip-ink: none;
	text-underline-offset: -0.14em;
}


/* Quando si stampa.
 *
 * Resta il contenuto: via menu, pulsanti, piede e barra del telefono.
 * Niente fondi colorati da far bere alla stampante, e nessun piatto
 * spezzato a metà fra due fogli. */
@media print {

	.twt-testata,
	.twt-fascia-servizio,
	.twt-piede,
	.twt-barra-azioni,
	.twt-invito-fisso,
	.twt-indice,
	.wp-block-buttons,
	.twt-salta-al-contenuto {
		display: none;
	}

	.wp-site-blocks {
		padding: 0;
	}

	.twt-sezione {
		border: 0;
		box-shadow: none;
		clip-path: none;
		background: none;
		padding: 0;
		margin: 0 0 1.5cm;
	}

	.twt-piatto,
	.twt-scheda-piatto {
		break-inside: avoid;
	}

	.twt-piatto {
		border-bottom: 1px dotted var(--wp--preset--color--contrast-2);
	}

	a[href^="/"]::after,
	a[href^="http"]::after {
		content: "";
	}
}

/* Apertura a mosaico: un po' d'aria fra le azioni e le foto. */
.twt-apertura--mosaico .twt-mosaico {
	margin-top: var(--wp--preset--spacing--50);
}

/* Ogni foto riempie la sua colonna: una foto caricata piccola restava
 * piccola, e sul telefono le due di destra diventavano francobolli. */
.twt-mosaico .wp-block-image,
.twt-mosaico .wp-block-image img {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Il bordo lo fa la colonna: con i margini laterali della figura, una
 * foto larga quanto la colonna usciva dallo schermo. */
.twt-mosaico .wp-block-image {
	margin-left: 0;
	margin-right: 0;
}


/* =========================================================================
 * I modi di mettere una foto (libreria comune dei temi 1.5.0)
 *
 * Si scelgono nel pannello Stili dell'editor. Ogni modo usa solo i colori
 * della tavolozza e queste variabili, che il tema regola:
 * ====================================================================== */

:root {
	--twt-foto-raggio: var(--wp--custom--foto--raggio, var(--wp--custom--raggio--grande, 0px));
	--twt-foto-giro: var(--wp--custom--foto--giro, -2deg);
	--twt-foto-carta: var(--wp--custom--foto--carta, var(--wp--preset--color--base));
	--twt-foto-su-carta: var(--wp--custom--foto--su-carta, var(--wp--preset--color--contrast));
	--twt-foto-anello: var(--wp--custom--foto--anello, var(--wp--preset--color--accent-3));
	--twt-foto-ombra: var(--wp--custom--foto--ombra, var(--twc-shadow));
	--twt-velo: var(--wp--custom--velo, var(--wp--preset--color--contrast));
	--twt-su-velo: var(--wp--custom--su-velo, var(--wp--preset--color--base));
}

/* Le foto che scorrono di lato si raggiungono con il tasto Tab (le marca
 * inc/foto.php) e mostrano l'anello del fuoco come ogni altra cosa. */
:root :is(.wp-block-gallery, .twt-striscia)[tabindex="0"]:focus-visible {
	outline: 2px solid var(--twt-fuoco, var(--wp--preset--color--contrast));
	outline-offset: 4px;
}

/* Arco (is-style-arco, core/image): Tonda in cima come una finestra. */
:root .wp-block-image.is-style-arco img {
	border-radius: 999px 999px var(--twt-foto-raggio) var(--twt-foto-raggio);
}

@media (max-width: 781px) {

	:root .wp-block-image.is-style-arco:not(.alignwide, .alignfull) {
		max-width: 72%;
		margin-inline: auto;
	}
}

/* Oblò (is-style-oblo, core/image): Tonda, con un anello staccato tutto intorno, come l'oblò del forno. */
:root .wp-block-image.is-style-oblo {
	container-type: inline-size;
	padding: 9px;
}

:root .wp-block-image.is-style-oblo img {
	width: 100cqi;
	height: 100cqi;
	object-fit: cover;
	border-radius: 50%;
	outline: 3px solid var(--twt-foto-anello);
	outline-offset: 6px;
}

@media (max-width: 781px) {

	:root .wp-block-image.is-style-oblo:not(.alignwide, .alignfull) {
		max-width: 78vw;
		margin-inline: auto;
	}
}

/* Piatto (is-style-piatto, core/image): Tonda, appoggiata su un piatto: la tesa chiara e un filo sottile all'interno. */
:root .wp-block-image.is-style-piatto {
	--twt-tesa: clamp(6px, 4.5cqi, 16px);
	position: relative;
	container-type: inline-size;
}

:root .wp-block-image.is-style-piatto img {
	width: 100cqi;
	height: 100cqi;
	object-fit: cover;
	border: var(--twt-tesa) solid var(--twt-foto-carta);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--wp--preset--color--border), var(--twt-foto-ombra);
}

/* Il filo dove la tesa diventa il fondo del piatto. */
:root .wp-block-image.is-style-piatto::after {
	content: "";
	position: absolute;
	top: var(--twt-tesa);
	left: var(--twt-tesa);
	width: calc(100cqi - 2 * var(--twt-tesa));
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	pointer-events: none;
}

@media (max-width: 781px) {

	:root .wp-block-image.is-style-piatto:not(.alignwide, .alignfull) {
		max-width: 78vw;
		margin-inline: auto;
	}
}

/* Medaglione (is-style-medaglione, core/image): Ovale in verticale, con un doppio anello: il filo del dettaglio e la cornice chiara. */
:root .wp-block-image.is-style-medaglione {
	container-type: inline-size;
	padding: 3px;
}

:root .wp-block-image.is-style-medaglione img {
	width: 100cqi;
	height: calc(100cqi * 4 / 3);
	object-fit: cover;
	padding: 5px;
	border: 2px solid var(--twt-foto-anello);
	border-radius: 50%;
	background: var(--twt-foto-carta);
	box-shadow: 0 0 0 3px var(--twt-foto-carta), 0 0 0 4px var(--twt-foto-anello);
}

@media (max-width: 781px) {

	:root .wp-block-image.is-style-medaglione:not(.alignwide, .alignfull) {
		max-width: 70%;
		margin-inline: auto;
	}
}

/* Specchio (is-style-specchio, core/image): Ottagonale, in verticale, con la cornice nel colore del dettaglio, come uno specchio da bistrot. */
:root .wp-block-image.is-style-specchio {
	container-type: inline-size;
}

:root .wp-block-image.is-style-specchio img {
	width: 100cqi;
	height: calc(100cqi * 5 / 4);
	object-fit: cover;
	padding: 6px;
	background: var(--twt-foto-anello);
	clip-path: polygon(22% 0, 78% 0, 100% 18%, 100% 82%, 78% 100%, 22% 100%, 0 82%, 0 18%);
}

@media (max-width: 781px) {

	:root .wp-block-image.is-style-specchio:not(.alignwide, .alignfull) {
		max-width: 86vw;
		margin-inline: auto;
	}
}

/* Cornice (is-style-cornice, core/image): Nel passe-partout, come un quadro appeso in sala. */
:root .wp-block-image.is-style-cornice {
	padding: clamp(0.9rem, 3vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--raggio--piccolo, 0);
	background-color: var(--wp--preset--color--base-2);
	box-shadow: var(--twt-foto-ombra);
}

:root .wp-block-image.is-style-cornice img {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 0;
}

/* Polaroid (is-style-polaroid, core/image): Con il bordo bianco largo in basso e un po' storta; la didascalia si scrive nel bordo. */
:root .wp-block-image.is-style-polaroid {
	padding: 0.6rem 0.6rem 2.6rem;
	background: var(--twt-foto-carta);
	color: var(--twt-foto-su-carta);
	box-shadow: var(--twt-foto-ombra);
	rotate: calc(var(--twt-foto-giro) / 2);
}

:root .wp-block-image.is-style-polaroid:has(figcaption) {
	padding-bottom: 0.75rem;
}

:root .wp-block-image.is-style-polaroid img {
	border-radius: 0;
}

:root .wp-block-image.is-style-polaroid figcaption {
	margin: 0.6rem 0 0;
	font-family: var(--wp--preset--font-family--accent, inherit);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	text-align: center;
	color: inherit;
}

@media (min-width: 782px) {

	:root .wp-block-image.is-style-polaroid {
		rotate: var(--twt-foto-giro);
	}
}

/* Con nastro (is-style-nastro, core/image): Attaccata con due pezzi di nastro adesivo; va bene anche sopra una polaroid. */
:root .wp-block-image.is-style-nastro {
	position: relative;
	margin-top: 1rem;
}

:root .wp-block-image.is-style-nastro::before,
:root .wp-block-image.is-style-nastro::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: -0.7rem;
	width: 4rem;
	height: 1.4rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent-3) 45%, transparent);
	pointer-events: none;
}

:root .wp-block-image.is-style-nastro::before {
	left: 10%;
	rotate: -8deg;
}

:root .wp-block-image.is-style-nastro::after {
	right: 10%;
	rotate: 7deg;
}

@media (min-width: 782px) {

	:root .wp-block-image.is-style-nastro::before,
	:root .wp-block-image.is-style-nastro::after {
		width: 5.5rem;
		height: 1.6rem;
	}
}

/* Con timbro (is-style-timbro, core/image): La didascalia diventa un timbro tondo sull'angolo della foto. Senza didascalia, niente timbro. */
:root .wp-block-image.is-style-timbro {
	position: relative;
}

:root .wp-block-image.is-style-timbro figcaption {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 4.5rem;
	aspect-ratio: 1;
	margin: 0;
	padding: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--on-accent);
	outline: 1px dashed color-mix(in srgb, var(--wp--preset--color--on-accent) 70%, transparent);
	outline-offset: -5px;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	rotate: -8deg;
}

@media (min-width: 782px) {

	:root .wp-block-image.is-style-timbro figcaption {
		right: 1rem;
		bottom: 1rem;
		width: 5.75rem;
		font-size: 0.78rem;
	}
}

/* Cartolina (is-style-cartolina, core/image): Su un cartoncino con il bordo dentellato, come un francobollo grande. */
:root .wp-block-image.is-style-cartolina {
	padding: 0.9rem;
	background: var(--twt-cartolina, var(--wp--preset--color--base-2));
	color: var(--twt-su-cartolina, var(--wp--preset--color--contrast));
	rotate: var(--twt-cartolina-giro, 0deg);
	-webkit-mask: linear-gradient(black 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle 3.5px, transparent 96%, black) -5px -5px / 10px 10px round;
	mask: linear-gradient(black 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle 3.5px, transparent 96%, black) -5px -5px / 10px 10px round;
}

:root .wp-block-image.is-style-cartolina img {
	border-radius: 0;
}

:root .wp-block-image.is-style-cartolina figcaption {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
}

@media (min-width: 782px) {

	:root .wp-block-image.is-style-cartolina {
		padding: 1.25rem;
		-webkit-mask: linear-gradient(black 0 0) center / calc(100% - 14px) calc(100% - 14px) no-repeat, radial-gradient(circle 5px, transparent 96%, black) -7px -7px / 14px 14px round;
		mask: linear-gradient(black 0 0) center / calc(100% - 14px) calc(100% - 14px) no-repeat, radial-gradient(circle 5px, transparent 96%, black) -7px -7px / 14px 14px round;
	}
}

/* Biglietto (is-style-biglietto, core/image): Con il bordo a zig-zag sopra e sotto, come un biglietto strappato dal blocchetto. */
:root .wp-block-image.is-style-biglietto img {
	--twt-dente: 14px;
	border-radius: 0;
	-webkit-mask: conic-gradient(from 135deg at top, transparent, black 1deg 89deg, transparent 90deg) top / var(--twt-dente) 51% repeat-x, conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) bottom / var(--twt-dente) 51% repeat-x;
	mask: conic-gradient(from 135deg at top, transparent, black 1deg 89deg, transparent 90deg) top / var(--twt-dente) 51% repeat-x, conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) bottom / var(--twt-dente) 51% repeat-x;
}

@media (min-width: 782px) {

	:root .wp-block-image.is-style-biglietto img {
		--twt-dente: 20px;
	}
}

/* Bordo strappato (is-style-strappo, core/image): Strappata sopra e sotto, come un manifesto attaccato al muro. */
:root .wp-block-image.is-style-strappo img {
	--twt-strappo: 16px;
	--twt-strappo-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V6L96 8 92 5 88 9 83 6 79 8 74 4 70 8 65 6 61 9 56 5 52 8 47 6 43 9 38 5 34 8 29 6 25 9 20 5 16 8 11 6 7 9 3 6 0 8Z'/%3E%3C/svg%3E");
	--twt-strappo-su: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10H100V3L95 1 91 4 86 2 82 5 77 1 73 3 68 1 64 4 59 2 55 5 50 1 46 3 41 1 37 4 32 2 28 5 23 1 19 3 14 1 10 4 5 2 0 4Z'/%3E%3C/svg%3E");
	border-radius: 0;
	-webkit-mask: var(--twt-strappo-su) top / 100% var(--twt-strappo) no-repeat, linear-gradient(black 0 0) center / 100% calc(100% - 2 * var(--twt-strappo) + 4px) no-repeat, var(--twt-strappo-giu) bottom / 100% var(--twt-strappo) no-repeat;
	mask: var(--twt-strappo-su) top / 100% var(--twt-strappo) no-repeat, linear-gradient(black 0 0) center / 100% calc(100% - 2 * var(--twt-strappo) + 4px) no-repeat, var(--twt-strappo-giu) bottom / 100% var(--twt-strappo) no-repeat;
}

@media (min-width: 782px) {

	:root .wp-block-image.is-style-strappo img {
		--twt-strappo: 24px;
	}
}

/* Bordo a onde (is-style-onde, core/image): Con il bordo basso a mezzi cerchi, come la carta della pizzeria. */
:root .wp-block-image.is-style-onde img {
	--r: 8px;
	border-radius: var(--twt-foto-raggio) var(--twt-foto-raggio) 0 0;
	-webkit-mask: linear-gradient(black 0 0) top / 100% calc(100% - var(--r)) no-repeat, radial-gradient(var(--r) at 50% 0, black 98%, transparent) bottom / calc(2 * var(--r)) var(--r) repeat-x;
	mask: linear-gradient(black 0 0) top / 100% calc(100% - var(--r)) no-repeat, radial-gradient(var(--r) at 50% 0, black 98%, transparent) bottom / calc(2 * var(--r)) var(--r) repeat-x;
}

@media (min-width: 782px) {

	:root .wp-block-image.is-style-onde img {
		--r: 12px;
	}
}

/* Due colori (is-style-due-colori, core/image, core/cover): In due colori della tavolozza: il nero diventa il testo, il chiaro l'accento. Cambia con i colori del sito. */
:root .wp-block-image.is-style-due-colori {
	position: relative;
	isolation: isolate;
}

:root .wp-block-image.is-style-due-colori img {
	background: var(--wp--preset--color--accent-1);
	filter: grayscale(1) contrast(1.1);
	mix-blend-mode: multiply;
}

:root .wp-block-image.is-style-due-colori:not(:has(figcaption)) {
	background: var(--wp--preset--color--accent-1);
}

:root .wp-block-image.is-style-due-colori:not(:has(figcaption))::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--base);
	mix-blend-mode: lighten;
	opacity: 0.35;
	pointer-events: none;
}

:root .wp-block-cover.is-style-due-colori {
	isolation: isolate;
	background-color: var(--wp--preset--color--accent-1);
}

:root .wp-block-cover.is-style-due-colori > .wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.1);
	mix-blend-mode: multiply;
}

/* Striscia larga (is-style-striscia-larga, core/image): Bassa e larghissima (21:9), per un dettaglio del piatto o la sala da lontano. */
:root .wp-block-image.is-style-striscia-larga {
	container-type: inline-size;
}

:root .wp-block-image.is-style-striscia-larga img {
	width: 100cqi;
	height: calc(100cqi * 9 / 16);
	object-fit: cover;
}

@media (min-width: 782px) {

	:root .wp-block-image.is-style-striscia-larga img {
		height: calc(100cqi * 9 / 21);
	}
}

/* Fino al bordo (is-style-fino-al-bordo, core/image): Esce dalla colonna e arriva al bordo dello schermo: a destra nell'ultima colonna, a sinistra nella prima. */
@media (max-width: 781px) {

	:root .wp-block-image.is-style-fino-al-bordo {
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem));
	}

	:root .wp-block-image.is-style-fino-al-bordo img {
		border-radius: var(--twt-foto-raggio) 0 0 var(--twt-foto-raggio);
	}
}

@media (min-width: 782px) {

	:root .wp-block-column:last-child > .wp-block-image.is-style-fino-al-bordo {
		margin-right: calc((min(var(--wp--style--global--wide-size), 100vw - var(--wp--style--root--padding-left, 1rem) - var(--wp--style--root--padding-right, 1rem)) - 100vw) / 2);
	}

	:root .wp-block-column:last-child > .wp-block-image.is-style-fino-al-bordo img {
		border-radius: var(--twt-foto-raggio) 0 0 var(--twt-foto-raggio);
	}

	:root .wp-block-column:first-child:not(:last-child) > .wp-block-image.is-style-fino-al-bordo {
		margin-left: calc((min(var(--wp--style--global--wide-size), 100vw - var(--wp--style--root--padding-left, 1rem) - var(--wp--style--root--padding-right, 1rem)) - 100vw) / 2);
	}

	:root .wp-block-column:first-child:not(:last-child) > .wp-block-image.is-style-fino-al-bordo img {
		border-radius: 0 var(--twt-foto-raggio) var(--twt-foto-raggio) 0;
	}
}

/* Con il menu in colonna fissa a sinistra (18rem) il conto si fa sullo
 * spazio che resta: la foto non va oltre il bordo. */
@media (min-width: 1100px) {

	.wp-site-blocks:has(.twt-testata--colonna) .wp-block-column:last-child > .wp-block-image.is-style-fino-al-bordo {
		margin-right: calc((min(var(--wp--style--global--wide-size), 100vw - 18rem - var(--wp--style--root--padding-left, 1rem) - var(--wp--style--root--padding-right, 1rem)) - (100vw - 18rem)) / 2);
	}

	.wp-site-blocks:has(.twt-testata--colonna) .wp-block-column:first-child:not(:last-child) > .wp-block-image.is-style-fino-al-bordo {
		margin-left: calc((min(var(--wp--style--global--wide-size), 100vw - 18rem - var(--wp--style--root--padding-left, 1rem) - var(--wp--style--root--padding-right, 1rem)) - (100vw - 18rem)) / 2);
	}
}

/* Quadrata (is-style-quadrata, core/image): Quadrata, a spigolo vivo, con un filo sottile staccato tutto intorno. */
:root .wp-block-image.is-style-quadrata {
	container-type: inline-size;
	padding: 7px;
}

:root .wp-block-image.is-style-quadrata img {
	width: 100cqi;
	height: 100cqi;
	object-fit: cover;
	border-radius: 0;
	outline: 1px solid var(--wp--preset--color--border);
	outline-offset: 6px;
}

/* Scritta in basso (is-style-velo-basso, core/cover): La foto si vede in alto; la scritta sta in basso su un velo pieno, che la fa leggere anche su una foto chiara. */
:root .wp-block-cover.is-style-velo-basso {
	align-items: flex-end;
	padding: 0;
}

:root .wp-block-cover.is-style-velo-basso > .wp-block-cover__background.has-background-dim {
	background-image: linear-gradient(var(--twt-velo), var(--twt-velo));
	opacity: 0.18;
}

/* Il velo vero sta dietro la scritta, quanto è alta la scritta: con tre
 * righe o con dieci il testo ha sempre dietro l'86 % del colore scuro. */
:root .wp-block-cover.is-style-velo-basso > .wp-block-cover__inner-container {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 3.5rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: linear-gradient(to top, color-mix(in srgb, var(--twt-velo) 86%, transparent) calc(100% - 3rem), transparent);
}

:root .wp-block-cover.is-style-velo-basso:not(.has-text-color) {
	color: var(--twt-su-velo);
	--twt-fuoco: var(--twt-su-velo);
}

@media (min-width: 782px) {

	:root .wp-block-cover.is-style-velo-basso > .wp-block-cover__inner-container {
		padding: 5rem var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}

/* Scritta nel riquadro (is-style-riquadro, core/cover): La scritta sta in un riquadro pieno, nel colore del fondo: la foto può essere chiara o scura. */
:root .wp-block-cover.is-style-riquadro > .wp-block-cover__background.has-background-dim {
	opacity: 0.1;
}

:root .wp-block-cover.is-style-riquadro > .wp-block-cover__inner-container {
	box-sizing: border-box;
	width: min(100%, 36rem);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--twc-radius, 0);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--twt-foto-ombra);
	--twt-fuoco: var(--wp--preset--color--contrast);
}

@media (max-width: 781px) {

	:root .wp-block-cover.is-style-riquadro {
		align-items: flex-end;
		padding: 0;
	}

	:root .wp-block-cover.is-style-riquadro > .wp-block-cover__inner-container {
		width: 100%;
		margin: 0;
		border-radius: 0;
	}
}

/* Metà e metà (is-style-meta, core/media-text): Da un bordo all'altro: la foto riempie la sua metà, il testo sta sull'altra sul fondo alternativo. */
:root .wp-block-media-text.is-style-meta {
	background-color: var(--wp--preset--color--base-2);
}

:root .wp-block-media-text.is-style-meta > .wp-block-media-text__media {
	align-self: stretch;
	margin: 0;
}

:root .wp-block-media-text.is-style-meta > .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

:root .wp-block-media-text.is-style-meta > .wp-block-media-text__content {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {

	:root .wp-block-media-text.is-style-meta > .wp-block-media-text__media img {
		min-height: 22rem;
		aspect-ratio: auto;
	}

	:root .wp-block-media-text.is-style-meta > .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--60);
	}
}

/* Scorre di lato (is-style-carosello, core/gallery): Le foto in fila, che scorrono di lato con il dito, con la rotellina o con le frecce della tastiera. */
:root .wp-block-gallery.has-nested-images.is-style-carosello {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
	padding-bottom: 0.75rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--accent-1) transparent;
}

:root .wp-block-gallery.has-nested-images.is-style-carosello > figure.wp-block-image {
	flex: 0 0 min(80%, 22rem);
	scroll-snap-align: start;
}

@media (max-width: 781px) {

	:root .wp-block-gallery.has-nested-images.is-style-carosello {
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem));
		padding-inline: var(--wp--style--root--padding-left, 1rem);
		scroll-padding-inline: var(--wp--style--root--padding-left, 1rem);
	}
}

@media (prefers-reduced-motion: no-preference) {

	:root .wp-block-gallery.has-nested-images.is-style-carosello {
		scroll-behavior: smooth;
	}
}

/* Mosaico (is-style-mosaico, core/gallery): La prima foto grande, le altre attorno, incastrate come in un mosaico. */
:root .wp-block-gallery.has-nested-images.is-style-mosaico {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: var(--wp--preset--spacing--20);
}

:root .wp-block-gallery.has-nested-images.is-style-mosaico > figure.wp-block-image:not(#twt-foto) {
	width: auto;
	aspect-ratio: 1;
}

:root .wp-block-gallery.has-nested-images.is-style-mosaico > figure.wp-block-image:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

:root .wp-block-gallery.has-nested-images.is-style-mosaico > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--raggio--piccolo, 0);
}

@media (min-width: 782px) {

	:root .wp-block-gallery.has-nested-images.is-style-mosaico {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Collage (is-style-collage, core/gallery): Due o tre foto sovrapposte e sfalsate; la più piccola con il bordo chiaro. */
:root .wp-block-gallery.has-nested-images.is-style-collage {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) 0;
	padding-bottom: 1.5rem;
}

:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:not(#twt-foto) {
	width: auto;
	grid-row: 1;
}

/* Tre foto per riga del collage: dalla quarta si comincia una riga nuova. */
:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:not(#twt-foto):nth-child(n+4):nth-child(-n+6) {
	grid-row: 2;
}

:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:not(#twt-foto):nth-child(n+7) {
	grid-row: 3;
}

/* Le foto tengono la loro proporzione: nella riga del collage non si stirano. */
:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:not(#twt-foto) img {
	flex: 0 0 auto;
	height: auto;
}

:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:nth-child(3n+1) {
	grid-column: 1 / 9;
}

:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:nth-child(3n+2) {
	z-index: 1;
	grid-column: 6 / 11;
	align-self: end;
	translate: 0 1.5rem;
}

:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:nth-child(3n) {
	z-index: 2;
	grid-column: 1 / 5;
	align-self: start;
	translate: 0 -1rem;
}

:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:nth-child(3n+2) img,
:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:nth-child(3n) img {
	border: 6px solid var(--wp--preset--color--base);
	box-shadow: var(--twt-foto-ombra);
}

@media (min-width: 782px) {

	:root .wp-block-gallery.has-nested-images.is-style-collage {
		padding-bottom: 2.5rem;
	}

	:root .wp-block-gallery.has-nested-images.is-style-collage > figure.wp-block-image:nth-child(3n+2) {
		translate: 0 2.5rem;
	}
}

/* Polaroid sparse (is-style-polaroid, core/gallery): Ogni foto è una polaroid, un po' storta e appoggiata sulle altre, come sul tavolo. */
:root .wp-block-gallery.has-nested-images.is-style-polaroid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image:not(#twt-foto) {
	flex: 0 0 calc(50% - var(--wp--preset--spacing--30) / 2);
	width: auto;
	padding: 0.45rem 0.45rem 1.8rem;
	background: var(--twt-foto-carta);
	color: var(--twt-foto-su-carta);
	box-shadow: var(--twt-foto-ombra);
	rotate: -1.5deg;
}

:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image:nth-child(even) {
	rotate: 1.5deg;
}

:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image:has(figcaption) {
	padding-bottom: 0.5rem;
}

:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image::before {
	content: none;
}

:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image figcaption {
	position: static;
	margin: 0.4rem 0 0;
	padding: 0;
	background: none;
	color: inherit;
	text-shadow: none;
	font-size: var(--wp--preset--font-size--small);
}

:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image img {
	border-radius: 0;
}

@media (min-width: 782px) {

	:root .wp-block-gallery.has-nested-images.is-style-polaroid {
		gap: 0;
		justify-content: center;
		padding-block: var(--wp--preset--spacing--30);
	}

	:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image:not(#twt-foto) {
		flex: 0 0 min(30%, 17rem);
		padding: 0.6rem 0.6rem 2.6rem;
		rotate: -3deg;
	}

	:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image + figure.wp-block-image {
		margin-left: -1rem;
	}

	:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image:nth-child(4n+2) {
		rotate: 2deg;
		translate: 0 0.75rem;
	}

	:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image:nth-child(4n+3) {
		rotate: -1.5deg;
	}

	:root .wp-block-gallery.has-nested-images.is-style-polaroid > figure.wp-block-image:nth-child(4n) {
		rotate: 3deg;
		translate: 0 0.5rem;
	}
}

/* Pellicola (is-style-pellicola, core/gallery): Le foto scorrono di lato su una striscia di pellicola, con i fori sopra e sotto. */
:root .wp-block-gallery.has-nested-images.is-style-pellicola {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.6rem;
	padding: 1.6rem 0.6rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--base) transparent;
	background-color: var(--wp--preset--color--contrast);
	background-image: radial-gradient(circle, var(--wp--preset--color--base) 0 3px, transparent 3.5px), radial-gradient(circle, var(--wp--preset--color--base) 0 3px, transparent 3.5px);
	background-position: 0 5px, 0 calc(100% - 5px);
	background-size: 16px 12px;
	background-repeat: repeat-x;
	background-attachment: local;
}

:root .wp-block-gallery.has-nested-images.is-style-pellicola > figure.wp-block-image {
	flex: 0 0 min(70%, 18rem);
	scroll-snap-align: center;
}

:root .wp-block-gallery.has-nested-images.is-style-pellicola > figure.wp-block-image img {
	border-radius: 2px;
}

@media (max-width: 781px) {

	:root .wp-block-gallery.has-nested-images.is-style-pellicola {
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem));
	}
}

@media (prefers-reduced-motion: no-preference) {

	:root .wp-block-gallery.has-nested-images.is-style-pellicola {
		scroll-behavior: smooth;
	}
}

/* Piastrelle (is-style-piastrelle, core/gallery): Foto quadrate fitte, separate da una fuga sottile, come le piastrelle di un bistrot. */
:root .wp-block-gallery.has-nested-images.is-style-piastrelle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	padding: 2px;
	background: var(--wp--preset--color--border);
}

:root .wp-block-gallery.has-nested-images.is-style-piastrelle > figure.wp-block-image:not(#twt-foto) {
	width: auto;
	aspect-ratio: 1;
}

:root .wp-block-gallery.has-nested-images.is-style-piastrelle > figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (min-width: 782px) {

	:root .wp-block-gallery.has-nested-images.is-style-piastrelle {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Cartoline (is-style-cartoline, core/gallery): Ogni foto è una cartolina dentellata, una dritta e una storta. */
:root .wp-block-gallery.has-nested-images.is-style-cartoline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

:root .wp-block-gallery.has-nested-images.is-style-cartoline > figure.wp-block-image:not(#twt-foto) {
	flex: 0 0 100%;
	width: auto;
	padding: 0.9rem;
	background: var(--twt-cartolina, var(--wp--preset--color--base-2));
	color: var(--twt-su-cartolina, var(--wp--preset--color--contrast));
	-webkit-mask: linear-gradient(black 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle 3.5px, transparent 96%, black) -5px -5px / 10px 10px round;
	mask: linear-gradient(black 0 0) center / calc(100% - 10px) calc(100% - 10px) no-repeat, radial-gradient(circle 3.5px, transparent 96%, black) -5px -5px / 10px 10px round;
}

:root .wp-block-gallery.has-nested-images.is-style-cartoline > figure.wp-block-image::before {
	content: none;
}

:root .wp-block-gallery.has-nested-images.is-style-cartoline > figure.wp-block-image figcaption {
	position: static;
	margin: 0.5rem 0 0;
	padding: 0;
	background: none;
	color: inherit;
	text-shadow: none;
	font-size: var(--wp--preset--font-size--small);
}

:root .wp-block-gallery.has-nested-images.is-style-cartoline > figure.wp-block-image img {
	border-radius: 0;
}

@media (min-width: 782px) {

	:root .wp-block-gallery.has-nested-images.is-style-cartoline > figure.wp-block-image:not(#twt-foto) {
		flex-basis: calc(50% - var(--wp--preset--spacing--30) / 2);
		padding: 1.25rem;
		rotate: -1.5deg;
	}

	:root .wp-block-gallery.has-nested-images.is-style-cartoline > figure.wp-block-image:nth-child(even) {
		rotate: 1.5deg;
	}
}

/* Esposizione (is-style-esposizione, core/gallery): Una foto sotto l'altra, alternate a destra e a sinistra come in una mostra, con le didascalie numerate. */
:root .wp-block-gallery.has-nested-images.is-style-esposizione {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--50);
	counter-reset: twt-esposizione;
}

:root .wp-block-gallery.has-nested-images.is-style-esposizione > figure.wp-block-image:not(#twt-foto) {
	width: 100%;
	counter-increment: twt-esposizione;
}

:root .wp-block-gallery.has-nested-images.is-style-esposizione > figure.wp-block-image::before {
	content: none;
}

:root .wp-block-gallery.has-nested-images.is-style-esposizione > figure.wp-block-image figcaption {
	position: static;
	margin: 0.6rem 0 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--contrast-2);
	text-shadow: none;
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
}

:root .wp-block-gallery.has-nested-images.is-style-esposizione > figure.wp-block-image figcaption::before {
	content: counter(twt-esposizione, decimal-leading-zero) " — " / "";
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
}

:root .wp-block-gallery.has-nested-images.is-style-esposizione > figure.wp-block-image img {
	border-radius: 0;
}

@media (min-width: 782px) {

	:root .wp-block-gallery.has-nested-images.is-style-esposizione > figure.wp-block-image:not(#twt-foto):nth-child(odd) {
		width: 70%;
	}

	:root .wp-block-gallery.has-nested-images.is-style-esposizione > figure.wp-block-image:not(#twt-foto):nth-child(even) {
		width: 45%;
		align-self: flex-end;
	}
}


/* --- Ponte verso i plugin TWC (1.5.0) ------------------------------------
 * Il bordo dei campi dei moduli al 60 % del testo: almeno 3:1 sul fondo in
 * ogni tavolozza (al 45 % di TWT Base restava sotto). Le ombre del tema
 * arrivano anche ai moduli dei plugin.
 * ------------------------------------------------------------------------- */

:root:root {
	--twc-line-strong: color-mix(in srgb, var(--wp--preset--color--contrast) 60%, var(--wp--preset--color--base));
	--twc-shadow-sm: 0 4px 10px -6px color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent);
	--twc-shadow: 0 10px 24px -12px color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent);
	--twc-shadow-lg: 0 22px 44px -18px color-mix(in srgb, var(--wp--preset--color--accent-1) 40%, transparent);
}

body :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"]), select, textarea) {
	--twc-line: var(--twc-line-strong);
}


/* --- Le aperture della 1.4 con la foto piena ------------------------------
 * Sala e Copertina hanno la scritta sopra la foto: il velo della foto è al
 * 55 % (il velo dietro la scritta lo mette il blocco delle copertine, in
 * fondo), e attorno alla scritta c'è un po' di spazio.
 * ------------------------------------------------------------------------- */

:root .wp-block-cover:is(.twt-apertura--sala, .twt-apertura--copertina) > .wp-block-cover__background {
	opacity: 0.55;
}

:root .wp-block-cover:is(.twt-apertura--sala, .twt-apertura--copertina) > .wp-block-cover__inner-container {
	padding-block: var(--wp--preset--spacing--40);
}

/* --- Sul fondo rovesciato (Sezione scura, gruppo nel colore del testo) ----
 * Il pulsante secondario e la riga piccola dei temi usano l'accento o il
 * testo secondario, pensati per il fondo chiaro: sul fondo rovesciato
 * scendevano a 1–2,5:1. Qui prendono il colore della scritta di quel
 * fondo (base), con il bordo dello stesso colore.
 * ------------------------------------------------------------------------- */

:root:root :is(.is-style-sezione-scura, :is(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover).has-contrast-background-color) .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: currentColor;
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

@media (hover: hover) {

	:root:root :is(.is-style-sezione-scura, :is(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover).has-contrast-background-color) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
		color: var(--wp--preset--color--base);
	}
}

/* Sopra una foto (copertina) il secondario prende il colore della scritta
 * della copertina (sul velo, o nel riquadro pieno): l'accento sul velo
 * scuro scendeva sotto 3:1. Al passaggio del mouse si sottolinea, senza
 * fondo: un fondo del colore della scritta ne abbassava il contrasto. */
:root:root .wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: currentColor;
	background-color: transparent;
	color: inherit;
}

@media (hover: hover) {

	:root:root .wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
		background-color: transparent;
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

:root:root :is(.is-style-sezione-scura, :is(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover).has-contrast-background-color) .twt-legenda {
	color: color-mix(in srgb, var(--wp--preset--color--base) 82%, var(--wp--preset--color--contrast));
}

/* --- L'etichetta sul bordo destro non copre il testo ----------------------
 * Da 1100 pixel l'invito «sul bordo» sta attaccato al lato destro, largo
 * 44 pixel: il margine destro della pagina cresce quanto serve, così i
 * prezzi in fondo alla riga non finiscono sotto l'etichetta. Le fasce a
 * tutta larghezza arrivano lo stesso al bordo (seguono la variabile).
 * ------------------------------------------------------------------------- */

@media (min-width: 1100px) {

	body:has(.twt-invito-fisso--bordo) {
		--wp--style--root--padding-right: max(var(--wp--preset--spacing--40), 3.5rem);
	}
}


/* --- Entrata dell'apertura (1.5.0) ---------------------------------------
 * Sale di poco, senza sparire: il nome del locale si vede subito.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	:where(body:not(.editor-styles-wrapper)) .twt-apertura :is(.twt-occhiello, .wp-block-heading + p, .wp-block-buttons) {
		animation-name: twt-sale;
		animation-duration: 420ms;
	}
}

@keyframes twt-sale {
	from {
		transform: translateY(0.5rem);
	}
}


/* L'occhiello e le etichette, nel carattere del tema. */
:root .twt-occhiello {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	text-transform: uppercase;
}


/* =========================================================================
 * La pelle di TWT Completo 3 «Brunch» (tools/temi/temi/twt-completo-3.php)
 * ====================================================================== */

/* --- I segni del Brunch -----------------------------------------------------
 * Il sole e la scintilla sono disegni in maschera: prendono il colore che
 * hanno sotto. I pois sono un gradiente nel colore del Dettaglio.
 * ------------------------------------------------------------------------- */

:root {
	--twt-sole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='8.5'/%3E%3Cpath d='M20 2.5v6M20 31.5v6M2.5 20h6M31.5 20h6M7.6 7.6l4.2 4.2M28.2 28.2l4.2 4.2M32.4 7.6l-4.2 4.2M11.8 28.2l-4.2 4.2' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
	--twt-scintilla: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0Z'/%3E%3C/svg%3E");
	--twt-pois-colore: color-mix(in srgb, var(--wp--preset--color--accent-3) 14%, transparent);
	--twt-ombra-bottone: 0 8px 18px -10px color-mix(in srgb, var(--wp--preset--color--accent-1) 45%, transparent);
}

/* I link nel testo sempre sottolineati, mai solo il colore. */
.entry-content a:where(:not(.wp-element-button)),
.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-decoration-line: underline;
}

/* --- Testata: la fascia rosa con il sole, il nome tondo ----------------- */

:root .twt-fascia-servizio .alignwide > :first-child::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.45em;
	border-radius: 0;
	background-color: var(--wp--preset--color--accent-3);
	vertical-align: -0.2em;
	-webkit-mask: var(--twt-sole) center / contain no-repeat;
	mask: var(--twt-sole) center / contain no-repeat;
}

:root .twt-testata--doppia .wp-block-site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

@media (max-width: 781px) {

	/* Sul telefono la fascia è nel colore del locale: il sole prende il
	 * colore della scritta. */
	:root .twt-fascia-servizio:not(.has-background) .alignwide > :first-child::before {
		background-color: currentColor;
	}
}

/* Da computer la pillola del menu, in basso, è nel colore del locale. */
@media (min-width: 1100px) {

	:root .twt-menu--pillola .twt-testata__destra > .wp-block-navigation {
		padding: 0.35rem 0.55rem;
		background-color: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--on-accent);
		box-shadow: var(--twc-shadow-lg);
		--twt-fuoco: var(--wp--preset--color--on-accent);
	}

	:root .twt-menu--pillola .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-weight: 700;
		text-decoration: none;
	}
}

/* --- I bottoni: «caramella» ------------------------------------------------
 * Il principale (theme.json): pillola grassa, bordo di 2 px dello stesso
 * colore, un'ombra lampone. Il secondario: pillola rosa con la scritta
 * scura. L'anello del fuoco sta fuori, staccato dall'ombra.
 * ------------------------------------------------------------------------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.8rem 1.7rem;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 70%, var(--wp--preset--color--base-2));
	border-radius: 999px;
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
	font-size: inherit;
	letter-spacing: 0;
	text-transform: none;
}

:where(.wp-element-button, .wp-block-button__link):focus-visible {
	outline-offset: 4px;
}

@media (hover: hover) {

	.wp-block-button.is-style-outline > .wp-block-button__link:hover {
		border-color: var(--wp--preset--color--accent-1);
		background-color: var(--wp--preset--color--base-2);
		color: var(--wp--preset--color--accent-2);
	}
}

/* Il bottone in una scheda rosa: il secondario resta latte, si vede. */
:root .twt-sezione--schede:not(:nth-of-type(even)) .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
}

/* --- Apertura «Bacheca» -----------------------------------------------------
 * Fondo a pois. A sinistra il nome e i pulsanti; a destra due polaroid
 * attaccate con il nastro (lo stile «Con nastro» della foto), storte e
 * sovrapposte, il bigliettino del giorno e il sole. Sul telefono le due
 * polaroid restano affiancate sotto il nome.
 * ------------------------------------------------------------------------- */

.twt-apertura--bacheca {
	overflow-x: clip;
	background-image: radial-gradient(var(--twt-pois-colore) 2.2px, transparent 2.8px);
	background-size: 18px 18px;
}

.twt-apertura--bacheca .twt-occhiello {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--accent-2);
}

.twt-bacheca {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: start;
	padding: 1.5rem 0.25rem 0.5rem;
}

:root .twt-bacheca > .wp-block-image {
	margin: 0;
	padding: 0.5rem 0.5rem 1.8rem;
	background-color: var(--twt-foto-carta);
	box-shadow: var(--twc-shadow);
}

:root .twt-bacheca > .wp-block-image img {
	border-radius: 0;
}

:root .twt-bacheca > .wp-block-image:nth-of-type(1) {
	z-index: 1;
	grid-column: 1 / 8;
	grid-row: 1;
	rotate: -4deg;
}

:root .twt-bacheca > .wp-block-image:nth-of-type(2) {
	z-index: 2;
	grid-column: 6 / 13;
	grid-row: 1;
	margin-top: 3.5rem;
	rotate: 3deg;
}

/* Il sole disegnato, in alto a destra della bacheca. */
.twt-bacheca::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: -0.25rem;
	right: 0;
	width: 3.5rem;
	height: 3.5rem;
	background-color: var(--wp--preset--color--accent-3);
	-webkit-mask: var(--twt-sole) center / contain no-repeat;
	mask: var(--twt-sole) center / contain no-repeat;
	pointer-events: none;
}

/* Il bigliettino del giorno, con una scintilla. */
:root .twt-bacheca > .twt-bigliettino {
	position: relative;
	z-index: 3;
	grid-column: 2 / 12;
	grid-row: 2;
	justify-self: center;
	margin: 1.25rem 0 0;
	padding: 0.8rem 1.2rem 0.8rem 2.6rem;
	border-radius: var(--wp--custom--raggio--piccolo);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 18%, var(--wp--preset--color--base));
	box-shadow: var(--twc-shadow-sm);
	font-weight: 700;
	line-height: 1.3;
	rotate: -2deg;
}

:root .twt-bacheca > .twt-bigliettino::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.9rem;
	width: 1.1rem;
	height: 1.1rem;
	translate: 0 -50%;
	background-color: var(--wp--preset--color--accent-1);
	-webkit-mask: var(--twt-scintilla) center / contain no-repeat;
	mask: var(--twt-scintilla) center / contain no-repeat;
}

@media (min-width: 782px) {

	.twt-bacheca {
		padding: 2rem 1rem 1rem;
	}

	:root .twt-bacheca > .wp-block-image {
		padding: 0.7rem 0.7rem 2.6rem;
	}

	.twt-bacheca::before {
		top: -1rem;
		right: -0.5rem;
		width: 5rem;
		height: 5rem;
	}
}

@media (max-width: 781px) {

	/* La bacheca sale subito sotto i pulsanti: le polaroid cominciano
	 * prima della piega. */
	.twt-bacheca {
		padding-top: 1rem;
	}

	:root .twt-bacheca > .wp-block-image:nth-of-type(2) {
		margin-top: 2.25rem;
	}

	:root .twt-testata--doppia .twt-testata__destra {
		flex-wrap: nowrap;
	}

	.twt-apertura--bacheca .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.twt-apertura--bacheca .wp-block-button,
	.twt-apertura--bacheca .wp-block-button__link {
		width: 100%;
	}
}

/* Il gesto del Brunch: al passaggio del mouse le polaroid si raddrizzano. */
@media (prefers-reduced-motion: no-preference) {

	:root .twt-bacheca > .wp-block-image,
	:root .wp-block-image.is-style-polaroid,
	:root .twt-tendenza .wp-block-image {
		transition: rotate 240ms ease;
	}
}

@media (hover: hover) {

	:root .twt-bacheca:hover > .wp-block-image,
	:root .twt-scheda-piatto:hover .wp-block-image.is-style-polaroid {
		rotate: 0deg;
	}
}

/* --- Le schede pastello -------------------------------------------------- */

:root .twt-sezione--schede {
	--twt-scheda: var(--wp--preset--color--base-2);
	border: 0;
	border-radius: var(--wp--custom--raggio--grande);
	background-color: var(--twt-scheda);
}

:root .twt-sezione--schede:nth-of-type(even) {
	--twt-scheda: color-mix(in srgb, var(--wp--preset--color--accent-3) 12%, var(--wp--preset--color--base));
}

/* L'indice appeso della carta prende il colore della sua scheda. */
:root .twt-sezione--schede .twt-carta__griglia > .twt-indice {
	background-color: var(--twt-scheda);
}

/* La fascia per prenotare, a pois. */
:root .twt-invito {
	background-image: radial-gradient(var(--twt-pois-colore) 2.2px, transparent 2.8px);
	background-size: 18px 18px;
}

/* Il separatore «Ornamento» è un piccolo sole. */
:root .wp-block-separator.is-style-ornamento::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	margin-inline: auto;
	background-color: var(--wp--preset--color--accent-3);
	-webkit-mask: var(--twt-sole) center / contain no-repeat;
	mask: var(--twt-sole) center / contain no-repeat;
}

/* --- I piatti del momento: polaroid, il prezzo su un adesivo ------------ */

.twt-tendenza .twt-scheda-piatto {
	padding: 0 0.25rem var(--wp--preset--spacing--30);
	border: 0;
	background: none;
}

:root .twt-tendenza .twt-scheda-piatto__immagine {
	margin: 0.75rem 0.4rem 0.5rem;
	overflow: visible;
	border-radius: 0;
}

.twt-tendenza .twt-scheda-piatto__piede strong {
	display: inline-block;
	padding: 0.25rem 0.85rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--on-accent);
	rotate: -3deg;
}

@media (hover: hover) {

	.twt-tendenza .twt-scheda-piatto:hover {
		box-shadow: none;
	}
}

/* --- La carta: una scheda per portata, l'indice a pillole --------------- */

.twt-portata {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--raggio--medio);
	background-color: var(--wp--preset--color--base);
}

.twt-portata + .twt-portata {
	margin-top: var(--wp--preset--spacing--30);
}

.twt-portata > .wp-block-heading:first-child {
	margin-top: 0;
}

:root .twt-indice__dentro a {
	border: 2px solid var(--wp--preset--color--accent-1);
	font-weight: 700;
	color: var(--wp--preset--color--accent-1);
}

@media (hover: hover) {

	:root .twt-indice__dentro a:hover {
		background-color: var(--wp--preset--color--accent-1);
		color: var(--wp--preset--color--on-accent);
	}
}

@media (min-width: 782px) {

	:root .twt-indice__dentro {
		gap: 0.5rem;
	}

	:root .twt-indice__dentro a {
		min-height: 2.75rem;
		padding: 0 1rem;
		border: 2px solid var(--wp--preset--color--accent-1);
		border-radius: 999px;
		background-color: var(--wp--preset--color--base);
	}
}

/* L'adesivo «veg»: il «vegano su richiesta» resta scritto nella descrizione. */
.twt-piatto--veg > :first-child::after {
	content: "veg";
	content: "veg" / "";
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 22%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 0.15em;
	rotate: -4deg;
}

/* --- Il racconto: il collage ---------------------------------------------- */

:root .twt-racconto--collage .wp-block-gallery.is-style-collage {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* --- Gli eventi: post-it con il nastro ------------------------------------ */

:root .twt-postit {
	position: relative;
	height: 100%;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border: 0;
	border-radius: 4px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 18%, var(--wp--preset--color--base));
	box-shadow: var(--twc-shadow);
}

:root .wp-block-column:nth-child(even) > .twt-postit {
	background-color: var(--wp--preset--color--base-2);
}

:root .twt-postit::before {
	content: "";
	position: absolute;
	top: -0.7rem;
	left: 50%;
	width: 5rem;
	height: 1.4rem;
	translate: -50% 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 40%, transparent);
	rotate: -3deg;
	pointer-events: none;
}

:root .twt-postit .twt-legenda {
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
}

@media (min-width: 782px) {

	:root .wp-block-column:nth-child(odd) > .twt-postit {
		rotate: -1.5deg;
	}

	:root .wp-block-column:nth-child(even) > .twt-postit {
		rotate: 1.2deg;
	}
}

/* --- Le recensioni d'esempio: biglietti attaccati con il nastro ---------- */

:root .twt-recensioni .twt-recensione {
	position: relative;
	height: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border: 0;
	border-radius: var(--wp--custom--raggio--piccolo);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--twc-shadow);
}

:root .twt-recensioni .twt-recensione::before {
	content: "";
	position: absolute;
	top: -0.6rem;
	left: 1.5rem;
	width: 4rem;
	height: 1.3rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-3) 40%, transparent);
	rotate: -6deg;
	pointer-events: none;
}

:root .twt-recensioni .twt-recensione p {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
}

:root .twt-recensioni .twt-recensione cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-size: 0.85rem;
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
}

@media (min-width: 782px) {

	:root .twt-recensioni > .wp-block-column:nth-child(odd) .twt-recensione {
		rotate: -1deg;
	}

	:root .twt-recensioni > .wp-block-column:nth-child(even) .twt-recensione {
		rotate: 1.5deg;
	}
}

/* --- Contatti in una scheda rosa ------------------------------------------ */

:root .twt-sezione--schede.twt-sezione-contatti {
	background-color: var(--wp--preset--color--base-2);
}

/* --- Il piede: rosa, a pois, con il sole -------------------------------- */

:root .twt-piede {
	background-image: radial-gradient(var(--twt-pois-colore) 2px, transparent 2.6px);
	background-size: 18px 18px;
}

:root .twt-piede--compatto::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
	margin: 0 auto var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--accent-3);
	-webkit-mask: var(--twt-sole) center / contain no-repeat;
	mask: var(--twt-sole) center / contain no-repeat;
}

.twt-piede .wp-block-site-title {
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* --- Stili di sezione ------------------------------------------------------ */

.is-style-sezione-pois {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--raggio--grande);
	background-image: radial-gradient(var(--twt-pois-colore) 2.2px, transparent 2.8px);
	background-size: 18px 18px;
}

.is-style-sezione-rosa-latte {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--raggio--grande);
}

/* Il mosaico dell'apertura con le colonne pari (1.5.2).
 *
 * La foto di sinistra è alta, le due di destra sono larghe: una sopra
 * l'altra finivano più in alto della grande. Le foto di ogni colonna si
 * dividono l'altezza della colonna più alta e la riempiono ritagliandosi
 * ai bordi: niente si deforma e le colonne finiscono insieme. */
.twt-mosaico > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.twt-mosaico > .wp-block-column > .wp-block-image {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.twt-mosaico > .wp-block-column > .wp-block-image > img {
	flex: 1 1 auto;
	min-height: 0;
	object-fit: cover;
}

/* Il mosaico dell'apertura sul telefono: una colonna sola.
 *
 * Fino a 599 pixel le tre foto stanno una sotto l'altra, larghe quanto
 * lo schermo, ognuna nella sua proporzione: niente si deforma. Da 600
 * pixel resta il mosaico a due colonne. */
@media (max-width: 599px) {

	.twt-mosaico.wp-block-columns.is-not-stacked-on-mobile {
		flex-direction: column;
	}
}

/* =========================================================================
 * Le scritte sopra le foto (copertine)
 *
 * Dietro titolo, testo e pulsanti di una copertina con il velo del tema
 * c'è sempre un velo pieno, solo dove c'è la scritta: con il velo della
 * foto fa almeno l'86 %, e la scritta si legge su qualsiasi foto, dalla
 * più chiara alla più scura. Fuori dalla scritta la foto resta com'era.
 * I colori vengono dalla tavolozza (TWC Colori, se c'è, li corregge
 * quando servono). Restano fuori le copertine con il colore della
 * scritta scelto a mano e quelle con un velo di un altro colore: lì
 * decide chi le ha fatte.
 * ====================================================================== */

:root {
	--twt-velo: var(--wp--custom--velo, var(--wp--preset--color--contrast));
	--twt-su-velo: var(--wp--custom--su-velo, var(--wp--preset--color--base));
	--twt-velo-fondo: var(--wp--preset--color--base);
	--twt-su-velo-fondo: var(--wp--preset--color--contrast);
}

/* La scritta, il titoletto, i link e il pulsante secondario prendono il
 * colore che stacca dal velo; anche l'anello della tastiera. */
:root .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)) {
	--twt-dietro: var(--twt-velo);
	color: var(--twt-su-velo);
	--twt-fuoco: var(--twt-su-velo);
}

:root .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color) {
	--twt-dietro: var(--twt-velo-fondo);
	color: var(--twt-su-velo-fondo);
	--twt-fuoco: var(--twt-su-velo-fondo);
}

:root :is(.wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)), .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color)) :is(.twt-occhiello, a:where(:not(.wp-element-button))):not(.has-text-color) {
	color: inherit;
}

:root :is(.wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)), .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color)) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	border-color: currentColor;
	color: inherit;
}

/* Al passaggio del mouse e con la tastiera il secondario si sottolinea e
 * resta senza fondo: un fondo del colore della scritta, anche leggero,
 * abbasserebbe il suo contrasto (vince anche sulle regole dei temi). */
:root :is(.wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)), .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color)) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background):is(:hover, :focus) {
	background-color: transparent;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Il velo della foto, nel colore del velo (l'opacità resta quella scelta
 * nell'editor). */
:root :is(.wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)), .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color)) > .wp-block-cover__background {
	background-image: linear-gradient(var(--twt-dietro), var(--twt-dietro));
}

/* Di sera: la foto della sala si vede, più chiara in alto. Il velo pieno
 * (sopra) è graduato da una maschera: fitto in basso (90 %), più leggero
 * in alto (55 %). La maschera guarda solo quanto è coperto, non il colore
 * (qui quello della scritta). */
:root .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)).twt-apertura--notturna > .wp-block-cover__background {
	opacity: 1;
	-webkit-mask-image: linear-gradient(to top, color-mix(in srgb, currentColor 90%, transparent) 50%, color-mix(in srgb, currentColor 55%, transparent));
	mask-image: linear-gradient(to top, color-mix(in srgb, currentColor 90%, transparent) 50%, color-mix(in srgb, currentColor 55%, transparent));
}

/* Il velo dietro la scritta: pieno su tutto il contenitore del testo (e
 * 0,75 rem sopra e sotto), sfumato solo fuori, in 2,5 rem (la maschera
 * guarda solo quanto è coperto: il colore della scritta, pieno, vale
 * «tutto»). Con il velo della foto sotto il 50 % è più fitto, perché
 * insieme facciano sempre almeno l'86 %. */
:root :is(.wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)), .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color)) > .wp-block-cover__inner-container {
	isolation: isolate;
	--twt-sfuma: 2.5rem;
}

:root :is(.wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)), .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color)):has(> .wp-block-cover__background:is(.has-background-dim-0, .has-background-dim-10, .has-background-dim-20, .has-background-dim-30, .has-background-dim-40)) {
	--twt-dietro-quanto: 86%;
}

:root :is(.wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)), .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color)) > .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: calc(-1 * (var(--twt-sfuma) + 0.75rem)) calc(-1 * var(--twt-sfuma));
	background: color-mix(in srgb, var(--twt-dietro) var(--twt-dietro-quanto, 72%), transparent);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent, currentColor var(--twt-sfuma), currentColor calc(100% - var(--twt-sfuma)), transparent), linear-gradient(transparent, currentColor var(--twt-sfuma), currentColor calc(100% - var(--twt-sfuma)), transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, currentColor var(--twt-sfuma), currentColor calc(100% - var(--twt-sfuma)), transparent), linear-gradient(transparent, currentColor var(--twt-sfuma), currentColor calc(100% - var(--twt-sfuma)), transparent);
	mask-composite: intersect;
}

/* Sul computer, nelle copertine centrate con i blocchi interni larghi
 * quanto il contenuto del tema, il velo è largo quanto la colonna del
 * testo (più la sfumatura): un faro morbido, non una fascia. Resta largo
 * quanto la copertina, come sul telefono, se i blocchi interni non usano
 * la larghezza del contenuto (layout «flow»), se la copertina ne ha una
 * sua (WordPress le dà la classe wp-container-…) o se dentro c'è un
 * blocco largo o allineato a un lato: lì il testo può uscire dalla
 * colonna. */
@media (min-width: 782px) {

	:root :is(.wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso):is(.twt-apertura--copertina, .twt-apertura--sala, .twt-apertura--notturna, :has(> .wp-block-cover__background.has-contrast-background-color)), .wp-block-cover:not(.has-text-color, .is-style-riquadro, .is-style-velo-basso, .twt-apertura--notturna, .twt-apertura--copertina, .twt-apertura--sala):has(> .wp-block-cover__background.has-base-background-color)):not(.has-custom-content-position) > .wp-block-cover__inner-container.is-layout-constrained:not([class*="wp-container-"]):not(:has(> .alignwide, > .alignfull, > .alignleft, > .alignright))::before {
		inset-inline: max(calc(-1 * var(--twt-sfuma)), calc((100% - var(--wp--style--global--content-size, 100%)) / 2 - 2 * var(--twt-sfuma)));
	}
}