/* ============================================================
   BURGER BOSS — Menù sfogliabile (/menu/)
   Le pagine del PDF ufficiale (Canva, una versione per lingua) sono
   rasterizzate in WebP e mostrate una per volta con voltapagina 3D.
   Palette brand: giallo #f5a721 + antracite #38424c
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face{
  font-family:'Roboto Slab';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/robotoslab-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:'Nexa';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/nexa-bold.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:'Gotham';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/gotham-book.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}

/* ---------- Tokens ---------- */
:root{
  --ink:#38424c;
  --ink-deep:#2b333d;
  --gold:#f5a721;
  --paper:#f5f4f0;
  --white:#ffffff;
  --font-slab:'Roboto Slab',Georgia,serif;
  --font-sans:'Nexa','Segoe UI',system-ui,sans-serif;
  --font-body:'Gotham',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1060px;
  /* proporzioni pagina (aggiornate da JS dal manifest) */
  --pw:1600;
  --ph:1999;
  /* altezza massima della pagina a video */
  --book-h:min(76vh,900px);
  --book-h:min(76svh,900px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--white);
  line-height:1.6;
  font-size:clamp(1rem,.96rem + .3vw,1.06rem);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.zoom-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0 0 1em}
h1{margin:0;line-height:1.05}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink)}
.wrap{width:min(100% - 2.2rem,var(--wrap));margin-inline:auto}

/* fondo antracite con pattern a onde tono su tono (dal menù cartaceo) */
.t-dark{
  background-color:var(--ink);
  color:var(--white);
  background-repeat:repeat;background-size:1050px auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 1320'%3E%3Cg fill='none' stroke='%23323c48'%3E%3Cpath stroke-width='150' d='M-700 180 C -467 300, -233 300, 0 180 C 233 60, 467 60, 700 180 C 933 300, 1167 300, 1400 180 C 1633 60, 1867 60, 2100 180'/%3E%3Cpath stroke-width='95' d='M-700 620 C -467 500, -233 500, 0 620 C 233 740, 467 740, 700 620 C 933 500, 1167 500, 1400 620 C 1633 740, 1867 740, 2100 620'/%3E%3Cpath stroke-width='150' d='M-700 1060 C -467 1180, -233 1180, 0 1060 C 233 940, 467 940, 700 1060 C 933 1180, 1167 1180, 1400 1060 C 1633 940, 1867 940, 2100 1060'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   HEADER sticky: home + lingua + PDF
   ============================================================ */
.menu-bar{
  position:sticky;top:0;z-index:50;
  background:var(--ink-deep);
  border-bottom:3px solid var(--gold);
}
.menu-bar-in{
  display:flex;align-items:center;gap:.8rem;
  width:min(100% - 1.6rem,1240px);margin-inline:auto;
  padding:.5rem 0;
}
.menu-bar .home{display:flex;align-items:center;gap:.6rem;flex:none;margin-right:auto;font-family:var(--font-sans);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.menu-bar .home img{width:38px;height:38px}
.menu-bar .home span{color:var(--gold)}
.lang-switch{display:flex;gap:.3rem}
.lang-switch[hidden]{display:none}
.lang-switch button,.bar-dl,.pill{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-sans);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.5em .9em;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.3);color:#dfe4e9;background:none;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.lang-switch button:hover,.bar-dl:hover,.pill:hover{border-color:var(--gold);color:var(--gold)}
.lang-switch button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.bar-dl svg,.pill svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .menu-bar .home b{display:none}
}

/* ============================================================
   BOOK — pagina corrente + frecce
   ============================================================ */
