/*
Theme Name: Kebab
Theme URI: https://pievefastfoodkebab.it
Author: Pieve Fast Food Kebab
Description: Tema su misura per Pieve Fast Food Kebab (Pieve di Soligo, TV). One-page mobile-first bianco e brace, negli stessi colori del locale vero: menu con prezzi gestibile dalla bacheca, stato aperto/chiuso in tempo reale, click-to-call, WhatsApp, galleria, recensioni e dati strutturati per Google. Foto in WebP responsive, font self-hosted, zero dipendenze JavaScript.
Version: 3.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kebab
Tags: restaurant, one-column, custom-menu, custom-logo, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. Font self-hosted
   Serviti dal dominio del sito: nessuna richiesta a terzi, nessun dato
   dell'utente verso Google, primo render più rapido.
   ========================================================================== */

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/oswald-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/oswald-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/instrument-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/instrument-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/instrument-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Martian Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/martianmono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Martian Mono';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/martianmono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design token — bianco, arancio e brace
   Gli stessi colori dell'insegna e delle pareti del locale: fondo chiaro,
   gradiente giallo-arancio-rosso del tabellone menu, fascia arancio-rosso
   della parete. Le variabili accese (--orange, --gold, --verde) restano per
   sfondi, bottoni e badge dove sopra c'è testo scuro; le varianti "-ink" sono
   le stesse tinte scurite per quando il colore serve come testo piccolo sul
   fondo chiaro, dove altrimenti il contrasto non basterebbe.
   ========================================================================== */

:root {
	/* Superfici chiare: 0 il fondo pagina, 1 le card bianche, 2 la tinta
	   d'accento fra una sezione e l'altra, come la carta del menu stampato. */
	--surface-0: #fffaf3;
	--surface-1: #ffffff;
	--surface-2: #fff2dd;
	--surface-3: #ffe3b8;

	/* Inchiostro caldo quasi nero, per testo e per il testo scuro sopra i
	   bottoni accesi. */
	--brown-900: #1a0f06;
	--brown-850: #241708;
	--brown-800: #2e1e0d;

	--orange: #ff5a1f;
	--orange-2: #ff9a5c;
	--orange-dark: #c56a17;
	--orange-ink: #c53d10;
	--rosso: #d43a1a;
	--neon: #ff3e00;
	--gold: #ffb800;
	--gold-ink: #a35d00;
	--verde: #83c96f;
	--verde-ink: #2f7a3d;

	--cream: #1a0f06;

	/*
	 * Tre livelli di testo. Il più tenue si ferma a 0.6 di alfa: sotto questo
	 * valore il contrasto sul fondo chiaro scende oltre il 4.5:1 richiesto
	 * dalle WCAG AA per il testo normale.
	 */
	--c-1: rgba(26, 15, 6, 0.92);
	--c-2: rgba(26, 15, 6, 0.72);
	--c-3: rgba(26, 15, 6, 0.6);
	--c-line: rgba(26, 15, 6, 0.14);
	--c-line-2: rgba(26, 15, 6, 0.08);
	--gold-line: rgba(200, 130, 0, 0.4);

	--grad-orange: linear-gradient(96deg, var(--orange-dark), var(--orange) 55%, var(--orange-2));
	--grad-signage: linear-gradient(100deg, #ffd400 0%, #ff8a00 45%, #e8341a 100%);

	--f-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
	--f-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
	--f-mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', monospace;

	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
	--fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--fs-2xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
	--fs-hero: clamp(2.375rem, 1.1rem + 6.4vw, 5rem);

	--r-sm: 0.375rem;
	--r: 0.625rem;
	--r-lg: 0.875rem;
	--r-xl: 1.125rem;
	--r-pill: 999px;

	--wrap: 80rem;
	--pad: clamp(1.125rem, 4vw, 2.5rem);
	--section-y: clamp(3.5rem, 7vw, 6.5rem);

	--sh-lift: 0 1.25rem 3rem -1.25rem rgba(26, 15, 6, 0.22);
	--sh-orange: 0 0.625rem 1.75rem -0.625rem rgba(255, 90, 31, 0.45);

	--ease: cubic-bezier(0.32, 0.72, 0.24, 1);
	--head-h: 4.75rem;
}

/* ==========================================================================
   3. Reset e base
   ========================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--surface-0);
}

/* Tocco di colore diffuso: tinte tenui in tre punti della pagina, la stessa
   luce calda delle pareti del locale invece di un bianco piatto. */
body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	color: var(--c-1);
	background-color: var(--surface-0);
	background-image:
		radial-gradient(52% 38% at 8% 0%, rgba(255, 90, 31, 0.07), transparent 62%),
		radial-gradient(46% 34% at 100% 22%, rgba(232, 52, 26, 0.06), transparent 65%),
		radial-gradient(60% 42% at 50% 100%, rgba(255, 184, 0, 0.06), transparent 70%);
	background-repeat: no-repeat;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
}

body.nav-is-open {
	overflow: hidden;
}

img,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration-color: rgba(255, 90, 31, 0.55);
	text-underline-offset: 0.22em;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

address {
	font-style: normal;
}

