/* =============================================================
   Like – The Social Game · foglio di stile
   Ricostruzione del tema WordPress "HTML5Press" (colore verde)
   con lo sfondo a circuiti, il banner e i menu "a pillola".
   Versione 3: menu in una sola fila senza sottomenu, pagine lunghe divise
   in sezioni con l'indice "In questa pagina".
   ============================================================= */

/* =============================================================
   MODIFICA QUI
   Tutti i valori che puoi cambiare senza toccare il resto del file.
   Le velocità delle animazioni si cambiano QUI. CONFIG.effects in
   src/assets/js/animations.js le sovrascrive solo se lì metti un
   valore al posto di null (o se metti enabled: false).

   Misure dello schermo (breakpoint):
   - fino a 1052px: menu compatto (barra + pannello laterale).
     Se cambi questo numero cambia anche
     CONFIG.menu.breakpoint in animations.js, e il numero in tutte le
     righe "@media (max-width: 1052px)" / "(min-width: 1053px)" qui sotto.
   - fino a 768px: spaziature da smartphone, gallerie su 2 colonne.
   - fino a 560px: immagini non più affiancate al testo.

   Livelli (z-index), dal più basso al più alto:
     barra del menu 800 · pulsante Indice 850 · banner dei cookie 900 ·
     velo 940 · pannello 950 · lightbox 1000 · Vai al contenuto 1100
   ============================================================= */
:root {
  /* --- Colori ------------------------------------------------ */
  --color-green: #038F3F;          /* verde Like: pillole attive, bordi, sfondi verdi */
  /* Verde per i TESTI (link, titoli, scritte delle pillole). È un po' più scuro
     del verde Like perché sul riquadro grigio semitrasparente #038F3F si legge
     male (contrasto 2,7:1, il minimo per l'accessibilità è 4,5:1).
     Per tornare al verde del vecchio sito metti #038F3F. */
  --color-text-green: #006629;
  --color-green-dark: #012b13;     /* fondo del gradiente delle pillole attive */
  --color-green-hover: #004d1f;    /* link al passaggio del mouse (sul vecchio sito #009900, poco leggibile) */
  --color-green-deep: #006629;     /* schede degli autori (pagina Info) */
  --color-green-pale: #ccd2ce;     /* riquadro delle mansioni nelle schede autori, bordi chiari */
  --color-text: #222;              /* testo normale */
  --color-text-soft: #555;         /* didascalie */
  --color-focus: #ffbf00;          /* contorno degli elementi selezionati da tastiera, sulle parti scure */
  --color-focus-dark: #012b13;     /* lo stesso contorno sul riquadro chiaro e sul banner dei cookie */

  /* --- Sfondo della pagina ----------------------------------- */
  --page-bg-color: #0a2e15;                      /* visibile solo se l'immagine non carica */
  --page-bg-image: url("../img/circuiti.png");   /* immagine a circuiti ripetuta */
  --page-bg-attachment: fixed;                   /* fixed = lo sfondo resta fermo scorrendo */

  /* --- Riquadro centrale bianco/grigio ----------------------- */
  --box-bg: rgba(240, 240, 240, .85);
  --box-border-color: #fff;
  --box-border-width: 10px;
  --box-radius: 20px;
  --box-padding: 20px;
  --box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 15px rgba(204, 204, 204, .1);

  /* --- Pillole (menu e pulsanti) ---------------------------- */
  --pill-bg-top: #fafafa;
  --pill-bg-bottom: #ececec;
  --pill-border-light: #fff;
  --pill-border-dark: #c9c9c9;
  --pill-active-top: var(--color-green);
  --pill-active-bottom: var(--color-green-dark);
  --pill-radius: 18px;
  --pill-padding: 14px 20px;
  --pill-font-size: 14px;
  --pill-gap: 20px;                 /* spazio tra le voci del menu in alto, come sul vecchio sito */
  --pill-pressed-shadow: inset 1px 1px 5px #ccc;
  --tap-size: 44px;                 /* misura minima di ciò che si tocca col dito */

  /* --- Barra del menu ---------------------------------------- */
  --navbar-position: sticky;        /* static = la barra scorre via con la pagina, come nel vecchio sito */
  --navbar-bg: rgba(240, 240, 240, .97);
  --navbar-shadow: 0 6px 14px rgba(0, 0, 0, .25);   /* ombra quando la barra è attaccata in alto */
  --navbar-height-mobile: 60px;
  --navbar-offset: 76px;            /* spazio lasciato sopra i titoli quando si salta a una sezione (#regolamento) */
  --banner-max-height-mobile: min(150px, 24vh);   /* altezza massima del banner su tablet e telefoni in orizzontale */
  --menu-panel-width: 420px;        /* larghezza del pannello del menu (telefoni e tablet) */
  --menu-panel-bg: #f0f0f0;
  --menu-panel-head-offset: 72px;   /* altezza della testata scura del pannello + margine: la voce col focus non ci finisce sotto */

  /* --- Tipografia -------------------------------------------- */
  --font-body: Georgia, "Times New Roman", Times, serif;
  /* Titoli e menu: sul vecchio sito il font "Droid Serif" non veniva caricato,
     quindi si vedeva un carattere senza grazie. Per usare davvero Droid Serif
     metti i file in src/assets/fonts/ e attiva il blocco @font-face qui sotto. */
  --font-headings: "Droid Serif", Helvetica, Arial, sans-serif;
  --font-size-body: 17px;           /* computer e tablet; sui telefoni 16px/26px, vedi la fine del file */
  --line-height-body: 29px;
  --font-size-title: 21px;          /* titoli verdi #### */
  --font-size-h1: clamp(24px, 5vw, 28px);   /* titolo principale della pagina (#) */
  --paragraph-spacing: 1em;         /* spazio sotto i paragrafi */
  --content-list-style: none;       /* puntini degli elenchi: none come sul vecchio sito, oppure disc */
  --measure: 75ch;                  /* larghezza massima delle righe nelle FAQ e nelle pagine senza colonna destra */

  /* --- Link nel testo ---------------------------------------- */
  --link-underline-thickness: 1px;
  --link-underline-offset: 3px;

  /* --- Misure della pagina ----------------------------------- */
  --site-width: 1020px;             /* larghezza del riquadro centrale */
  --sidebar-width: 160px;           /* colonna destra col personaggio */
  --column-gap: 25px;
  --header-height: 296px;           /* altezza della testata col banner (desktop) */
  --gutter: 16px;                   /* margine laterale sugli schermi piccoli */
  --content-top-space: 28px;        /* spazio tra la barra del menu e il testo */
  --list-indent: 80px;              /* rientro degli elenchi (vecchio sito: 80px; su smartphone 20px) */

  /* --- Bandierine della lingua ------------------------------- */
  --flag-width: 18px;
  --flag-opacity: 1;
  --flag-hover-scale: 1.1;

  /* --- Animazioni e transizioni ------------------------------ */
  --transition-fast: 100ms linear;            /* link e pillole */
  --transition-logo: 200ms linear;            /* banner in alto al passaggio del mouse */
  --logo-hover-scale: 1.03;
  --card-transition: 200ms ease;              /* bordo delle immagini nelle gallerie */
  --card-hover-lift: -3px;                    /* quanto si "alza" un'immagine della galleria */
  --button-hover-scale: 1.1;                  /* ingrandimento dei pulsanti "play" e del lightbox */
  --mobile-menu-duration: 250ms;              /* apertura del pannello del menu */
  --cookie-banner-duration: 300ms;

  /* --- Pagine lunghe: sezioni e indice --- */
  --section-space: 56px;            /* spazio prima di ogni sezione (##); sui telefoni 40px */
  --section-rule: 2px solid rgba(3, 143, 63, .35);    /* riga che separa le sezioni (verde Like trasparente: il grigio chiaro sul riquadro non si vede); none = senza riga */
  --font-size-section: clamp(21px, 4vw, 24px);         /* titoli delle sezioni (##) */
  --section-hash-display: inline;   /* "#" davanti ai titoli delle sezioni e nell'indice; none = senza */
  --section-target-bg: #e3f1e8;     /* lampo verde chiaro sul titolo quando ci arrivi da un link */
  --page-index-bg: #fff;            /* riquadro "In questa pagina" */
  --to-index-offset: 16px;          /* distanza del pulsante "Indice" dai bordi dello schermo */
  --sidebar-position: sticky;       /* sticky = il personaggio resta visibile scorrendo (schermi larghi); static = scorre via */
  --scroll-behavior: smooth;        /* auto = salto immediato alle sezioni */
  --measure-tablet: 43em;           /* larghezza massima del testo sui tablet (600-1052px), dove non c'è la colonna destra: 43em = come su computer, e ci stanno 2 schede autori per fila */

  /* --- Sezione Ringraziamenti: muro degli Amici ({% amici %}) --- */
  --friend-color-1: #006629;        /* colori dei cerchi con le iniziali: */
  --friend-color-2: #C2410C;        /* tutti leggibili con testo bianco (≥ 5:1) */
  --friend-color-3: #1D4ED8;
  --friend-color-4: #BE185D;
  --friend-color-5: #6D28D9;
  --friend-color-6: #0E7490;
  --friend-avatar-size: 36px;       /* cerchio con le iniziali (su smartphone 30px) */
  --friends-stagger: 30ms;          /* ritardo tra un amico e il successivo nell'animazione d'ingresso */
  --friend-card-min: 170px;         /* larghezza minima di una scheda (desktop) */
}