.book{padding:clamp(1.2rem,3.5vw,2.4rem) 0 clamp(2rem,5vw,3rem)}
.book-title{
  font-family:var(--font-sans);font-weight:700;text-transform:uppercase;
  letter-spacing:.3em;font-size:.78rem;color:rgba(255,255,255,.7);
  text-align:center;margin:0 0 1.1rem;
}
.stage-wrap{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2vw,1.4rem)}
.stage{
  position:relative;
  width:min(100%,calc(var(--book-h) * var(--pw) / var(--ph)));
  aspect-ratio:var(--pw) / var(--ph);
  perspective:2600px;
  touch-action:pan-y pinch-zoom;
  user-select:none;-webkit-user-select:none;
  cursor:zoom-in;
}
.sheet{position:absolute;inset:0}
.under{border-radius:6px;overflow:hidden;background:var(--ink-deep);box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
/* ombra proiettata dal foglio che si solleva */
.under::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,calc(.45 * var(--t,0))),transparent 45%)}
.pg{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.leaf{display:none;z-index:2;transform-origin:left center;transform-style:preserve-3d;will-change:transform}
.leaf.on{display:block}
.leaf .face{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:var(--ink-deep);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf .front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,calc(.55 * var(--t,0))),transparent 50%)}
.leaf .back{transform:rotateY(180deg);background:linear-gradient(90deg,#c9c7c0,#e6e4de 35%,#d3d1ca);box-shadow:inset 0 0 40px rgba(0,0,0,.14)}

.arrow{
  flex:none;width:clamp(42px,5vw,54px);height:clamp(42px,5vw,54px);
  border-radius:50%;border:2px solid var(--gold);
  background:rgba(43,51,61,.85);color:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;
  transition:background .15s ease,color .15s ease,opacity .15s ease;
}
.arrow svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.arrow:hover{background:var(--gold);color:var(--ink)}
.arrow[disabled]{opacity:.25;cursor:default;pointer-events:none}
.arrow.small{width:40px;height:40px}
@media (max-width:720px){
  /* su mobile le frecce si sovrappongono ai bordi della pagina (c'è anche lo swipe) */
  .stage-wrap .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px}
  .stage-wrap .prev{left:-.35rem}
  .stage-wrap .next{right:-.35rem}
}

/* barra: contatore + azioni */
.book-bar{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  max-width:760px;margin:1.1rem auto 0;
}
.counter{font-family:var(--font-sans);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:#dfe4e9;margin:0}
.counter b{color:var(--gold);font-size:1.05rem}
.book-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* miniature */
.thumbs{
  position:relative; /* offsetLeft delle miniature relativo allo strip (auto-scroll) */
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:.5rem .2rem;margin:.9rem auto 0;max-width:100%;
}
.thumbs::-webkit-scrollbar{display:none}
.thumbs button{
  flex:none;width:clamp(48px,7vw,64px);aspect-ratio:var(--pw) / var(--ph);
  padding:0;border:2px solid transparent;border-radius:4px;overflow:hidden;
  background:var(--ink-deep);cursor:pointer;opacity:.55;
  transition:opacity .15s ease,border-color .15s ease;
}
.thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs button:hover{opacity:1}
.thumbs button[aria-current="true"]{opacity:1;border-color:var(--gold)}
.hint{text-align:center;font-style:italic;font-size:.85rem;color:rgba(255,255,255,.55);margin:.9rem 0 0}

/* fallback senza JS (e crawler): tutte le pagine in colonna */
.pages{display:grid;gap:1rem;max-width:720px;margin:0 auto;padding:0;list-style:none}
.pages img{width:100%;border-radius:6px}
.js .pages{display:none}
html:not(.js) .stage-wrap,html:not(.js) .book-bar,html:not(.js) .thumbs,html:not(.js) .hint{display:none}

/* ============================================================
   Vista ingrandita (pagina alla massima risoluzione, scorrevole;
   pinch-zoom nativo attivo)
   ============================================================ */
.zoom-view{position:fixed;inset:0;z-index:100;background:rgba(22,27,33,.97);display:flex;flex-direction:column}
.zoom-view[hidden]{display:none}
.zoom-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem .9rem;background:var(--ink-deep);border-bottom:2px solid var(--gold)}
.zoom-nav{display:flex;gap:.4rem}
.zoom-scroll{flex:1;overflow:auto;touch-action:auto;-webkit-overflow-scrolling:touch;padding:.6rem;text-align:center}
/* mobile: 2,2× la larghezza dello schermo; desktop: risoluzione nativa (1600px) */
.zoom-scroll img{width:clamp(min(100%,1600px),220vw,1600px);max-width:none;height:auto;display:inline-block;border-radius:4px}

/* ============================================================
   Footer
   ============================================================ */
.menu-footer{background:var(--ink-deep);color:#cfd6dc;padding:2.6rem 0;text-align:center}
.menu-footer .coperto{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--gold);margin-bottom:.4rem}
.menu-footer a{color:var(--gold)}
.menu-footer p a:not(.back-home){text-decoration:underline;text-underline-offset:.15em}
.menu-footer p{margin:.3em 0}
.back-home{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.2rem;
  font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.08em;
  border:2px solid var(--gold);border-radius:999px;padding:.7em 1.4em;color:var(--gold);
  transition:background .15s ease,color .15s ease;
}
.back-home:hover{background:var(--gold);color:var(--ink)}

@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .menu-bar{position:static}
}