/* Il display condensato è sempre maiuscolo e spaziato, come nel progetto. */
h1,
h2,
h3,
h4 {
	font-family: var(--f-display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

::selection {
	color: #fff;
	background: var(--orange-ink);
}

:focus-visible {
	border-radius: 0.25rem;
	outline: 2px solid var(--orange-ink);
	outline-offset: 3px;
}

.ico {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

[id] {
	scroll-margin-top: calc(var(--head-h) + 1.5rem);
}

/* ==========================================================================
   4. Utility, texture e primitive
   ========================================================================== */

.u-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.u-muted {
	color: var(--c-3);
}

.u-open {
	color: var(--verde-ink);
}

.skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	color: var(--brown-900);
	background: var(--orange);
	border-radius: var(--r-pill);
	transform: translateY(-160%);
	transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
	transform: translateY(0);
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.wrap--narrow {
	max-width: 46rem;
}

.section {
	padding-block: var(--section-y);
}

#come-ordinare {
	background-color: var(--surface-0);
}

.site-main > *:first-child {
	padding-top: calc(var(--head-h) + clamp(2.5rem, 5vw, 4.5rem));
}

.grain {
	position: fixed;
	inset: 0;
	z-index: 900;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Intestazioni di sezione centrate ---------------------------------- */

.shead {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.shead__title {
	font-size: var(--fs-2xl);
	letter-spacing: 0.02em;
	color: var(--cream);
}

.shead__title em {
	font-style: normal;
	color: var(--orange-ink);
}

/* Filetto con losanga centrale, come i separatori del progetto. */
.shead__rule {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	justify-content: center;
	margin-top: 0.875rem;
}

.shead__rule::before,
.shead__rule::after {
	width: clamp(2rem, 8vw, 4.5rem);
	height: 1px;
	content: '';
	background: linear-gradient(90deg, transparent, var(--gold-line));
}

.shead__rule::after {
	background: linear-gradient(90deg, var(--gold-line), transparent);
}

.shead__rule i {
	width: 0.4375rem;
	height: 0.4375rem;
	background: var(--orange);
	rotate: 45deg;
}

.shead__text {
	max-width: 40rem;
	margin: 1rem auto 0;
	color: var(--c-2);
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--orange-ink);
	text-transform: uppercase;
}

.shead .eyebrow {
	justify-content: center;
	margin-bottom: 0.75rem;
}

.eyebrow__tick {
	width: 1.75rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.section-title {
	margin-top: 0.75rem;
	font-size: var(--fs-2xl);
	letter-spacing: 0.02em;
	color: var(--cream);
}

.prose {
	font-size: var(--fs-lg);
	color: var(--c-2);
}

.prose > * + * {
	margin-top: 1em;
}

.prose a {
	color: var(--orange-ink);
}

.link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--c-2);
	text-decoration: none;
	transition: color 0.18s var(--ease);
}

.link:hover {
	color: var(--orange-ink);
}

.link .ico {
	width: 1.05em;
	height: 1.05em;
	color: var(--orange-ink);
}

/* --- Pulsanti ---------------------------------------------------------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8125rem 1.375rem;
	font-family: var(--f-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	/*
	 * Testo scuro sull'arancione, non bianco: il bianco su questo tono resta
	 * sotto soglia, mentre il marrone scuro arriva a 7.1:1. Resta l'arancione
	 * pieno del progetto e il testo diventa leggibile davvero.
	 */
	color: var(--brown-900);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--grad-orange);
	background-size: 170% 100%;
	background-position: 0 0;
	border-radius: var(--r-sm);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--sh-orange);
	transition: background-position 0.5s var(--ease), transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}

.btn:hover {
	background-position: 100% 0;
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0.875rem 2.25rem -0.5rem rgba(255, 90, 31, 0.55);
}

.btn:active {
	transform: translateY(0);
}

.btn--lg {
	padding: 1rem 1.75rem;
	font-size: var(--fs-base);
}

.btn--sm {
	padding: 0.625rem 1rem;
	font-size: var(--fs-xs);
}

.btn--block {
	width: 100%;
}

/*
 * Variante per il "Chiama ora": tono più rosso e scuro, dove il testo bianco
 * raggiunge 4.75:1 e la coppia di pulsanti resta ben distinguibile anche sul
 * fondo chiaro.
 */
.btn--call {
	color: #fff;
	background: linear-gradient(96deg, #9c3316, var(--rosso) 60%, #c4451f);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0.625rem 1.75rem -0.625rem rgba(212, 58, 26, 0.45);
}

.btn--call:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0.875rem 2.25rem -0.5rem rgba(212, 58, 26, 0.55);
}

/*
 * Solo il CTA principale della hero pulsa: un bagliore acceso e spento, il
 * resto dei pulsanti "Chiama ora" del sito resta fermo per non stancare
 * l'occhio in una pagina che si scrolla a lungo.
 */
.hero__cta .btn--call {
	animation: cta-pulse 2.6s ease-in-out infinite;
}

.hero__cta .btn--call:hover {
	animation-play-state: paused;
}

@keyframes cta-pulse {
	0%,
	100% {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0.625rem 1.75rem -0.625rem rgba(255, 62, 0, 0.4), 0 0 0 0 rgba(255, 62, 0, 0.35);
	}

	50% {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0.625rem 1.75rem -0.625rem rgba(255, 62, 0, 0.4), 0 0 1.5rem 0.375rem rgba(255, 62, 0, 0.22);
	}
}

.btn--ghost {
	color: var(--c-1);
	background: rgba(26, 15, 6, 0.03);
	box-shadow: inset 0 0 0 1.5px var(--c-line);
}

.btn--ghost:hover {
	color: var(--orange-ink);
	background: rgba(255, 90, 31, 0.08);
	box-shadow: inset 0 0 0 1.5px rgba(255, 90, 31, 0.5);
}

/* ==========================================================================
   5. Barra superiore, header e navigazione
   ========================================================================== */

.topbar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100;
}

/* Rosso scuro: il bianco ci arriva a 4.96:1. */
.alert {
	color: #fff;
	background: linear-gradient(96deg, #9e3417, #b8511a);
}

.alert__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding-block: 0.4375rem;
	font-size: var(--fs-xs);
	font-weight: 600;
	text-align: center;
}

.alert .ico {
	width: 1rem;
	height: 1rem;
}

/*
 * Header di vetro chiaro: sempre semi-trasparente e sfocato, non solo allo
 * scroll. L'opacità cresce leggermente durante lo scroll per leggersi meglio
 * sopra contenuto vario, ma l'effetto "vetro fluttuante" resta attivo dal
 * primo istante.
 */
.site-head {
	background-color: rgba(255, 250, 243, 0.72);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 60%);
	border-bottom: 1px solid var(--c-line-2);
	backdrop-filter: blur(1rem) saturate(1.4);
	-webkit-backdrop-filter: blur(1rem) saturate(1.4);
	transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.topbar.is-scrolled .site-head {
	background-color: rgba(255, 250, 243, 0.94);
	border-bottom-color: var(--gold-line);
	box-shadow: 0 0.75rem 2rem -0.75rem rgba(26, 15, 6, 0.18);
}

.site-head__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	min-height: 4.75rem;
	transition: min-height 0.3s var(--ease);
}

.topbar.is-scrolled .site-head__inner {
	min-height: 4.125rem;
}

/* --- Emblema circolare ------------------------------------------------- */

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-right: auto;
	text-decoration: none;
}

/*
 * Il marchio è un tondo con doppio anello, disegnato in CSS: nessun file
 * immagine, resta nitido a ogni densità di schermo e si può sostituire con
 * un logo vero dal Personalizza.
 */
.emblem {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	color: #fff;
	background: var(--grad-signage);
	border: 2px solid var(--gold);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0.375rem 1rem -0.375rem rgba(26, 15, 6, 0.35);
	transition: transform 0.3s var(--ease);
}

.brand:hover .emblem {
	transform: rotate(-6deg);
}

/* Anello interno sottile. */
.emblem::before {
	position: absolute;
	inset: 0.1875rem;
	content: '';
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.emblem .ico {
	width: 1.5rem;
	height: 1.5rem;
	color: #fff;
	stroke-width: 1.7;
}

.emblem__top,
.emblem__bottom {
	position: absolute;
	font-family: var(--f-display);
	font-size: 0.4375rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #fff;
	text-transform: uppercase;
}

.emblem__top {
	top: 0.4375rem;
}

.emblem__bottom {
	bottom: 0.4375rem;
}

.topbar.is-scrolled .emblem {
	width: 2.875rem;
	height: 2.875rem;
}

.brand__text {
	display: none;
	flex-direction: column;
	line-height: 1.05;
}

.brand__top {
	font-family: var(--f-display);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--cream);
	text-transform: uppercase;
}