/* Per usare il vero font Droid Serif (licenza Apache) togli il commento
   e copia i file .woff2 in src/assets/fonts/.
@font-face { font-family: "Droid Serif"; src: url("../fonts/DroidSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Droid Serif"; src: url("../fonts/DroidSerif-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
*/

/* =============================================================
   Base
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-y: scroll;
  /* Saltando a un'ancora (una sezione, #video, una domanda delle FAQ, "Vai al
     contenuto") il punto d'arrivo non finisce sotto la barra del menu */
  scroll-padding-top: var(--navbar-offset);
  /* Scorrimento morbido verso le sezioni (con "riduci movimento" è immediato) */
  scroll-behavior: var(--scroll-behavior);
}

body {
  margin: 0;
  color: var(--color-text);
  font: var(--font-size-body)/var(--line-height-body) var(--font-body);
  background-color: var(--page-bg-color);
  background-image: var(--page-bg-image);
  background-position: center top;
  background-repeat: repeat;
  background-attachment: var(--page-bg-attachment);
  /* "clip" e non "hidden": con "hidden" il body diventerebbe un riquadro
     che scorre per conto suo e la barra del menu non resterebbe in alto */
  overflow-x: clip;
}

img,
video,
audio,
iframe,
object,
canvas {
  max-width: 100%;
}

img {
  height: auto;
  border: 0;
  vertical-align: middle;
}

a {
  color: var(--color-text-green);
  text-decoration: none;
  transition: color var(--transition-fast), text-shadow var(--transition-fast), background var(--transition-fast);
}

