/* ============================================================
   Il foglietto parrocchiale.

   Un foglio solo per due usi: si legge sul sito e si stampa. Le
   misure sono in millimetri perché la destinazione è la carta —
   in @media print il browser le rispetta davvero.

   L'impianto è quello del progetto design (foglietto-template.html):
   copertina con vangeli e colonna dei recapiti, poi gli avvisi della
   settimana, gli articoli, gli altri avvisi e in ultimo le Sante
   Messe a schede. I nomi delle classi sono in italiano come nel
   resto del sito; la corrispondenza con il template è annotata.

   Caricato solo dal template `foglietto`, non da tutto il sito.
   Dipende dai token: styles.css e site.css vengono prima.
   ============================================================ */

:root {
  --fg-larghezza: 210mm;   /* A4 in verticale */
  --fg-margine:   12mm;
  --fg-lato:      52mm;    /* la colonna dei recapiti */
  --fg-testo:     3.4mm;   /* il corpo: da qui derivano tutte le altre misure */
  --fg-scala:     1;       /* la regolazione per numero, scritta dal template */
  --fg-marchio:   16mm;
  --fg-periodo:   7mm;
  --fg-colonne:   2;       /* le colonne delle Sante Messe */
}

/* A5: margini stretti per sfruttare la pagina, e testo PIÙ GRANDE, non più
   piccolo. Il foglietto si legge in chiesa, spesso in piedi e con poca luce:
   rimpicciolire per far stare tutto è il modo sicuro di non farlo leggere.
   Se un numero non ci sta, si abbassa `fg_scala` o si accorcia il testo.
   Le messe restano su due colonne anche qui: sono righe corte, e a colonna
   singola sprecherebbero metà foglio. */
.foglietto--a5 {
  --fg-larghezza: 148mm;
  --fg-margine:   7mm;
  --fg-lato:      38mm;
  --fg-testo:     3.4mm;   /* ≈ 9,6 punti */
  --fg-marchio:   9mm;
  --fg-periodo:   6mm;
}

/* Il corpo effettivo, e l'unità di spaziatura.
   `--fg-u` vale un millimetro alla scala normale e si stringe insieme al testo:
   senza, rimpicciolire il corpo lasciava intatti tutti i margini, e da un certo
   punto in poi la pagina era per metà spazio bianco che non si comprimeva. Le
   spaziature del flusso si scrivono in `calc(N * var(--fg-u))`.
   `--fg-interlinea` la scrive l'adattamento: righe più fitte quando il numero è
   pieno, larghe quando è scarno. */
.foglietto {
  --fg-corpo: calc(var(--fg-testo) * var(--fg-scala));
  --fg-u: calc(1mm * var(--fg-scala));
  --fg-interlinea: 1.42;
}

/* ---------- La barra dei comandi (solo a schermo) ---------- */
.fg-comandi {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.fg-comandi__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.fg-comandi__azioni { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* La riga di spiegazione sotto i pulsanti, quando il PDF non c'è ancora. */
.fg-comandi__nota {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 24px 12px;
  font: var(--text-caption);
  color: var(--text-muted);
}
.fg-comandi__nota strong { color: var(--text-strong); }

/* I comandi della grandezza del testo: tre pulsanti attaccati, perché sono una
   cosa sola. Stanno accanto a «Stampa» ma non sono un'azione: non hanno il peso
   visivo di un pulsante pieno. */
.fg-zoom {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--white);
}
.fg-zoom__btn {
  border: 0;
  background: transparent;
  padding: 0.4rem 0.9rem;
  font: 600 0.8125rem/1 var(--font-body);
  color: var(--text-muted);
  cursor: pointer;
}
.fg-zoom__btn + .fg-zoom__btn { border-left: 1px solid var(--border-subtle); }
.fg-zoom__btn:hover { background: var(--surface-tint-faint); color: var(--color-brand); }
.fg-zoom__btn:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; }