.brand__bottom {
	font-family: var(--f-mono);
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--orange-ink);
	text-transform: uppercase;
}

.brand img,
.custom-logo {
	width: auto;
	max-height: 3.25rem;
}

/* --- Navigazione desktop ---------------------------------------------- */

.nav {
	display: none;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 1vw, 0.75rem);
}

.nav__list a {
	position: relative;
	display: block;
	padding: 0.4375rem 0.25rem;
	font-family: var(--f-display);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--c-2);
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.18s var(--ease);
}

.nav__list a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	content: '';
	background: var(--orange-ink);
	transition: width 0.25s var(--ease);
}

.nav__list a:hover,
.nav__list .current-menu-item > a {
	color: var(--cream);
}

.nav__list a:hover::after,
.nav__list .current-menu-item > a::after,
.nav__list a[aria-current]::after {
	width: 100%;
}

.site-head__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Su mobile restano solo il logo e il burger: "Ordina ora" e il telefono si
   trovano già nel pannello di navigazione e nella barra dock in basso. */
.header-cta {
	display: none;
}

/* --- Badge aperto / chiuso -------------------------------------------- */

.status {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	font-family: var(--f-mono);
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--c-2);
	background: rgba(26, 15, 6, 0.05);
	border-radius: var(--r-sm);
	box-shadow: inset 0 0 0 1px var(--c-line);
}

.status__dot {
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--c-3);
	border-radius: 50%;
	flex: none;
}

.status.is-open .status__dot {
	background: var(--verde);
}

.status.is-open .status__dot::after {
	position: absolute;
	inset: 0;
	content: '';
	background: var(--verde);
	border-radius: 50%;
	animation: pulse 2.4s ease-out infinite;
}

.status.is-soon .status__dot,
.status.is-soon .status__dot::after {
	background: var(--gold);
}

@keyframes pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}
	70%,
	100% {
		opacity: 0;
		transform: scale(3);
	}
}

/* --- Hamburger -------------------------------------------------------- */

.burger {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--cream);
	background: rgba(26, 15, 6, 0.05);
	border-radius: var(--r-sm);
	box-shadow: inset 0 0 0 1px var(--c-line);
}

.burger__ico {
	display: grid;
	place-items: center;
}

.burger__ico .ico {
	grid-area: 1 / 1;
	width: 1.375rem;
	height: 1.375rem;
	transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}

.burger__close {
	opacity: 0;
	transform: rotate(-90deg);
}

.burger[aria-expanded='true'] .burger__open {
	opacity: 0;
	transform: rotate(90deg);
}

.burger[aria-expanded='true'] .burger__close {
	opacity: 1;
	transform: rotate(0);
}

/* --- Pannello mobile -------------------------------------------------- */

.nav-mobile {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: grid;
	align-content: center;
	padding: calc(var(--head-h) + 2rem) var(--pad) 2rem;
	overflow-y: auto;
	background-color: var(--surface-0);
	background-image: radial-gradient(70% 50% at 85% 8%, rgba(255, 90, 31, 0.1), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

/*
 * L'attributo `hidden` da solo non basta: `display: grid` qui sopra è una
 * regola d'autore e vince sempre sullo user-agent stylesheet che imposta
 * `[hidden] { display: none }`, a parità di specificità. Senza questa riga
 * il pannello resta `position: fixed; inset: 0` e intercetta i tocchi su
 * tutto lo schermo anche da chiuso — bastava toccare la foto della hero per
 * attivare in silenzio il primo link del menu sotto il dito.
 */
.nav-mobile[hidden] {
	display: none;
}

.nav-mobile.is-open {
	opacity: 1;
}

.nav-mobile__inner {
	display: grid;
	gap: 2.5rem;
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
}

.nav-mobile__list {
	display: grid;
}

.nav-mobile__list li + li {
	border-top: 1px solid var(--c-line-2);
}

.nav-mobile__list a {
	display: block;
	padding: 0.6875rem 0;
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 7vw, 2rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--c-1);
	text-decoration: none;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: color 0.2s var(--ease);
}

.nav-mobile.is-open .nav-mobile__list a {
	animation: navIn 0.5s var(--ease) forwards;
}

.nav-mobile__list li:nth-child(1) a { animation-delay: 0.04s; }
.nav-mobile__list li:nth-child(2) a { animation-delay: 0.08s; }
.nav-mobile__list li:nth-child(3) a { animation-delay: 0.12s; }
.nav-mobile__list li:nth-child(4) a { animation-delay: 0.16s; }
.nav-mobile__list li:nth-child(5) a { animation-delay: 0.2s; }
.nav-mobile__list li:nth-child(6) a { animation-delay: 0.24s; }

@keyframes navIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.nav-mobile__list a:hover {
	color: var(--orange-ink);
}

.nav-mobile__foot {
	display: grid;
	gap: 0.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--gold-line);
}

.nav-mobile__addr {
	display: flex;
	gap: 0.5rem;
	font-size: var(--fs-sm);
	color: var(--c-2);
}

.nav-mobile__addr .ico {
	color: var(--orange-ink);
}

/* ==========================================================================
   6. Hero fotografica a tutta larghezza
   ========================================================================== */

.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(42rem, 86vh);
	padding-block: clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	isolation: isolate;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 40%;
}

/*
 * Ombra sopra la foto: una vignetta (angoli e bordi più scuri, centro
 * libero) più un gradiente pieno in basso per dare profondità e "appoggiare"
 * la foto sul resto della pagina, senza il velo pieno che la spegneva.
 */
.hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 100% at 50% 28%, transparent 52%, rgba(26, 15, 6, 0.38) 100%),
		linear-gradient(180deg, rgba(26, 15, 6, 0.12), transparent 22%, transparent 60%, rgba(26, 15, 6, 0.6));
}

.hero__inner {
	position: relative;
	z-index: 1;
}

/*
 * Il testo vive in un pannello bianco che galleggia sopra la foto, con la
 * stessa barra a gradiente delle card del menu in cima.
 */
.hero__body {
	position: relative;
	max-width: 36rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	overflow: hidden;
	background: rgba(255, 250, 243, 0.95);
	border-radius: var(--r-xl);
	box-shadow: 0 1.75rem 4rem -1.5rem rgba(26, 15, 6, 0.4), 0 0 0 1px rgba(26, 15, 6, 0.06);
	backdrop-filter: blur(0.5rem);
	-webkit-backdrop-filter: blur(0.5rem);
}

.hero__body::before {
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	content: '';
	background: var(--grad-signage);
}

.hero__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	padding: 0.5rem 0.875rem;
	font-family: var(--f-mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--orange-ink);
	background: #fff3e0;
	border: 1px solid rgba(255, 90, 31, 0.3);
	border-radius: var(--r-pill);
}