@media (hover: hover) {
  a:hover {
    color: var(--color-green-hover);
    text-shadow: 0 1px 0 #fff;
  }
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Sul riquadro chiaro il giallo non si vede: contorno verde scuro */
.main-box :focus-visible,
.cookie-banner :focus-visible,
.main-nav :focus-visible {
  outline-color: var(--color-focus-dark);
}

::selection {
  background: var(--color-green);
  color: #fff;
  text-shadow: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  text-shadow: 0 1px 0 #fff;
  margin: 0 0 15px;
  line-height: var(--line-height-body);
}

p, ul, ol, dl, table, pre, blockquote, figure {
  margin-top: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 1100;
  padding: 10px 16px;
  border-radius: var(--pill-radius);
  background: var(--color-green);
  color: #fff;
  font: bold 14px var(--font-headings);
}

.skip-link:focus {
  top: 8px;
  color: #fff;
}

/* Icone SVG (filtro "icon" e shortcode): prendono il colore del testo */
.icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* =============================================================
   Pillole (stile comune a menu e pulsanti)
   ============================================================= */
.pill,
.btn {
  display: block;
  padding: var(--pill-padding);
  border: 1px solid;
  border-color: var(--pill-border-light) var(--pill-border-dark) var(--pill-border-dark) var(--pill-border-light);
  border-radius: var(--pill-radius);
  background: linear-gradient(to bottom, var(--pill-bg-top) 0%, var(--pill-bg-bottom) 100%);
  color: var(--color-text-green);
  font: bold var(--pill-font-size)/1.15 var(--font-headings);
  text-shadow: 0 1px 0 #fff;
  text-align: center;
  transition: all var(--transition-fast);
}

/* Pillola verde piena: voce attiva, pulsanti "primary", passaggio del mouse.
   Il passaggio del mouse vale solo dove c'è davvero un mouse (hover: hover):
   sui telefoni un tocco non lascia più la pillola verde "incastrata". */
.pill:focus-visible,
.btn:focus-visible,
.is-current > .pill,
.btn--primary,
.btn--facebook,
.pill--cta {
  background: linear-gradient(to bottom, var(--pill-active-top) 0%, var(--pill-active-bottom) 100%);
  border-color: transparent;
  color: #fff;
  text-shadow: 0 1px 0 var(--color-green);
}

@media (hover: hover) {
  .pill:hover,
  .btn:hover {
    background: linear-gradient(to bottom, var(--pill-active-top) 0%, var(--pill-active-bottom) 100%);
    border-color: transparent;
    color: #fff;
    text-shadow: 0 1px 0 var(--color-green);
  }

  .btn--primary:hover,
  .btn--facebook:hover,
  .pill--cta:hover {
    background: linear-gradient(to bottom, var(--pill-active-bottom) 0%, var(--pill-active-top) 100%);
  }
}

.btn--primary:focus-visible,
.btn--facebook:focus-visible,
.pill--cta:focus-visible {
  background: linear-gradient(to bottom, var(--pill-active-bottom) 0%, var(--pill-active-top) 100%);
}

.pill:active,
.btn:active {
  box-shadow: var(--pill-pressed-shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-size);
  cursor: pointer;
  text-decoration: none;
}

/* Peso del file nei pulsanti di download (es. "3,3 MB") */
.btn__meta {
  font-weight: normal;
  font-size: 12px;
  opacity: .85;
}

.btn__icon {
  flex: none;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================
   Struttura
   ============================================================= */
.wrapper {
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
}

/* --- Testata --------------------------------------------------- */
.site-header {
  position: relative;
  height: var(--header-height);
  padding: 6px 0 0 25px;
}

.site-logo {
  display: inline-block;
  transform: translateZ(0);
  transition: transform var(--transition-logo);
}

.site-logo:focus-visible {
  transform: scale(var(--logo-hover-scale)) translateZ(0);
}

@media (hover: hover) {
  .site-logo:hover {
    transform: scale(var(--logo-hover-scale)) translateZ(0);
  }
}

.site-logo img {
  display: block;
}

/* --- Scelta della lingua (pillola IT | EN) ---------------------- */
.lang-switcher ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-switcher li {
  margin: 0;
  line-height: 1;
}

.lang-switcher a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid;
  border-color: var(--pill-border-light) var(--pill-border-dark) var(--pill-border-dark) var(--pill-border-light);
  background: linear-gradient(to bottom, var(--pill-bg-top), var(--pill-bg-bottom));
  color: var(--color-text-green);
  font: bold 13px/1 var(--font-headings);
  text-shadow: 0 1px 0 #fff;
  transition: all var(--transition-fast);
}

.lang-switcher .is-current a {
  border-color: transparent;
  background: linear-gradient(to bottom, var(--pill-active-top), var(--pill-active-bottom));
  color: #fff;
  text-shadow: 0 1px 0 var(--color-green);
}

@media (hover: hover) {
  .lang-switcher a:hover {
    border-color: transparent;
    background: linear-gradient(to bottom, var(--pill-active-top), var(--pill-active-bottom));
    color: #fff;
    text-shadow: 0 1px 0 var(--color-green);
  }

  .lang-switcher a:hover .lang-switcher__flag {
    transform: scale(var(--flag-hover-scale));
  }
}

.lang-switcher__flag {
  display: block;
  flex: none;
  width: var(--flag-width);
  height: auto;
  aspect-ratio: 3 / 2;
  opacity: var(--flag-opacity);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  transition: transform var(--transition-fast);
}

/* In testata: le due lingue unite in una sola pillola, in basso a destra del banner */
.lang-switcher--header {
  position: absolute;
  top: 232px;
  right: 30px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

.lang-switcher--header li:first-child a {
  border-radius: var(--pill-radius) 0 0 var(--pill-radius);
}

.lang-switcher--header li:last-child a {
  border-radius: 0 var(--pill-radius) var(--pill-radius) 0;
}

.lang-switcher--header li + li a {
  border-left: 1px solid var(--pill-border-dark);
}

/* Nella barra (solo schermi stretti): si vede solo l'altra lingua */
.lang-switcher--bar {
  display: none;
}

/* --- Riquadro centrale ---------------------------------------- */
/* ATTENZIONE: non dare a .wrapper, .main-box o .navbar le proprietà
   transform, filter, backdrop-filter, contain o will-change: il pannello
   del menu (position: fixed) non coprirebbe più lo schermo. */
.main-box {
  position: relative;
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--box-border-color);
  border-radius: var(--box-radius);
  padding: var(--box-padding);
  box-shadow: var(--box-shadow);
}

.main-box::after {
  content: "";
  display: table;
  clear: both;
}

/* --- Barra del menu ---------------------------------------------- */
/* Punto di riferimento invisibile: quando esce dallo schermo la barra è
   "attaccata" in alto e prende l'ombra (classe is-stuck, da animations.js) */
.navbar-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.navbar {
  position: var(--navbar-position);
  top: 0;
  z-index: 800;
  margin: calc(-1 * var(--box-padding)) calc(-1 * var(--box-padding)) var(--content-top-space);
  padding: 10px var(--box-padding) 10px calc(var(--box-padding) + 20px);
  border-radius: calc(var(--box-radius) - var(--box-border-width)) calc(var(--box-radius) - var(--box-border-width)) 0 0;
  background: var(--navbar-bg);
  transition: box-shadow var(--transition-logo), border-radius var(--transition-logo);
}

.navbar.is-stuck {
  border-radius: 0 0 12px 12px;
  box-shadow: var(--navbar-shadow);
}

.navbar__toggle,
.navbar__cta,
.main-nav__head {
  display: none;
}

/* --- Menu principale (schermi larghi) ---------------------------- */
.main-nav__list {
  display: flex;
  flex-wrap: wrap;               /* se aggiungi voci e non ci stanno, vanno a capo invece di sparire */
  align-items: center;
  gap: 8px var(--pill-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav__item {
  position: relative;
  margin: 0;
}

.main-nav__item > .pill {
  white-space: nowrap;
}

/* Voce "Acquista": in fondo a destra, verde pieno con il carrello */
.main-nav__item--cta {
  margin-left: auto;
}

.pill--cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pill--cta .icon {
  width: 18px;
  height: 18px;
}

.main-nav__item--cta.is-current > .pill {
  box-shadow: 0 0 0 3px var(--color-green-pale);
}

/* --- Contenuto ------------------------------------------------- */
.content {
  padding: 0 20px 20px;
}

.content:focus {
  outline: none;
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  column-gap: var(--column-gap);
  align-items: start;
}

.columns__main {
  min-width: 0;
}

/* --- Colonna destra ------------------------------------------- */
/* Il personaggio segue chi scorre le pagine lunghe (--sidebar-position) */
.sidebar {
  position: var(--sidebar-position);
  top: calc(var(--navbar-offset) + 8px);
  text-align: center;
}

.sidebar__image {
  display: block;
  margin: 0 auto 20px;
}

/* --- Piè di pagina -------------------------------------------- */
.site-footer {
  clear: both;
  padding: 24px 20px 20px;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

.site-footer p {
  margin: 0 0 4px;
}

.site-footer a,
.site-footer .link-button {
  color: #fff;
  font-family: var(--font-headings);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-footer a:focus-visible,
.site-footer .link-button:focus-visible {
  outline-color: var(--color-focus);
}

@media (hover: hover) {
  .site-footer a:hover,
  .site-footer .link-button:hover {
    color: #fff;
    text-decoration-thickness: 2px;
    text-shadow: 0 0 6px rgba(255, 255, 255, .6);
  }
}

.site-footer__top {
  display: flex;
  justify-content: center;
  margin-bottom: 20px !important;
}

/* "Torna su": pillola bianca con la freccia */
.site-footer .back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap-size);
  color: var(--color-text-green);
  text-decoration: none;
}

.site-footer .back-to-top:focus-visible {
  color: #fff;
  text-shadow: 0 1px 0 var(--color-green);
}

@media (hover: hover) {
  .site-footer .back-to-top:hover {
    color: #fff;
    text-shadow: 0 1px 0 var(--color-green);
  }
}

.back-to-top .icon {
  width: 18px;
  height: 18px;
}

/* Mappa del sito: una fila con le pagine del menu */
.site-map {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.site-footer .site-map a {
  font-size: 15px;
  font-weight: bold;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.site-footer__copy {
  opacity: .9;
}

/* =============================================================
   Testo delle pagine
   ============================================================= */
.entry-content {
  min-width: 0;
}

/* Gli indirizzi lunghi scritti per intero (es. nei link della rassegna stampa)
   vanno a capo invece di uscire dalla colonna sui telefoni. */
.entry-content a {
  overflow-wrap: anywhere;
}

/* Link nel testo sottolineati: il solo colore verde non basta a distinguerli */
.entry-content a:not([class]):not(:has(> img)) {
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
}

.entry-content a:not([class]):not(:has(> img)):hover,
.entry-content a:not([class]):not(:has(> img)):focus-visible {
  text-decoration-thickness: 2px;
}

.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

.entry-content p {
  margin: 0 0 var(--paragraph-spacing);
}

/* Più {% button %} su righe consecutive: una fila di pulsanti */
.entry-content p:has(> .btn:first-child) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.entry-content p.text-center:has(> .btn:first-child) {
  justify-content: center;
}

/* Righe di testo non troppo lunghe dove non c'è la colonna destra */
body:not(.has-sidebar) .entry-content > p,
.toggle {
  max-width: var(--measure);
}

body:not(.has-sidebar) .entry-content > p.text-center {
  margin-left: auto;
  margin-right: auto;
}

/* Titoli: il primo titolo della pagina (#) e i #### hanno l'aspetto dei
   titoli verdi del vecchio sito. */
.entry-content h1,
.entry-content h4 {
  color: var(--color-text-green);
  font-size: var(--font-size-title);
  font-weight: bold;
  margin: 0 0 15px;
}

/* Sezioni delle pagine lunghe (## Titolo): riga di separazione, spazio,
   titolo verde più grande col "#" davanti (come un hashtag di Status).
   L'id (per /pagina/#titolo) lo aggiunge eleventy.config.js (pageSections). */
.entry-content h2 {
  clear: both;                                   /* le immagini affiancate della sezione prima non "entrano" in quella dopo */
  margin: var(--section-space) 0 16px;
  padding-top: calc(var(--section-space) / 2);
  border-top: var(--section-rule);
  color: var(--color-text-green);
  font-size: var(--font-size-section);
  font-weight: bold;
  line-height: 1.25;
}

.entry-content h2::before {
  content: "#";
  content: "#" / "";
  display: var(--section-hash-display);
  margin-right: .12em;
  color: var(--color-green);
  opacity: .5;
}

/* Un ## in cima alla pagina non ha bisogno di riga né di spazio sopra */
.entry-content > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.entry-content .page-index + h2 {
  margin-top: 8px;
}

/* Arrivando a una sezione da un link (/info/#contatti) il titolo si illumina un attimo */
.entry-content h2:target {
  animation: like-section-flash 1.6s ease-out 1;
  border-radius: 0 0 10px 10px;
}

@keyframes like-section-flash {
  from { background-color: var(--section-target-bg); }
  to { background-color: transparent; }
}

.entry-content h1 {
  font-size: var(--font-size-h1);
  line-height: 1.25;
}

.entry-content h3 {
  color: var(--color-text-green);
  font-size: 18px;
}

.entry-content h5 {
  font-size: 18px;
}

.entry-content h6 {
  font-size: 16px;
  font-weight: normal;
}

.entry-content * + h3,
.entry-content * + h4 {
  margin-top: 28px;
}

/* Sottotitolo subito sotto il titolo della sezione (es. "Grazie a tutti!") */
.entry-content h2 + h3 {
  margin-top: 0;
}

/* --- Indice "In questa pagina" (partials/page-index.njk) ------- */
/* Un riquadro bianco con i link alle sezioni (non pillole: non è un menu).
   display: flex crea un nuovo contesto: accanto a un'immagine affiancata il
   riquadro si mette di fianco invece di finirci sotto, quindi niente clear. */
.page-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 32px;
  padding: 12px 20px;
  border: 1px solid var(--color-green-pale);
  border-left: 6px solid var(--color-green);
  border-radius: 12px;
  background: var(--page-index-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.page-index:focus:not(:focus-visible) {
  outline: none;
}

.entry-content .page-index__title {
  margin: 0;
  color: var(--color-text-soft);
  font: bold 12px/1.2 var(--font-headings);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: none;
}

.entry-content .page-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-index__link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--color-text-green);
  font: bold 16px/1.3 var(--font-headings);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.page-index__link:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

@media (hover: hover) {
  .page-index__link:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }
}

.page-index__hash {
  display: var(--section-hash-display);
  margin-right: 1px;
  color: var(--color-green);
  opacity: .55;
}

/* --- Pulsante "Indice" (in basso a destra, riporta all'indice) --- */
/* Compare solo dopo aver superato l'indice (animations.js, CONFIG.pageIndex) */
.to-index {
  position: fixed;
  z-index: 850;
  right: max(var(--to-index-offset), env(safe-area-inset-right));
  bottom: max(var(--to-index-offset), env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-size);
  padding: 0 16px;
  border: 2px solid #fff;
  border-radius: var(--pill-radius);
  background: linear-gradient(to bottom, var(--pill-active-top), var(--pill-active-bottom));
  color: #fff;
  font: bold 14px/1 var(--font-headings);
  text-shadow: 0 1px 0 var(--color-green);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.to-index .icon {
  width: 18px;
  height: 18px;
}

/* Il pulsante sta sopra il riquadro chiaro o sopra lo sfondo scuro (dipende
   dalla larghezza): contorno verde scuro + alone giallo, si vede su entrambi */
.to-index:focus-visible {
  outline: 3px solid var(--color-focus-dark);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--color-focus), 0 4px 14px rgba(0, 0, 0, .35);
}

@media (hover: hover) {
  .to-index:hover {
    color: #fff;
    background: linear-gradient(to bottom, var(--pill-active-bottom), var(--pill-active-top));
  }
}

/* Nascosto mentre ci sono il banner dei cookie, il menu aperto o il lightbox */
.to-index[hidden],
html.has-consent-banner .to-index,
html.menu-open .to-index,
html.lightbox-open .to-index {
  display: none;
}

/* Paragrafo che contiene solo un'immagine affiancata: nessuno spazio extra */
.entry-content p:has(> .alignleft:only-child),
.entry-content p:has(> .alignright:only-child) {
  margin: 0;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--paragraph-spacing) var(--list-indent);
  padding: 0;
}

.entry-content ul {
  list-style: var(--content-list-style);
}

/* Home: le cinque righe Sfide / Alleanze / … restano allineate al testo,
   come nel vecchio sito */
.is-home .entry-content > ul:not([class]) {
  margin-left: 0;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li > ul,
.entry-content li > ol {
  margin-bottom: 0;
}

.entry-content hr {
  height: 0;
  margin: 20px 0 40px;
  border: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}

.entry-content blockquote {
  margin: 40px 20px 20px;
  padding: 33px 30px 0;
  background: url("../img/quote.png") no-repeat left top;
  color: #424242;
  font: italic 18px/32px var(--font-headings);
  text-shadow: 0 1px 0 #fff;
}

.entry-content table {
  width: 100%;
  margin-bottom: var(--paragraph-spacing);
  border: 1px solid #e7e7e7;
  border-collapse: collapse;
  font-size: 14px;
}

.entry-content th {
  padding: 9px 24px;
  background: #f3f9fc;
  border-left: 1px solid #e9f2f7;
  color: #444;
  font-size: 15px;
  text-align: left;
}

.entry-content td {
  padding: 6px;
  vertical-align: top;
}

.entry-content code {
  padding: 3px;
  border-radius: 3px;
  background: #cecece;
  font-size: 14px;
}

.entry-content iframe {
  border: 0;
}

/* --- Allineamento immagini ------------------------------------- */
.alignleft {
  float: left;
  margin: 0 25px 10px 0;
}

.alignright {
  float: right;
  margin: 0 0 10px 20px;
}

.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto var(--paragraph-spacing);
  text-align: center;
}

.aligncenter img {
  margin: 0 auto;
}

a.content-img {
  display: inline-block;
}

a.content-img.aligncenter {
  display: table;
}

.entry-content img.inline-icon {
  display: inline;
  vertical-align: middle;
}

/* --- Classi di utilità per il testo ------------------------------
   Da usare nell'HTML dentro le pagine Markdown, es.
   <p class="text-center">…</p>  ·  <strong class="text-green">…</strong>
   <p class="cta-green">…</p> (riga verde d'invito, senza essere un titolo) */
.text-center {
  text-align: center;
}

.entry-content .text-green {
  color: var(--color-text-green);
}

.entry-content .cta-green {
  margin-top: 28px;
  color: var(--color-text-green);
  font: bold 18px/var(--line-height-body) var(--font-headings);
  text-shadow: 0 1px 0 #fff;
}

/* --- Mappa del sito dentro una pagina (Collegamenti / Links) ---- */
.entry-content .site-map {
  display: block;
  columns: 2 220px;
  margin: 0 0 var(--paragraph-spacing);
}

.entry-content .site-map a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
}

/* =============================================================
   Componenti degli shortcode
   ============================================================= */

/* --- {% facts %}: caratteristiche del gioco ---------------------- */
.entry-content .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.facts__item {
  padding: 6px 12px;
  border: 1px solid var(--color-green-pale);
  border-radius: var(--pill-radius);
  background: #fff;
  color: var(--color-text-green);
  font: bold 13px/1.2 var(--font-headings);
}

/* --- {% gallery %} -------------------------------------------- */
.gallery {
  clear: both;
  display: grid;
  grid-template-columns: repeat(var(--gallery-columns, 4), minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 var(--paragraph-spacing);
}

.gallery__item {
  margin: 0;
  padding: 10px;
  background: #f4f4f4;
  border: 2px solid #cecdcd;
  border-radius: 3px 5px 5px 5px;
  text-align: center;
  transition: border-color var(--card-transition), transform var(--card-transition), box-shadow var(--card-transition);
}

.gallery__item:has(:focus-visible) {
  border-color: var(--color-green);
  transform: translateY(var(--card-hover-lift));
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

@media (hover: hover) {
  .gallery__item:hover {
    border-color: var(--color-green);
    transform: translateY(var(--card-hover-lift));
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
  }
}

.gallery__item a {
  display: block;
}

.gallery__item img {
  display: block;
  margin: 0 auto;
}

.gallery__item figcaption {
  margin: 10px 0 0;
  color: var(--color-text-soft);
  font: bold 14px/1.4 var(--font-headings);
  text-shadow: 0 1px 0 #fff;
}

/* --- {% toggle %} (FAQ) ---------------------------------------- */
.toggle {
  clear: both;
  margin: 10px 0;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fbfbfb;
  color: #333;
}

.toggle__title {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  padding: 10px 12px 10px 44px;
  border-radius: 8px;
  cursor: pointer;
  font: bold 16px/1.4 var(--font-headings);
  list-style: none;
}

.toggle__title::-webkit-details-marker {
  display: none;
}

/* Il "+" / "−" in un cerchio verde */
.toggle__title::before {
  content: "+";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 2px solid var(--color-green);
  border-radius: 50%;
  background: #fff;
  color: var(--color-green);
  font: bold 18px/20px Arial, sans-serif;
  text-align: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.toggle[open] > .toggle__title::before {
  content: "\2212";
  background: var(--color-green);
  color: #fff;
}

@media (hover: hover) {
  .toggle__title:hover::before {
    background: var(--color-green);
    color: #fff;
  }
}

.toggle__content {
  margin-left: 0;
  padding: 4px 12px 14px 44px;
  overflow: hidden;
}

.toggle__content > :last-child {
  margin-bottom: 0;
}

/* --- {% youtube %} --------------------------------------------- */
.video {
  max-width: var(--video-width, 560px);
  margin: 0 auto var(--paragraph-spacing);
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #0a2e15 var(--page-bg-image);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.video-embed__button {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  text-align: center;
}

.video-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-embed__play {
  position: relative;
  flex: none;
  width: 72px;
  height: 50px;
  border-radius: var(--pill-radius);
  background: linear-gradient(to bottom, var(--pill-active-top), var(--pill-active-bottom));
  box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(0, 0, 0, .4);
  transition: transform var(--transition-logo);
}

.video-embed__play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -6px;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}

.video-embed__button:focus-visible .video-embed__play {
  transform: scale(var(--button-hover-scale));
}

@media (hover: hover) {
  .video-embed__button:hover .video-embed__play {
    transform: scale(var(--button-hover-scale));
  }
}

.video-embed__title {
  position: relative;
  display: -webkit-box;
  max-width: 90%;
  padding: 2px 10px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 0, 0, .55);
  font: bold 17px/1.3 var(--font-headings);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Avviso "Cliccando, il video viene caricato da YouTube" sotto l'anteprima */
.video__notice {
  margin-top: 6px;
  color: var(--color-text-soft);
  font: 13px/1.4 var(--font-headings);
  text-align: center;
}

.video.is-loaded .video__notice {
  display: none;
}

/* --- {% amici %} (sezione Ringraziamenti) ---------------------- */
/* I sostenitori come la lista Amici di un profilo di Status:
   contatore in alto, schede con le iniziali, pulsante "Metti Like a tutti". */
.friends {
  margin: 8px 0 var(--paragraph-spacing);
}

/* Testata "da profilo": numero di amici a sinistra, pulsante a destra */
.friends__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #d0d0d0;
}

.friends .friends__title {
  margin: 0;
  color: var(--color-text);
  font: bold 18px/1.2 var(--font-headings);
}

.friends__count {
  color: var(--color-text-green);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.friends .friends__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--friend-card-min), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Scheda di un amico: una pillola come quelle del menu */
.friends .friend,
.friend__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border: 1px solid;
  border-color: var(--pill-border-light) var(--pill-border-dark) var(--pill-border-dark) var(--pill-border-light);
  border-radius: var(--pill-radius);
  background: linear-gradient(to bottom, var(--pill-bg-top) 0%, var(--pill-bg-bottom) 100%);
  color: var(--color-text);
  font: bold 15px/1.25 var(--font-headings);
  text-shadow: 0 1px 0 #fff;
}

/* Amico con link: tutta la scheda è il link */
.friends .friend--link {
  padding: 0;
}

.friend__link {
  width: 100%;
  border: 0;
  background: none;
  color: var(--color-text-green);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.friend__ext {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -1px;
}

@media (hover: hover) {
  .friend__link:hover {
    background: linear-gradient(to bottom, var(--pill-active-top) 0%, var(--pill-active-bottom) 100%);
    color: #fff;
    text-shadow: 0 1px 0 var(--color-green);
  }
}

.friend__link:focus-visible {
  background: linear-gradient(to bottom, var(--pill-active-top) 0%, var(--pill-active-bottom) 100%);
  color: #fff;
  text-shadow: 0 1px 0 var(--color-green);
}

/* Cerchio con le iniziali, come una foto profilo */
.friend__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--friend-avatar-size);
  height: var(--friend-avatar-size);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .3);
  color: #fff;
  font: bold 14px Arial, sans-serif;
  letter-spacing: .02em;
  text-shadow: none;
}