/* L'esito dell'adattamento: quante facciate e con che corpo. */
.fg-nota {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 24px 12px;
  font: var(--text-body-sm);
  color: var(--text-muted);
}
.fg-nota[hidden] { display: none; }
/* Quando non ci sta: il rosso qui è un avviso, non una decorazione. */
.fg-nota--allarme { color: var(--color-brand); font-weight: 600; }

/* ---------- Il foglio ---------- */
.foglietto {
  width: var(--fg-larghezza);
  max-width: 100%;
  margin: var(--space-6) auto;
  padding: var(--fg-margine);
  background: var(--white);
  box-shadow: var(--shadow-lg);      /* a schermo sembra un foglio */
  color: var(--ink);
  font: 400 var(--fg-corpo)/var(--fg-interlinea) var(--font-body);
}

/* ---------- Testata (.mast) ---------- */
.fg-testata {
  display: flex;
  align-items: center;
  gap: 4mm;
  background: var(--color-brand);
  /* Sconfina di lato fino al taglio del foglio, MAI in alto: sopra il margine
     c'è la fascia che la stampante non stampa, e il marchio ci finiva dentro
     tagliato. Il progetto di design fa lo stesso: `margin: 0 -padx 0`. */
  margin: 0 calc(var(--fg-margine) * -1) 0;
  padding: 5mm var(--fg-margine);
}
.fg-testata__logo { height: 11mm; width: auto; display: block; }
/* Il filetto che separa lo stemma dal marchio. */
.fg-testata__sep {
  width: 2px;
  align-self: stretch;
  margin: 2mm 0;
  background: rgba(255, 255, 255, 0.5);
}
/* «il foglietto» è allineato a destra e riempie lo spazio che avanza. */
.fg-testata__marchio {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--white);
}
.fg-testata__nome {
  font: 700 var(--fg-marchio)/0.86 var(--font-display);
  letter-spacing: -0.015em;
}
.fg-testata__nome i { font-weight: 500; font-size: 0.48em; font-style: normal; margin-right: 0.1em; }
.fg-testata__sotto {
  font: 600 2.8mm/1 var(--font-body);
  letter-spacing: 0.32em;
  opacity: 0.92;
  margin-top: 1mm;
}

.fg-periodo {
  margin: 0;
  padding: calc(4 * var(--fg-u)) 0 calc(5 * var(--fg-u));
  text-align: right;
  font: 600 var(--fg-periodo)/1 var(--font-display);
  color: var(--color-brand);
}

/* ============================================================
   I motivi di sezione, ripresi dal design system
   ============================================================ */

/* .bar — la barra piena: apre un vangelo e ogni giorno delle messe. */
.fg-barra {
  margin: 0;
  padding: 0.7mm 1.9mm;
  background: var(--color-brand);
  color: var(--white);
  font: 700 calc(var(--fg-corpo) * 0.93)/1.25 var(--font-body);
  text-transform: uppercase;
  border-radius: 2px;
  break-after: avoid;
}
/* .barc — la barra centrata che apre una sezione intera. */
.fg-barra-c {
  margin: calc(6 * var(--fg-u)) 0 calc(4 * var(--fg-u));
  padding: 0.8mm 2.1mm;
  background: var(--color-brand);
  color: var(--white);
  font: 700 calc(var(--fg-corpo) * 1.05)/1.25 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  border-radius: 2px;
  break-after: avoid;
}
/* .rule — il titolo sottolineato: avvisi e articoli. Più leggero della
   barra piena, che altrimenti su una pagina fitta diventa un muro rosso. */
.fg-rigo {
  margin: calc(4 * var(--fg-u)) 0 calc(2 * var(--fg-u));
  padding-bottom: 2px;
  border-bottom: 1.6px solid var(--color-brand);
  font: 700 var(--fg-corpo)/1.3 var(--font-body);
  text-transform: uppercase;
  color: var(--color-brand);
  break-after: avoid;
}
/* .title — il titolone delle Sante Messe. */
.fg-titolone {
  margin: 0 0 calc(4 * var(--fg-u));
  font: 700 calc(var(--fg-corpo) * 1.6)/1.2 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-brand);
  text-align: center;
  break-after: avoid;
}

