/* A Fuocolento — pagine menù, direzione "Manifesto".
   Il menù è scritto SOPRA una foto sola che resta ferma dietro tutta la pagina.
   Niente righe nome-a-sinistra/prezzo-a-destra coi puntini: nome, cosa è, e il
   prezzo sotto, centrati. Come un cartello appeso al muro del locale.

   TUTTO è sotto `body.menu-scuro`: la home e la privacy non caricano questo
   file e non vedono nessuna di queste regole. `style.css` non è toccato. */

body.menu-scuro{background:var(--ink-deep);color:var(--on-dark)}
body.menu-scuro{--gold-bright:#E4A63C}   /* l'oro pieno sotto i 14px non regge (4,3:1) */

/* ---- la foto ferma dietro tutto ---------------------------------------
   NON si usa `background-attachment:fixed`: su iOS non tiene. */
.menu-scuro .fondo{position:fixed;inset:0;z-index:0;overflow:hidden}
.menu-scuro .fondo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:saturate(1.12) contrast(1.06) brightness(.95)}
/* Il velo è UNIFORME, non a macchia. La foto è ferma e il testo le scorre
   sopra: ogni punto dello schermo deve garantire la stessa leggibilità.
   Con .82 anche la zona più chiara della foto resta oltre 4,5:1 col crema. */
.menu-scuro .fondo::after{content:"";position:absolute;inset:0;background:rgba(30,15,11,.82)}
.menu-scuro .fondo::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(125% 95% at 50% 38%,rgba(30,15,11,0) 0%,rgba(30,15,11,.42) 100%)}
.menu-scuro .pagina{position:relative;z-index:1}

/* Bevande non ha una foto sua e non gliene metto una presa da un'altra
   portata: resterebbe una foto di carne dietro un elenco di birre. Al posto
   del fondo fotografico, un alone caldo, così la pagina resta di famiglia
   senza raccontare una cosa che non c'è. */
body.menu-scuro.senza-foto{
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(126,24,16,.34) 0%,rgba(30,15,11,0) 62%),
    radial-gradient(90% 60% at 50% 100%,rgba(200,136,26,.12) 0%,rgba(30,15,11,0) 70%),
    var(--ink-deep);
  background-attachment:fixed;
}

/* descrizioni inglesi accanto ai nomi (il meccanismo .en-only e' in style.css:
   nascosta di default, `html[lang="en"] .en-only{display:inline}` la mostra) */
.menu-scuro .en-only{font-style:italic;color:var(--on-dark-soft)}

/* 21/08 — la traduzione del nome del piatto sta DENTRO l'h3, com'e' sul sito
   online. In italiano non si vede; in inglese va a capo sotto al nome invece di
   restare in fila, se no il serif del nome e il corsivo della traduzione si
   incollano e tornano a somigliarsi (lo stesso difetto che si e' appena
   sistemato sui titoli). Sans, non Playfair: e' una glossa, non un nome. */
html[lang="en"] .menu-scuro .v h3 .en-only{display:block;margin-top:6px;
  font-family:'Karla',sans-serif;font-weight:400;font-size:14.5px;line-height:1.5;
  letter-spacing:0}

/* ---- nav e footer vestiti scuri --------------------------------------- */
/* Barra SNELLA: sta ferma in cima e copre il testo che le scorre sotto, quindi
   ogni pixel in piu' e' pagina in meno. Solo qui: la home non carica questo file. */
.menu-scuro .nav{background:rgba(30,15,11,.86);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);border-bottom-color:rgba(246,234,219,.14);
  padding:6px clamp(14px,4vw,56px)}
.menu-scuro .nav .brand img{height:34px}
.menu-scuro .nav-actions{gap:12px}
.menu-scuro .nav .btn{padding:9px 18px;font-size:13.5px}
.menu-scuro .hamburger{width:40px;height:40px;padding:9px}
.menu-scuro .nav-links a,.menu-scuro .nav-soc a{color:var(--on-dark)}
.menu-scuro .nav-links a:hover{color:var(--gold-bright)}
.menu-scuro .nav-links a[aria-current="page"]{color:var(--gold-bright)}
.menu-scuro .hamburger span{background:var(--on-dark)}
.menu-scuro .mobile-menu{background:var(--ink-deep);border-bottom-color:rgba(246,234,219,.14)}
.menu-scuro .mobile-menu a{color:var(--on-dark);border-bottom-color:rgba(246,234,219,.12)}
.menu-scuro footer{background:transparent}

/* ---- colonna del testo ------------------------------------------------ */
.menu-scuro .col{max-width:660px;margin:0 auto;padding:0 clamp(22px,6vw,40px);text-align:center}

