/* ==========================================================================
   pages.css — layout condivisi per le pagine "uguali su ogni sito ristorante"
   (legali, galleria, contatto, stati vuoti/errore del funnel).

   PERCHÉ ESISTE
   I template di fallback in themes/base usano utility Tailwind. I temi che non
   caricano Tailwind (malefiz, audimax, praxis, damico, flogeier, kranz,
   codlabgaming, hausarztpraxis) ricevevano quindi contenuto SENZA contenitore,
   senza misura e senza ritmo verticale: titoli hero-scale su testo legale,
   testo incollato al bordo del viewport. Su malefiz era il difetto visibile
   segnalato dal committente il 2026-07-25.

   CONTRATTO
   Nessuna dipendenza da Tailwind. Tutto è espresso con `var(--token, fallback)`:
   un tema che definisce i propri token li vede rispettati, un tema che non ne ha
   ottiene comunque un default leggibile. Il tema decide l'ESTETICA (font, colori,
   spaziature), questo file garantisce il COMPORTAMENTO (misura, ritmo, stati,
   accessibilità).

   Namespace `rs-` (Riservati shared) per non collidere con `mf-`, `ax-`, `r67-`…
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fondamenta non negoziabili
   -------------------------------------------------------------------------- */

/* Un tema che usa `display:grid/flex` su un contenitore batte [hidden] e mostra
   elementi che dovevano restare nascosti (accaduto sui passi del form malefiz).
   Questa riga chiude la classe di bug per tutta la flotta. */
[hidden] { display: none !important; }