.friend--c1 .friend__avatar { background: var(--friend-color-1); }
.friend--c2 .friend__avatar { background: var(--friend-color-2); }
.friend--c3 .friend__avatar { background: var(--friend-color-3); }
.friend--c4 .friend__avatar { background: var(--friend-color-4); }
.friend--c5 .friend__avatar { background: var(--friend-color-5); }
.friend--c6 .friend__avatar { background: var(--friend-color-6); }

/* I nomi lunghi vanno a capo tra le parole; una parola viene divisa
   solo se da sola non ci sta proprio */
.friend__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Moneta Fan che compare su ogni scheda con "Metti Like a tutti" */
.friend__like {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff url("../../media/2012/09/fan71.png") no-repeat center / 20px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transform: scale(0);
  pointer-events: none;
}

.friends.is-liked .friend__like {
  animation: like-fan-pop 400ms cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i) * 15ms);
}

.friends.is-liked .friend {
  box-shadow: 0 0 0 2px var(--color-green);
}

@keyframes like-fan-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Ingresso "richiesta di amicizia accettata": solo se JavaScript ha preparato il muro */
.js .friends.is-armed .friend {
  opacity: 0;
}

.friends.is-visible .friend {
  animation: like-friend-in 350ms cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i) * var(--friends-stagger));
}