.hero__status .status__dot {
	background: var(--c-3);
}

.hero__status.is-open .status__dot {
	background: var(--verde);
}

.hero__status.is-open .status__dot::after {
	position: absolute;
	inset: 0;
	content: '';
	background: var(--verde);
	border-radius: 50%;
	animation: pulse 2.4s ease-out infinite;
}

.hero__eyebrow {
	margin-bottom: 1.125rem;
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.875rem;
}

/*
 * I due pulsanti affiancati chiedono circa 28rem: sotto quella soglia
 * andrebbero a capo con larghezze diverse, che sembra un errore. Meglio
 * impilarli a piena larghezza, così restano anche due bersagli tap generosi.
 */
@media (max-width: 30rem) {
	.hero__cta .btn {
		width: 100%;
	}
}

.hero__title {
	font-size: var(--fs-hero);
	line-height: 0.98;
	letter-spacing: 0.005em;
	color: var(--brown-900);
}

.hero__accent {
	display: block;
	font-style: normal;
	color: var(--orange-ink);
}

/*
 * Porzione di titolo evidenziata: riempita col gradiente giallo-arancio-rosso
 * del tabellone del locale invece di un colore piatto. Il colore pieno resta
 * come fallback per i motori che non supportano il ritaglio del testo.
 */
