/*
Theme Name: TWT Gourmet Atelier
Theme URI: https://topolovac-webcraft.ch/temi/twt-gourmet-atelier
Author: Topolovac WebCraft
Author URI: https://topolovac-webcraft.ch
Description: Menu sempre a scomparsa, apertura a mosaico di foto, carta a schede. La pagina è tutta immagine: apertura a mosaico di tre fotografie, menu a scomparsa che lascia lo schermo libero, carta a schede. Pulsanti pieni e molto tondi.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twt-gourmet-atelier
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;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

@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;
}

.twt-testata--fissa {
	position: sticky;
	top: 0;
	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 ------------------------------------------------------ */

.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);
}

/*
 * 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 4.5rem 0.5rem 0.75rem; /* a destra: pulsanti flottanti */
		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);
	}

	/* Il contenuto non deve finire sotto la barra. */
	body {
		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 {
		min-width: 40px;
		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. */
.twt-piede .wp-block-navigation .wp-block-navigation__container {
	gap: 0;
}

.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;
	}
}

/* =========================================================================
 * La forma di questo modello: TWT Gourmet Atelier
 *
 * Menu overlay-sempre, pulsanti pieno, carta schede,
 * galleria fascia, contatti scheda, piede compatto.
 * ====================================================================== */

/* Menu sempre a scomparsa.
 *
 * In testata restano solo il nome e il pulsante: il menu si apre a tutto
 * schermo a ogni larghezza. Il pulsante che lo apre deve restare grande
 * come un dito anche sul computer. */
.twt-testata--overlay-sempre .wp-block-navigation__responsive-container-open {
	/* Il pulsante lo mostrerebbe gia' WordPress, ma solo con la sua regola
	 * su .always-shown: scritta anche qui, la testata non dipende da come
	 * si chiama una classe di WordPress. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--twc-tap, 44px);
	min-height: var(--twc-tap, 44px);
}

@media (min-width: 1100px) {

	.twt-testata--overlay-sempre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0.75rem;
		font-size: var(--wp--preset--font-size--large);
	}
}


/* Carta a schede.
 *
 * Sul telefono le colonne di WordPress si impilano da sole; qui si tiene
 * solo l'altezza uguale fra schede affiancate, così i prezzi stanno sulla
 * stessa riga. */
@media (min-width: 782px) {

	.twt-carta--schede .wp-block-columns {
		align-items: stretch;
	}

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

	.twt-carta--schede .twt-scheda-piatto {
		flex: 1 1 auto;
	}
}


/* Galleria a fascia.
 *
 * Le foto scorrono di lato, con l'aggancio a ogni fotografia. Sul
 * telefono si scorre con il dito, sul computer con la barra o con il
 * trackpad. Tre selettori per vincere sul CSS di WordPress senza
 * ricorrere a !important. */
.twt-fascia.wp-block-gallery.has-nested-images {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 1rem;
	padding-bottom: 0.75rem;
}

.twt-fascia.wp-block-gallery.has-nested-images > figure {
	flex: 0 0 min(82%, 26rem);
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {

	.twt-fascia.wp-block-gallery.has-nested-images {
		scroll-behavior: auto;
	}
}


/* Contatti in una scheda sola.
 *
 * Una colonna stretta al centro: sul telefono è già così, sul computer si
 * tiene stretta invece di allargarsi per tutta la pagina. */
.twt-scheda-contatti {
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--wp--custom--raggio--grande);
}


/* 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;
}