/* ============================================================
   Pagina MENÙ del locale — ricalcata sul sito attuale (27/08/2026).
   Valori presi con il righello dalla pagina online di Leoburger:
   fondo #000 · pannelli #f8f8f8 · bordi #f0f0f0 · titolo categoria #666 peso 500
   nome piatto #111 peso 700 · prezzo e descrizione in corsivo · Montserrat.
   NON cambiare l'aspetto: qui si copia, non si reinterpreta.
   ============================================================ */

:root {
	--mrl-fondo:   #000000;
	--mrl-carta:   #f8f8f8;
	--mrl-bordo:   #f0f0f0;
	--mrl-testo:   #111111;
	--mrl-grigio:  #666666;
	--mrl-rosso:   #e50045;
	--mrl-font: 'Montserrat', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--mrl-fondo);
	color: var(--mrl-testo);
	font-family: var(--mrl-font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	/* le fasce a tutta larghezza usano 100vw, che su Windows comprende la barra di
	   scorrimento: senza questo comparirebbe una barra orizzontale da una decina di pixel */
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.mrl { max-width: 1100px; margin: 0 auto; }

/* ---------- fascia nera sopra la testata (come nel sito attuale) ---------- */
.mrl-fascia { height: 70px; background: #000; }

/* Sull'originale la foto di testata e la barra dei contatti toccano i bordi dello schermo:
   niente riquadro nero ai lati. Il resto della pagina resta dentro i 1100px, quindi invece
   di smontare il contenitore si fanno uscire solo queste tre fasce.
   Su telefono i conti danno zero, quindi non cambia niente dove conta di piu'. */
.mrl-fascia, .mrl-testata, .mrl-contatti-rapidi {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- testata del locale ---------- */
.mrl-testata { position: relative; overflow: hidden; background: #111; }
/* Le foto stanno in fila dentro una pista che scorre: sull'originale non si sostituiscono
   di colpo, scivolano di lato. La pista e' larga quanto serve, ogni foto occupa uno schermo. */
.mrl-testata-pista { display: flex; width: 100%; transition: transform .9s cubic-bezier(.4, 0, .2, 1); }
.mrl-testata-img { flex: 0 0 100%; width: 100%; height: clamp(150px, 36vw, 500px); object-fit: cover; }
.mrl-testata-vuota { height: clamp(150px, 36vw, 500px); background: linear-gradient(160deg, #333, #000); }
@media (prefers-reduced-motion: reduce) { .mrl-testata-pista { transition: none; } }
.mrl-testata-sopra {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center;
	/* Sull'originale il logo non c'e' e poi c'e': entra in dissolvenza salendo appena.
	   Qui e' la stessa cosa fatta col CSS, senza librerie. */
	animation: mrl-entra .9s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes mrl-entra {
	from { opacity: 0; transform: translateY(14px) scale(.96); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mrl-testata-sopra { animation: none; } }
/* Il limite vero è l'ALTEZZA, non la larghezza: i loghi quadrati (De Gusto è un cerchio)
   con la sola larghezza diventavano enormi, mentre quelli larghi (Leoburger) restavano giusti.
   Con questa altezza entrambi vengono come sull'originale. */
.mrl-locale-logo {
	max-width: clamp(150px, 46vw, 680px);
	max-height: clamp(62px, 24vw, 240px);
	width: auto; height: auto; object-fit: contain;
	filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
.mrl-locale-nome { margin: 0; color: #fff; font-size: clamp(26px, 6vw, 44px); font-weight: 700; text-shadow: 0 3px 14px rgba(0,0,0,.6); }
/* Sull'originale la scritta sotto il logo ("#1 IN TOWN", "PIZZERIA") e' grossa e in
   grassetto, non una didascalia: 30px bold bianchi. Qui si scala col telefono. */
.mrl-locale-payoff {
	margin: 4px 0 0; color: #fff; font-weight: 700; letter-spacing: .02em;
	font-size: clamp(16px, 2.4vw, 30px);
	text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ---------- riga contatti sotto la testata ---------- */
.mrl-contatti-rapidi { display: flex; justify-content: center; gap: 46px; padding: 20px 16px 22px; background: #000; }
.mrl-contatti-rapidi a { color: #fff; display: inline-flex; padding: 6px; }
.mrl-contatti-rapidi a:hover { color: var(--mrl-rosso); }

/* ---------- fisarmonica delle categorie ---------- */
.mrl-menu { padding: 0 12px 26px; }
.mrl-cat { margin-bottom: 3px; }
/* CHIUSA: barra scura con scritta bianca — è così sul sito attuale (#2a2a2a, bordo #222).
   APERTA: barra e corpo diventano chiari. Non invertire: è il comportamento dell'originale. */
.mrl-cat-barra {
	display: flex; align-items: center; gap: 10px;
	background: #2a2a2a; border: 1px solid #222222; border-radius: 5px;
	padding: 14px 16px; cursor: pointer; list-style: none; position: relative;
}
.mrl-cat-barra::-webkit-details-marker { display: none; }
.mrl-cat[open] .mrl-cat-barra {
	background: var(--mrl-carta); border-color: var(--mrl-bordo);
	border-radius: 5px 5px 0 0; border-bottom-color: transparent;
}
.mrl-cat-freccia { color: #ffffff; display: inline-flex; transition: transform .2s; }
.mrl-cat[open] .mrl-cat-freccia { color: var(--mrl-grigio); transform: rotate(180deg); }
.mrl-cat-titolo {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	color: #ffffff; font-weight: 500; font-size: 16px; line-height: 1;
	text-align: center; padding-right: 26px;
}
.mrl-cat[open] .mrl-cat-titolo { color: var(--mrl-grigio); }
.mrl-cat-corpo { background: var(--mrl-carta); border: 1px solid var(--mrl-bordo); border-top: 0; border-radius: 0 0 5px 5px; padding: 14px 20px; }
.mrl-cat-descr { margin: 0 0 12px; color: var(--mrl-grigio); font-style: italic; }

/* ---------- piatti ---------- */
/* i rientri riproducono la misura della foto del sito attuale (267px su schermo da 390) */
.mrl-piatti { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 0 30px; }
.mrl-piatto { margin: 0; }
.mrl-piatto-foto {
	width: 100%; height: auto; margin-bottom: 10px;
	border: 1px solid #ebebeb; background: #fff;
	/* la foto si allarga con due dita insieme alla pagina: nessun blocco allo zoom */
}
.mrl-piatto-testo { margin: 0; }
.mrl-piatto-testo strong { font-weight: 700; color: var(--mrl-testo); }
.mrl-piatto-prezzo { font-style: italic; font-weight: 300; color: var(--mrl-testo); margin-left: 6px; white-space: nowrap; }
.mrl-piatto-descr em { font-style: italic; font-weight: 300; color: var(--mrl-testo); }
.mr-alrg-riga { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mr-alrg-ico { width: 18px; height: 18px; }

/* ---------- tabella allergeni ---------- */
/* Sull'originale la tabella allergeni sta sul FONDO NERO, tutta bianca: niente scheda
   chiara. La scheda bianca era una nostra reinterpretazione, ed era brutta.
   Misure prese dall'HTML del sito vivo: titolo 30px, testo 16px in corsivo. */
.mrl-allergeni { background: transparent; margin: 26px 12px; padding: 8px 20px 26px; text-align: center; }
.mrl-allergeni h2 { margin: 0 0 14px; font-size: 30px; font-weight: 300; color: #ffffff; }
.mrl-allergeni p { margin: 0 0 10px; color: #ffffff; font-size: 16px; font-style: italic; line-height: 1.6; }
.mrl-pallini { display: flex; justify-content: center; gap: 10px; margin: 0 0 15px; }
.mrl-pallini span { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; display: block; }
.mrl-nota { font-size: 13px; }
.mrl-tabella { margin-top: 16px; text-align: left; }
/* la barra "ALLERGENI" è scura come quelle delle categorie chiuse */
.mrl-tabella summary {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: #2a2a2a; border: 1px solid #222222; border-radius: 5px;
	padding: 14px 16px; cursor: pointer; list-style: none;
	color: #ffffff; font-weight: 500; letter-spacing: .04em;
}
.mrl-tabella[open] summary { background: var(--mrl-carta); border-color: var(--mrl-bordo); color: var(--mrl-grigio); border-radius: 5px 5px 0 0; }
.mrl-tabella[open] dl { background: #ffffff; border: 1px solid var(--mrl-bordo); border-top: 0;
	border-radius: 0 0 5px 5px; padding: 16px; margin-top: 0; }
.mrl-tabella summary::-webkit-details-marker { display: none; }
.mrl-tabella[open] summary svg { transform: rotate(180deg); }
.mrl-tabella dl { margin: 14px 0 0; padding: 0; }
.mrl-tabella dt { display: flex; align-items: center; gap: 10px; font-weight: 500; margin-top: 14px; }
.mrl-tabella dt img { width: 30px; height: 30px; }
.mrl-tabella dd { margin: 2px 0 0 40px; color: var(--mrl-grigio); font-size: 14px; }

/* ---------- piede: resta in contatto ---------- */
.mrl-piede { background: #000; color: #fff; padding: 34px 20px 10px; text-align: center; position: relative; }
.mrl-piede.con-sfondo { background-size: cover; background-position: center; padding-top: 46px; padding-bottom: 26px; }
.mrl-piede.con-sfondo::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.66); }
.mrl-piede.con-sfondo > * { position: relative; }
.mrl-piede h2 { margin: 0 0 8px; font-size: clamp(22px, 5vw, 30px); font-weight: 300; }
.mrl-piede > p { margin: 0 auto 26px; max-width: 460px; color: #ddd; }
.mrl-piede-blocchi { display: grid; gap: 22px; justify-items: center; }
.mrl-piede-b { text-align: center; }
.mrl-piede-b h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; font-weight: 500; }
.mrl-piede-b h3 svg { color: var(--mrl-rosso); }
.mrl-piede-b a, .mrl-piede-b p { display: block; margin: 0; color: #ccc; font-size: 14.5px; }
.mrl-piede-b a:hover { color: #fff; }

/* ---------- footer piattaforma ---------- */
.mrl-footer { background: #000; color: #8b8b8b; text-align: center; padding: 26px 20px 34px; font-size: 12px; }
.mrl-footer img { height: 44px; width: auto; margin: 0 auto 14px; }
.mrl-footer a { color: #8b8b8b; text-decoration: underline; }
.mrl-footer a:hover { color: #fff; }

.mrl-vuoto { background: var(--mrl-carta); border-radius: 5px; padding: 40px 20px; text-align: center; color: var(--mrl-grigio); }
.mrl-sospeso { background: var(--mrl-carta); margin: 12px; border-radius: 5px; padding: 60px 24px; text-align: center; }
.mrl-sospeso h1 { font-size: 26px; font-weight: 700; margin: 0 0 10px; }
.mrl-sospeso p { color: var(--mrl-grigio); margin: 0; }

/* ============================================================
   Variante SCURA (impostazione "Aspetto del menù" nella scheda del locale).
   Stessa identica impaginazione: cambiano solo i colori delle schede.
   Serve ai locali che fotografano i piatti su fondo nero (es. Leoburger):
   così la foto si fonde con la scheda e il piatto sembra ritagliato.
   ============================================================ */
/* la barra resta scura anche da aperta (nel "chiaro" invece schiarisce, come l'originale) */
.mrl-tema-scuro .mrl-cat-barra,
.mrl-tema-scuro .mrl-cat[open] .mrl-cat-barra { background: #2a2a2a; border-color: #222222; }
.mrl-tema-scuro .mrl-cat-corpo { background: #141414; border-color: #222222; }
.mrl-tema-scuro .mrl-cat-titolo,
.mrl-tema-scuro .mrl-cat[open] .mrl-cat-titolo { color: #ffffff; }
.mrl-tema-scuro .mrl-cat-freccia,
.mrl-tema-scuro .mrl-cat[open] .mrl-cat-freccia { color: #ffffff; }
.mrl-tema-scuro .mrl-cat-descr { color: #a8a8a8; }
.mrl-tema-scuro .mrl-piatto-testo strong { color: #ffffff; }
.mrl-tema-scuro .mrl-piatto-prezzo { color: var(--mrl-rosso); }
.mrl-tema-scuro .mrl-piatto-descr em { color: #b9b9b9; }
.mrl-tema-scuro .mrl-piatto-foto { border-color: #2b2b2b; background: #0d0d0d; }
.mrl-tema-scuro .mrl-allergeni { background: transparent; }
.mrl-tema-scuro .mrl-allergeni h2 { color: #ffffff; }
.mrl-tema-scuro .mrl-allergeni p { color: #b9b9b9; }
.mrl-tema-scuro .mrl-tabella summary { background: #1c1c1c; border-color: #2b2b2b; color: #e6e6e6; }
.mrl-tema-scuro .mrl-tabella dt { color: #ffffff; }
.mrl-tema-scuro .mrl-tabella dd { color: #b9b9b9; }
.mrl-tema-scuro .mrl-vuoto,
.mrl-tema-scuro .mrl-sospeso { background: #141414; color: #b9b9b9; }
.mrl-tema-scuro .mrl-sospeso h1 { color: #fff; }

/* ---------- da tablet in su: due colonne come il sito attuale ---------- */
@media (min-width: 760px) {
	.mrl-piatti { grid-template-columns: 1fr 1fr; gap: 30px 34px; padding: 0; }
	.mrl-menu { padding: 0 20px 34px; }
	.mrl-allergeni { margin: 0 20px 34px; }
	.mrl-piede-blocchi { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* Logo del locale: scontornato va sulla foto, con fondo pieno va dentro una piastra */
.mrl-logo-porta { display: inline-flex; align-items: center; justify-content: center; }
.mrl-logo-piastra {
	background: rgba(255,255,255,.94); border-radius: 14px;
	padding: 12px 18px; box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.mrl-logo-piastra .mrl-locale-logo { filter: none; }