/* Tema base dei siti: sobrio, leggibile, il colore arriva dall'attività (--colore).
   I temi personalizzati ridefiniscono le variabili e aggiungono il loro tema.css */

:root {
	--carta: #ffffff;
	--carta-2: #f3f5f7;
	--inchiostro: #1d2329;
	--attenuato: #5b6670;
	--linea: #dde2e7;
	--colore: #1f4f8f;
	--su-colore: #ffffff;
	--evidenza: #b42318;
	--libero: #1f7a4d;
	--pochi: #b26b00;
	--pieno: #b42318;
	--font-testo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-titoli: var(--font-testo);
	--raggio: 6px;
	--colonna: 46rem;
}

*, *::before, *::after {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%;}
body {margin: 0; background: var(--carta); color: var(--inchiostro); font: 1.0625rem/1.6 var(--font-testo);}
img {max-width: 100%; height: auto;}
a {color: var(--colore); text-underline-offset: .18em;}
a:hover {text-decoration-thickness: 2px;}
:focus-visible {outline: 3px solid var(--colore); outline-offset: 2px;}
h1, h2, h3 {font-family: var(--font-titoli); line-height: 1.15; margin: 0 0 .5em;}
h1 {font-size: clamp(2rem, 6vw, 3.2rem);}
h2 {font-size: 1.6rem; margin-top: 2.2em;}
h3 {font-size: 1.1rem;}
small {font-size: .82em;}
[hidden] {display: none !important;}
.vh {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}

