/* ============================================================
   RISTORALIA 2.0 - Tema pubblico accessibile (sopra Bootstrap 5.3)
   Font: Atkinson Hyperlegible (Braille Institute) - progettato
   per la massima leggibilita' da parte di lettori ipovedenti.
   Tutti i contrasti verificati >= 4.5:1 (WCAG 2.1 AA, 1.4.3).
   ============================================================ */

:root {
  --ri-carta:   #FAF7F0;  /* fondo caldo, mai bianco puro (abbagliamento) */
  --ri-inchiostro: #21261C; /* testo: contrasto 14.9:1 su carta */
  --ri-verde:   #572600;  /* Ristoralia: marrone, 11.7:1 su carta. NB: il nome variabile resta "verde"
                              per compatibilita' con Colore::tema(), che genera CSS con questi stessi nomi
                              per il colore scelto da ogni ristorante — qui cambia solo il valore di default,
                              usato unicamente dove NON c'e' un ristorante specifico (pagine account). */
  --ri-verde-scuro: #572600;
  --ri-ocra:    #9C5C14;  /* arancio Ristoralia scurito per il testo, 5:1 su carta (l'arancio puro #F28D1D non basta: 2.3:1) */
  --ri-grigio:  #4A4F45;  /* testo secondario: 7.6:1 */
  --ri-errore:  #9B1C1C;
  --ri-ok:      #1E5631;
  --ri-focus:   #0F62FE;  /* anello di focus ben distinguibile dal verde */
  --ri-superficie: #FFFFFF;          /* card, box, dialog */
  --ri-bordo:      #C9C4B8;
  --ri-link:       var(--ri-verde);
  --ri-link-hover: var(--ri-verde-scuro);
  --ri-evidenza:       #F4EFE3;   /* riquadro allergeni */
  --ri-evidenza-verde: #FBEBD4;   /* contatore del filtro — nome invariato per Colore::tema(), tinta calda */
  --ri-contatore-testo: var(--ri-verde-scuro);
}

body.ri-pubblico {
  background: var(--ri-carta);
  color: var(--ri-inchiostro);
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;          /* 18px base: leggibilita' prima di tutto */
  line-height: 1.65;
}

/* ---- Focus visibile OVUNQUE (WCAG 2.4.7) ---- */
.ri-pubblico :focus-visible {
  outline: 3px solid var(--ri-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Skip link (WCAG 2.4.1) ---- */
.ri-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  background: var(--ri-verde-scuro);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 700;
}
.ri-skip:focus {
  left: .5rem;
  top: .5rem;
  color: #fff;
}

/* ---- Tipografia ---- */
.ri-pubblico h1, .ri-pubblico h2, .ri-pubblico h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ri-inchiostro);
}
.ri-pubblico h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.ri-pubblico h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  border-bottom: 3px solid var(--ri-verde);
  padding-bottom: .35rem;
  margin-top: 2.5rem;
}
.ri-pubblico a { color: var(--ri-link); text-underline-offset: 3px; }
.ri-pubblico a:hover { color: var(--ri-link-hover); }

/* ---- Header ---- */
.ri-header {
  background: var(--ri-verde-scuro);
  color: #fff;
}
/* FIX contrasto: la regola tipografica generale (h1 color inchiostro) vinceva
   per specificita' e rendeva il titolo quasi invisibile sul fondo scuro. */
