/**
 * TWC Carta — la carta come la vede il cliente.
 *
 * Ogni sezione e' una tabella a righe alterne. I due fondi li sceglie il
 * ristoratore (Carta > Aspetto); il colore del testo di ogni riga lo
 * calcola il plugin, cosi' resta leggibile qualunque fondo venga scelto.
 * Senza una scelta, le righe prendono i due fondi del tema.
 *
 * Mobile first per le regole di base; il telefono ha anche una regola
 * dedicata per le sezioni con piu' prezzi, che li porta sotto il nome.
 */

/*
 * Ripiego a specificita' zero. Qui SOLO variabili: una qualunque altra
 * dichiarazione su :root si applicherebbe a tutto il sito.
 *
 * L'ordine in cui si cercano i colori:
 * 1. il ponte del tema (--twc-*, in twc-ponte.css dei temi TWT): vince,
 *    perche' sta su :root e questo blocco ha specificita' zero;
 * 2. i colori del tema con i nomi di WordPress (base, base-2, contrast...):
 *    gli stessi nomi in tutti i temi TWT, e in molti temi a blocchi;
 * 3. valori fissi, solo se il tema non ha nemmeno quelli.
 */
:where(:root) {
	--twc-bg: var( --wp--preset--color--base, #fbf8f2 );
	--twc-surface: var( --wp--preset--color--base, #fbf8f2 );
	--twc-surface-alt: var( --wp--preset--color--base-2, #f2ece1 );
	--twc-ink: var( --wp--preset--color--contrast, #1d1b19 );
	--twc-muted: var( --wp--preset--color--contrast-2, rgba( 29, 27, 25, 0.66 ) );
	--twc-line: var( --wp--preset--color--border, rgba( 29, 27, 25, 0.55 ) );
	--twc-line-soft: rgba( 29, 27, 25, 0.14 );
	--twc-accent: var( --wp--preset--color--accent-1, #8a4b2a );
	--twc-radius: 14px;
	--twc-radius-sm: 7px;
	--twc-tap: 44px;
}

/*
 * Il riquadro della carta.
 *
 * Mai piu' largo di una colonna che si legge: su una pagina a tutta
 * larghezza il prezzo finirebbe a un metro e mezzo dal nome, che e'
 * esattamente il problema che le righe colorate devono risolvere.
 */
.twc-carta {
	--twc-carta-riga-1: var( --twc-surface );
	--twc-carta-riga-2: var( --twc-surface-alt );
	--twc-carta-testo-1: var( --twc-ink );
	--twc-carta-testo-2: var( --twc-ink );
	--twc-carta-tenue-1: var( --twc-muted );
	--twc-carta-tenue-2: var( --twc-muted );
	--twc-carta-col: 5.75rem;

	/* Fuori dalle tabelle - titolo, data, introduzione, indice, note - il
	   testo prende il colore del punto in cui la carta sta. Dentro una
	   sezione scura del tema le variabili restano quelle chiare: un colore
	   fisso qui scriverebbe scuro su scuro. Tenue e fili derivano dal
	   colore del testo, quindi seguono anche loro. */
	--twc-carta-attenuato: color-mix( in srgb, currentColor 72%, transparent );
	--twc-carta-filo: color-mix( in srgb, currentColor 22%, transparent );

	container-type: inline-size;
	max-width: 46rem;
	margin-inline: auto;
	font-family: var( --wp--preset--font-family--body, inherit );
	overflow-wrap: break-word;
}

.twc-carta *,
.twc-carta *::before,
.twc-carta *::after {
	box-sizing: border-box;
}

/* Il ristoratore ha chiesto il blocco largo: la carta si allarga e,
   quando c'e' posto, le sezioni vanno su due colonne come su un menu
   stampato. Ogni riga resta comunque stretta. */
.alignwide > .twc-carta,
.alignfull > .twc-carta {
	max-width: 82rem;
}

@container ( min-width: 60rem ) {
	.twc-carta__corpo {
		columns: 2;
		column-gap: clamp( 2rem, 4cqi, 4rem );
	}

	.twc-carta__corpo .twc-carta__sezione {
		break-inside: avoid;
	}
}

/* Il testo nascosto per gli occhi, non per i lettori di schermo. */
.twc-carta__nascosto,
.twc-carta__riga--muta {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* --- Testa ------------------------------------------------------------ */

.twc-carta__testa {
	margin-bottom: clamp( 1.25rem, 3vw, 2rem );
	text-align: center;
}

.twc-carta__titolo {
	margin: 0 0 0.3em;
	font-family: var( --wp--preset--font-family--heading, Georgia, "Times New Roman", serif );
	font-size: clamp( 1.75rem, 1.35rem + 1.8vw, 2.6rem );
	font-weight: 400;
	line-height: 1.15;
}

.twc-carta__data {
	margin: 0 0 0.6em;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}

/* "martedi' 6 ottobre" con la maiuscola, senza toccare il resto. */
.twc-carta__data time {
	display: inline-block;
}

.twc-carta__data time::first-letter {
	text-transform: uppercase;
}

.twc-carta__intro {
	max-width: 36rem;
	margin: 0 auto 0.6em;
}

.twc-carta__valuta {
	margin: 0;
	font-size: 0.85rem;
	color: var( --twc-carta-attenuato );
}

/* --- Indice delle sezioni ------------------------------------------- */

.twc-carta__indice {
	margin: 0 0 clamp( 1.25rem, 3vw, 2rem );
}

.twc-carta__indice ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.twc-carta__indice a {
	display: inline-flex;
	align-items: center;
	min-height: var( --twc-tap );
	padding: 0 1rem;
	border: 1px solid var( --twc-carta-filo );
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.twc-carta__indice a:hover {
	border-color: currentColor;
}

.twc-carta__indice a:focus-visible {
	outline: 2px solid var( --twc-accent );
	outline-offset: 2px;
}

/* --- Sezioni ---------------------------------------------------------- */

.twc-carta__sezione {
	margin: 0 0 clamp( 1.75rem, 4vw, 2.75rem );
	/* L'indice porta qui: il titolo non deve finire sotto una testata fissa. */
	scroll-margin-top: 6rem;
}

.twc-carta__sezione-titolo {
	margin: 0 0 0.35em;
	font-family: var( --wp--preset--font-family--heading, Georgia, "Times New Roman", serif );
	font-size: clamp( 1.3rem, 1.15rem + 0.7vw, 1.65rem );
	font-weight: 400;
	line-height: 1.2;
}

.twc-carta__sezione-descrizione {
	margin: 0 0 0.75em;
	color: var( --twc-carta-attenuato );
	font-size: 0.95rem;
}

/* --- La tabella ------------------------------------------------------- */

.twc-carta__tabella {
	position: relative;
	overflow: hidden;
	border: 1px solid var( --twc-line-soft );
	border-radius: var( --twc-radius-sm );
	background: var( --twc-surface );
	/* La tabella si porta fondo e testo: e' un foglio appoggiato sulla
	   pagina, leggibile anche dentro una sezione scura. */
	color: var( --twc-ink );
}

/*
 * Ogni riga e' una griglia con le stesse colonne: il nome si prende lo
 * spazio che resta, ogni prezzo una colonna di larghezza fissa. Fissa e
 * non "quanto serve", perche' ogni riga e' una griglia a se': con
 * larghezze calcolate riga per riga i prezzi non sarebbero incolonnati.
 */
.twc-carta__riga {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) repeat( var( --twc-carta-colonne, 1 ), var( --twc-carta-col ) );
	column-gap: clamp( 0.5rem, 2vw, 1.25rem );
	align-items: baseline;
	padding: 0.8rem clamp( 0.85rem, 2.5vw, 1.25rem );
}

.twc-carta__riga--1 {
	--twc-carta-tenue: var( --twc-carta-tenue-1 );
	background: var( --twc-carta-riga-1 );
	color: var( --twc-carta-testo-1 );
}

.twc-carta__riga--2 {
	--twc-carta-tenue: var( --twc-carta-tenue-2 );
	background: var( --twc-carta-riga-2 );
	color: var( --twc-carta-testo-2 );
}

.twc-carta__riga--intestazione {
	padding-block: 0.55rem;
	border-bottom: 1px solid var( --twc-line-soft );
	color: var( --twc-muted );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
}

.twc-carta__voce {
	min-width: 0;
}

.twc-carta__nome {
	font-weight: 600;
	line-height: 1.35;
}

/* Le righe piccole sotto il nome hanno un colore piu' tenue, calcolato
   per ogni fondo: mai una semplice trasparenza, che su un fondo di tono
   medio porterebbe il testo sotto la soglia di leggibilita'. */
.twc-carta__dettaglio,
.twc-carta__descrizione,
.twc-carta__nota {
	display: block;
	margin-top: 0.2rem;
	color: var( --twc-carta-tenue, var( --twc-muted ) );
	font-size: 0.9rem;
	line-height: 1.45;
}

.twc-carta__dettaglio {
	font-size: 0.82rem;
	letter-spacing: 0.02em;
}

.twc-carta__nota {
	font-size: 0.78rem;
}

.twc-carta__segni {
	display: inline;
}

.twc-carta__segno {
	display: inline-block;
	margin: 0 0.15rem;
	padding: 0.05em 0.55em;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.5;
	color: var( --twc-carta-tenue, var( --twc-muted ) );
	white-space: nowrap;
	vertical-align: 0.12em;
}

.twc-carta__prezzo {
	text-align: right;
	white-space: nowrap;
}

.twc-carta__riga:not( .twc-carta__riga--intestazione ) .twc-carta__prezzo {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* "s.q.", "a peso": testo e non cifra, puo' andare a capo. */
.twc-carta__prezzo--testo {
	white-space: normal;
	font-size: 0.85rem;
}

.twc-carta__prezzo--vuoto {
	opacity: 0.45;
}

/* L'etichetta della colonna accanto al prezzo serve solo sul telefono. */
.twc-carta__colonna {
	display: none;
}

/* Esaurito: si vede ancora, ma si capisce subito che oggi non c'e'. */
.twc-carta__riga--esaurita .twc-carta__nome,
.twc-carta__riga--esaurita .twc-carta__cifra {
	color: var( --twc-carta-tenue, var( --twc-muted ) );
}

.twc-carta__riga--esaurita .twc-carta__cifra {
	text-decoration: line-through;
}

/* --- Coda e avvisi ---------------------------------------------------- */

.twc-carta__nota-finale {
	margin: clamp( 1.25rem, 3vw, 2rem ) auto 0;
	max-width: 40rem;
	color: var( --twc-carta-attenuato );
	font-size: 0.85rem;
	text-align: center;
}

.twc-carta__avviso {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border: 1px dashed var( --twc-carta-filo );
	border-radius: var( --twc-radius-sm );
	color: var( --twc-carta-attenuato );
	text-align: center;
}

/* --- Telefono ----------------------------------------------------------
 * Con piu' prezzi il nome si prende tutta la riga e i prezzi vanno sotto,
 * ognuno con la sua etichetta. Con un prezzo solo resta tutto su una riga:
 * nome a sinistra, prezzo a destra, come su una carta di carta.
 * ------------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.twc-carta {
		--twc-carta-col: 4.75rem;
	}

	.twc-carta__tabella:not( [data-colonne="1"] ) .twc-carta__riga {
		grid-template-columns: repeat( var( --twc-carta-colonne, 1 ), minmax( 0, 1fr ) );
		row-gap: 0.4rem;
	}

	.twc-carta__tabella:not( [data-colonne="1"] ) .twc-carta__voce {
		grid-column: 1 / -1;
	}

	.twc-carta__tabella:not( [data-colonne="1"] ) .twc-carta__prezzo {
		text-align: left;
	}

	.twc-carta__tabella:not( [data-colonne="1"] ) .twc-carta__colonna {
		display: block;
		font-size: 0.68rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		line-height: 1.3;
		text-transform: uppercase;
		color: var( --twc-carta-tenue, var( --twc-muted ) );
	}

	/* L'intestazione resta per i lettori di schermo; per gli occhi c'e'
	   l'etichetta su ogni prezzo. */
	.twc-carta__tabella:not( [data-colonne="1"] ) .twc-carta__riga--intestazione {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}

	.twc-carta__indice ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 0.25rem;
		scrollbar-width: thin;
	}
}

/* --- Stampa ------------------------------------------------------------
 * Le righe colorate escono anche su carta: senza queste due righe il
 * browser le toglie per risparmiare inchiostro, e con loro lo scopo.
 * ------------------------------------------------------------------------- */

@media print {
	.twc-carta__riga {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		break-inside: avoid;
	}

	.twc-carta__sezione-titolo {
		break-after: avoid;
	}

	.twc-carta__indice {
		display: none;
	}
}