/* Il fondo tinta degli approfondimenti: stesso colore della colonna dei
   recapiti. Sta su OGNI articolo e non su un contenitore unico, perché un
   contenitore alto due pagine, spezzandosi, lascia il colore sul primo foglio e
   il testo nudo sul secondo. Senza margine fra l'uno e l'altro si leggono come
   un riquadro solo. */
.fg-riquadro {
  background: var(--surface-tint-faint);
  padding: calc(3 * var(--fg-u)) calc(4 * var(--fg-u)) calc(4 * var(--fg-u));
}
.fg-riquadro + .fg-riquadro { padding-top: 0; }
.fg-riquadro:first-of-type { border-radius: 2px 2px 0 0; }
.fg-riquadro:last-of-type  { border-radius: 0 0 2px 2px; }
/* Un approfondimento lungo può spezzarsi fra due facciate, ma il suo titolo
   non deve restare solo in fondo. */
.fg-riquadro .fg-rigo { break-after: avoid; }
.fg-riquadro > .fg-rigo:first-child { margin-top: 0; }
.fg-riquadro > .fg-testo:last-child { margin-bottom: 0; }

.fg-testo {
  margin: 0 0 calc(2 * var(--fg-u));
  text-align: justify;
  hyphens: auto;
  /* Mai poche righe sole a cavallo di un taglio: o ne restano almeno quattro,
     o il paragrafo passa intero al foglio dopo. Vale anche dietro un titolo,
     che ha `break-after: avoid`: è così che una sezione non comincia con
     quattro righe in fondo alla pagina. */
  orphans: 4;
  widows: 4;
}
.fg-testo p { margin: 0 0 calc(2 * var(--fg-u)); }
.fg-testo p:last-child { margin-bottom: 0; }
.fg-testo ul, .fg-testo ol { margin: 0 0 calc(2 * var(--fg-u)); padding-left: calc(5 * var(--fg-u)); }
.fg-testo strong { color: var(--ink-900); }

/* ---------- Copertina: vangeli e colonna dei recapiti (.cover) ---------- */
.fg-copertina {
  display: grid;
  grid-template-columns: var(--fg-lato) 1fr;
  gap: calc(6 * var(--fg-u));
  align-items: start;
}

.fg-lato {
  background: var(--surface-tint-faint);
  padding: calc(4 * var(--fg-u));
  border-radius: 2px;
}
.fg-blocco + .fg-blocco { margin-top: calc(4 * var(--fg-u)); }
.fg-blocco__titolo {
  margin: 0 0 1.4mm;
  padding-bottom: 0.7mm;
  border-bottom: 1.4px solid var(--red-300);
  font: 700 calc(var(--fg-corpo) * 0.95)/1.2 var(--font-body);
  color: var(--color-brand);
}
/* Il nome del parroco non è un titolo rosso: è una persona, non una sezione. */
.fg-blocco--parroco .fg-blocco__titolo { color: var(--ink-900); border-color: var(--border-strong); }
.fg-blocco__corpo {
  font: 400 calc(var(--fg-corpo) * 0.85)/1.45 var(--font-body);
  color: var(--ink-600);
  /* In A5 la colonna è 38mm: un indirizzo di posta non ci sta su una riga e
     senza questo sfonda nella colonna del vangelo. */
  overflow-wrap: anywhere;
}
.fg-blocco__corpo p { margin: 0 0 1.5mm; }
.fg-blocco__corpo p:last-child { margin-bottom: 0; }
.fg-blocco__corpo strong { color: var(--ink-800); }
.fg-blocco__corpo a { color: inherit; text-decoration: none; }
.fg-blocco__corpo--giustificato p { text-align: justify; }