/* Ingresso finito (lo segna JavaScript): schede ferme e visibili */
.js .friends.is-done .friend {
  opacity: 1;
  animation: none;
}

@keyframes like-friend-in {
  from { opacity: 0; transform: translateY(8px) scale(.6); }
  60% { transform: scale(1.05); }
  to { opacity: 1; transform: none; }
}

/* Senza JavaScript il pulsante non servirebbe: resta nascosto */
.friends__likeall[hidden] {
  display: none;
}

/* Pulsante premuto: resta "schiacciato" finché non lo ripremi */
.friends__likeall[aria-pressed="true"] {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}

/* "+45 Like" che sale e sparisce accanto al pulsante */
.friends__burst {
  position: absolute;
  right: 16px;
  bottom: 100%;
  color: var(--color-text-green);
  font: bold 18px var(--font-headings);
  text-shadow: 0 1px 0 #fff;
  pointer-events: none;
  animation: like-burst 700ms ease-out both;
}

@keyframes like-burst {
  from { opacity: 1; transform: translateY(20px); }
  to { opacity: 0; transform: translateY(-20px); }
}

@media (prefers-reduced-motion: reduce) {
  .friends.is-liked .friend__like {
    animation: none;
    transform: none;
  }
}

/* Smartphone: due colonne, nomi lunghi su più righe (mai tagliati) */
@media (max-width: 560px) {
  .friends {
    --friend-avatar-size: 30px;
  }

  .friends .friends__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 6px;
  }

  .friends .friend,
  .friend__link {
    gap: 8px;
    padding: 8px 8px 8px 6px;
    font-size: 14px;
  }

  .friends .friend--link {
    padding: 0;
  }

  .friends__bar {
    flex-direction: column;
    align-items: stretch;
  }

  .friends__likeall {
    width: 100%;
    min-height: 44px;
  }
}