.hero__hl {
	font-style: normal;
	color: var(--orange-ink);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.hero__hl {
		background: var(--grad-signage);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.hero__text {
	max-width: 32rem;
	margin-top: 1.25rem;
	font-size: var(--fs-lg);
	color: var(--c-1);
}

/* ==========================================================================
   7. Striscia scorrevole
   Lo stesso gradiente giallo-arancio-rosso del tabellone del menu appeso in
   negozio, con testo scuro: regge il contrasto su tutta la fascia, dal
   giallo acceso al rosso.
   ========================================================================== */

.ticker-clip {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-block: 1px solid var(--gold-line);
}

.ticker {
	width: 100%;
	overflow: hidden;
	color: var(--brown-900);
	background: var(--grad-signage);
}

.ticker__track {
	display: flex;
	width: max-content;
	animation: marquee 26s linear infinite;
}

.ticker__group {
	display: flex;
	flex: none;
}

.ticker__item {
	display: flex;
	align-items: center;
	gap: 1.375rem;
	padding-block: 0.75rem;
	padding-right: 1.375rem;
	font-family: var(--f-display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ticker__sep .ico {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--brown-900);
	opacity: 0.55;
}

@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ==========================================================================
   8. Piatti in evidenza
   ========================================================================== */

.featured {
	padding-block: var(--section-y);
	background-color: var(--surface-0);
}

.showcase {
	display: grid;
	gap: clamp(0.875rem, 2vw, 1.25rem);
}

.shot {
	position: relative;
	overflow: hidden;
	background: var(--surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: 0 0.5rem 1.5rem -1rem rgba(26, 15, 6, 0.18);
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.shot:hover {
	border-color: rgba(255, 90, 31, 0.55);
	box-shadow: 0 0.75rem 2rem -0.75rem rgba(255, 62, 0, 0.35);
	transform: translateY(-4px);
}

.shot__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.shot__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.shot:hover .shot__media img {
	transform: scale(1.06);
}

.shot__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	gap: 0.75rem;
	align-items: flex-end;
	justify-content: space-between;
	/*
	 * Poco spazio sopra il testo: nelle due tessere piccole del bento (alte
	 * appena 13rem) un padding generoso come nelle grandi copriva quasi metà
	 * della foto con l'ombra. Il gradiente resta proporzionato all'altezza
	 * del blocco, quindi il testo continua a leggersi bene su entrambe.
	 */
	padding: 1.5rem 1rem 0.75rem;
	background: linear-gradient(180deg, transparent, rgba(15, 8, 3, 0.85) 68%);
}

.shot__name {
	font-size: 1.0625rem;
	letter-spacing: 0.03em;
	color: #fff;
}

.shot__price {
	font-family: var(--f-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--gold);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.shot__cur {
	margin-right: 0.0625rem;
	font-size: 0.8125rem;
	color: var(--orange-2);
}

/* ==========================================================================
   9. Griglie di riquadri con icona
   (come ordinare, il nostro impegno)
   ========================================================================== */

/*
 * Due colonne già sul telefono: in colonna singola sette categorie
 * diventerebbero uno scroll interminabile.
 */
.tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.6vw, 1rem);
}

.tile {
	display: grid;
	place-items: center;
	gap: 0.75rem;
	padding: clamp(1.125rem, 2.5vw, 1.625rem) 0.75rem;
	color: inherit;
	text-align: center;
	text-decoration: none;
	background: var(--surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: 0 0.5rem 1.5rem -1.125rem rgba(26, 15, 6, 0.18);
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

a.tile:hover {
	border-color: rgba(255, 90, 31, 0.5);
	box-shadow: 0 0.75rem 1.75rem -1rem rgba(255, 62, 0, 0.3);
	transform: translateY(-3px);
}

.tile__ico {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	color: var(--orange-ink);
	background: rgba(255, 90, 31, 0.1);
	border: 1px solid var(--gold-line);
	border-radius: 50%;
	transition: background 0.25s var(--ease);
}

.tile__ico .ico {
	width: 1.5rem;
	height: 1.5rem;
}

a.tile:hover .tile__ico {
	background: rgba(255, 90, 31, 0.18);
}

.tile__name {
	font-family: var(--f-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--cream);
	text-transform: uppercase;
}

.tile__count {
	font-family: var(--f-mono);
	font-size: 0.5625rem;
	color: var(--c-3);
}

/* Riquadro numerato per "come ordinare". */
.tile--step {
	position: relative;
}

.tile__num {
	position: absolute;
	top: 0.625rem;
	right: 0.75rem;
	font-family: var(--f-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: rgba(200, 130, 0, 0.35);
}

.tile__text {
	font-size: var(--fs-xs);
	line-height: 1.5;
	color: var(--c-2);
}

/* ==========================================================================
   10. Menu
   ========================================================================== */

.menu {
	position: relative;
	padding-block: var(--section-y);
	background-color: var(--surface-2);
}

.menu > .wrap {
	position: relative;
}

.menu__head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem 0.75rem;
	margin-top: 1.25rem;
}

.menu__veg-hint {
	font-size: var(--fs-xs);
	color: var(--c-3);
}

/* min-height 44px: bersaglio di tocco minimo raccomandato. */
.vegtoggle {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	gap: 0.5rem;
	padding: 0.5625rem 1rem;
	font-family: var(--f-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--verde-ink);
	text-transform: uppercase;
	background: rgba(131, 201, 111, 0.14);
	border-radius: var(--r-pill);
	box-shadow: inset 0 0 0 1.5px rgba(47, 122, 61, 0.35);
	transition: color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.vegtoggle:hover {
	background: rgba(131, 201, 111, 0.24);
}

.vegtoggle[aria-pressed='true'] {
	color: #fff;
	background: var(--verde-ink);
	box-shadow: inset 0 0 0 1.5px var(--verde-ink);
}

/* --- Griglia e schede ------------------------------------------------- */

/*
 * Impaginazione esplicita, non masonry: "Panini e piadine" e le quattro
 * categorie corte (Speciali, Menù, Contorni ed extra, Bibite) stanno una
 * sopra l'altra nella colonna di sinistra; "Piatti" — la categoria con più
 * voci di tutte le altre messe insieme — occupa da sola tutta la colonna di
 * destra, alla sua stessa altezza. Su mobile tutto si impila in un'unica
 * colonna nell'ordine naturale.
 */
.menu__grid {
	display: block;
}

.menu__grid > * {
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.menu__grid > *:last-child {
	margin-bottom: 0;
}

.card {
	container-type: inline-size;
	position: relative;
	padding: clamp(1.375rem, 3vw, 1.875rem);
	background: var(--surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	box-shadow: 0 1rem 2.5rem -1.5rem rgba(26, 15, 6, 0.28);
	overflow: hidden;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover {
	border-color: rgba(255, 90, 31, 0.4);
	box-shadow: 0 1rem 2.5rem -1.5rem rgba(26, 15, 6, 0.28), 0 0 0 1px rgba(255, 90, 31, 0.12), 0 0 2.5rem -0.75rem rgba(255, 62, 0, 0.25);
}

/* Filo a gradiente in cima a ogni scheda: lo stesso gradiente del tabellone
   del locale, come firma visiva ricorrente su tutte le categorie del menu. */
.card::before {
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	content: '';
	background: var(--grad-signage);
}

.card__title {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-bottom: 1.25rem;
	font-size: var(--fs-xl);
	letter-spacing: 0.03em;
	color: var(--cream);
}

.card__rule {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--gold-line), transparent);
}

.dishes {
	display: grid;
	gap: 1.0625rem;
}

.dish + .dish {
	padding-top: 1.0625rem;
	border-top: 1px solid var(--c-line-2);
}

/*
 * Due colonne per i piatti dentro ogni scheda — ma solo quando la SCHEDA è
 * abbastanza larga da reggerle, non quando lo è il viewport: nella griglia
 * del menu a tre colonne desktop le card sono strette (~24rem) e "Piatto
 * Fritto Misto" (la descrizione più lunga) ci finiva a muro di testo di 11
 * righe. Una container query guarda la larghezza vera della card invece di
 * indovinare un breakpoint di viewport che non funziona in ogni combinazione
 * di colonne del masonry.
 */
/* Solo "Piatti" (21 voci, la categoria più lunga) va a due colonne interne;
   le altre categorie restano una lista singola, più facile da scorrere per
   poche voci. Il contenimento per la container query viene già da .card. */
@container (min-width: 26rem) {
	#cat-piatti .dishes {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 1.5rem;
	}

	#cat-piatti .dish + .dish {
		padding-top: 0;
		border-top: 0;
	}
}

.dish.has-thumb {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 0.875rem;
}

.dish__thumb {
	grid-row: 1 / -1;
}

.dish__thumb img {
	width: 4rem;
	height: 4rem;
	object-fit: cover;
	border-radius: var(--r-sm);
}

/* Il filetto punteggiato guida l'occhio dal piatto al prezzo. */
.dish__line {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.dish__name {
	font-family: var(--f-body);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--c-1);
	text-transform: none;
}

.dish__leader {
	flex: 1 1 1.5rem;
	min-width: 1.5rem;
	height: 0;
	border-bottom: 2px dotted rgba(26, 15, 6, 0.22);
	transform: translateY(-0.3em);
}

.dish__price {
	font-family: var(--f-mono);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--gold-ink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.dish__cur {
	margin-right: 0.0625rem;
	font-size: 0.75rem;
	color: var(--orange-ink);
}

.dish__desc {
	max-width: 34rem;
	margin-top: 0.375rem;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--c-2);
}

/*
 * Piccolo nastro invece di una pillola piatta: richiama il nastro
 * "Fast Food" del logo, con una tacca a bandiera sul lato sinistro.
 */
.dish__badge {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.25rem 0.5rem 0.25rem 0.75rem;
	font-family: var(--f-display);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--brown-900);
	text-transform: uppercase;
	background: linear-gradient(100deg, var(--gold), var(--orange-2));
	clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
	box-shadow: 0 0.25rem 0.5rem -0.25rem rgba(26, 15, 6, 0.3);
}

.tag {
	display: inline-grid;
	place-items: center;
	width: 1.125rem;
	height: 1.125rem;
	margin-left: 0.25rem;
	vertical-align: -0.15em;
	border-radius: 50%;
}

.tag .ico {
	width: 0.8125rem;
	height: 0.8125rem;
	stroke-width: 1.9;
}

.tag--veg,
.tag--vegan {
	color: var(--verde-ink);
	background: rgba(131, 201, 111, 0.22);
}

.tag--piccante {
	color: #c53d10;
	background: rgba(212, 58, 26, 0.16);
}

.tag--novita {
	color: var(--orange-ink);
	background: rgba(255, 90, 31, 0.16);
}

/* Filtro vegetariano: `:has()` nasconde le categorie che restano vuote. */
.menu.is-veg-only .dish:not(.is-veg) {
	display: none;
}

.menu.is-veg-only [data-cat]:not(:has(.dish.is-veg)) {
	display: none;
}

/*
 * Con il filtro attivo i piatti nascosti restano nell'albero dei fratelli:
 * i filetti fra le righe finirebbero nel posto sbagliato. Meglio togliere i
 * bordi e lasciare che sia il `gap` a separare le voci.
 */
.menu.is-veg-only .dish {
	padding-top: 0;
	border-top: 0;
}

.menu__empty {
	padding: 2rem;
	font-size: var(--fs-sm);
	color: var(--c-2);
	text-align: center;
	border: 1px dashed var(--c-line);
	border-radius: var(--r-lg);
}

.menu__note {
	display: flex;
	gap: 0.75rem;
	max-width: 46rem;
	margin: 2.5rem auto 0;
	font-size: var(--fs-sm);
	color: var(--c-2);
}

.menu__note .ico {
	color: var(--verde-ink);
}

/* ==========================================================================
   11. Asporto
   ========================================================================== */

.ordina {
	padding-block: var(--section-y);
	background-color: var(--surface-2);
}

/* Due colonne invece di un'unica card lunga: il percorso in tre passaggi da
   un lato, la card di chiamata dall'altro. Impilate su mobile. */
.ordina__grid {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.5rem);
	align-items: center;
}

.ordina__steps {
	margin-top: 0;
}

/* Card di chiamata: il numero grande è la prima cosa che deve saltare
   all'occhio a chi vuole ordinare, non un dettaglio in fondo a un blocco di
   testo. */
.call-card {
	position: relative;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
	background: var(--surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	box-shadow: 0 1.25rem 3rem -1.5rem rgba(26, 15, 6, 0.24);
	overflow: hidden;
}

.call-card::before {
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	content: '';
	background: var(--grad-signage);
}

.call-card__ico {
	position: relative;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1.125rem;
	color: var(--orange-ink);
	background: rgba(255, 90, 31, 0.1);
	border: 1px solid var(--gold-line);
	border-radius: 50%;
}

.call-card__label {
	position: relative;
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--c-3);
	text-transform: uppercase;
}

.call-card__number {
	position: relative;
	display: block;
	margin-top: 0.375rem;
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.4rem + 2.5vw, 2.75rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--brown-900);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: color 0.2s var(--ease);
}

.call-card__number:hover {
	color: var(--orange-ink);
}

.call-card__note {
	position: relative;
	max-width: 26rem;
	margin: 1rem auto 0;
	font-size: var(--fs-sm);
	color: var(--c-2);
}

.call-card__cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.625rem;
}

.call-card .ticklist {
	max-width: 20rem;
	margin-inline: auto;
	text-align: left;
}

.panel__hint {
	font-size: var(--fs-sm);
	color: var(--c-3);
}

.steps {
	position: relative;
	display: grid;
	gap: 1.25rem;
}

.steps__item {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1.125rem;
	align-items: start;
}

/* Numeri e titoli grandi quanto il numero di telefono nella card di
   chiamata affianco: i due blocchi devono pesare uguale a colpo d'occhio. */
.steps__num {
	position: relative;
	font-family: var(--f-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--orange-ink);
	font-variant-numeric: tabular-nums;
}

.steps__item:not(:last-child) .steps__num::after {
	position: absolute;
	top: 2.375rem;
	left: 0.875rem;
	width: 1px;
	height: calc(100% + 0.75rem);
	content: '';
	background: linear-gradient(180deg, rgba(255, 90, 31, 0.4), transparent);
}

.steps__title {
	font-family: var(--f-display);
	font-size: var(--fs-xl);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cream);
	text-transform: none;
}