/* Il codice QR nella colonna, al posto del crismon che c'era prima.
   Diciotto millimetri, e la misura è stata scelta contando le facciate: a 22 mm
   la colonna dei recapiti diventava la più alta della copertina e questo numero
   passava da quattro facciate a cinque. A 18 mm ci sta, e con la correzione
   media fa quadretti da 0,56 mm — sopra il mezzo millimetro sotto il quale i
   telefoni cominciano a faticare su carta piegata. */
.fg-qr {
  margin: calc(4 * var(--fg-u)) 0 calc(3 * var(--fg-u));
  text-align: center;
}
.fg-qr img {
  display: block;
  width: 18mm;
  height: 18mm;
  margin: 0 auto;
  /* Un QR è fatto di quadretti: sfocarlo scalando lo rende più difficile da
     leggere, non più bello. */
  image-rendering: pixelated;
}
.fg-qr figcaption {
  margin-top: 1.2mm;
  font: 400 calc(var(--fg-corpo) * 0.78)/1.2 var(--font-body);
  color: var(--text-muted);
}

/* ---------- Sante Messe: schede a flusso su due colonne ---------- */
.fg-messe { column-count: var(--fg-colonne); column-gap: calc(6 * var(--fg-u)); }
.fg-giorno { break-inside: avoid; margin-bottom: calc(3 * var(--fg-u)); }
.fg-luogo,
.fg-liturgia {
  margin: 0.5mm 0 0;
  font: 700 calc(var(--fg-corpo) * 0.9)/1.25 var(--font-body);
  text-transform: uppercase;
}
.fg-luogo { color: var(--color-brand); }
.fg-intenzioni { list-style: none; margin: 0.5mm 0 0; padding: 0; }
/* Il punto elenco è disegnato, non scritto: resta fuori dal testo copiato. */
.fg-intenzioni li {
  font-size: calc(var(--fg-corpo) * 0.94);
  line-height: calc(var(--fg-interlinea) - 0.07);
  padding: 0.3mm 0 0.3mm 2.9mm;
  text-indent: -2.9mm;
}
.fg-intenzioni li::before { content: "•"; color: var(--color-brand); font-weight: 700; margin-right: 1.3mm; }

.fg-piede {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: calc(6 * var(--fg-u));
  padding-top: calc(2 * var(--fg-u));
  border-top: 1px solid var(--border-subtle);
  font: 400 calc(var(--fg-corpo) * 0.86)/1.3 var(--font-body);
  color: var(--text-faint);
}

/* A schermo un salto pagina non si vede: si segna con uno stacco, così in
   redazione si capisce dove finirà il foglio.

   `break-before` sta QUI e non dentro @media print, anche se fuori dalla carta
   non fa niente: l'adattamento lo legge con getComputedStyle, che a schermo non
   vede le regole di stampa. Tenerlo di là voleva dire un modello che non sapeva
   dei salti e contava facciate che non esistevano. Vale per tutte le proprietà
   di frammentazione: stanno nel foglio di base, e in @media print resta solo
   ciò che riguarda davvero la carta. */
.fg-pagina-nuova { height: 6mm; break-before: page; }
/* Su A5 il salto forzato NON si usa, ed è una misura non un'opinione: con la
   copertina a facciata propria questo numero non sta in quattro nemmeno a 7,7
   punti, mentre lasciando scorrere il testo ci sta a 8,1. Su A4 il foglio è il
   doppio e il salto non costa: lì resta. */
.foglietto--a5 .fg-pagina-nuova { break-before: auto; height: 3mm; }
/* Un riquadro, un avviso o una scheda non si spezzano fra due facciate. */
.fg-blocco, .fg-avviso { break-inside: avoid; }

/* ---------- Sul telefono il foglio non ha senso ----------
   Sotto i 620px si legge come una pagina qualsiasi: una colonna sola, testo a
   bandiera, niente ombra. La stampa resta quella giusta. */