/* Telefoni molto stretti (320px): cerchio e testo un po' più piccoli,
   così anche "Paternoster" sta su una riga intera */
@media (max-width: 360px) {
  .friends {
    --friend-avatar-size: 26px;
  }

  .friends .friend,
  .friend__link {
    gap: 6px;
    font-size: 13px;
  }

  .friend__avatar {
    font-size: 12px;
  }
}

@media print {
  .friends .friend { animation: none !important; opacity: 1 !important; }
  .friends__likeall, .friends__burst, .friend__like { display: none !important; }
}

/* --- {% person %} ---------------------------------------------- */
.person-card {
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 346px;
  max-width: 100%;
  min-height: 150px;
  margin: 10px 10px 0 0;
  border: 5px solid #fff;
  border-radius: 10px;
  background: var(--color-green-deep);
  color: #fff;
  transition: transform var(--card-transition), box-shadow var(--card-transition);
}

a.person-card:focus-visible {
  color: #fff;
  text-shadow: none;
  transform: translateY(var(--card-hover-lift));
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

@media (hover: hover) {
  a.person-card:hover {
    color: #fff;
    text-shadow: none;
    transform: translateY(var(--card-hover-lift));
    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  }
}

.person-card__photo {
  flex: none;
  width: 110px;
  height: 110px;
  margin: 10px;
  object-fit: cover;
}

.person-card__text {
  flex: 1 1 150px;
  margin: 10px;                    /* anche a sinistra: su schermi strettissimi il testo va sotto la foto */
  line-height: 1.35;
}

.person-card__name {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-headings);
  font-size: 16px;
  text-transform: uppercase;
}

.person-card__tagline {
  display: block;
  font-size: .9em;
}

.person-card__roles {
  flex: 1 1 100%;
  margin: 0 10px 10px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--color-green-pale);
  color: var(--color-green-deep);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.person-card + :not(.person-card):not(h2) {
  clear: both;
  padding-top: 20px;
}

/* Sezione (##) subito dopo le schede: le schede sono affiancate (float) e il
   titolo, per stare sotto, perderebbe lo spazio sopra. Lo spazio lo danno
   le schede dell'ultima fila (le ultime due). */
@media (min-width: 769px) {
  .person-card:has(+ h2),
  .person-card:has(+ .person-card + h2) {
    margin-bottom: var(--section-space);
  }
}

/* --- {% pdf %}: scheda con "Scarica" e "Apri" ------------------- */
.pdf-embed {
  clear: both;
  margin: 0 0 var(--paragraph-spacing);
}

.pdf-embed__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  background: #fbfbfb;
}

.pdf-embed__icon {
  width: 32px;
  height: 32px;
  color: var(--color-green);
}