.steps__text {
	margin-top: 0.3125rem;
	font-size: var(--fs-base);
	color: var(--c-2);
}

.ticklist {
	display: grid;
	gap: 0.625rem;
	margin-top: 1.625rem;
	padding-top: 1.375rem;
	border-top: 1px solid var(--c-line-2);
}

.ticklist li {
	display: flex;
	gap: 0.625rem;
	font-size: var(--fs-sm);
	color: var(--c-2);
}

.ticklist .ico {
	width: 1.0625rem;
	height: 1.0625rem;
	color: var(--verde-ink);
}

/* ==========================================================================
   11b. Domande frequenti
   ========================================================================== */

.faq {
	padding-block: var(--section-y);
	background-color: var(--surface-2);
}

.faq__list {
	display: grid;
	gap: 0.75rem;
	max-width: 42rem;
	margin-inline: auto;
}

.faq__item {
	background: var(--surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: 0 0.5rem 1.5rem -1.125rem rgba(26, 15, 6, 0.18);
}

.faq__item[open] {
	border-color: rgba(255, 90, 31, 0.35);
}

/* Tolgo il triangolo di default del browser: lo sostituisco con l'icona
   arrow-down che ruota all'apertura. */
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.375rem;
	font-family: var(--f-display);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cream);
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__ico {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--orange-ink);
	transition: transform 0.25s var(--ease);
}

.faq__item[open] .faq__ico {
	transform: rotate(180deg);
}

.faq__a {
	padding: 0 1.375rem 1.25rem;
	font-size: var(--fs-sm);
	color: var(--c-2);
}

.faq__a p {
	max-width: 36rem;
}

/* ==========================================================================
   12. Il locale e l'impegno
   ========================================================================== */

.locale {
	padding-block: var(--section-y);
	background-color: var(--surface-0);
}

.locale__inner {
	display: grid;
	gap: clamp(2rem, 4.5vw, 3.5rem);
}

.locale__text .prose {
	margin-top: 1.25rem;
}

.locale__shot {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--gold-line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-lift);
}

.locale__shot img {
	width: 100%;
	height: auto;
}

.locale__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	gap: 0.625rem;
	padding: 2.5rem 1.125rem 1rem;
	font-size: var(--fs-sm);
	color: #fff;
	background: linear-gradient(180deg, transparent, rgba(15, 8, 3, 0.88) 55%);
}

.locale__caption .ico {
	flex: none;
	color: var(--orange-2);
}

.quote {
	position: relative;
	margin-top: 1.75rem;
	padding-left: 1.5rem;
	background: var(--grad-signage) left / 3px 100% no-repeat;
}

.quote p {
	font-family: var(--f-display);
	font-size: var(--fs-xl);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: var(--cream);
	text-transform: uppercase;
}

/* ==========================================================================
   13. Recensioni
   ========================================================================== */

.reviews {
	padding-block: var(--section-y);
	background-color: var(--surface-2);
}

.reviews__grid {
	display: grid;
	gap: clamp(0.875rem, 2vw, 1.25rem);
}

.review {
	display: grid;
	gap: 0.875rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: 0 0.5rem 1.5rem -1.125rem rgba(26, 15, 6, 0.18);
}

.review__stars {
	display: flex;
	gap: 0.1875rem;
	color: var(--gold-ink);
}

.review__stars .ico {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	stroke-width: 1;
}

.review__text {
	font-size: var(--fs-sm);
	font-style: italic;
	line-height: 1.6;
	color: var(--c-1);
}

.review__author {
	font-family: var(--f-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--orange-ink);
	text-transform: uppercase;
}

.reviews__cta {
	margin-top: 2rem;
	text-align: center;
}

/* ==========================================================================
   14. Galleria
   ========================================================================== */

/*
 * "Recensioni" fra questa e "Il locale" è nascosta finché non ci sono
 * recensioni vere: senza quel cuscinetto, questa e "Il locale" finiscono
 * adiacenti per davvero, quindi devono differire direttamente fra loro. Se
 * in futuro le recensioni tornano visibili, ricontrollare questa sequenza.
 */
.gallery {
	padding-block: var(--section-y);
	background-color: var(--surface-2);
}

.gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.5rem, 1.4vw, 0.875rem);
}

.gallery__item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: 0 0.5rem 1.25rem -1rem rgba(26, 15, 6, 0.2);
}

.gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.gallery__item:hover img {
	transform: scale(1.07);
}

/* ==========================================================================
   15. Orari, contatti e modulo di contatto
   ========================================================================== */

.dove {
	padding-block: var(--section-y);
	background-color: var(--surface-0);
}