@media (max-width: 620px) {
  .foglietto { width: auto; padding: 20px 16px; box-shadow: none; margin-block: 0; font: var(--text-body-sm); }
  .fg-testata { margin: -20px -16px 0; padding: 14px 16px; }
  .fg-testata__logo { height: 30px; }
  .fg-testata__nome { font: 700 2rem/0.9 var(--font-display); }
  .fg-testata__sotto { font: 600 0.55rem/1 var(--font-body); letter-spacing: 0.3em; }
  .fg-periodo { font: var(--text-h2); text-align: left; padding: 16px 0 18px; }
  .fg-copertina { grid-template-columns: 1fr; gap: 20px; }
  .fg-lato { padding: 14px; }
  .fg-riquadro { padding: 14px 16px 16px; }
  .fg-blocco__titolo { font: var(--text-eyebrow); }
  .fg-blocco__corpo { font: var(--text-body-sm); }
  .fg-barra, .fg-barra-c { font: 700 0.8125rem/1.3 var(--font-body); padding: 6px 10px; }
  .fg-rigo { font: 700 0.875rem/1.3 var(--font-body); }
  .fg-titolone { font: var(--text-h2); }
  .fg-testo { font: var(--text-body-sm); text-align: left; }
  .fg-messe { column-count: 1; }
  .fg-luogo, .fg-liturgia { font: 700 0.8125rem/1.25 var(--font-body); }
  .fg-intenzioni li { font-size: 0.875rem; padding-left: 14px; text-indent: -14px; }
  .fg-intenzioni li::before { margin-right: 6px; }
  .fg-piede { font: var(--text-caption); }
  .fg-pagina-nuova { display: none; }

  /* Da telefono non si stampa e non si impagina: il foglio è rimpicciolito,
     l'adattamento si rifiuta di misurare e i comandi resterebbero lì a non fare
     niente. Restano «Tutti i numeri» e il PDF, che sul telefono servono. */
  .fg-zoom, .fg-nota, .fg-stampa { display: none; }
}

/* ============================================================
   Stampa
   ============================================================ */
/* Il formato del foglio (A4 o A5) lo scrive il template nel <head>: @page non
   vede il DOM, quindi non può dipendere da una classe. */

@media print {
  /* Via tutto ciò che non è il foglietto: testata del sito, menù, footer,
     briciole e la barra dei comandi. */
  .site-header, .site-footer, .briciole, .fg-comandi, .toast { display: none !important; }

  html, body { background: var(--white); margin: 0; padding: 0; }

  /* I margini li tiene @page, non il foglio: con il padding sull'elemento le
     pagine dopo la prima toccavano il bordo della carta, perché quel padding
     compare una volta sola all'inizio e alla fine del flusso. */
  .foglietto {
    width: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  /* La testata esce di lato fino al taglio, non verso l'alto. */
  .fg-testata { margin: 0 calc(var(--fg-margine) * -1) 0; }

  /* I fondi pieni vanno stampati: senza questo molti browser li omettono e la
     barra rossa dei titoli sparirebbe. */
  .fg-testata, .fg-barra, .fg-barra-c, .fg-lato, .fg-riquadro {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Le regole su come spezzare stanno nel foglio di base: vedi .fg-pagina-nuova. */

  /* Sulla carta lo stacco non serve: il salto lo fa la pagina. */
  .fg-pagina-nuova { height: 0; }

  /* Su A5 valgono anche loro, e la ragione è misurata, non estetica.
     Senza il salto, la prima facciata finisce con la copertina a due terzi e
     poi deve ospitare l'inizio della sezione dopo: se la barra rossa più le
     prime quattro righe non ci stanno — e a 8,5 punti non ci stanno — tutto
     slitta e si perde comunque quel terzo di pagina, ma in modo imprevedibile.
     Peggio: la cosa dipende dal corpo del testo, quindi ingrandendo di mezzo
     punto si passava da quattro facciate a cinque di colpo. Con il salto la
     copertina è una facciata sua, e l'adattamento cerca su una curva liscia. */

  a[href]::after { content: none; }   /* niente URL stampati accanto ai link */
}