.entry-content .pdf-embed__name {
  flex: 1 1 200px;
  margin: 0;
  font-family: var(--font-headings);
  line-height: 1.4;
}

.pdf-embed__meta {
  display: block;
  color: var(--color-text-soft);
  font-size: 13px;
}

.entry-content .pdf-embed__actions {
  margin: 0;
}

/* Anteprima del PDF: si apre col pulsante "Anteprima" (animations.js),
   solo su schermi larghi col mouse */
.pdf-embed__object {
  display: block;
  width: 100%;
  height: 600px;
  margin-top: 12px;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  background: #fff;
}

.pdf-embed__object[hidden] {
  display: none;
}

.pdf-embed__fallback {
  padding: 20px;
}

/* --- {% facebook %} -------------------------------------------- */
.facebook-link {
  margin: 0 0 var(--paragraph-spacing);
}

/* --- Pagina 404 -------------------------------------------------- */
.not-found {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.not-found__image {
  flex: none;
}

.entry-content .not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--paragraph-spacing);
  padding: 0;
  list-style: none;
}

.not-found__links .pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-size);
  padding: 8px 16px;
}

/* =============================================================
   Lightbox (src/assets/js/lightbox.js)
   ============================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 70px;
  /* pinch-zoom: sul telefono si può ingrandire lo sfondo con due dita */
  touch-action: pan-y pinch-zoom;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--lightbox-overlay-opacity, .8);
}

.lightbox__frame {
  position: relative;
  margin: 0;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.lightbox__img {
  display: block;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  width: auto;
  height: auto;
  transition: opacity var(--lightbox-change-duration, 250ms) ease;
}

.lightbox__img.is-loading {
  opacity: 0;
}

.lightbox__caption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font: bold 14px/1.4 var(--font-headings);
  text-align: center;
}

.lightbox__caption:empty {
  display: none;
}

.lightbox__counter {
  position: absolute;
  top: 12px;
  left: 16px;
  margin: 0;
  color: #fff;
  font: 14px var(--font-headings);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--pill-active-top), var(--pill-active-bottom));
  color: #fff;
  font: bold 24px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  transition: transform var(--transition-fast);
}

@media (hover: hover) {
  .lightbox__btn:hover {
    color: #fff;
    transform: scale(var(--button-hover-scale));
  }
}

.lightbox__btn[hidden] {
  display: none;
}

.lightbox__btn .icon {
  width: 20px;
  height: 20px;
}

.lightbox__close {
  top: 10px;
  right: 10px;
}

/* "Scarica l'immagine": accanto a "Chiudi" */
.lightbox__download {
  top: 10px;
  right: 64px;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  margin-top: -22px;
}

.lightbox__prev {
  left: 12px;
}

.lightbox__next {
  right: 12px;
}

.lightbox__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: like-spin .8s linear infinite;
}

.lightbox__spinner[hidden] {
  display: none;
}

@keyframes like-spin {
  to { transform: rotate(360deg); }
}

html.lightbox-open {
  overflow: hidden;
}

/* =============================================================
   Banner dei cookie
   ============================================================= */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 900;
  width: min(640px, calc(100% - 2 * var(--gutter)));
  padding: 16px 20px;
  border: 4px solid #fff;
  border-radius: var(--box-radius);
  background: rgba(240, 240, 240, .97);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
  animation: like-slide-up var(--cookie-banner-duration) ease-out;
  font-size: 15px;
  line-height: 1.5;
}

.cookie-banner[hidden] {
  display: none;
}

/* Mentre il banner è aperto, la pagina ha spazio in fondo per non restarci sotto */
html.has-consent-banner body {
  padding-bottom: var(--consent-h, 0px);
}

.cookie-banner__text {
  margin: 0 0 12px;
}

.cookie-banner__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@keyframes like-slide-up {
  from { transform: translate(-50%, 120%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* =============================================================
   Menu compatto: telefoni e tablet (fino a 1052px)
   Barra in alto con "Menu", "Acquista" e lingua; il pulsante "Menu"
   apre un pannello da destra con tutte le pagine.
   ============================================================= */
@media (max-width: 1052px) {
  .wrapper {
    padding: 0 var(--gutter);
  }

  .site-header {
    height: auto;
    padding: 6px 0 12px;
  }

  .site-logo {
    display: block;
    width: fit-content;
    max-width: 100%;
  }

  /* Il banner resta, ma non si mangia mezzo schermo su tablet e telefoni in orizzontale */
  .site-logo img {
    width: auto;
    max-width: 100%;
    max-height: var(--banner-max-height-mobile);
  }

  .lang-switcher--header {
    display: none;
  }

  /* Pagine senza menu (promo, trolling): non c'è la barra, quindi la
     pillola delle lingue resta sotto il banner, a destra */
  .no-menu .lang-switcher--header {
    display: flex;
    justify-content: flex-end;
    position: static;
    margin-top: 8px;
  }

  .no-menu .lang-switcher--header a {
    min-height: var(--tap-size);
  }

  /* --- Barra --- */
  .navbar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--navbar-height-mobile);
    margin: calc(-1 * var(--box-padding)) calc(-1 * var(--box-padding)) 12px;
    padding: 8px var(--box-padding);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  .navbar.is-stuck {
    border-radius: 0;
  }

  /* Pulsante "Menu": verde come sul vecchio sito, con le tre righe che diventano una X */
  .js .navbar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--tap-size);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--pill-radius);
    background: linear-gradient(to bottom, var(--pill-active-top), var(--pill-active-bottom));
    color: #fff;
    font: bold 16px var(--font-headings);
    text-shadow: 0 1px 0 var(--color-green);
    cursor: pointer;
  }

  .navbar__toggle-icon,
  .navbar__toggle-icon::before,
  .navbar__toggle-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform var(--mobile-menu-duration), background var(--mobile-menu-duration);
  }

  .navbar__toggle-icon {
    position: relative;
  }

  .navbar__toggle-icon::before,
  .navbar__toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .navbar__toggle-icon::before { top: -6px; }
  .navbar__toggle-icon::after { top: 6px; }

  .navbar__toggle[aria-expanded="true"] .navbar__toggle-icon { background: transparent; }
  .navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
  .navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

  /* "Acquista" sempre a portata di dito */
  .navbar__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-size);
    margin-left: auto;
    padding: 0 14px;
    border: 2px solid var(--color-green);
    background: #fff;
    color: var(--color-text-green);
    font-size: 15px;
  }

  .navbar__cta .icon {
    width: 18px;
    height: 18px;
  }

  @media (hover: hover) {
    .navbar__cta:hover {
      border-color: var(--color-green);
    }
  }

  /* Lingua nella barra: solo l'altra lingua, come pillola bianca */
  .lang-switcher--bar {
    display: block;
  }

  .lang-switcher--bar .is-current {
    display: none;
  }

  .lang-switcher--bar a {
    min-width: var(--tap-size);
    min-height: var(--tap-size);
    padding: 0 10px;
    border-radius: var(--pill-radius);
    font-size: 14px;
  }

  /* --- Pannello del menu (solo con JavaScript) --- */
  .js .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 950;
    display: flex;
    flex-direction: column;
    width: min(var(--menu-panel-width), 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* la testata scura del pannello resta in alto: la voce col focus non ci finisce sotto */
    scroll-padding-top: var(--menu-panel-head-offset);
    padding-bottom: env(safe-area-inset-bottom);
    border-left: 6px solid #fff;
    background: var(--menu-panel-bg);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .35);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--mobile-menu-duration) ease, visibility 0s linear var(--mobile-menu-duration);
  }

  html.menu-open .main-nav {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  html.menu-open {
    overflow: hidden;
  }

  /* Col menu aperto la barra (che contiene il pannello) passa sopra al banner dei cookie */
  html.menu-open .navbar {
    z-index: 950;
  }

  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity var(--mobile-menu-duration) ease;
  }

  html.menu-open .menu-backdrop {
    opacity: 1;
  }

  .menu-backdrop[hidden] {
    display: none;
  }

  .js .main-nav__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--page-bg-color) var(--page-bg-image);
  }

  .main-nav__logo {
    display: block;
    width: auto;
    height: 40px;
  }

  .main-nav__close {
    display: grid;
    place-items: center;
    width: var(--tap-size);
    height: var(--tap-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-text-green);
    cursor: pointer;
  }

  .main-nav__close:focus-visible {
    outline-color: var(--color-focus);
  }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px;
  }

  /* Ogni voce: pillola larga quanto il pannello */
  .main-nav__item > .pill {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 18px;
    border-radius: var(--pill-radius);
    font-size: 16px;
    text-align: left;
    white-space: normal;
  }

  .main-nav__item--cta {
    margin-left: 0;
  }

  .main-nav__item--cta .pill {
    gap: 10px;
  }

  /* Senza JavaScript: niente pannello, il menu si vede per intero sotto la barra */
  html:not(.js) .navbar {
    position: static;
    flex-wrap: wrap;
  }

  html:not(.js) .main-nav {
    order: 10;
    flex-basis: 100%;
  }

  html:not(.js) .main-nav__list {
    padding: 8px 0 0;
  }

  /* --- Contenuto --- */
  .content {
    padding: 0 0 12px;
  }

  /* Colonna destra: resta solo il personaggio, piccolo, in fondo */
  .columns {
    display: block;
  }

  .sidebar {
    position: static;
  }

  .sidebar__image {
    max-width: 96px;
    margin: 8px auto 0;
  }
}