.salta {position: absolute; left: -999px; top: 0; background: var(--inchiostro); color: #fff; padding: .6em 1em; z-index: 10;}
.salta:focus {left: 0;}

/* testata */
.testata {border-bottom: 1px solid var(--linea); background: var(--carta); z-index: 5;}
@media (min-width: 52rem) {.testata {position: sticky; top: 0;}}
.testata-in {max-width: 72rem; margin: 0 auto; padding: .75rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;}
.marchio {font: 700 1.2rem/1.1 var(--font-titoli); color: var(--inchiostro); text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: .6rem;}
.marchio-logo {height: 2.6rem; width: auto; display: block;}
.nav {display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem;}
.nav a {color: var(--inchiostro); text-decoration: none; padding: .35em 0; border-bottom: 2px solid transparent;}
.nav a[aria-current] {border-bottom-color: var(--colore);}
.nav .nav-prenota {background: var(--colore); color: var(--su-colore); padding: .45em 1em; border-radius: var(--raggio); border: 0;}
.lingue {display: flex; gap: .4rem; font-size: .85rem;}
.lingue a {color: var(--attenuato); text-decoration: none;}
.lingue a[aria-current] {color: var(--inchiostro); font-weight: 700;}

/* impaginazione */
.colonna {max-width: var(--colonna); margin: 0 auto; padding: 0 1rem 3rem;}
.colonna.stretta {max-width: 36rem;}
.intestazione-pagina {padding: 2.2rem 0 1rem;}
.due-colonne {display: grid; gap: 0 2.5rem;}
@media (min-width: 52rem) {.due-colonne {grid-template-columns: 1fr 1fr;}}

/* bottoni */
.bottone {display: inline-block; background: var(--colore); color: var(--su-colore); border: 2px solid var(--colore); border-radius: var(--raggio); padding: .6em 1.2em; font: 600 1rem/1.2 var(--font-testo); text-decoration: none; cursor: pointer;}
.bottone:hover {filter: brightness(1.08);}
.bottone-chiaro {background: transparent; color: var(--colore);}
.bottone-grande {font-size: 1.1rem; padding: .8em 1.6em; width: 100%;}
.bottone:disabled {opacity: .6; cursor: wait;}
.azioni {display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0;}

/* apertura della home */
.apertura {position: relative; background: var(--carta-2); padding: 3rem 1rem;}
.apertura-testo {max-width: 72rem; margin: 0 auto;}
.apertura-tipo {color: var(--attenuato); margin: 0 0 .3rem;}
.apertura-slogan {font-size: 1.25rem; max-width: 32em;}
.apertura.con-foto {color: #fff; padding: 22vh 1rem 3rem; overflow: hidden;}
.apertura.con-foto .apertura-foto {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.apertura.con-foto::after {content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(0,0,0,.7));}
.apertura.con-foto .apertura-testo {position: relative; z-index: 1;}
.apertura.con-foto .apertura-tipo {color: rgba(255,255,255,.85);}
.apertura.con-foto .bottone-chiaro {color: #fff; border-color: #fff;}
.presentazione {font-size: 1.15rem; padding-top: 1.5rem; max-width: 36em;}

.adesso {display: flex; align-items: center; gap: .5em; margin: .8rem 0;}
.spia {width: .7em; height: .7em; border-radius: 50%; background: var(--attenuato); flex: none;}
.adesso-aperto .spia {background: var(--libero); box-shadow: 0 0 0 4px color-mix(in srgb, var(--libero) 25%, transparent);}

/* lavagna */
.lavagna {margin-top: 2.2rem; padding: 1.4rem 1.4rem 1rem; border: 2px solid var(--inchiostro); border-radius: var(--raggio);}
.lavagna h2 {margin: 0;}
.lavagna-data {color: var(--attenuato); margin: .1rem 0 1rem;}
.lavagna-voci {list-style: none; margin: 0; padding: 0;}
.lavagna-voci li {display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; padding: .55rem 0; border-top: 1px dashed var(--linea);}
.voce-nome {font-weight: 600;}
.voce-prezzo {font-weight: 600; text-align: right; white-space: nowrap;}
.voce-desc {grid-column: 1 / -1; color: var(--attenuato); font-size: .95rem;}
.esaurito .voce-nome, .esaurito .piatto-nome {text-decoration: line-through; opacity: .6;}
.voce-esaurito {color: var(--evidenza); font-weight: 700; font-size: .9rem;}

/* carta */
.indice-carta {display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0; position: sticky; top: 0; background: var(--carta); z-index: 2; margin-top: 1.5rem; scrollbar-width: none;}
.indice-carta a {white-space: nowrap; padding: .3em .8em; border: 1px solid var(--linea); border-radius: 99px; color: var(--inchiostro); text-decoration: none; font-size: .95rem;}
.categoria {scroll-margin-top: 4rem;}
@media (min-width: 52rem) {.indice-carta {top: 3.6rem;} .categoria {scroll-margin-top: 8rem;}}
.categoria-nota {color: var(--attenuato); margin-top: -.4rem;}
.piatti {list-style: none; margin: 0; padding: 0;}
.piatto {display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linea);}
.piatto:has(.piatto-foto) {grid-template-columns: auto 1fr auto;}
.piatto-foto {display: block; cursor: zoom-in;}
.piatto-foto img {display: block; width: 84px; height: 84px; object-fit: cover; border-radius: var(--raggio);}
.galleria-griglia a {cursor: zoom-in;}
.piatto:target {background: color-mix(in srgb, var(--colore) 10%, transparent); scroll-margin-top: 5rem;}
.visore.una-sola .visore-prec, .visore.una-sola .visore-succ {display: none;}
.piatto-nome {margin: 0; font-size: 1.05rem;}
.piatto-desc {margin: .15rem 0 0; color: var(--attenuato);}
.piatto-info {margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: .85rem; color: var(--attenuato);}
.segno {border: 1px solid var(--linea); border-radius: 99px; padding: 0 .55em; color: var(--inchiostro);}
.segno-vg, .segno-v {border-color: var(--libero); color: var(--libero);}
.segno-pc {border-color: var(--evidenza); color: var(--evidenza);}
.piatto-prezzo {margin: 0; font-weight: 700; text-align: right; white-space: nowrap;}
.piatto-prezzo small {display: block; font-weight: 400; color: var(--attenuato);}
.surgelato {color: var(--attenuato); font-weight: 400; margin-left: .1em;}
.consigliato .piatto-nome::after {content: " ★"; color: var(--colore);}
.tavolo {display: inline-block; background: var(--inchiostro); color: var(--carta); padding: .2em .7em; border-radius: var(--raggio); margin: 0;}
.filtro-allergeni {margin: 1rem 0; padding: .8rem 1rem; background: var(--carta-2); border-radius: var(--raggio);}
.filtro-allergeni summary {cursor: pointer; font-weight: 600;}
.filtro-scelte {display: flex; flex-wrap: wrap; gap: .4rem .9rem;}
.filtro-esito {font-weight: 600; margin-bottom: 0;}
.note-carta {margin-top: 2rem; font-size: .9rem; color: var(--attenuato);}
.menu-fisso {border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1rem 1.2rem; margin-bottom: 1rem;}
.menu-fisso h3 {display: flex; justify-content: space-between; gap: 1rem;}
.menu-fisso ul {margin: .5rem 0; padding-left: 1.1rem;}
.nota {color: var(--attenuato); font-size: .9rem;}

/* orari e dove */
.tabella-orari {border-collapse: collapse; width: 100%;}
.tabella-orari th, .tabella-orari td {text-align: left; padding: .45rem 0; border-bottom: 1px solid var(--linea); vertical-align: top;}
.tabella-orari th {font-weight: 400; width: 40%;}
.tabella-orari .oggi {font-weight: 700;}
.tabella-orari .oggi th {font-weight: 700;}
.avviso-chiusura {color: var(--evidenza); font-weight: 600;}
.orari-stagione {margin: -.4rem 0 .6rem; font-style: italic; color: var(--attenuato);}
.mappa {width: 100%; height: 280px; border: 0; border-radius: var(--raggio); background: var(--carta-2);}

/* eventi e galleria */
.evento {border-left: 3px solid var(--colore); padding-left: 1rem; margin-bottom: 1.4rem;}
.evento-data {color: var(--attenuato); margin: 0;}
.galleria-griglia {display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem;}
.galleria-griglia img {aspect-ratio: 1; object-fit: cover; border-radius: var(--raggio); display: block;}

/* prenotazione */
.passo {border: 0; padding: 0; margin: 0 0 2rem;}
.passo legend {font: 700 1.3rem/1.2 var(--font-titoli); margin-bottom: .8rem; padding: 0;}
.scelte {display: flex; flex-wrap: wrap; gap: .45rem;}
.scelte label {position: relative;}
.scelte input {position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer;}
.scelte span {display: block; min-width: 3rem; text-align: center; padding: .55em .9em; border: 2px solid var(--linea); border-radius: var(--raggio); background: var(--carta); font-weight: 600;}
.scelte span small {display: block; font-weight: 400; color: var(--pochi);}
.scelte input:checked + span {border-color: var(--colore); background: var(--colore); color: var(--su-colore);}
.scelte input:checked + span small {color: inherit;}
.scelte input:focus-visible + span {outline: 3px solid var(--colore); outline-offset: 2px;}
.aiuto {display: block; color: var(--attenuato); font-size: .9rem; margin: .4rem 0 0;}
.gruppo-turni {margin-bottom: .9rem;}
.gruppo-nome {display: block; font-weight: 600; margin-bottom: .3rem; text-transform: capitalize;}
.calendario {max-width: 26rem;}
.cal-testa {display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem;}
.cal-testa strong {text-transform: capitalize;}
.cal-testa button {font-size: 1.4rem; width: 2.6rem; height: 2.6rem; border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--carta); cursor: pointer; color: var(--inchiostro);}
.cal-testa button:disabled {opacity: .3; cursor: default;}
.cal-griglia {display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;}
.cal-griglia[aria-busy] {opacity: .5;}
.cal-intestazione {text-align: center; font-size: .8rem; color: var(--attenuato); padding-bottom: .2rem;}
.cal-giorno {aspect-ratio: 1; border: 2px solid transparent; border-radius: var(--raggio); background: var(--carta-2); font: 600 1rem var(--font-testo); color: var(--inchiostro); cursor: pointer; position: relative;}
.cal-giorno::after {content: ""; position: absolute; left: 50%; bottom: 14%; width: .4rem; height: .4rem; margin-left: -.2rem; border-radius: 50%;}
.cal-giorno.stato-libero::after {background: var(--libero);}
.cal-giorno.stato-pochi::after {background: var(--pochi);}
.cal-giorno.stato-pieno {color: var(--attenuato); text-decoration: line-through;}
.cal-giorno.stato-pieno::after {background: var(--pieno);}
.cal-giorno:disabled {background: transparent; color: #b5bcc3; cursor: default;}
.cal-giorno[aria-pressed] {border-color: var(--colore); background: var(--carta);}
.cal-legenda {display: flex; gap: 1rem; font-size: .85rem; color: var(--attenuato);}
.lg::before {content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .35rem;}
.lg-libero::before {background: var(--libero);} .lg-pochi::before {background: var(--pochi);} .lg-pieno::before {background: var(--pieno);}
.pieno-titolo {font-weight: 700; color: var(--pieno);}
.campo {margin-bottom: 1rem;}
.campo label {display: block; font-weight: 600; margin-bottom: .25rem;}
.campo input, .campo textarea {width: 100%; font: inherit; padding: .6em .7em; border: 1px solid #b9c1c9; border-radius: var(--raggio); background: var(--carta); color: var(--inchiostro);}
.consenso {display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem;}
.consenso input {margin-top: .3rem;}
.errore-campo {display: block; color: var(--evidenza); font-weight: 600; font-size: .92rem;}
.errore-campo:empty {display: none;}
.riepilogo {font-size: 1.1rem; font-weight: 700;}
.trappola {position: absolute; left: -9999px;}
.alternativa {border-top: 1px solid var(--linea); padding-top: 1rem; color: var(--attenuato);}
.scheda-prenotazione {display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; background: var(--carta-2); padding: 1.2rem; border-radius: var(--raggio);}
.scheda-prenotazione dt {color: var(--attenuato);}
.scheda-prenotazione dd {margin: 0;}
.stato-confermata dd strong {color: var(--libero);}
.stato-annullata dd strong, .stato-rifiutata dd strong {color: var(--evidenza);}
.esito-ok {background: color-mix(in srgb, var(--libero) 12%, transparent); padding: .8rem 1rem; border-radius: var(--raggio);}
.testo-lungo p {max-width: 36em;}

/* piede */
.piede {background: var(--carta-2); margin-top: 3rem; font-size: .92rem;}
.piede-in {max-width: 72rem; margin: 0 auto; padding: 2rem 1rem; display: grid; gap: 1rem;}
@media (min-width: 52rem) {.piede-in {grid-template-columns: 2fr 1fr 1fr;}}
.piede-link {display: flex; flex-direction: column; gap: .2rem;}
.piede-firma {color: var(--attenuato);}

@media print {
	.testata, .piede, .filtro-allergeni, .indice-carta, .azioni, .alternativa, .lingue {display: none !important;}
	body {font-size: 11pt;}
	.piatto {break-inside: avoid;}
}
@media (prefers-reduced-motion: reduce) {* {animation: none !important; transition: none !important; scroll-behavior: auto !important;}}

/* contenitore largo (racconti, galleria) */
.larga {max-width: 72rem; margin: 0 auto; padding: 0 1rem;}

/* striscia dei piatti con la foto */
.striscia {margin: 2.5rem 0 0;}
.striscia-testa {max-width: 72rem; margin: 0 auto; padding: 0 1rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem;}
.striscia-testa h2 {margin: 0 0 .8rem;}
.striscia-piatti {list-style: none; margin: 0; padding: 0 1rem 1rem; display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1rem;}
.striscia-piatti li {flex: 0 0 min(70vw, 15rem); scroll-snap-align: start;}
.striscia-piatti a {display: block; color: inherit; text-decoration: none;}
.striscia-piatti img {width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raggio); display: block;}
.striscia-nome {display: block; font-weight: 600; margin-top: .5rem; line-height: 1.3;}

/* racconti */
.racconto {margin: 3rem 0; display: grid; gap: 1.2rem 3rem; align-items: center;}
@media (min-width: 52rem) {.racconto.con-foto {grid-template-columns: 1fr 1fr;} .racconto.a-destra .racconto-foto {order: 2;}}
.racconto-foto {width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 25%; border-radius: var(--raggio); display: block;}
.racconto-testo {max-width: 34em;}
.racconto h2 {margin-top: 0;}
.racconto p {font-size: 1.12rem;}

/* citazioni */
.citazioni {margin: 3rem 0;}
.citazione {margin: 0 0 2rem;}
.citazione blockquote {margin: 0; font-size: 1.35rem; line-height: 1.45; font-style: italic;}
.citazione blockquote p {margin: 0;}
.citazione figcaption {margin-top: .4rem; color: var(--attenuato);}

/* galleria con visore */
.galleria-sotto {color: var(--attenuato); margin-top: -.4rem;}
.galleria-griglia figure {margin: 0;}
.galleria-griglia figcaption {font-size: .9rem; color: var(--attenuato); margin-top: .3rem;}
.visore {border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible;}
.visore::backdrop {background: rgba(8, 12, 20, .95);}
.visore img {display: block; max-width: 92vw; max-height: 82vh; margin: 0 auto; border-radius: var(--raggio);}
.visore-didascalia {color: #fff; text-align: center; margin: .7rem 0 0;}
.visore button {position: fixed; background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 99px; font: 600 1rem var(--font-testo); cursor: pointer; min-width: 3rem; min-height: 3rem;}
.visore button:hover {background: rgba(255, 255, 255, .28);}
.visore-prec, .visore-succ {top: 50%; font-size: 2rem !important; transform: translateY(-50%);}
.visore-prec {left: 1rem;} .visore-succ {right: 1rem;}
.visore-chiudi {right: 1rem; top: 1rem; padding: 0 1.1rem;}

/* orari in breve (home) */
.orari-breve {margin: .6rem 0 1rem;}
.orari-breve ul {list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; grid-template-columns: auto auto 1fr; gap: .1rem 1rem;}
.orari-breve li {display: contents;}
.ob-cosa {font-weight: 600;}
.ob-giorni {color: var(--attenuato);}
.ob-ore {font-variant-numeric: tabular-nums;}
.orari-breve a {font-size: .9rem;}

/* ferie: striscia di avviso prima, cartello durante */
.ombrellone {fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;}
.ferie-striscia {display: flex; align-items: center; justify-content: center; gap: .7rem; padding: .55rem 1rem; background: color-mix(in srgb, var(--colore) 12%, #fff); text-align: center;}
.ferie-striscia .ombrellone {width: 2.2rem; flex: none;}
.ferie-striscia p {margin: 0;}
.ferie {padding: 2rem 1rem;}
.ferie-cartello {max-width: 34rem; margin: 0 auto; text-align: center; background: #fff; border: 3px solid var(--colore); border-radius: 12px; padding: 1.6rem 1.6rem 1.4rem;}
.ferie-cartello .ombrellone {width: 4.5rem; color: var(--colore);}
.ferie h2 {margin: .3rem 0 .2rem;}
.ferie-riapre {font-weight: 700; font-size: 1.2rem; margin: 0 0 .4rem;}
.ferie-testo {margin: 0;}

/* menu di pranzo e di cena */
.servizi {display: inline-flex; margin: 0 0 1rem; border: 2px solid var(--inchiostro); border-radius: 99px; overflow: hidden;}
.servizi button {font: inherit; font-weight: 700; padding: .45rem 1.2rem; border: 0; background: transparent; color: var(--inchiostro); cursor: pointer;}
.servizi button[aria-pressed=true] {background: var(--inchiostro); color: #fff;}
.prezzo-pranzo, .carta[data-vista=pranzo] .prezzo-cena {display: none;}
.carta[data-vista=pranzo] .prezzo-pranzo {display: inline;}
.carta[data-vista=pranzo] .piatto[data-servizio=cena], .carta[data-vista=cena] .piatto[data-servizio=pranzo] {display: none;}
/* su schermo largo i piatti (al massimo 5) stanno tutti in fila, centrati, allineati al titolo */
@media (min-width: 60rem) {
	.striscia-testa, .striscia-piatti {max-width: 82rem; margin-left: auto; margin-right: auto;}
	.striscia-piatti {display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 15rem); justify-content: center; overflow: visible;}
}