/* ============================================================
   Divino Bacco — menù digitale (Fase 1: pagina statica fedele al PDF)
   Font REALI del PDF (subset estratti e convertiti in woff2):
   Alfons Display (titoli stencil), Brandon Grotesque (corpo + corsivo EN),
   Selfie (script "menù"). Vedi _source/_font_build.py.
   NB licenza: font commerciali del cliente, riusati dal loro PDF. Per la
   pubblicazione confermare licenza webfont (o acquistarla). Vedi _stato.md.
   ============================================================ */

/* ----- Font reali del PDF (subset -> woff2) ----- */
@font-face {
  font-family: 'Alfons Display';
  src: url('assets/fonts/alfons-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alfons Display';
  src: url('assets/fonts/alfons-black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brandon Grotesque';
  src: url('assets/fonts/brandon-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brandon Grotesque Italic';
  src: url('assets/fonts/brandon-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Selfie';
  src: url('assets/fonts/selfie.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --navy: #0B0A33;
  --navy-soft: #1b1a4a;
  --orange: #F7931D;
  --orange-deep: #e8821a;
  --ink: #14142b;        /* ingredienti / nomi neri */
  --grey: #8a8a99;       /* traduzione EN */
  --paper: #ffffff;
  --paper-2: #faf8f5;

  --font-title: 'Alfons Display', 'Saira Stencil One', Impact, sans-serif;
  --font-body: 'Brandon Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-italic: 'Brandon Grotesque Italic', 'Segoe UI', system-ui, sans-serif;
  --font-script: 'Selfie', 'Brush Script MT', cursive;
  --font-serif: Georgia, 'Times New Roman', serif;

  --maxw: 920px;
  --gutter: clamp(18px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

/* ------------------------------------------------------------------ HERO */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  padding: clamp(64px, 12vh, 130px) var(--gutter) clamp(56px, 10vh, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 78vh;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(58px, 13vw, 170px);
  background: url("assets/img/tiles-strip.jpg") center/cover repeat-y;
  box-shadow: 8px 0 24px rgba(0,0,0,.35);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(58px, 13vw, 170px);
  background: url("assets/img/tiles-strip.jpg") center/cover repeat-y;
  box-shadow: -8px 0 24px rgba(0,0,0,.35);
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 560px;
  animation: rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero__menu {
  font-family: var(--font-script);
  color: var(--orange);
  font-size: clamp(40px, 8vw, 64px);
  line-height: 1;
  margin: 0 0 6px;
}
.hero__logo {
  width: min(82vw, 430px);
  margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
}
.hero__tag {
  margin: 22px 0 0;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: clamp(11px, 2.4vw, 14px);
  color: #fff;
  opacity: .92;
}
.hero__addr {
  margin: 10px 0 0;
  font-size: 13px;
  letter-spacing: .04em;
  color: #cfcfe0;
}

/* ------------------------------------------------------------------ NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  border-bottom: 3px solid var(--orange);
}
.nav__track {
  display: flex; gap: 4px;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 10px; overflow-x: auto; scrollbar-width: none;
}
.nav__track::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto;
  color: #cdcde0; text-decoration: none;
  font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 12px; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
  transition: color .2s;
}
.nav a:hover { color: var(--orange); }

/* ------------------------------------------------------------------ LAYOUT */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(34px, 7vw, 76px) var(--gutter) 0;
}
.section { margin-bottom: clamp(44px, 8vw, 86px); scroll-margin-top: 64px; }

.section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.section__title {
  font-family: var(--font-title);
  font-weight: 400;
  color: var(--orange);
  font-size: clamp(38px, 9vw, 60px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}
.section__title .pz {
  font-family: var(--font-body);
  font-size: .28em;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: .02em;
}
/* riga tratteggiata ritagliata dal PDF, sotto al titolo */
.section__rule {
  height: 15px;
  width: 100%;
  max-width: 520px;
  margin-top: 8px;
  background: url("assets/img/title-rule.png") left center / auto 100% repeat-x;
}
.section__headtext { flex: 1 1 340px; min-width: 0; }

/* nota a graffa (N.B. sostituzioni) — alto a destra come nel PDF */
.brace {
  flex: 0 1 auto;
  max-width: 300px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.3;
}
.brace__txt b { color: var(--ink); font-weight: 700; }
.brace__mark {
  flex: 0 0 auto;
  width: 14px;
  color: var(--orange);
  font-weight: 700;
  font-size: 60px;
  line-height: .8;
  transform: scaleX(.7);
}

/* intro paragrafo (testo nero bold, niente box) */
.intro { margin: 0 0 22px; max-width: 620px; }
.intro b { color: var(--ink); font-weight: 700; }

/* box note (orange / navy) */
.note {
  display: inline-block;
  margin: 6px 0 0;
  padding: 11px 16px;
  border-radius: 3px;
  font-size: 14px; line-height: 1.3;
}
.note--orange { background: var(--orange); color: #fff; font-weight: 700; }
.note--navy { background: var(--navy); color: #fff; font-weight: 700; }
.note--inline { flex: 0 0 auto; align-self: flex-start; margin: 6px 0 0; }
.note--bottom { margin-top: 26px; }

/* ------------------------------------------------------------------ DISH */
.dishes { display: grid; gap: 20px; }
.dishes.compact { grid-template-columns: 1fr 1fr; gap: 14px 44px; }

.dish {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 18px;
  align-items: baseline;
}
.dish__main { min-width: 0; }
.dish__name {
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 15px;
  margin: 0 0 2px;
}
/* etichetta variante (taglieri/panini/insalate) = Alfons Black come nel PDF */
.dish__name--label {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .015em;
  line-height: 1.05;
}
/* allergeni: stesso peso/colore degli ingredienti (come nel PDF) */
.dish__all { color: var(--ink); font-weight: 700; }
.dish__ing { color: var(--ink); font-weight: 700; font-size: 15px; margin: 0; }
.dish__sub { color: var(--grey); font-weight: 400; font-size: 13px; margin: 1px 0 0; }
/* PATTERN B: nome nero in linea (secondi/insalate/numerati/drink) */
.dish--plain .dish__name {
  color: var(--ink);
  text-transform: none;
  display: inline;
  font-size: 15px;
}
.dish__price {
  font-weight: 700;
  color: var(--ink);
  font-size: 15.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dish__ann { display: block; font-weight: 700; font-size: 12px; }

/* ------------------------------------------------------------------ VINI (editoriale) */
.vini__grid { max-width: 760px; }
.vini__it { color: var(--ink); font-weight: 700; font-size: 19px; line-height: 1.3; }

/* ------------------------------------------------------------------ ALLERGENI */
.allergeni {
  background: var(--paper-2);
  border-top: 3px solid var(--orange);
  margin-top: 30px;
  padding: clamp(34px,7vw,68px) var(--gutter);
}
.allergeni__wrap { max-width: var(--maxw); margin: 0 auto; }
.allergeni__logo { width: 230px; margin: 0 0 22px; }
.allergeni__intro { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.4; color: #2a2a3a; max-width: 660px; }
.allergeni__grid {
  margin-top: 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px;
}
.alg { display: flex; gap: 12px; align-items: flex-start; }
.alg__n {
  flex: 0 0 auto; width: 26px; height: 26px;
  background: var(--orange); color: #fff; border-radius: 50%;
  font-weight: 700; font-size: 13px; display: grid; place-items: center;
}
.alg__t { font-size: 13.5px; line-height: 1.3; }
.alg__t b { font-weight: 700; color: var(--ink); }
.frozen { margin: 24px 0 0; font-family: var(--font-serif); font-size: 13.5px; color: #2a2a3a; }

/* ------------------------------------------------------------------ FOOTER */
.footer {
  position: relative;
  background: var(--orange);
  color: #fff;
  padding: clamp(40px,8vw,76px) var(--gutter);
  text-align: center;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute; inset: 0 0 0 auto;
  width: clamp(54px, 12vw, 150px);
  background: url("assets/img/tiles-strip.jpg") center/cover repeat-y;
}
.footer__logo { width: 240px; margin: 0 auto 18px; }
.footer__social { font-weight: 700; letter-spacing: .04em; font-size: 18px; }
.footer__social a { color: #fff; text-decoration: none; }
.footer__by { margin-top: 14px; font-size: 12px; opacity: .85; }

/* ------------------------------------------------------------------ MOTION */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* ponytail: entrata in pura CSS (come .hero__inner). NIENTE opacity:0 sbloccato da JS:
   se lo script di reveal non gira (CSP, browser in-app, ad-blocker) il menu resta visibile. */
.section { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .section, .hero__inner { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ RESPONSIVE */
@media (max-width: 640px) {
  .dishes.compact { grid-template-columns: 1fr; }
  .allergeni__grid { grid-template-columns: 1fr; }
  .hero::after { display: none; }
  .hero::before { width: 46px; }
  .brace { max-width: 100%; flex: 1 1 100%; }
}

/* selettore lingua */
.langs { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem;
         margin:.4rem 0 .2rem; }
.langs .lang { font-family:var(--font-body); font-size:.78rem;
               letter-spacing:.06em; color:#cdc9e6; text-decoration:none;
               opacity:.8; }
.langs .lang::after { content:"·"; margin-left:.55rem; color:#5a5780; }
.langs .lang:last-child::after { content:""; }
.langs .lang--on { color:#F7931D; opacity:1; }