/* Focus SEMPRE visibile: nessun `outline:none` senza sostituto. */
.rs-scope :focus-visible,
.rs-prose :focus-visible,
.rs-gallery :focus-visible,
.rs-contact :focus-visible,
.rs-empty :focus-visible {
  outline: 2px solid var(--accent, #A85D00);
  outline-offset: 2px;
  border-radius: var(--r-sm, 4px);
}

@media (prefers-reduced-motion: reduce) {
  .rs-scope *, .rs-gallery *, .rs-empty * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   1. Contenitori e intestazione di pagina
   -------------------------------------------------------------------------- */

.rs-wrap {
  width: min(100% - 2.5rem, var(--wrap, 1180px));
  margin-inline: auto;
}
/* Misura da documento: il testo lungo non deve superare ~70 caratteri. */
/* 46rem davano 736px di colonna, cioe' 83-94 caratteri per riga misurati sul
   testo renderizzato: fuori dalla fascia 45-75 in cui l'occhio ritrova il capo
   della riga dopo. Stringere il CONTENITORE invece della sola prosa tiene
   titolo e testo sulla stessa misura, senza il disallineamento che la regola
   `max-width:none` qui sotto voleva evitare. */
.rs-wrap--doc { width: min(100% - 2.5rem, 36rem); margin-inline: auto; }

.rs-section { padding-block: clamp(var(--sp-7, 3rem), 9vw, var(--sp-9, 6rem)); }
.rs-section--tight { padding-block: clamp(var(--sp-6, 2rem), 6vw, var(--sp-7, 3rem)); }

.rs-page__head { margin-bottom: clamp(var(--sp-6, 2rem), 5vw, var(--sp-7, 3rem)); }

/* Kicker: se il tema ha una sua etichetta la usa lui; questo è il default. */
.rs-kicker {
  display: block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--t-xs, .75rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted, #63594C);
  margin-bottom: var(--sp-3, .75rem);
}

/* Il titolo di pagina eredita il font del tema ma NON la scala hero:
   `--t-5xl` (fino a 5.5rem su malefiz) è pensato per la home, non per
   "Datenschutzerklärung". */
.rs-page__title {
  font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-4, 1rem);
  text-wrap: balance;
  color: var(--text, #1D1D1B);
}

.rs-page__lead {
  font-size: var(--t-lg, 1.125rem);
  line-height: 1.6;
  color: var(--text-muted, #63594C);
  max-width: 60ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. Prosa / documenti legali
   Lo scope RIDEFINISCE le dimensioni dei titoli: i globali dei temi sono
   tarati per hero e sezioni, non per un documento da leggere.
   -------------------------------------------------------------------------- */

.rs-prose {
  color: var(--text, #1D1D1B);
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: var(--t-base, 1rem);
  line-height: 1.7;
  max-width: 68ch;
}

.rs-prose > * + * { margin-top: var(--sp-4, 1rem); }

/* Dentro la colonna-documento la misura la da' il contenitore (36rem = ~70
   caratteri): un secondo vincolo su .rs-prose lascerebbe il testo fuori centro
   rispetto al titolo. */
.rs-wrap--doc .rs-prose,
.rs-wrap--doc .rs-prose p,
.rs-wrap--doc .rs-prose ul,
.rs-wrap--doc .rs-prose ol { max-width: none; }

/* Respiro fra paragrafi: 1rem è giusto fra elementi diversi, troppo poco fra
   due paragrafi di un testo legale che si legge di seguito. */
.rs-prose p + p { margin-top: var(--sp-5, 1.5rem); }

.rs-prose h2 {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  /* MAI maiuscolo in un documento: illeggibile su paragrafi lunghi. */
  text-transform: none;
  color: var(--text, #1D1D1B);
  margin: clamp(var(--sp-6, 2rem), 4vw, var(--sp-7, 3rem)) 0 var(--sp-3, .75rem);
  padding-top: var(--sp-4, 1rem);
  border-top: 1px solid var(--border, #DCD0BC);
  text-wrap: balance;
}
.rs-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.rs-prose h3 {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
  color: var(--text, #1D1D1B);
  margin: var(--sp-5, 1.5rem) 0 var(--sp-2, .5rem);
}

.rs-prose p { margin: 0; max-width: 68ch; }
.rs-prose strong { font-weight: 700; color: var(--text, #1D1D1B); }

.rs-prose a {
  color: var(--accent, #A85D00);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  /* Gli indirizzi e le URL lunghe non devono sfondare il contenitore. */
  overflow-wrap: anywhere;
}
.rs-prose a:hover { text-decoration-thickness: 2px; }

.rs-prose ul, .rs-prose ol { margin: 0; padding-left: 1.35rem; max-width: 68ch; }
.rs-prose li + li { margin-top: var(--sp-2, .5rem); }
.rs-prose ul { list-style: disc; }
.rs-prose ol { list-style: decimal; }

.rs-prose hr {
  border: 0;
  border-top: 1px solid var(--border, #DCD0BC);
  margin-block: var(--sp-6, 2rem);
}

/* Blocco indirizzo/contatto dentro la prosa (Impressum). */
.rs-prose address {
  font-style: normal;
  line-height: 1.7;
}

.rs-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm, .875rem);
  /* Le tabelle larghe scorrono da sole, non sfondano la pagina. */
  display: block;
  overflow-x: auto;
}
.rs-prose th, .rs-prose td {
  text-align: left;
  padding: var(--sp-2, .5rem) var(--sp-3, .75rem);
  border-bottom: 1px solid var(--border, #DCD0BC);
}
.rs-prose th { font-weight: 700; }

/* Nota/aside informativo (es. "questa pagina non sostituisce…"). */
.rs-note {
  border-left: 3px solid var(--accent, #A85D00);
  background: var(--surface, #FFFCF6);
  padding: var(--sp-4, 1rem);
  border-radius: 0 var(--r-md, 8px) var(--r-md, 8px) 0;
  font-size: var(--t-sm, .875rem);
  color: var(--text-muted, #63594C);
}
.rs-note > :first-child { margin-top: 0; }
.rs-note > :last-child { margin-bottom: 0; }

/* Indice dei paragrafi per documenti lunghi (Datenschutz, AGB). */
.rs-toc {
  border: 1px solid var(--border, #DCD0BC);
  border-radius: var(--r-md, 8px);
  background: var(--surface, #FFFCF6);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.5rem);
  margin-bottom: var(--sp-6, 2rem);
}
.rs-toc__title {
  font-size: var(--t-xs, .75rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted, #63594C);
  margin: 0 0 var(--sp-3, .75rem);
}
.rs-toc ol { margin: 0; padding-left: 1.2rem; font-size: var(--t-sm, .875rem); }
.rs-toc li + li { margin-top: var(--sp-2, .5rem); }

/* --------------------------------------------------------------------------
   3. Galleria — consuma le foto della dashboard del ristoratore
   -------------------------------------------------------------------------- */

.rs-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3, .75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px)  { .rs-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .rs-gallery { grid-template-columns: repeat(4, 1fr); } }

.rs-gallery__item { margin: 0; position: relative; }

.rs-gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md, 8px);
  background: var(--bg-deep, #EDE4D5);
  transition: transform var(--dur, .28s) var(--ease, cubic-bezier(.16,1,.3,1));
}

/* La prima foto guida la composizione su schermi larghi. */
@media (min-width: 700px) {
  .rs-gallery__item--lead { grid-column: span 2; grid-row: span 2; }
  .rs-gallery__item--lead img { aspect-ratio: 1; }
}

/* Zoom solo dove c'è un vero hover (mai su touch). */
@media (hover: hover) {
  a.rs-gallery__link:hover img { transform: scale(1.03); }
}
.rs-gallery__link { display: block; border-radius: var(--r-md, 8px); }

.rs-gallery__caption {
  font-size: var(--t-xs, .75rem);
  color: var(--text-muted, #63594C);
  margin-top: var(--sp-2, .5rem);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   4. Contatto
   -------------------------------------------------------------------------- */

.rs-contact { display: grid; gap: clamp(var(--sp-6, 2rem), 5vw, var(--sp-8, 4rem)); }
@media (min-width: 900px) {
  .rs-contact { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
}

.rs-facts { display: grid; gap: var(--sp-4, 1rem); }
.rs-fact {
  border: 1px solid var(--border, #DCD0BC);
  border-radius: var(--r-md, 8px);
  background: var(--surface, #FFFCF6);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.5rem);
}
.rs-fact__label {
  display: block;
  font-size: var(--t-xs, .75rem);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted, #63594C);
  margin-bottom: var(--sp-2, .5rem);
}
.rs-fact__value { font-size: var(--t-base, 1rem); line-height: 1.6; margin: 0; }
.rs-fact__value a { color: var(--accent, #A85D00); }

/* Orari: allineamento a due colonne che regge nomi di giorno di lunghezza diversa. */
.rs-hours { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.rs-hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4, 1rem);
  padding-block: var(--sp-2, .5rem);
  border-bottom: 1px solid var(--border, #DCD0BC);
}
.rs-hours li:last-child { border-bottom: 0; }
.rs-hours__day { font-weight: 600; }
.rs-hours__time { color: var(--text-muted, #63594C); text-align: right; }
.rs-hours li[aria-current="date"] .rs-hours__day,
.rs-hours li[aria-current="date"] .rs-hours__time { color: var(--accent, #A85D00); font-weight: 700; }
.rs-hours__closed { font-style: italic; }

/* --------------------------------------------------------------------------
   5. Form — etichette vere, errori specifici, input mai perso
   -------------------------------------------------------------------------- */

.rs-form { display: grid; gap: var(--sp-4, 1rem); }
.rs-field { display: grid; gap: var(--sp-2, .5rem); }
.rs-field--pair { display: grid; gap: var(--sp-4, 1rem); }
@media (min-width: 620px) { .rs-field--pair { grid-template-columns: 1fr 1fr; } }

.rs-label {
  font-size: var(--t-sm, .875rem);
  font-weight: 600;
  /* Contrasto: --text, non --text-muted. Le etichette non sono decorazione.
     (Il contrasto insufficiente sulle label era una violazione axe su 4 tenant.) */
  color: var(--text, #1D1D1B);
}
.rs-label__optional { font-weight: 400; color: var(--text-muted, #63594C); }

.rs-input, .rs-textarea, .rs-select {
  width: 100%;
  font: inherit;
  color: var(--text, #1D1D1B);
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, var(--border, #C2B49C));
  border-radius: var(--r-sm, 4px);
  padding: .7rem .85rem;
  /* ≥44px di area tattile senza ingrandire il testo. */
  min-height: 2.75rem;
  transition: border-color var(--dur-fast, .16s), box-shadow var(--dur-fast, .16s);
}
.rs-textarea { min-height: 8rem; resize: vertical; }
.rs-input:focus-visible, .rs-textarea:focus-visible, .rs-select:focus-visible {
  outline: 2px solid var(--accent, #A85D00);
  outline-offset: 1px;
  border-color: var(--accent, #A85D00);
}
.rs-input[aria-invalid="true"], .rs-textarea[aria-invalid="true"] {
  border-color: var(--error, #B84E3D);
  border-width: 2px;
}
.rs-input:disabled, .rs-textarea:disabled, .rs-select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.rs-error {
  font-size: var(--t-sm, .875rem);
  color: var(--error, #B84E3D);
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: .4rem;
}
/* Il significato non sta nel solo colore: c'è anche il simbolo. */
.rs-error::before { content: "!"; font-weight: 700; flex: 0 0 auto; }

.rs-hint { font-size: var(--t-sm, .875rem); color: var(--text-muted, #63594C); }

.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .7rem 1.4rem;
  font: inherit;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--r-sm, 4px);
  cursor: pointer;
  text-decoration: none;
  background: var(--accent-bg, var(--accent, #A85D00));
  color: var(--accent-ink, #fff);
  transition: transform var(--dur-fast, .16s), filter var(--dur-fast, .16s);
}
.rs-btn:hover { filter: brightness(.94); }
.rs-btn:active { transform: translateY(1px); }
.rs-btn[disabled], .rs-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}
.rs-btn--ghost {
  background: transparent;
  color: var(--text, #1D1D1B);
  border-color: var(--border-strong, var(--border, #C2B49C));
}

/* Bottone in caricamento: larghezza stabile, doppio invio impedito. */
.rs-btn[data-loading="true"] { pointer-events: none; opacity: .8; }
.rs-btn[data-loading="true"] .rs-btn__spinner {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rs-spin .7s linear infinite;
}
.rs-btn__spinner { display: none; }
@keyframes rs-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. Stati: vuoto, errore, successo
   Il funnel deve dire la VERITÀ. «Nessun orario disponibile» quando in realtà
   l'integrazione non risponde è il difetto trovato su piccoloamore.
   -------------------------------------------------------------------------- */

.rs-empty, .rs-state {
  border: 1px solid var(--border, #DCD0BC);
  border-radius: var(--r-md, 8px);
  background: var(--surface, #FFFCF6);
  padding: clamp(var(--sp-5, 1.5rem), 4vw, var(--sp-7, 3rem));
  text-align: left;
}
.rs-empty__title, .rs-state__title {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: var(--t-lg, 1.125rem);
  font-weight: 700;
  text-transform: none;
  margin: 0 0 var(--sp-2, .5rem);
  color: var(--text, #1D1D1B);
}
.rs-empty__body, .rs-state__body {
  margin: 0 0 var(--sp-4, 1rem);
  color: var(--text-muted, #63594C);
  max-width: 60ch;
}
.rs-empty__actions, .rs-state__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3, .75rem);
}
.rs-state--error { border-left: 3px solid var(--error, #B84E3D); }
.rs-state--success { border-left: 3px solid var(--success, #4C8D5E); }

/* Scheletro di caricamento: stessa forma del contenuto finale, zero salti. */
.rs-skeleton {
  background: linear-gradient(90deg,
    var(--bg-deep, #EDE4D5) 25%,
    var(--surface, #FFFCF6) 50%,
    var(--bg-deep, #EDE4D5) 75%);
  background-size: 200% 100%;
  animation: rs-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm, 4px);
}
@keyframes rs-shimmer { to { background-position: -200% 0; } }
.rs-skeleton--slot { height: 2.75rem; }
.rs-skeleton--line { height: 1rem; margin-bottom: .5rem; }

/* Solo per screen reader (annunci live). */
.rs-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mappa incorporata: senza consenso marketing resta un segnaposto statico. */
.rs-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  background: var(--bg-deep, #EDE4D5);
}
.rs-embed iframe, .rs-embed img { width: 100%; height: 100%; border: 0; display: block; }
.rs-embed__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3, .75rem);
  padding: var(--sp-4, 1rem);
  text-align: center;
  font-size: var(--t-sm, .875rem);
  color: var(--text-muted, #63594C);
}