/* ---- testata ---------------------------------------------------------- */
.menu-scuro .testa{padding:clamp(44px,10vh,96px) clamp(22px,6vw,40px) clamp(30px,5vh,48px)}
.menu-scuro .testa h1{font-family:'Playfair Display',serif;font-weight:800;
  font-size:clamp(54px,13vw,92px);line-height:.88;letter-spacing:-.03em;
  color:var(--on-dark);text-shadow:0 2px 40px rgba(0,0,0,.6)}
.menu-scuro .testa .sotto{margin-top:16px;font-size:clamp(15px,3.6vw,17px);line-height:1.6;
  color:var(--on-dark);text-shadow:0 1px 14px rgba(0,0,0,.75);max-width:44ch;margin-left:auto;margin-right:auto}

/* ---- bandiere: stanno DENTRO la barra in alto, non sotto il titolo ----- */
.menu-scuro .nav .lang-switch{margin:0;gap:12px}
.menu-scuro .nav .lang-switch button{padding:5px 7px;
  background:rgba(20,10,7,.5);border-color:rgba(246,234,219,.32)}
.menu-scuro .nav .lang-switch button[aria-pressed="true"]{border-color:var(--gold);background:rgba(20,10,7,.75)}
.menu-scuro .nav .lang-switch .flag{width:25px;height:17px}

/* 21/08 — bersagli da dito. Nella barra stretta del menù bandiere (29px),
   "Contatti" (23px) e hamburger (30px) stanno sotto i 40px consigliati.
   Ingrandirli si vedrebbe e la barra non ha spazio, quindi si allarga solo
   l'AREA DA PREMERE con uno pseudo-elemento invisibile: il dito ne prende 44,
   l'occhio vede quello di prima. Sta dentro la larghezza del bersaglio, così
   non ruba i tocchi a quello accanto. */
@media (max-width:900px){
  .menu-scuro .nav .lang-switch button,
  .menu-scuro .nav-links a,
  .menu-scuro .nav .brand,
  .menu-scuro .hamburger{position:relative}
  .menu-scuro .nav .lang-switch button::after,
  .menu-scuro .nav-links a::after,
  .menu-scuro .nav .brand::after,
  .menu-scuro .hamburger::after{content:'';position:absolute;left:0;right:0;
    top:50%;height:44px;transform:translateY(-50%)}
}