.dove__grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.hours,
.contatti {
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	background: var(--surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	box-shadow: 0 1rem 2.5rem -1.5rem rgba(26, 15, 6, 0.2);
}

/* Stessi orari ogni giorno: "Pranzo / Cena" invece di una tabella con sette
   righe identiche. */
.hours__all {
	font-family: var(--f-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--cream);
	text-transform: uppercase;
}

.hours__slots {
	display: grid;
	gap: 0.625rem;
	margin-top: 1.125rem;
}

.hours__slot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	background: var(--surface-2);
	border-radius: var(--r-sm);
}

.hours__slot-label {
	font-family: var(--f-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--c-2);
	text-transform: uppercase;
}

.hours__slot-time {
	font-family: var(--f-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--verde-ink);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.hours__single {
	margin-top: 0.75rem;
	font-family: var(--f-mono);
	font-size: 0.9375rem;
	color: var(--verde-ink);
	font-variant-numeric: tabular-nums;
}

.hours__table th,
.hours__table td {
	padding: 0.625rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--c-line-2);
}

.hours__table th {
	font-family: var(--f-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--c-2);
	text-transform: uppercase;
}

/* Gli orari in verde, come nel progetto: si leggono a colpo d'occhio. */
.hours__table td {
	font-family: var(--f-mono);
	font-size: 0.6875rem;
	color: var(--verde-ink);
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.hours__table tr:last-child th,
.hours__table tr:last-child td {
	border-bottom: 0;
}

.hours__table .is-today th {
	position: relative;
	color: var(--cream);
	font-weight: 600;
}

.hours__table .is-today th::before {
	position: absolute;
	top: 50%;
	left: -0.75rem;
	width: 3px;
	height: 1.125rem;
	content: '';
	background: var(--orange);
	border-radius: 2px;
	transform: translateY(-50%);
}

.hours__table .is-today td {
	color: var(--orange-ink);
}

.hours__badge {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.125rem 0.4375rem;
	font-family: var(--f-mono);
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--brown-900);
	text-transform: uppercase;
	background: var(--orange);
	border-radius: 0.1875rem;
	vertical-align: 0.1em;
}

.hours__foot {
	display: flex;
	gap: 0.625rem;
	margin-top: 1.125rem;
	font-size: var(--fs-xs);
	color: var(--c-3);
}

.hours__foot .ico {
	width: 1rem;
	height: 1rem;
	color: var(--orange-ink);
}

.contatti__title {
	font-size: var(--fs-xl);
	letter-spacing: 0.03em;
	color: var(--cream);
}

.contatti__addr {
	display: flex;
	gap: 0.625rem;
	margin-top: 1rem;
	font-size: var(--fs-lg);
	line-height: 1.45;
	color: var(--c-1);
}

.contatti__addr .ico {
	margin-top: 0.25rem;
	color: var(--orange-ink);
}

.contatti__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.375rem;
}

.contatti__list {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.625rem;
	padding-top: 1.375rem;
	border-top: 1px solid var(--c-line-2);
	font-size: var(--fs-sm);
}

/* ==========================================================================
   16. Footer
   La fascia arancio-rosso della parete del locale, a tutta larghezza: chiude
   la pagina con lo stesso colore che si vede appena entrati.
   ========================================================================== */

/* Stesso bianco dell'header, non più la fascia arancione: il sito apre e
   chiude sullo stesso colore invece di un blocco scuro in fondo. */
.site-foot {
	padding-top: clamp(3rem, 5vw, 4.5rem);
	padding-bottom: 2rem;
	color: var(--c-1);
	background: var(--surface-0);
	border-top: 1px solid var(--c-line);
}

.site-foot__grid {
	display: grid;
	gap: 2.25rem;
}

.site-foot__brand .brand {
	margin-right: 0;
}

.site-foot__brand .brand__top,
.site-foot__brand .brand__bottom {
	color: var(--cream);
}

.site-foot__tag {
	max-width: 22rem;
	margin-top: 1rem;
	font-size: var(--fs-sm);
	color: var(--c-2);
}

.site-foot__title {
	margin-bottom: 0.875rem;
	font-family: var(--f-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--orange-ink);
	text-transform: uppercase;
}

.site-foot__col {
	font-size: var(--fs-sm);
	color: var(--c-2);
}

.site-foot__col p + p,
.site-foot__col p + a {
	margin-top: 0.5rem;
}

.site-foot__links-list,
.site-foot__social {
	display: grid;
	gap: 0.625rem;
}

.site-foot__links-list a {
	text-decoration: none;
}

.site-foot__links-list a:hover,
.site-foot__social a:hover {
	color: var(--orange-ink);
}

.site-foot__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 2.75rem;
	padding-top: 1.5rem;
	font-size: var(--fs-xs);
	color: var(--c-3);
	border-top: 1px solid var(--c-line-2);
}

.site-foot__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.site-foot__links a {
	text-decoration: none;
}

.site-foot__links a:hover {
	color: var(--orange-ink);
}

/* ==========================================================================
   17. Azioni flottanti
   ========================================================================== */

