/* ──────────────────────────────────────────────────────────────────────
   Le parti comuni a TUTTE le pagine del sito: il menu a tendina del
   telefono, il riquadro col QR per chi sta al computer, e l'avviso dei
   cookie. Stanno qui e non dentro le pagine perche' sono otto: ogni volta
   che si cambia una virgola, altrimenti, la si cambia otto volte e alla
   nona ci si dimentica.

   I colori e i caratteri NON si ridefiniscono: si usano quelli che ogni
   pagina dichiara su :root (--fg, --bg, --line, --display, --yellow).
   ────────────────────────────────────────────────────────────────────── */

/* ── Le tre linee in alto a destra ──
   Esistono solo sul telefono. Da computer i link stanno gia' tutti in
   fondo alla pagina e un menu non servirebbe a niente. */
.menu-btn {
  display: none;
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--fg, #0a0a0a);
  align-items: center; justify-content: center;
}
.menu-btn svg { width: 26px; height: 26px; }

/* ── La tendina ──
   Bianca ma non piena: sotto si continuano a intravedere le foto, cosi' si
   capisce di essere ancora sulla stessa pagina e non su un'altra. */
.sheet {
  position: fixed; inset: 0; z-index: 90;
  display: none; flex-direction: column;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  backdrop-filter: saturate(140%) blur(2px);
  opacity: 0; transition: opacity .22s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.sheet.on { display: flex; }
.sheet.in { opacity: 1; }
body.sheet-open { overflow: hidden; }

.sheet .sheet-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 84px; flex: none;
  padding-top: env(safe-area-inset-top, 0px); padding-inline: 20px;
}
.sheet .sheet-top .wordmark { display: inline-flex; align-items: center; height: 34px; color: var(--fg, #0a0a0a); }
.sheet .sheet-top .wordmark svg { height: 100%; width: auto; }
/* La X: stessa misura del tasto che ha aperto la tendina, stesso posto —
   si chiude dove si e' aperto, senza cercare. */
.sheet .x {
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer;
  background: transparent; color: var(--fg, #0a0a0a);
  display: inline-flex; align-items: center; justify-content: center;
}
.sheet .x svg { width: 26px; height: 26px; }

.sheet .sheet-body {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  /* Respiro fra il logo e le voci: appiccicate sotto l'intestazione la
     tendina sembrava un elenco caduto addosso al marchio. */
  padding: 34px 20px calc(32px + env(safe-area-inset-bottom, 0px));
}
/* I link: grossi, uno sotto l'altro, da prendere col pollice. */
.sheet nav { display: flex; flex-direction: column; gap: 2px; }
.sheet nav a {
  font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: -0.02em;
  line-height: 1.26; color: var(--fg, #0a0a0a); text-decoration: none;
  padding-block: 2px;
}
.sheet nav a:active { opacity: .55; }
.sheet .social { display: flex; gap: 22px; }
.sheet .social a { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--fg, #0a0a0a); }
.sheet .social svg { width: 28px; height: 28px; }

/* ── I due blocchi del piè di pagina ──
   Le voci sono undici e servono quasi tutte per obbligo (termini, privacy,
   cookie, linee guida, trasparenza, cancellazione dell'account): non si
   possono togliere, ma in fila unica diventano un muro. Separate in due
   gruppi — Cheese e legale — si leggono. Lo stile delle voci resta quello
   che ogni pagina gia' dichiara: qui si governa solo come stanno insieme. */
footer nav { gap: 10px 44px; }
footer nav .grp { display: flex; flex-wrap: wrap; gap: 8px 28px; }
/* Nella tendina del telefono i due gruppi vanno uno sotto l'altro, con un
   salto in mezzo: e' li' che si capisce che sono due cose diverse. */
.sheet nav { gap: 22px; }
.sheet nav .grp { display: flex; flex-direction: column; gap: 2px; }

/* ── Il QR per chi sta al computer ──
   Da computer non si puo' mandare nessuno su uno store: non si sa che
   telefono abbia, e comunque lo scaricherebbe sul coso sbagliato. Si mostra
   il codice da inquadrare col telefono. */
.qr-ov {
  position: fixed; inset: 0; z-index: 95;
  display: none; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  backdrop-filter: saturate(140%) blur(2px);
  opacity: 0; transition: opacity .22s ease;
}
.qr-ov.on { display: flex; }
.qr-ov.in { opacity: 1; }
/* I due telefoni a sinistra, il codice a destra. */
.qr-ov .box {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 6vw, 90px); padding: 20px; text-align: center;
}
.qr-ov .telefoni { display: flex; align-items: center; gap: clamp(6px, 1.2vw, 18px); }
/* STESSA ALTEZZA tutti e due, e stessa altezza vuol dire stessa grandezza:
   nei due file il telefono riempie i 900px di tela dal bordo al bordo
   (misurato), quindi non c'e' margine trasparente a falsare il conto. */
.qr-ov .telefoni img {
  display: block; width: auto; height: min(62vh, 560px);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.22));
}
.qr-ov .codice { flex: none; }
.qr-ov .qr { display: block; width: min(260px, 54vw); height: auto; margin-inline: auto; }
.qr-ov p {
  margin: 16px 0 0; max-width: 16em; margin-inline: auto;
  font-family: var(--display); font-weight: 900; font-size: 19px; line-height: 1.25;
  letter-spacing: -0.015em; color: var(--fg, #0a0a0a);
}
.qr-ov .store { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.qr-ov .store a {
  font-family: var(--display); font-weight: 900; font-size: 15px; line-height: 1;
  color: var(--fg, #0a0a0a); text-decoration: underline; text-underline-offset: 3px;
  padding: 8px 6px;
}
/* "chiudi" esattamente dove stava "ottieni l'app": la barra riusa `.top` e
   `.wrap` della pagina, quindi altezza e margini sono gli stessi di prima
   senza ricopiarli (e restano gli stessi anche quando la pagina li cambia
   sui telefoni). Qui si gira solo da che parte sta il tasto. */
/* Con il riquadro aperto l'intestazione sale SOPRA il velo: li' dentro c'e'
   il tasto, che adesso dice "chiudi", e deve restare schiacciabile. */
body.app-aperta .top { position: relative; z-index: 96; }
.qr-ov .qr-top { position: absolute; top: 0; left: 0; right: 0; }
.qr-ov .qr-top[hidden] { display: none; }
.qr-ov .qr-top .wrap { justify-content: flex-end; }

/* ── Avviso dei cookie ──
   In fondo, largo quanto la pagina, finche' non si risponde. Non copre
   niente di importante e non si puo' perdere di vista. */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
  display: none;
  background: #ededee; border-top: 1px solid var(--line, #e9e9ec);
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.ck.on { display: block; }
.ck.in { transform: none; }
/* ⚠️ `padding-inline: 0`: ogni pagina ha gia' una sua regola `.wrap` con 20px
   di imbottitura, e sommandosi a quella della striscia il testo finiva
   stretto in mezzo con 40px per lato (misurato: 310px di testo su 390 di
   schermo). Qui lo spazio ai lati lo decide `.ck`, una volta sola. */
.ck .wrap { width: min(1280px, 100%); margin-inline: auto; padding-inline: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ck p {
  margin: 0; flex: 1 1 320px; min-width: 0;
  font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--fg, #0a0a0a);
}
.ck a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ck .row { display: flex; gap: 10px; flex: none; }
.ck button {
  font-family: var(--display); font-weight: 900; font-size: 16px; line-height: 1;
  border: 0; cursor: pointer; border-radius: 999px; padding: 14px 22px;
  background: var(--fg, #0a0a0a); color: #fff;
}
.ck button.ghost { background: transparent; color: var(--fg, #0a0a0a); text-decoration: underline; text-underline-offset: 3px; padding-inline: 8px; }

/* ── Telefono ──
   Qui il menu prende il posto del tasto dell'app, e i link in fondo
   spariscono: sono gli stessi, e stanno nella tendina. */
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  /* Sul telefono il tasto dell'app lascia il posto al menu — ma SOLO quello
     vero dell'intestazione: il "chiudi" del riquadro usa le stesse classi e
     senza questa esclusione sparirebbe anche lui. */
  .top:not(.qr-top) .btn { display: none; }
  footer nav { display: none; }
  /* Restano solo i social, e stanno SOSPESI in fondo: niente filo grigio
     che li chiuda in una barra, niente fondo bianco pieno. I link sono
     nel menu, qui sotto non c'e' una sezione da separare dal resto. */
  footer { border-top: 0; background: transparent; }
  footer .wrap { justify-content: flex-start; padding-block: 8px calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .sheet .sheet-top { height: 68px; }
  .sheet .sheet-top .wordmark { height: 28px; }
  .sheet nav a { font-size: 23px; }
  .ck .wrap { flex-direction: column; align-items: stretch; }
  /* ⚠️ `flex: none`. In colonna il flex-basis non vale piu' per la larghezza
     ma per l'ALTEZZA: con `1 1 320px` il paragrafo diventava alto 320px e
     l'avviso si mangiava mezzo schermo (misurato: 415px su 844). */
  .ck p { flex: none; }
  .ck .row { justify-content: flex-start; }
}

/* Sotto i 1000px i due telefoni non ci stanno accanto al codice senza
   schiacciare tutto: si tolgono. Il codice resta al centro, da solo, che e'
   poi l'unica cosa indispensabile. */
@media (max-width: 1000px) {
  .qr-ov .telefoni { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .qr-ov, .ck { transition: none; }
}