/* selettore fra le tre pagine: rettangoli ad angoli vivi (mai pastiglie) */
.menu-scuro .menu-switch{margin-top:clamp(24px,4.5vh,34px)}
.menu-scuro .menu-switch a{background:rgba(20,10,7,.5);border-color:rgba(246,234,219,.32);color:var(--on-dark)}
.menu-scuro .menu-switch a:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(20,10,7,.72)}
.menu-scuro .menu-switch a[aria-current="page"]{background:var(--gold);border-color:var(--gold);color:#241310}

/* ---- sezione ----------------------------------------------------------
   02/08: "per i titoli come antipasti, contorni, dolci, carne dovremmo farli
   diversi che non si capisce". Il difetto era che titolo di portata e nome di
   piatto condividevano famiglia, colore, allineamento e quasi il peso: cambiava
   SOLO la dimensione, e scorrendo si leggevano come parenti. Qui il salto e'
   affidato a tre cose insieme — molta piu' aria sopra, il doppio di corpo, e il
   colore oro che i piatti non hanno. Il crema dei piatti scende di un filo cosi'
   il divario si allarga da tutte e due le parti.
   Contrasto sul fondo velato .82: oro #E4A63C 5,27:1, crema 9,2:1 (min. 4,5). */
.menu-scuro .sez{padding:clamp(56px,11vh,110px) 0 clamp(10px,2vh,18px)}
.menu-scuro .sez h2{font-family:'Playfair Display',serif;font-weight:800;
  font-size:clamp(40px,10.2vw,66px);line-height:.95;letter-spacing:-.028em;
  color:var(--gold-bright);border:0;padding:0;margin:0}
.menu-scuro .sez .intro{margin-top:15px;font-size:14.5px;line-height:1.6;color:var(--on-dark-soft);
  max-width:44ch;margin-left:auto;margin-right:auto}

/* ---- la voce del menù: tutto centrato, prezzo SOTTO ------------------- */
.menu-scuro .voci{margin-top:clamp(26px,5vh,40px);display:flex;flex-direction:column;
  gap:clamp(24px,4.4vh,34px)}
.menu-scuro .v h3{font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(19px,4.5vw,21px);line-height:1.25;color:var(--on-dark);letter-spacing:0}
/* nel menù della carne le descrizioni non ci sono più: qui restano solo gli
   ingredienti delle pizze, che si leggono davvero prima di ordinare */
.menu-scuro .v .d{margin-top:7px;font-size:15.5px;line-height:1.55;color:var(--on-dark-soft);
  max-width:40ch;margin-left:auto;margin-right:auto}
.menu-scuro .v .nota{margin-top:5px;font-size:14.5px;line-height:1.5;font-style:italic;
  color:var(--on-dark-soft)}
.menu-scuro .v .p{margin-top:11px;font-family:'Karla',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.1em;color:var(--gold-bright)}
/* "½ pala 10€" è un prezzo, non una postilla: chi ordina mezza pala legge questo.
   Resta distinto dal prezzo intero perché è chiaro e non oro, non perché è piccolo */
.menu-scuro .v .p small{font-size:15px;color:rgba(246,234,219,.88);font-weight:600;letter-spacing:.04em}

/* la specialità della casa, dentro un riquadro tratteggiato.
   ⚠️ 21/08: NON usata più — il riquadro sugli arrosticini è stato tolto su sua
   richiesta (ed era comunque un'etichetta mia, online non esiste). Le regole
   restano qui come repertorio: basta rimettere class="v casa" per riaverlo. */
.menu-scuro .v.casa{border:1px dashed rgba(200,136,26,.62);
  padding:clamp(22px,5vw,30px) clamp(18px,4vw,26px)}
.menu-scuro .v.casa .etichetta{font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:12px}
.menu-scuro .v.casa h3{font-size:clamp(26px,6.6vw,34px);font-weight:700}
.menu-scuro .v.casa .p{font-size:17px}

/* etichetta "consigliato dallo chef" accanto al nome */
.menu-scuro .badge-rec{background:transparent;color:var(--gold-bright);
  border:1px solid rgba(200,136,26,.5);border-radius:2px;padding:3px 7px;
  font-size:11.5px;letter-spacing:.14em;
  /* 23/08 - stava in riga col nome e spostava "Formaggio fritto" e
     "Pecora alla callara" fuori dall asse centrale, l unico riferimento
     che questa pagina ha. Va sotto, centrato. */
  display:block;width:max-content;max-width:100%;margin:8px auto 0}

/* ---- gruppi stretti: bevande, e le pizze in due colonne --------------- */
.menu-scuro .gruppo{margin-top:clamp(24px,4.5vh,34px)}
/* "ALLA SPINA", "IN BOTTIGLIA", "DELLA CASA": a 12px erano etichettine.
   Sono il modo in cui si cerca la propria bevanda, devono saltare all'occhio. */
.menu-scuro .gruppo h3{font-family:'Karla',sans-serif;font-size:14.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:16px}
.menu-scuro .gruppo .riga{padding:9px 0;font-size:16px;line-height:1.5}
.menu-scuro .gruppo .riga b{font-weight:600;color:var(--on-dark)}
.menu-scuro .gruppo .riga small{color:var(--on-dark-soft);font-size:14px}
.menu-scuro .gruppo .riga .pz{display:block;margin-top:3px;font-weight:700;font-size:14px;
  letter-spacing:.06em;color:var(--gold-bright)}

/* ---- chiusura --------------------------------------------------------- */
.menu-scuro .chiusa{padding:clamp(40px,8vh,72px) clamp(22px,6vw,40px) clamp(30px,5vh,44px)}
.menu-scuro .chiusa .nota{font-size:13.5px;line-height:1.7;color:var(--on-dark-soft);
  font-style:italic;max-width:52ch;margin:0 auto}
.menu-scuro .chiusa .cta{margin-top:26px}

/* sul telefono la barra fissa Chiama/Come arrivare copre il fondo pagina */
@media (max-width:860px){
  .menu-scuro .chiusa{padding-bottom:clamp(20px,4vh,32px)}
}

/* ---- la barra sul telefono -------------------------------------------
   Nella barra e' rimasto solo "Contatti": aprire un pannello a tendina per
   una voce sola non ha senso, quindi niente hamburger e la voce si mostra
   direttamente. Fuori anche il bottone "Prenota": in fondo allo schermo c'e'
   gia' la barra fissa con "Chiama", sempre visibile, che fa la stessa cosa.
   I social restano nel fondo pagina. */
@media (max-width:760px){
  .menu-scuro .nav-links{display:flex;gap:0;font-size:14.5px}
  .menu-scuro .nav-soc{display:none}
  .menu-scuro .hamburger{display:none}
  .menu-scuro .mobile-menu{display:none}
  .menu-scuro .nav-actions > .btn-fire{display:none}
  .menu-scuro .nav .brand img{height:30px}
  .menu-scuro .nav{padding:6px 14px}
}