/* ─── Font locali ─── */
@font-face {
  font-family: 'Oswald';
  src: url('/themes/yummy/fonts/Oswald-ExtraLight.woff2') format('woff2'),
       url('/themes/yummy/fonts/Oswald-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/themes/yummy/fonts/Oswald-Regular.woff2') format('woff2'),
       url('/themes/yummy/fonts/Oswald-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Metropolis1920';
  src: url('/themes/yummy/fonts/Metropolis1920.woff2') format('woff2'),
       url('/themes/yummy/fonts/Metropolis1920.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('/themes/yummy/fonts/Raleway-Regular.woff2') format('woff2'),
       url('/themes/yummy/fonts/Raleway-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('/themes/yummy/fonts/Raleway-Light.woff2') format('woff2'),
       url('/themes/yummy/fonts/Raleway-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rochester';
  src: url('/themes/yummy/fonts/Rochester-Regular.woff2') format('woff2'),
       url('/themes/yummy/fonts/Rochester-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─── Animazioni fade-in (rimpiazza AOS/jQuery) ─── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s ease both;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease both;
}

/* Scroll-reveal: gli elementi [data-reveal] partono invisibili SOLO se il JS è
   attivo (html.reveal-js), poi vengono rivelati da .animate-fade-in-up. Senza JS
   restano visibili (nessun contenuto nascosto). */
html.reveal-js [data-reveal] {
  opacity: 0;
}
[data-reveal].animate-fade-in-up {
  opacity: 1;
}

html {
  scroll-behavior: smooth;
}

/* Body scuro del tema Yummy (l'originale lo imposta inline in layout.js = #0b1214).
   Va ripristinato qui perché bootstrap.min.css resetta body a #fff. */
body {
  background-color: #0b1214;
}

/* Pulsante chiusura drawer: il tema stila solo `a.close` (transform rotate → X).
   Il nostro è un <button> (a11y) → replichiamo qui la stessa resa. */
.menu-close-botton .close {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  transform: rotate(45deg);
  transition: 0.5s all;
}
.menu-close-botton .close:hover {
  transform: rotate(180deg);
}

/* ─── A11y: skip-link (visibile solo al focus da tastiera) ─── */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100000;
  padding: 10px 16px;
  background: #423224;
  color: #fff;
  border: 1px solid #c19977;
  border-radius: 4px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid #c19977;
  outline-offset: 2px;
}

/* ─── Logo: dimensione responsive per-breakpoint (aspect-safe) ───
   L'originale fissa la WIDTH del logo (85/70/60px) per breakpoint, ma con logo
   CMS di aspect ratio arbitrario ciò lo deforma/gonfia. Neutralizziamo la width
   fissa (width:auto) e cappiamo con max-height/max-width scalati come l'originale,
   così un logo qualsiasi resta proporzionato e non gonfia l'header. */
/* Il box logo si stira a tutta altezza dell'header così il divisore (border-right)
   arriva da bordo a bordo come nell'originale, anche con loghi CMS più piccoli. */
.logo-img {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.logo-img img,
header.manu-sticky .logo-img img {
  width: auto !important;
  max-width: 220px;
  object-fit: contain;
  transition: height 0.35s ease-in-out;
}
/* Effetto 1:1 dell'originale: il logo RIMPICCIOLISCE su scroll (header sticky).
   Usiamo l'altezza (non la width) così un logo di aspect ratio qualsiasi resta
   proporzionato. Valori scalati per breakpoint. */
.logo-img img { height: 82px !important; }
header.manu-sticky .logo-img img { height: 52px !important; }
@media (max-width: 1199px) {
  .logo-img img { height: 68px !important; }
  header.manu-sticky .logo-img img { height: 48px !important; }
}
@media (max-width: 767px) {
  .logo-img img { height: 52px !important; }
  header.manu-sticky .logo-img img { height: 44px !important; }
}
@media (max-width: 575px) {
  .logo-img img { height: 46px !important; }
  header.manu-sticky .logo-img img { height: 40px !important; }
}

/* Footer logo: il tema originale conta su un asset pre-dimensionato; qui i loghi
   sono arbitrari → vincolo dimensione coerente (mobile 90px come lo style originale). */
.social-box .footer-logo img {
  max-width: 120px;
  max-height: 90px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Drawer: il body dei blocchi (.widget_block) nell'originale contiene solo <a> a cui
   il tema non assegna un colore esplicito → su pannello scuro resta illeggibile.
   Forziamo un colore leggibile per testo e link (indirizzo/contatti/orari). */
.menu.side-menu .sidebar_core .widget_block,
.menu.side-menu .sidebar_core .widget_block a {
  color: rgba(255, 255, 255, 0.85);
}
/* Orari nel drawer: label del giorno in oro (come `.reastaurant-time li span` del footer),
   orari in chiaro — label e orari con colore differente. */
.menu.side-menu .sidebar_core .widget_block .hours-day {
  color: #c19977;
}

/* ─── Hero: titolo su slide non-prima (H1 unico) ───
   Solo la prima slide titolata è <h1>; le altre replicano la tipografia del titolo hero
   (clone di `h1` base + `.hero-text h1`) restando semplici <p>, così non creano h1 extra. */
.hero-text .hero-title-line {
  font-size: 120px;
  font-family: 'Metropolis 1920';
  font-weight: normal;
  color: white;
  margin: 0;
  padding: 25px 0 31px;
}
@media only screen and (max-width: 1199px) { .hero-text .hero-title-line { font-size: 90px; } }
@media only screen and (max-width: 992px)  { .hero-text .hero-title-line { font-size: 60px; } }
@media only screen and (max-width: 767px)  { .hero-text .hero-title-line { font-size: 40px; padding: 18px 0 20px; } }

/* ─── Team (chef grid): nome sempre bianco ───
   L'originale colora il nome via `.chef-text h4 a` (bianco), lasciando `h4` scuro; nel
   nostro blocco members il nome può essere testo semplice (membro senza pagina dettaglio)
   → erediterebbe il colore scuro (invisibile sul fondo #12181c). Forziamo bianco. */
.chef-text h4,
.chef-text h4 a { color: #fff; }

/* Overlay chef: si estende con gap UGUALI a sx/dx (equidistante dai bordi della foto),
   come l'originale, senza dipendere dalla lunghezza del nome (niente a-capo su nomi corti).
   L'originale è allineato a sinistra e appare centrato solo coi nomi lunghi; qui fissiamo
   left/right simmetrici. */
.chef-text {
  left: 20px !important;
  right: 20px !important;
  transform: none;
}

/* ─── Voci menu (blocchi `menuItems` e `menuPage`) ───
   Il tema definisce il layout inline (nome · leader · prezzo) SOLO su `a.menu-item`
   (l'originale usa un <a> per aprire il popup jQuery). I blocchi CMS vabo sono
   display-only e usano `div.menu-item`, che resterebbe `display:block` → il prezzo va
   a capo. Replichiamo il flex per il `.menu-item` dentro le liste menu (qualsiasi tag). */
.items-menu-text .menu-item {
  display: flex;
  width: 100%;
  align-items: flex-end;
}

/* Allineamento al brand book (paragrafo "Voce di menu"): NOME bianco, PREZZO oro,
   linea punteggiata ORO (tenue), descrizione grigia. Il tema base rende nome+prezzo
   entrambi oro (`.items-menu-text h4{color:#c19977}`) e il leader grigio (#e3e3e3). */
.items-menu-text .menu-item h4:first-child {
  color: #ffffff;              /* nome → bianco (il prezzo, ultimo h4, resta oro) */
}
.items-menu-text .menu-item svg path {
  stroke: rgba(193, 153, 119, 0.5);  /* leader punteggiato → oro tenue (era grigio) */
}
.items-menu-text li > p {
  color: #9a9a9a;              /* descrizione voce → grigio tenue (AA 6.7:1) */
}

/* Voci con VARIANTI (più prezzi): il nome fa da intestazione, ogni variante è una riga-prezzo
   dedicata (nome … prezzo) indentata e più leggera → tutti i prezzi visibili, niente "da €"
   né varianti nella descrizione. */
.items-menu-text .menu-item--group { margin-bottom: 2px; }
.items-menu-text .menu-item--variant { padding-left: 22px; }
/* Solo il NOME variante è più piccolo/leggero; il PREZZO resta alla dimensione normale. */
.items-menu-text .menu-item--variant .mi-variant { font-size: 0.9rem; font-weight: 300; }

/* ─── Breadcrumb dentro l'hero (`pageHero` → `.page-sub-title`) ───
   Il preflight Tailwind dell'app imposta `svg { display:block }`, che spezza il flusso
   inline della riga "Home ◇ Menu" (freccia su riga a sé). Ripristiniamo l'svg inline così
   etichette e freccia stanno sulla stessa riga, allineate al centro verticale del testo. */
.page-sub-title svg {
  display: inline-block;
  vertical-align: middle;
}

/* ─── Blocco "Prenota un tavolo" (bookTable / BookingBlock) — SOLO yummy ───
   Avvicinato al "Book A Table" del template originale (pannello scuro #12181c centrato,
   eyebrow Rochester oro SOPRA il titolo Oswald, campi trasparenti con bordo oro squadrati),
   restando fedele al brand book (bibbia): il bottone invio è OUTLINE — il brand book documenta
   "Prenota un tavolo" come outline, mentre l'originale lo fa pieno. Foglio caricato solo per
   yummy → altri temi invariati. Specificità `.yummy-booking X` (0,0,1,1) batte le utility. */

/* Pannello scuro centrato (come `.book-table` dell'originale), largo quanto il container
   del tema (`.container` = max-width 1860px) invece dello stretto `max-w-xl` del blocco. */
.yummy-booking section {
  background: transparent;
  max-width: 1860px;
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Form contenuta e centrata nel pannello ampio (leggibilità), a blocchi (gruppi). */
.yummy-booking form {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 30px auto 0;
}

/* ── Gruppi "La tua prenotazione" / "I tuoi dati" ──
   I wrapper sono `display:contents` inline di default (neutri per gli altri temi); qui li
   attiviamo come sezioni con titolo e campi in riga. */
.yummy-booking .booking-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 20px 24px;
  width: 100%;
}
.yummy-booking .booking-group + .booking-group { margin-top: 30px; }
.yummy-booking .booking-group-title {
  display: block !important;
  flex-basis: 100%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c19977;
  font-size: 0.95rem;
  line-height: 1;
  text-align: left;
  margin: 0;
}
.yummy-booking .booking-group-title::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(193, 153, 119, 0.5), transparent);
}
/* Campi in riga dentro i gruppi (si adattano e vanno a capo su schermi stretti). */
.yummy-booking .booking-group > div { flex: 1 1 180px; }
.yummy-booking .booking-group--contact > div { flex: 1 1 240px; }
.yummy-booking .booking-group > div.sm\:col-span-2 { flex-basis: 100%; }

/* Titolo Oswald bianco centrato + eyebrow Rochester oro SOPRA il titolo (il sottotitolo
   `p.mt-1` del blocco è spostato sopra via order; l'eventuale messaggio "non disponibile"
   `p.mt-2` resta al suo posto sotto il titolo). */
.yummy-booking h2 {
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 2.2rem;
  text-align: center;
  margin: 0;
}
/* Motivo a rombo del tema sotto il titolo (decoro on-brand). */
/* Separatore sotto il titolo del wizard: rombo + linea (markup .text-shape), centrato —
   coerente con i titoli di sezione del tema (standard brand book). Il vecchio rombo-only
   via ::after è stato rimosso a favore del separatore completo. */
.booking-wizard .text-shape { justify-content: center; margin: 14px 0 4px; }

/* ─── Titoli categoria del menu allineati alla scala titoli del brand book ───
   Erano 50px senza forzare il maiuscolo; il brand book prescrive titoli di sezione Oswald
   MAIUSCOLO su scala clamp(~1.7–2.6rem). Uniforma le categorie agli altri titoli del tema. */
.items-menu-page-title-text h2,
.items-menu-title-text h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.15;
}
.yummy-booking p { color: #dddddd; text-align: center; }
.yummy-booking p.mt-1 {
  order: -1;
  font-family: 'Rochester', cursive;
  color: #e7b68c;
  font-size: 2.1rem;
  line-height: 1;
  margin: 0 0 4px;
}

/* Etichette campi in oro (Oswald), con più respiro. */
.yummy-booking label {
  color: #c19977;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
  margin-bottom: 9px;
}

/* Campi a filo (underline): niente box, solo una linea oro sotto — look editoriale/
   fine-dining, distintivo ma coerente col brand book (minimale, oro su scuro).
   ⚠️ Bootstrap (caricato dal tema) definisce l'utility `.border` con `!important` e colore
   `#dee2e6`, che collide con la classe Tailwind `.border` del blocco condiviso. Serve quindi
   selettore a specificità superiore (`.yummy-booking form <el>`) + `!important` per vincere. */
.yummy-booking form input,
.yummy-booking form select,
.yummy-booking form textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(193, 153, 119, 0.5) !important;
  border-radius: 0 !important;
  color: #ffffff;
  padding: 10px 2px;
  transition: border-color 0.3s ease;
}
.yummy-booking form input::placeholder,
.yummy-booking form textarea::placeholder { color: #7c7c7c; }
.yummy-booking form input:focus,
.yummy-booking form select:focus,
.yummy-booking form textarea:focus {
  border-bottom-color: #e7b68c !important;
  box-shadow: none;
  outline: none;
}
.yummy-booking form select option { background: #12181c; color: #ffffff; }
/* Campo data: di default l'icona del calendario è scura → invisibile sul campo trasparente
   scuro. `color-scheme: dark` fa rendere al browser l'icona (e i controlli nativi) in chiaro. */
.yummy-booking form input[type="date"] { color-scheme: dark; }
.yummy-booking form input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* Box "codice di verifica" (OTP): callout a tema (fondo oro tenue + bordo oro) invece del
   riquadro chiaro Tailwind. `!important` per battere l'utility `.border` di Bootstrap. */
.yummy-booking .otp-box {
  background: rgba(193, 153, 119, 0.06) !important;
  border: 1px solid rgba(193, 153, 119, 0.35) !important;
  border-radius: 0 !important;
}
.yummy-booking .otp-box p { color: #a58468; text-align: left; }
.yummy-booking .otp-box button { color: #c19977; }
.yummy-booking .otp-box button:hover { color: #e7b68c; }

/* ─── Pagina "Gestisci prenotazione" (/reservations/manage) — tema yummy ───
   Rotta fissa avvolta dal SiteLayout yummy (carica questo foglio). Il componente è condiviso
   e Tailwind chiaro (card bianca) → lo ristiliamo in dark/oro. `!important` dove serve per
   battere le utility `.bg-white`/`.border` di Bootstrap. */
/* La rotta manage non ha il banner in cima (come /menu): diamo spazio ampio per l'header fisso. */
.booking-manage { padding-top: 180px !important; }
@media (max-width: 767px) { .booking-manage { padding-top: 130px !important; } }
.booking-manage .booking-manage-card,
.booking-manage .booking-manage-tab {
  background: #12181c !important;
  border: 1px solid rgba(193, 153, 119, 0.25) !important;
  box-shadow: none !important;
  color: #dddddd;
}
.booking-manage h1,
.booking-manage h2 {
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.booking-manage label { color: #c19977; font-family: 'Oswald', sans-serif; }
.booking-manage p { color: #bdbdbd; }
.booking-manage input,
.booking-manage select,
.booking-manage textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(193, 153, 119, 0.5) !important;
  border-radius: 0 !important;
  color: #ffffff;
}
.booking-manage input[type="date"] { color-scheme: dark; }
.booking-manage input:focus,
.booking-manage select:focus,
.booking-manage textarea:focus { border-bottom-color: #e7b68c !important; }
.booking-manage select option { background: #12181c; color: #ffffff; }
/* Pulsanti squadrati Oswald; primario (bg-gray-900) → outline oro. */
.booking-manage button {
  border-radius: 0 !important;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.booking-manage button.bg-gray-900 {
  background: transparent !important;
  border: 1px solid #c19977 !important;
  color: #ffffff !important;
}
.booking-manage button.bg-gray-900:hover { background: #c19977 !important; color: #12181c !important; }
/* Annulla (azione distruttiva): contorno rosso tenue leggibile su scuro. */
.booking-manage button.text-red-600 {
  border-color: rgba(217, 122, 106, 0.6) !important;
  color: #d97a6a !important;
}
.booking-manage button.text-red-600:hover { background: rgba(217, 122, 106, 0.12) !important; }
/* Conto/comanda (TabPanel): testo chiaro su card scura, divisori oro tenui. */
.booking-manage-tab .text-gray-900,
.booking-manage-tab .text-gray-800,
.booking-manage-tab .text-gray-700,
.booking-manage-tab .text-gray-600,
.booking-manage-tab .text-gray-500,
.booking-manage-tab .text-gray-400 { color: #dddddd !important; }
.booking-manage-tab .divide-y > * { border-color: rgba(193, 153, 119, 0.15) !important; }
/* QR: il riquadro resta CHIARO (i moduli del QR sono scuri → deve restare scansionabile). */
.booking-manage .bg-gray-50 { background: #ffffff !important; border-color: rgba(193, 153, 119, 0.25) !important; }
.booking-manage .bg-gray-50 p { color: #6b6b6b; }
/* Indicatore campo obbligatorio: asterisco oro nella label. */
.yummy-booking label .req { color: #e7b68c; margin-left: 2px; }
/* Legenda campi obbligatori. */
.yummy-booking .req-legend { color: #9a9a9a; font-size: 0.8rem; text-align: center; }
.yummy-booking .req-legend .req { color: #e7b68c; }

/* Divisore prenotazione/contatti → oro tenue. */
.yummy-booking .border-t { border-color: rgba(193, 153, 119, 0.25); }

/* Bottone invio → OUTLINE del brand book con riempimento oro animato da sinistra (la
   "firma" d'interazione del tema, come `.btn-primary`), centrato. */
.yummy-booking form > div:last-of-type { text-align: center; }
.yummy-booking button[type="submit"] {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: transparent;
  border: 1px solid #c19977;
  color: #ffffff;
  border-radius: 0;
  margin-top: 8px;
  padding: 13px 56px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.4s ease;
}
.yummy-booking button[type="submit"]::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #c19977;
  z-index: -1;
  transition: width 0.4s ease;
}
.yummy-booking button[type="submit"]:hover:not(:disabled) {
  color: #12181c; /* testo scuro su oro = 6.9:1 (AA) */
}
.yummy-booking button[type="submit"]:hover:not(:disabled)::before {
  width: 100%;
}

/* ─── Testo & link globali (allineamento brand book) ───
   bootstrap.min.css imposta sul body `color:#212529` e `font-family:system-ui`, e sui
   link `color:#0d6efd` (blu). Il tema yummy sovrascrive SOLO `p`/`h1`/`h2`... → tutto il
   testo non-`<p>` (span, div, li, a) eredita i default Bootstrap invece della palette del
   brand book. Ripristiniamo qui i token globali: corpo testo #dddddd + Raleway, accenti
   e link in oro #c19977. (overrides.css è caricato dopo bootstrap → questi vincono.) */
body {
  color: #dddddd;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
}
a {
  color: #c19977;
  transition: color 0.3s ease;
}
a:hover {
  color: #e7b68c;
}
/* I bottoni del tema (`.btn-primary`, testo bianco) e i link con classe dedicata
   mantengono il proprio colore: la loro specificità è maggiore di `a`. */

/* ─── Accessibilità WCAG 2.1 AA ─── */

/* 1.4.3 Contrasto testo — al hover il tema riempie il bottone d'oro (#c19977) lasciando
   il testo BIANCO (2.6:1, sotto la soglia AA 4.5:1). Testo scuro su oro = 6.9:1 → AA. */
.btn-primary:hover,
.btn-primary:focus-visible {
  color: #12181c;
}

/* Bottoni dei form (contatti `.submit-botton.book-botton` + prenota `.book-botton`):
   il tema li rende INVERTITI (oro pieno + testo nero, → trasparente/bianco all'hover).
   Li uniformiamo allo stile OUTLINE del brand book: trasparente + testo bianco + bordo
   oro a riposo, riempimento oro (via ::before) + testo scuro (AA) all'hover. */
.book-botton .btn-primary {
  background: none;
  color: #ffffff;
}
.submit-botton.book-botton .btn-primary:hover,
.book-botton .btn-primary:hover {
  background: none;
  color: #12181c;
}
.book-botton .btn-primary::before,
.submit-botton.book-botton .btn-primary::before {
  background: #c19977;   /* ripristina il riempimento oro animato (il tema lo azzera) */
}
/* Stato disabilitato (form non valida) — brand book: outline oro ATTENUATO + testo muto,
   non cliccabile, nessun riempimento all'hover (niente opacità "washed"). Coerente tra i
   due form (contatti `.book-botton` e prenotazione `.yummy-booking`). */
.book-botton .btn-primary:disabled,
.yummy-booking button[type="submit"]:disabled {
  opacity: 1;
  background: transparent !important;
  border-color: rgba(193, 153, 119, 0.3) !important;
  color: #7c7c7c !important;
  cursor: not-allowed;
}
.book-botton .btn-primary:disabled::before,
.yummy-booking button[type="submit"]:disabled::before { width: 0 !important; }
.book-botton .btn-primary:disabled:hover,
.yummy-booking button[type="submit"]:disabled:hover { color: #7c7c7c !important; }
/* Focus dei bottoni form: MAI il ring blu di default del browser; anello oro solo da tastiera. */
.book-botton .btn-primary:focus,
.yummy-booking button[type="submit"]:focus { outline: none !important; box-shadow: none !important; }
.book-botton .btn-primary:focus-visible,
.yummy-booking button[type="submit"]:focus-visible { outline: 2px solid #e7b68c !important; outline-offset: 2px; }

/* 2.4.7 Focus visibile — style.css azzera l'outline sui bottoni (`.btn:focus{outline:0}`)
   senza alternativa. Ripristiniamo un anello di focus DA TASTIERA (focus-visible) coerente
   col brand (oro chiaro #e7b68c, alto contrasto su fondo scuro). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.dropdown-item:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #e7b68c;
  outline-offset: 2px;
  border-radius: 1px;
}

/* 2.3.3 Movimento da interazione — rispetta prefers-reduced-motion: niente animazioni
   d'entrata (i contenuti restano comunque visibili). */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .animate-fade-in {
    animation: none !important;
  }
  html.reveal-js [data-reveal] { opacity: 1 !important; }
}

/* ─── Hero: controlli carosello (pallini + pausa/riproduci, WCAG 2.2.2) ───
   La pagination del tema è relative con `padding-top:230px` (spaziatura). Impiliamo
   il pulsante pausa sotto i pallini, centrato, senza alterarne il comportamento. */
.hero-slider-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-autoplay-toggle {
  margin-top: 4px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #c19977;
  background: rgba(11, 18, 20, 0.55);
  color: #e7b68c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.hero-autoplay-toggle:hover {
  background: #c19977;
  color: #12181c; /* icona scura su oro = 6.9:1 (AA per elementi UI) */
}

/* ─── Hero: testo sopra il velo (`.hero-overlay` z-index:2) ───
   L'overlay è dentro `.hero-slider-images`; garantiamo che il contenitore del testo
   sia posizionato e con z-index superiore, così il titolo resta sempre leggibile sopra
   il velo a prescindere dallo stacking di default. */
.hero-section .container {
  position: relative;
  z-index: 3;
}

/* ─── Header sticky su superficie scura (allineamento brand book) ───
   Il tema originale (`style.css`) colora l'header sticky in marrone #423224. Il brand
   book documenta le superfici (header/footer/card) sulla superficie scura #12181c →
   allineiamo l'header sticky. Il bordo oro inferiore resta (definito su `.header`). */
header.manu-sticky {
  background: #12181c;
}

/* ─── Footer — allineamento brand book (richiesta cliente) ─── */
/* Banner globale "Creato con vabo" nascosto SOLO su yummy (temporaneo: la logica
   showVaboBanner sarà rivista a monte nella sessione principale). */
.vabo-banner { display: none !important; }

/* Spaziatura sobria: il tema originale usa `footer{padding-top:253px}` (grande vuoto) →
   la riduciamo e uniformiamo il fondo alla pagina, con filetto oro di separazione. */
footer {
  padding-top: 64px !important;
  padding-bottom: 28px !important;
  background-color: #0b1214 !important;
  border-top: 1px solid rgba(193, 153, 119, 0.18);
}
/* ── Colonne coerenti (stesso allineamento, heading e colori per Contatti/Informazioni/Orari) ── */
/* Tutte le colonne allineate a sinistra (il tema mette Orari a destra). */
footer .contact,
footer .footer-info,
footer .reastaurant-time { text-align: left; }
/* Heading uniforme: Oswald MAIUSCOLO oro, stesso tracking e stesso margine (brand book).
   (Il tema usa margin-bottom:50px solo su Contatti/Orari → incoerente.) */
footer .contact h4,
footer .footer-info h4,
footer .reastaurant-time h4 {
  color: #c19977;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.15rem;
  margin-bottom: 20px;
}
/* Corpo testo #DDDDDD (brand book: il bianco è solo per i titoli); accenti in oro. */
footer .footer-content a,
footer .reastaurant-time li { color: #dddddd; }
footer .footer-content a:hover { color: #c19977; }
/* Ritmo verticale uniforme tra le voci delle colonne. */
footer .footer-content li,
footer .footer-links li,
footer .reastaurant-time li { margin-bottom: 10px; }

/* Colonna "Informazioni" (link legali/nav + preferenze cookie): elenco pulito, oro al hover. */
footer .footer-links { list-style: none; margin: 0; padding: 0; }
footer .footer-links li { margin-bottom: 8px; }
footer .footer-links a {
  color: #dddddd;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.3s ease;
}
footer .footer-links a:hover { color: #c19977; }

/* Icone social: SENZA cerchio/bordo, solo icona oro (hover oro chiaro). */
footer .footer-social-icon a,
footer .footer-social-icon i { color: #c19977; }
footer .footer-social-icon a:hover i,
footer .footer-social-icon a:hover { color: #e7b68c; }
/* Il tema riempie di oro lo sfondo all'hover (era pensato per il cerchio, ora rimosso):
   lo togliamo, resta solo il cambio colore dell'icona. */
footer .footer-social-icon a:hover { background: transparent !important; }
footer .footer-social-icon a {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: auto;
  height: auto;
}
footer .footer-social-icon li { width: auto; height: auto; margin-right: 18px; }
footer .footer-social-icon li:last-child { margin-right: 0; }

/* Riga finale: copyright a sinistra, social a destra (stessa linea), con filetto oro sopra. */
footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(193, 153, 119, 0.15);
}
footer .footer-copy { font-size: 0.68rem; line-height: 1.4; opacity: 0.7; text-align: left; }
footer .footer-social-inline { justify-content: flex-end; margin: 0; }

/* Avviso reCAPTCHA: neutralizza la barra scura del tema, riga piccola e discreta sotto. */
footer .footer-end-text-box {
  background: transparent !important;
  margin: 10px 0 0 !important;
  /* Solo il padding verticale a 0 (compatta la barra del tema); quello orizzontale resta
     dalla col-12 così il bordo sinistro combacia col copyright. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: left;
  opacity: 0.6;
}
footer .footer-end-text-box::before { display: none !important; }

/* ─── Promo evento (versione yummy) — riusa il layout/stile "About Us" del tema
   (`.about-section`/`.about-text`/`.sub-title`/`.text-shape`/`.btn`). Serve solo la riga meta. */
.about-text .event-promo-meta {
  color: #c19977;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
}

/* ─── Breadcrumb rimosso (richiesta cliente): solo spaziatore in cima alle pagine interne
   per non finire sotto l'header fisso (~91px) (prima lo spazio lo dava il padding del breadcrumb). ─── */
.page-top-spacer { height: 120px; }
@media (max-width: 767px) { .page-top-spacer { height: 88px; } }

/* ─── Footer sempre a piè di finestra (sticky footer) anche con pagine corte ─── */
.transparent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#yummy-main { flex: 1 0 auto; }

/* ─── Form contatti (.get-in-touch-section) — stesso stile underline del form prenotazione ─── */
.get-in-touch-section .form-control {
  border: 0 !important;
  border-bottom: 1px solid rgba(193, 153, 119, 0.5) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 2px !important;
  /* Bootstrap dà `.input-group > .form-control { width:1% }` (per il flex del gruppo): avendo
     reso `.input-group` block, va forzata la larghezza piena o l'input collassa a 1% (~4px). */
  width: 100% !important;
  transition: border-color 0.3s ease;
}
.get-in-touch-section .form-control:focus {
  border-bottom-color: #e7b68c !important;
  box-shadow: none !important;
  outline: none !important;
}
.get-in-touch-section .form-control::placeholder { color: #7c7c7c; }
/* Label + asterisco obbligatori + errori inline (validazione). */
.get-in-touch-section .input-group { display: block; margin-bottom: 18px; }
.get-in-touch-section .contact-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
  color: #c19977;
  margin-bottom: 6px;
}
.get-in-touch-section .req { color: #e7b68c; }
.get-in-touch-section .req-legend { font-size: 0.78rem; color: #9a9a9a; margin: 2px 0 18px; }
.get-in-touch-section .req-legend .req { color: #e7b68c; }

/* ─── Pagine legali (/privacy, /termini — componente LegalPage condiviso) — tema yummy ───
   Titolo Oswald (non l'h1 Metropolis 120px del tema), corpo Raleway #dddddd, heading di
   sezione Oswald oro, link oro; spazio in cima per l'header fisso. */
.legal-page {
  padding-top: 168px !important;
  padding-bottom: 72px !important;
  color: #dddddd;
}
@media (max-width: 767px) { .legal-page { padding-top: 124px !important; } }
.legal-page h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff;
  line-height: 1.1;
}
.legal-page .legal-meta {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.72rem;
  color: #c19977;
  margin: 0 0 28px;
}
.legal-page .vb-legal-body { font-family: 'Raleway', sans-serif; font-weight: 300; color: #dddddd; font-size: 0.95rem; }
.legal-page .vb-legal-body h2 {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
  color: #c19977; font-size: 1.4rem; margin: 30px 0 10px;
}
.legal-page .vb-legal-body h3 {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.5px;
  color: #c19977; font-size: 1.05rem; margin: 22px 0 8px;
}
.legal-page .vb-legal-body p { color: #dddddd; margin: 0 0 12px; }
.legal-page .vb-legal-body a { color: #c19977; }
.legal-page .vb-legal-body a:hover { color: #e7b68c; }
.legal-page .vb-legal-body ul,
.legal-page .vb-legal-body ol { margin: 0 0 12px; padding-left: 22px; }
.legal-page .vb-legal-body li { margin-bottom: 6px; color: #dddddd; }
.legal-page .vb-legal-body strong { color: #f0e6dc; }
.legal-page .vb-legal-body hr { border: 0; border-top: 1px solid rgba(193, 153, 119, 0.2); margin: 24px 0; }

/* ─── CLS: loghi sponsor ───
   Il resto del tema riserva già lo spazio immagine (aspect-ratio hack `::before`, hero
   min-height, dimensioni fisse), quindi niente layout shift. UNICA eccezione: i loghi
   sponsor a desktop non avevano né altezza né larghezza base (solo media query mobile) →
   la riga si assestava al caricamento. Riserviamo un'altezza fissa con `object-fit: contain`
   (aspect preservato, nessuna deformazione) così lo spazio è stabile prima del load. */
.sponsore-img img {
  height: 60px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .sponsore-img img { height: 44px; }
}

/* ─── Booking wizard (yummy) — 4 step + stepper + chip orari + modale OTP ───
   Componente yummy-only (`booking-wizard.tsx`). Superficie scura brand book, oro sugli accenti.
   Specificità `.yummy-booking .booking-wizard *` batte le regole del vecchio blocco. */
.yummy-booking .booking-wizard {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  align-items: stretch;
  color: #dddddd;
}
.booking-wizard .bw-subtitle {
  text-align: center; color: #9a9a9a; font-family: 'Raleway', sans-serif; font-weight: 300;
  margin: 14px 0 0;
}
.booking-wizard .bw-off { text-align: center; color: #9a9a9a; margin-top: 10px; }

/* Stepper numerato */
.booking-wizard .bw-stepper {
  list-style: none; display: flex; gap: 6px; padding: 0; margin: 32px 0 8px; counter-reset: none;
}
.booking-wizard .bw-step-item {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; text-align: center;
}
.booking-wizard .bw-step-item::before {
  content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 1px;
  background: rgba(193, 153, 119, 0.25);
}
.booking-wizard .bw-step-item:first-child::before { display: none; }
.booking-wizard .bw-step-num {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(193, 153, 119, 0.4); background: #0b1214; color: #9a9a9a;
  font-family: 'Oswald', sans-serif; font-size: 0.95rem;
}
.booking-wizard .bw-step-label {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
  font-size: 0.72rem; color: #9a9a9a;
}
.booking-wizard .bw-step-item--current .bw-step-num { border-color: #c19977; color: #12181c; background: #c19977; }
.booking-wizard .bw-step-item--current .bw-step-label { color: #e7b68c; }
.booking-wizard .bw-step-item--done .bw-step-num { border-color: #c19977; color: #c19977; background: transparent; }
.booking-wizard .bw-step-item--done .bw-step-label { color: #c19977; }
@media (max-width: 560px) { .booking-wizard .bw-step-label { display: none; } }

/* Pannello */
.booking-wizard .bw-panel {
  border: 1px solid rgba(193, 153, 119, 0.2); background: rgba(18, 24, 28, 0.6);
  border-radius: 6px; padding: 28px 24px; margin-top: 20px;
}
.booking-wizard .bw-recap {
  font-family: 'Raleway', sans-serif; color: #e7b68c; text-transform: capitalize;
  margin: 0 0 18px; font-size: 0.95rem;
}
.booking-wizard .bw-badge {
  display: inline-block; font-family: 'Oswald', sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-size: 0.68rem; padding: 3px 10px; border-radius: 999px;
  border: 1px solid #c19977; color: #c19977; margin-right: 8px; text-transform: uppercase;
}
.booking-wizard .bw-badge--waitlist { border-color: #e7b68c; color: #e7b68c; }
.booking-wizard .bw-choose { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #c19977; font-size: 0.8rem; margin: 0 0 12px; }
.booking-wizard .bw-muted { color: #9a9a9a; font-family: 'Raleway', sans-serif; }

/* Griglia campi */
.booking-wizard .bw-grid { display: flex; flex-wrap: wrap; gap: 18px 20px; }
.booking-wizard .bw-field { flex: 1 1 200px; }
.booking-wizard .bw-field--full { flex-basis: 100%; }
.booking-wizard .bw-label {
  display: block; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px;
  font-size: 0.8rem; color: #c19977; margin-bottom: 8px;
}
.booking-wizard .bw-label .req { color: #e7b68c; }
.booking-wizard .bw-input {
  width: 100%; background: transparent; color: #ffffff; border: 0;
  border-bottom: 1px solid rgba(193, 153, 119, 0.5); border-radius: 0; padding: 10px 2px;
  font-family: 'Raleway', sans-serif; transition: border-color 0.3s ease;
}
.booking-wizard select.bw-input { color: #dddddd; }
.booking-wizard .bw-input:focus { outline: none; border-bottom-color: #e7b68c; }
.booking-wizard textarea.bw-input { resize: vertical; }
/* Superficie scura: color-scheme dark rende visibili l'icona del calendario del date input
   (altrimenti scura su fondo scuro → sparita) e il menu a tendina dei select. */
.booking-wizard input[type="date"].bw-input,
.booking-wizard input[type="time"].bw-input,
.booking-wizard select.bw-input { color-scheme: dark; }
.booking-wizard input[type="date"].bw-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.9; }

/* Chip orari */
.booking-wizard .bw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.booking-wizard .time-chip {
  font-family: 'Oswald', sans-serif; letter-spacing: 0.5px; font-size: 0.95rem;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(193, 153, 119, 0.5); background: transparent; color: #dddddd;
  transition: all 0.2s ease;
}
.booking-wizard .time-chip:hover { border-color: #c19977; color: #ffffff; }
.booking-wizard .time-chip--active { background: #c19977; border-color: #c19977; color: #12181c; }
.booking-wizard .time-chip:focus-visible { outline: 2px solid #e7b68c; outline-offset: 2px; }

/* Notice full / non disponibile */
.booking-wizard .booking-notice { border-radius: 6px; padding: 16px 18px; }
.booking-wizard .booking-notice--full { border: 1px solid rgba(231, 182, 140, 0.4); background: rgba(231, 182, 140, 0.08); }
.booking-wizard .booking-notice--unavailable { border: 1px solid rgba(193, 153, 119, 0.2); background: rgba(255, 255, 255, 0.03); }
.booking-wizard .bw-notice-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #e7b68c; margin: 0; }
.booking-wizard .bw-notice-text { color: #dddddd; margin: 6px 0 0; font-family: 'Raleway', sans-serif; }

/* Legenda + alert */
.booking-wizard .req-legend { font-size: 0.78rem; color: #9a9a9a; margin: 14px 0 0; }
.booking-wizard .req-legend .req, .booking-wizard .bw-label .req { color: #e7b68c; }
.booking-wizard .bw-alert { border-radius: 6px; padding: 10px 14px; margin-top: 14px; font-size: 0.9rem; font-family: 'Raleway', sans-serif; }
.booking-wizard .bw-alert--error { border: 1px solid rgba(220, 100, 100, 0.4); background: rgba(220, 100, 100, 0.1); color: #f0b8b8; }
.booking-wizard .bw-alert--ok { border: 1px solid rgba(150, 200, 150, 0.4); background: rgba(120, 190, 120, 0.1); color: #bfe6bf; }

/* Navigazione step (Indietro/Avanti) */
.booking-wizard .bw-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.booking-wizard .bw-nav--center { justify-content: center; }
.booking-wizard .bw-nav .btn {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.8rem;
  padding: 12px 26px; border-radius: 2px; cursor: pointer; transition: all 0.25s ease; background: transparent;
}
.booking-wizard .bw-nav .btn.bw-back { border: 1px solid rgba(193, 153, 119, 0.4); color: #9a9a9a; }
.booking-wizard .bw-nav .btn.bw-back:hover { border-color: #c19977; color: #dddddd; }
.booking-wizard .bw-nav .btn.btn-primary { border: 1px solid #c19977; color: #c19977; }
.booking-wizard .bw-nav .btn.btn-primary:hover { background: #c19977; color: #12181c; }
.booking-wizard .bw-nav .btn:disabled { opacity: 1; border-color: rgba(193, 153, 119, 0.3); color: #7c7c7c; background: transparent; cursor: not-allowed; }
.booking-wizard .bw-nav .btn:focus { outline: none; box-shadow: none; }
.booking-wizard .bw-nav .btn:focus-visible { outline: 2px solid #e7b68c; outline-offset: 2px; }

/* Step esito */
.booking-wizard .bw-panel--done { text-align: center; }
.booking-wizard .bw-done-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 6px auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
  border: 2px solid #c19977; color: #c19977;
}
.booking-wizard .bw-done-msg { font-family: 'Raleway', sans-serif; color: #dddddd; font-size: 1.05rem; }

/* Modale OTP */
.booking-wizard .otp-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.booking-wizard .otp-modal-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 10, 0.7); backdrop-filter: blur(2px); }
.booking-wizard .otp-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: #12181c; border: 1px solid rgba(193, 153, 119, 0.3); border-radius: 8px; padding: 28px 26px;
}
.booking-wizard .otp-modal-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #ffffff; font-size: 1.2rem; margin: 0 0 8px; }
.booking-wizard .otp-modal-hint { color: #9a9a9a; font-family: 'Raleway', sans-serif; font-size: 0.9rem; margin: 0 0 16px; }
.booking-wizard .otp-modal-input { text-align: center; letter-spacing: 0.5em; font-size: 1.3rem; }
.booking-wizard .otp-modal-resend { background: none; border: 0; color: #c19977; font-size: 0.8rem; text-decoration: underline; cursor: pointer; margin-top: 12px; padding: 0; }
.booking-wizard .otp-modal-resend:hover { color: #e7b68c; }
.booking-wizard .otp-modal-resend:disabled { opacity: 0.5; cursor: not-allowed; }
.booking-wizard .otp-modal-close {
  position: absolute; top: 12px; right: 14px; background: none; border: 0; color: #9a9a9a;
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px;
}
.booking-wizard .otp-modal-close:hover { color: #e7b68c; }
.booking-wizard .otp-modal-close:disabled { opacity: 0.4; cursor: not-allowed; }