.fab {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 80;
	display: none;
	align-items: center;
	gap: 0.625rem;
	height: 3.5rem;
	padding: 0 1.125rem;
	/* Testo scuro sul verde WhatsApp: in bianco resterebbe a 1.98:1. */
	color: #0b2a17;
	text-decoration: none;
	background: linear-gradient(96deg, #1f8a4c, #25d366);
	border-radius: var(--r-pill);
	box-shadow: 0 0.625rem 1.75rem -0.5rem rgba(37, 211, 102, 0.5), 0 1rem 2rem -0.75rem rgba(26, 15, 6, 0.35);
	transition: transform 0.25s var(--ease);
}

.fab .ico {
	width: 1.5rem;
	height: 1.5rem;
	stroke-width: 1.8;
}

.fab__label {
	max-width: 0;
	overflow: hidden;
	font-family: var(--f-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.35s var(--ease), opacity 0.25s var(--ease);
}

.fab:hover {
	transform: translateY(-3px);
}

.fab:hover .fab__label,
.fab:focus-visible .fab__label {
	max-width: 12rem;
	opacity: 1;
}

.dock {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 80;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding-bottom: env(safe-area-inset-bottom);
	background: rgba(255, 250, 243, 0.96);
	border-top: 1px solid var(--gold-line);
	backdrop-filter: blur(1rem);
	box-shadow: 0 -0.5rem 1.5rem -1rem rgba(26, 15, 6, 0.15);
}

.dock__item {
	display: grid;
	place-items: center;
	gap: 0.1875rem;
	padding: 0.625rem 0.25rem 0.6875rem;
	font-family: var(--f-display);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--c-2);
	text-decoration: none;
	text-transform: uppercase;
}

.dock__item .ico {
	width: 1.25rem;
	height: 1.25rem;
}

.dock__item--primary {
	color: var(--orange-ink);
}

.dock__item:active {
	background: rgba(255, 90, 31, 0.1);
}

body {
	padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}

.nav-is-open .dock {
	display: none;
}

/*
 * Pulsante "torna in alto". Su mobile sta appena sopra la barra fissa in
 * basso (che riserva 3.75rem, vedi `body` qui sopra); su desktop, dove la
 * barra non c'è, scende ad appoggiarsi al bordo dello schermo e passa sul
 * lato sinistro per non sovrapporsi al pulsante WhatsApp.
 */
.totop {
	position: fixed;
	right: 1rem;
	bottom: calc(3.75rem + env(safe-area-inset-bottom) + 0.75rem);
	z-index: 85;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	color: var(--c-1);
	background: rgba(255, 250, 243, 0.95);
	border: 1px solid var(--gold-line);
	border-radius: 50%;
	opacity: 0;
	transform: translateY(0.5rem);
	pointer-events: none;
	box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(26, 15, 6, 0.3);
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.totop.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.totop:hover {
	color: var(--orange-ink);
	background: rgba(255, 90, 31, 0.14);
}

.totop .ico {
	width: 1.25rem;
	height: 1.25rem;
}

.nav-is-open .totop {
	display: none;
}

/* ==========================================================================
   18. Blog, pagine, 404
   ========================================================================== */

.page-head {
	padding-block: clamp(2rem, 4vw, 3rem) 0;
	background: var(--surface-0);
}

.postlist {
	display: grid;
	gap: 2.5rem;
}

.postlist__title {
	font-size: var(--fs-xl);
}

.postlist__title a {
	text-decoration: none;
}

.postlist__title a:hover {
	color: var(--orange-ink);
}

.postlist__meta {
	margin-top: 0.375rem;
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
	color: var(--c-3);
}

.postlist__item .prose {
	margin-top: 0.75rem;
	font-size: var(--fs-base);
}

.notfound__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.searchform {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.searchform input {
	flex: 1;
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: var(--fs-sm);
	color: var(--c-1);
	background: var(--surface-1);
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
}

.pagination {
	margin-top: 3rem;
	font-family: var(--f-mono);
	font-size: var(--fs-xs);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pagination a,
.pagination .current {
	display: grid;
	place-items: center;
	min-width: 2.375rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	border-radius: var(--r-sm);
	box-shadow: inset 0 0 0 1px var(--c-line);
}

.pagination .current {
	color: var(--brown-900);
	background: var(--orange);
	box-shadow: none;
}

/* ==========================================================================
   19. Comparsa progressiva
   ========================================================================== */

/*
 * Lo stato nascosto è vincolato alla classe `kebab-reveal`, aggiunta inline
 * solo se il JavaScript è attivo: senza script il contenuto resta visibile.
 */
.kebab-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s var(--ease) var(--d, 0ms), transform 0.7s var(--ease) var(--d, 0ms);
}

.kebab-reveal [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   20. Breakpoint
   ========================================================================== */

@media (min-width: 40rem) {
	.showcase {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-foot__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tiles--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * Due colonne esplicite: "Piatti" occupa da sola tutta la colonna di
	 * destra (grid-row: span 5, quante sono le sezioni impilate a sinistra),
	 * il resto si dispone in ordine naturale nella colonna di sinistra senza
	 * bisogno di indicarlo scheda per scheda.
	 */
	.menu__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1.25rem, 2.5vw, 1.75rem);
		align-items: start;
	}

	.menu__grid > * {
		margin-bottom: 0;
	}

	#cat-piatti {
		grid-column: 2;
		grid-row: 1 / span 5;
	}

	.menu__empty {
		grid-column: 1 / -1;
	}

	.ordina__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		max-width: 60rem;
		margin-inline: auto;
	}

	.dove__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.reviews__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 62rem) {
	:root {
		--head-h: 5rem;
	}

	.nav,
	.brand__text {
		display: flex;
	}

	.header-cta {
		display: inline-flex;
	}

	.status {
		display: inline-flex;
	}

	.burger,
	.dock {
		display: none;
	}

	.fab {
		display: inline-flex;
	}

	body {
		padding-bottom: 0;
	}

	/* Senza la barra fissa in basso, il pulsante scende sul bordo dello
	   schermo: resta a destra. */
	.totop {
		bottom: 1.5rem;
	}

	/*
	 * Bento asimmetrico: il primo piatto (il più venduto) occupa un blocco
	 * grande 2×2, il secondo una colonna alta, gli ultimi due restano
	 * quadrati semplici. Le due tessere allungate riempiono l'altezza della
	 * cella invece di seguire il rapporto 4:3 delle altre.
	 */
	.showcase {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 13rem;
	}

	.showcase li:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	.showcase li:nth-child(2) {
		grid-row: span 2;
	}

	.showcase li:first-child .shot__media,
	.showcase li:nth-child(2) .shot__media {
		aspect-ratio: auto;
		height: 100%;
	}

	.locale__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: center;
	}

	/* Senza il modulo di contatto restano due schede: centrate invece di
	   stirate a piena larghezza, così non sembrano perse nel wrap. */
	.dove__grid {
		grid-template-columns: repeat(2, minmax(0, 26rem));
		justify-content: center;
	}

	.site-foot__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	}
}

/* ==========================================================================
   21. Preferenze utente
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.kebab-reveal [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.ticker__track {
		transform: translateX(-25%);
	}
}

@media (prefers-contrast: more) {
	:root {
		--c-2: rgba(26, 15, 6, 0.85);
		--c-3: rgba(26, 15, 6, 0.72);
		--c-line: rgba(26, 15, 6, 0.3);
		--gold-line: rgba(200, 130, 0, 0.6);
	}
}

/* ==========================================================================
   22. Stampa — il menu diventa un foglio da appendere al banco
   ========================================================================== */

@media print {
	.topbar,
	.nav-mobile,
	.dock,
	.fab,
	.totop,
	.grain,
	.hero__bg,
	.hero__veil,
	.ticker-clip,
	.showcase,
	.gallery,
	.locale__shot,
	.dish__thumb,
	.tiles,
	.site-foot__social,
	.skip-link {
		display: none !important;
	}

	body {
		padding: 0;
		color: #000;
		background: #fff;
	}

	.hero,
	.featured,
	.menu,
	.ordina,
	.faq,
	.locale,
	.reviews,
	.dove,
	.site-foot {
		min-height: 0;
		padding-block: 1rem;
		color: #000;
		background: #fff;
	}

	.site-main > *:first-child {
		padding-top: 0;
	}

	.hero__title,
	.hero__text,
	.shead__title,
	.section-title,
	.card__title,
	.dish__name,
	.dish__price,
	.panel__title {
		color: #000;
		text-shadow: none;
	}

	.hero__accent {
		color: #000;
	}

	.card {
		break-inside: avoid;
		background: none;
		border-color: #999;
	}

	.dish__desc,
	.prose,
	.hours__table th,
	.hours__table td {
		color: #333;
	}

	.menu__grid {
		display: block;
	}
}