/* Tablet (600-1052px): non c'è la colonna destra, quindi la colonna del
   testo intera (non i singoli paragrafi: le immagini affiancate devono
   restare con il loro spazio) non supera --measure-tablet */
@media (max-width: 1052px) and (min-width: 600px) {
  .content > .columns,
  .content > .single {
    max-width: var(--measure-tablet);
    margin-inline: auto;
  }
}

/* =============================================================
   Smartphone (fino a 768px)
   ============================================================= */
@media (max-width: 768px) {
  :root {
    --box-border-width: 4px;
    --box-padding: 14px;
    --box-radius: 16px;
    --page-bg-attachment: scroll;
    --font-size-body: 16px;
    --line-height-body: 26px;
    --section-space: 40px;
  }

  .wrapper {
    padding: 0 6px;
  }

  .entry-content ul,
  .entry-content ol {
    margin-left: 20px;
  }

  /* Elenchi di link (negozi, rassegna stampa): righe alte abbastanza per il dito */
  .entry-content ul > li > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-size);
  }

  .entry-content ul > li {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  .entry-content ul.facts > li,
  .entry-content .site-map li,
  .is-home .entry-content > ul:not([class]) > li {
    border-bottom: 0;
  }

  .entry-content table {
    display: block;
    overflow-x: auto;
  }

  .gallery {
    grid-template-columns: repeat(min(var(--gallery-columns, 4), 2), minmax(0, 1fr));
    gap: 12px;
  }

  .not-found {
    flex-direction: column;
    align-items: center;
  }

  /* Indice "In questa pagina": una voce per riga, alta abbastanza per il dito */
  .page-index {
    display: flow-root;
    width: auto;
    padding: 10px 14px 4px;
  }

  .entry-content .page-index__title {
    margin-bottom: 2px;
  }

  .entry-content .page-index__list {
    display: block;
  }

  .page-index__list li + li {
    border-top: 1px solid rgba(0, 0, 0, .08);
  }

  .page-index__link {
    display: flex;
    width: 100%;
    min-height: var(--tap-size);
  }

  .page-index__link::after {
    content: "↓";
    content: "↓" / "";
    margin-left: auto;
    padding-left: 12px;
    color: var(--color-green);
  }

  /* Piè di pagina: due colonne e link alti 44px */
  .site-footer .site-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
    gap: 0 16px;
  }

  .site-footer a,
  .site-footer .link-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-size);
  }

  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .site-footer__links a {
    overflow-wrap: anywhere;
  }

  .lightbox {
    padding: 60px 8px;
  }

  .lightbox__img {
    max-width: calc(100vw - 36px);
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
  }

  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: 10px;
    margin-top: 0;
  }

  .lightbox__prev { left: calc(50% - 56px); }
  .lightbox__next { right: calc(50% - 56px); }
}

/* Separatori "·" tra i link del piè di pagina, solo quando stanno su una riga */
@media (min-width: 769px) {
  .site-footer__links li + li::before {
    content: "·";
    margin: 0 8px;
  }
}

@media (max-width: 560px) {
  .alignleft,
  .alignright {
    float: none;
    display: block;
    margin: 0 auto var(--paragraph-spacing);
  }

  a.content-img.alignleft,
  a.content-img.alignright {
    display: table;
  }

  /* Home: la scatola resta piccola a destra, così titolo e pulsanti stanno nel primo schermo */
  a.content-img.hero-img {
    float: right;
    display: block;
    width: 40%;
    max-width: 160px;
    margin: 0 0 8px 12px;
  }

  .person-card {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  .entry-content p:has(> .btn:first-child) > .btn {
    flex: 1 1 100%;
  }

  .toggle__content {
    padding-left: 12px;
  }
}

@media (max-width: 480px) {
  .cookie-banner {
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 12px 14px;
    font-size: 14px;
  }

  .cookie-banner__actions .btn {
    flex: 1;
  }
}

@media (max-width: 400px) {
  .video-embed__title {
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  /* Su schermi molto stretti "Acquista" diventa solo il carrello (il nome resta per i lettori di schermo) */
  .navbar__cta {
    width: var(--tap-size);
    padding: 0;
    justify-content: center;
  }

  .navbar__cta-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lang-switcher--bar .lang-switcher__flag {
    display: none;
  }
}

/* =============================================================
   Accessibilità: meno animazioni se il visitatore lo chiede
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   Stampa
   ============================================================= */
@media print {
  body { background: #fff; }
  .navbar, .navbar-sentinel, .menu-backdrop, .to-index, .page-index,
  .footer-nav, .back-to-top, .lang-switcher, .sidebar, .cookie-banner, .skip-link,
  .site-footer__links { display: none !important; }
  .main-box { border: 0; box-shadow: none; background: #fff; }
  .columns { display: block; }
}