.ri-pubblico .ri-header h1,
.ri-pubblico .ri-header h2 { color: #fff; }
.ri-header a { color: #fff; }
.ri-header .ri-account-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; text-decoration: none;
}
.ri-header .ri-account-link:hover, .ri-header .ri-account-link:focus { text-decoration: underline; }
.ri-header .ri-link-nome-ristorante { text-decoration: none; }
.ri-header .ri-link-nome-ristorante:hover, .ri-header .ri-link-nome-ristorante:focus { text-decoration: underline; }
.ri-header .ri-citta { color: #DDE7DB; }
/* FIX contrasto: bottone chiaro nell'header. La regola ".ri-header a{color:#fff}"
   sbiancava il testo del vecchio btn-light: bianco su bianco. Questo bottone
   fissa esplicitamente testo scuro su fondo chiaro (14.9:1). */
.ri-header a.btn-ri-chiaro,
.btn-ri-chiaro {
  /* colori fissi, NON variabili di tema: il bottone vive sull'header che
     resta scuro anche col tema chiaro, e nel tema scuro le variabili
     carta/inchiostro si invertono rendendolo illeggibile. */
  background: #FAF7F0;
  border: 2px solid #FAF7F0;
  color: #21261C;
  font-weight: 700;
  padding: .6rem 1.4rem;
}
.ri-header a.btn-ri-chiaro:hover,
.ri-header a.btn-ri-chiaro:focus {
  background: #fff;
  color: #21261C;
}
/* FIX contrasto: bordo del bottone secondario (contorno) nell'header. A
   riposo usava --ri-verde (il colore del tema) come bordo su uno sfondo
   header derivato dallo STESSO colore (--ri-verde-scuro): con temi scuri
   il contrasto scendeva sotto 1.5:1, ben sotto il minimo 3:1 per elementi
   UI. Bianco fisso: Colore::tema() garantisce sempre >=7:1 fra bianco e
   --ri-verde-scuro per costruzione, quindi funziona con qualunque tema. */
.ri-header a.btn-ri-secondario { border-color: #fff; }
.ri-header .ri-logo {
  max-height: 72px;
  max-width: 200px;
  background: #fff;
  padding: .3rem;
  border-radius: .5rem;
}

/* ---- Bottoni ---- */
.btn-ri {
  background: var(--ri-verde);
  border: 2px solid var(--ri-verde);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .6rem 1.4rem;
}
.btn-ri:hover, .btn-ri:focus { background: var(--ri-verde-scuro); border-color: var(--ri-verde-scuro); color: #fff; }
.btn-ri-secondario {
  background: transparent;
  border: 2px solid var(--ri-verde);
  color: var(--ri-verde);
  font-weight: 700;
}
.btn-ri-secondario:hover, .btn-ri-secondario:focus { background: var(--ri-verde); color: #fff; }

/* ============================================================
   FILTRO "COSA POSSO MANGIARE?" - elemento distintivo della pagina
   ============================================================ */
.ri-filtro {
  background: var(--ri-superficie);
  border: 2px solid var(--ri-verde);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
}
.ri-filtro legend {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ri-verde-scuro);
  float: none;
  width: auto;
  padding: 0 .25rem;
}
.ri-filtro .form-check { margin-bottom: .45rem; }
.ri-filtro .form-check-input {
  width: 1.4em;
  height: 1.4em;
  margin-top: .15em;
  border: 2px solid var(--ri-grigio);
}
.ri-filtro .form-check-input:checked {
  background-color: var(--ri-verde);
  border-color: var(--ri-verde);
}
.ri-filtro .form-check-label { padding-left: .35rem; cursor: pointer; }
.ri-filtro .form-check-label svg { vertical-align: -3px; margin-right: .1rem; }

/* contatore risultati: annunciato anche via aria-live */
.ri-contatore {
  font-weight: 700;
  color: var(--ri-contatore-testo);
  background: var(--ri-evidenza-verde);
  border-radius: .5rem;
  padding: .5rem .9rem;
  display: inline-block;
}

/* ---- Piatti ---- */
.ri-piatto {
  background: var(--ri-superficie);
  border: 1px solid var(--ri-bordo);
  border-radius: .6rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: .9rem;
}
.ri-piatto h3 {
  font-size: 1.25rem;
  margin-bottom: .2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ri-prezzo {
  color: var(--ri-ocra);
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ri-descrizione { color: var(--ri-grigio); margin-bottom: .5rem; }

/* allergeni SEMPRE in forma testuale, mai solo icone (WCAG 1.1.1) */
.ri-allergeni {
  font-size: 1rem;
  color: var(--ri-inchiostro);
  background: var(--ri-evidenza);
  border-left: 4px solid var(--ri-ocra);
  padding: .35rem .7rem;
  border-radius: 0 .4rem .4rem 0;
  display: inline-block;
}
.ri-allergeni strong { color: var(--ri-ocra); }

/* badge dietetici: testo + colore, mai solo colore (WCAG 1.4.1) */
.ri-badge {
  display: inline-block;
  font-size: .95rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: .15rem .8rem;
  margin: .15rem .3rem .15rem 0;
  border: 2px solid var(--ri-ok);
  color: var(--ri-ok);
  background: var(--ri-superficie);
}
.ri-badge-piccante { border-color: var(--ri-errore); color: var(--ri-errore); }

/* piatto nascosto dal filtro */
.ri-piatto[hidden] { display: none; }
.ri-categoria[hidden] { display: none; }

/* ---- Form prenotazione ---- */
.ri-pubblico .form-label { font-weight: 700; }
.ri-pubblico { color-scheme: light; }
.ri-pubblico .form-control, .ri-pubblico .form-select {
  font-size: 1.1rem;
  padding: .6rem .8rem;
  border: 2px solid var(--ri-grigio);
  background: var(--ri-superficie);
  color: var(--ri-inchiostro);
}
.ri-pubblico .form-control:focus, .ri-pubblico .form-select:focus {
  border-color: var(--ri-verde);
  box-shadow: none;
}
.ri-errore-campo {
  color: var(--ri-errore);
  font-weight: 700;
  display: block;
  margin-top: .25rem;
}
.ri-pubblico .is-invalid { border-color: var(--ri-errore); }

/* honeypot antispam: fuori schermo, mai display:none (alcuni bot lo rilevano) */
.ri-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer ---- */
.ri-footer {
  background: var(--ri-verde-scuro);
  color: #E7EEE5;
  margin-top: 3rem;
  padding: 2rem 0;
}
.ri-footer a { color: #fff; }

/* ---- Preferenze utente (WCAG 2.3.3 / 1.4.4) ---- */
@media (prefers-reduced-motion: reduce) {
  .ri-pubblico *, .ri-pubblico *::before, .ri-pubblico *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more) {
  :root { --ri-carta: #FFFFFF; --ri-grigio: #21261C; }
  .ri-piatto { border-width: 2px; border-color: var(--ri-inchiostro); }
}

/* stampa del menu */
@media print {
  .ri-header, .ri-footer, .ri-filtro, .ri-no-print { display: none !important; }
  body.ri-pubblico { background: #fff; font-size: 11pt; }
  .ri-piatto { border: none; padding: .3rem 0; page-break-inside: avoid; }
}

/* ==================== ORDINI (fase 2) ==================== */
.ri-aggiungi fieldset {
  border: 1px solid var(--ri-bordo, #c9c4b8);
  border-radius: .5rem;
  padding: .6rem .8rem;
}
.ri-aggiungi legend {
  float: none;
  width: auto;
  padding: 0 .3rem;
  font-weight: 700;
}
.ri-carrello {
  border: 2px solid var(--ri-verde, #572600);
  border-radius: .75rem;
  padding: 1.25rem;
  background: var(--ri-superficie);
}
.ri-carrello h2 { margin-top: 0; }

/* ============================================================
   ACCORDION CATEGORIE (elemento nativo <details>: accessibile
   e funzionante senza JavaScript)
   ============================================================ */
.ri-categoria > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.ri-categoria > summary::-webkit-details-marker { display: none; }
.ri-categoria > summary::before {
  content: "";
  width: .8em; height: .8em;
  flex: 0 0 auto;
  border-right: 3px solid var(--ri-verde);
  border-bottom: 3px solid var(--ri-verde);
  transform: rotate(-45deg);
  transition: transform .15s;
  margin-top: -0.2em;
}
.ri-categoria[open] > summary::before { transform: rotate(45deg); margin-top: -0.5em; }
.ri-categoria > summary h2 { margin: 0; flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .ri-categoria > summary::before { transition: none; }
}

/* ---- Foto piatto ---- */
.ri-piatto-con-foto {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.ri-piatto-con-foto .ri-piatto-corpo { flex: 1; min-width: 0; }
.ri-foto-piatto {
  flex: 0 0 auto;
  display: block;
}
.ri-foto-piatto img {
  width: 110px; height: 110px;
  object-fit: cover;
  border-radius: .6rem;
  border: 2px solid var(--ri-verde);
}
@media (max-width: 575px) {
  .ri-foto-piatto img { width: 84px; height: 84px; }
}

/* ---- Lightbox (elemento nativo <dialog>) ---- */
.ri-lightbox-dialog {
  border: none;
  border-radius: .75rem;
  padding: 0;
  max-width: min(92vw, 60rem);
  background: var(--ri-carta);
}
.ri-lightbox-dialog:focus { outline: none; }
.ri-lightbox-dialog::backdrop { background: rgba(0, 0, 0, .78); }
.ri-lightbox-dialog img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
}
.ri-lightbox-dialog figcaption {
  padding: .75rem 1rem;
  font-weight: 700;
}
.ri-lightbox-dialog .ri-lightbox-chiudi {
  position: absolute;
  top: .5rem; right: .5rem;
}

/* ---- Galleria fotografica ---- */
.ri-galleria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}
.ri-galleria figure { margin: 0; }
.ri-galleria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .6rem;
  border: 2px solid var(--ri-verde);
}
.ri-galleria figcaption { padding-top: .4rem; }

/* I link con classe .btn-ri devono restare bianchi: la regola generale
   ".ri-pubblico a" vinceva in specificita' (bug: "Procedi con l'ordine"
   rosso scuro su rosso scuro con i temi personalizzati). */
.ri-pubblico a.btn-ri,
.ri-pubblico a.btn-ri:hover,
.ri-pubblico a.btn-ri:focus { color: #fff; }
.ri-pubblico a.btn-ri-secondario:hover,
.ri-pubblico a.btn-ri-secondario:focus { color: #fff; }

/* ============================================================
   OPZIONI DI LETTURA (tema, dimensione testo, scala di grigi)
   Gli attributi su <html> sono gestiti da accessibilita.js e
   ricordati in localStorage; la palette scura per-ristorante
   arriva dal blocco <style> generato da Colore::tema().
   ============================================================ */
html[data-testo="grande"]       { font-size: 112.5%; }
html[data-testo="molto-grande"] { font-size: 125%; }
html[data-filtro="grigio"]      { filter: grayscale(1); }

.ri-header { position: relative; }
.ri-a11y {
  position: absolute;
  top: .6rem;
  right: .8rem;
  z-index: 10;
  color: var(--ri-inchiostro);
}
.ri-a11y > summary {
  list-style: none;
  cursor: pointer;
  background: var(--ri-superficie);
  color: var(--ri-inchiostro);
  border: 2px solid var(--ri-bordo);
  border-radius: .5rem;
  padding: .3rem .6rem;
  font-weight: 700;
  font-size: 1rem;
}
.ri-a11y > summary::-webkit-details-marker { display: none; }
.ri-a11y[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ri-a11y-pannello {
  position: absolute;
  right: 0;
  min-width: 15.5rem;
  background: var(--ri-superficie);
  border: 2px solid var(--ri-bordo);
  border-radius: .5rem;
  border-top-right-radius: 0;
  padding: .9rem 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  font-size: 1rem;
}
.ri-a11y-pannello fieldset { border: 0; padding: 0; margin: 0 0 .7rem; }
.ri-a11y-pannello legend { font-weight: 700; font-size: .95rem; padding: 0; margin-bottom: .25rem; float: none; width: auto; }
.ri-a11y-gruppo { display: flex; gap: .35rem; flex-wrap: wrap; }
.ri-a11y-gruppo label {
  border: 2px solid var(--ri-bordo);
  border-radius: .4rem;
  padding: .2rem .55rem;
  cursor: pointer;
}
.ri-a11y-gruppo input { position: absolute; opacity: 0; pointer-events: none; }
.ri-a11y-gruppo input:checked + span { font-weight: 700; }
.ri-a11y-gruppo label:has(input:checked) {
  border-color: var(--ri-link);
  outline: 2px solid var(--ri-link);
}
.ri-a11y-gruppo label:has(input:focus-visible) { outline: 3px solid var(--ri-focus); }
.ri-a11y-grigio { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; }

/* Arabo (RTL): il pannello opzioni di lettura passa a sinistra */
[dir="rtl"] .ri-a11y { right: auto; left: .8rem; }
[dir="rtl"] .ri-a11y-pannello { right: auto; left: 0; border-top-right-radius: .5rem; border-top-left-radius: 0; }


/* I link di header e footer sono bianchi su fondo scuro: l'hover generale
   (var --ri-link-hover) li rendeva del colore dello sfondo -> sparivano.
   Qui restano bianchi, con la sottolineatura come feedback (WCAG 1.4.1). */
.ri-pubblico .ri-header a:not([class*="btn"]):hover,
.ri-pubblico .ri-header a:not([class*="btn"]):focus,
.ri-pubblico .ri-footer a:not([class*="btn"]):hover,
.ri-pubblico .ri-footer a:not([class*="btn"]):focus {
  color: #fff;
  text-decoration-thickness: 3px;
}

/* Bottone di chiusura del lightbox: colori fissi e X in SVG (il glifo \2715
   su alcuni Android non esiste nel font: restava un riquadro vuoto). */
.ri-lightbox-chiudi {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: rgba(0, 0, 0, .65);
  color: #FFFFFF;
  cursor: pointer;
}
.ri-lightbox-chiudi:hover,
.ri-lightbox-chiudi:focus { background: #000; outline: none; }
.ri-lightbox-chiudi:focus-visible {
  outline: 2px solid #F28D1D;
  outline-offset: 2px;
}

/* Allergeni e blocco d'ordine a tutta larghezza sotto la foto del piatto */
.ri-piatto-con-foto { flex-wrap: wrap; }
.ri-piatto-con-foto .ri-allergeni,
.ri-piatto-con-foto .ri-aggiungi { flex-basis: 100%; }

/* Etichette descrittive e note legali a scomparsa */
.ri-badge-et { border-style: dashed; }

/* Informativa privacy in prenota.php: <summary> stilizzato come link */
.ri-privacy-apri {
  color: var(--ri-link);
  text-decoration: underline;
  list-style: none;
  display: inline-block;
}
.ri-privacy-apri::-webkit-details-marker { display: none; }
.ri-privacy-apri:hover, .ri-privacy-apri:focus { color: var(--ri-link-hover); }
.ri-pubblico a.ri-badge-et,
.ri-pubblico a.ri-badge-et:hover,
.ri-pubblico a.ri-badge-et:focus { color: var(--ri-ok); text-decoration: none; }

/* Allergeni sempre a tutta larghezza (con o senza foto) e bottone secondario
   con lo stesso padding del primario (il tasto "aggiungi altri piatti"
   risultava sproporzionato accanto a "Procedi con l'ordine"). */
.ri-allergeni { display: block; }
.btn-ri-secondario { padding: .6rem 1.4rem; vertical-align: middle; }
.btn-ri { vertical-align: middle; }

/* Mostra/nascondi password: bottone a forma di occhio dentro il campo */
.ri-campo-password { position: relative; }
.ri-campo-password input[type="password"],
.ri-campo-password input[type="text"] { padding-right: 2.75rem; }
.ri-occhio-password {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: .35rem;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ri-verde);
}
.ri-occhio-password svg { width: 20px; height: 20px; }
.ri-occhio-password:hover,
.ri-occhio-password:focus-visible { background: rgba(0, 0, 0, .06); }

/* Pulsante "torna su" nelle pagine pubbliche del ristorante */
.ri-torna-su {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--ri-verde);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s ease;
  z-index: 150;
  cursor: pointer;
}
.ri-torna-su.visibile {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ri-torna-su svg { width: 24px; height: 24px; }
.ri-torna-su:hover,
.ri-torna-su:focus-visible { background: var(--ri-ocra); color: var(--ri-verde); }
@media (prefers-reduced-motion: reduce) {
  .ri-torna-su { transition: opacity .01ms, visibility .01ms; }
}
/* Su mobile in verticale il logo "powered by" nel footer sta proprio dove il
   bottone atterrerebbe di default: lo centriamo orizzontalmente solo li'. In
   orizzontale e su schermi più larghi c'e' già abbastanza spazio. */
@media (max-width: 575px) and (orientation: portrait) {
  .ri-torna-su {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
  }
  .ri-torna-su.visibile { transform: translateX(-50%) translateY(0); }
}