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

html {
  scroll-behavior: smooth;
  /*
   * Disattiva la "scroll anchoring" del browser: quando l'header compatto
   * (JS in main.js) cambia altezza, il browser tenta di compensare da solo
   * la posizione di scroll per evitare un salto visivo — ma quella
   * compensazione altera scrollY, che fa scattare di nuovo la nostra
   * soglia, che cambia di nuovo l'altezza, in un loop che sembra un
   * "rimbalzo" infinito scrollando piano. Qui gestiamo noi il cambio di
   * layout via classe, quindi la compensazione automatica va disattivata.
   */
  overflow-anchor: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--lh-corpo);
  font-size: var(--text-base);   /* la stessa misura di tutto il testo discorsivo */
}

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: var(--font-weight-titoli);
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--color-primary-dark);
}

/* Playfair Display ha di suo le cifre "a testo" (che salgono e scendono): nei titoli, con date e riferimenti ("11 ottobre 2026",
   "Mt 22,1-14"), si usano le cifre allineate */
h1, h2, h3, h4,
.top-banner__title,
.section-banner__title,
.portale__titolo,
.luoghi-elenco a,
.luoghi-elenco strong { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* MASTER degli H1: una sola dimensione per tutti i titoli di pagina (home, banner delle sezioni, schede di luoghi, preghiere, Diario, santo del
   giorno, pagine fisse). Non si ridefinisce altrove: se un h1 deve cambiare, si cambia --text-h1 in variables.css. */
h1,
.top-banner__title,
.section-banner__title,
.santo-hero__nome,
.voce-testa h1 { font-size: var(--text-h1); line-height: 1.2; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

/*
 * Un link dentro un titolo eredita il colore DEL TITOLO, non il colore
 * generico dei link di corpo testo (altrimenti un <h3><a>...</a></h3>
 * renderebbe in --color-primary invece di --color-primary-dark, diverso
 * dallo stesso h3 quando non è un link — incoerenza vista nelle card).
 */
h1 a, h2 a, h3 a, h4 a { color: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover { color: var(--color-primary); }

p { margin: 0 0 1em; }
strong, b { font-weight: 600; } /* un po' meno pesante del grassetto di default (700) */

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { color: var(--color-primary-dark); }

/* Link dentro i testi (contenuto di pagine, articoli, preghiere, note): azzurro più vivo e una sottolineatura leggera, senza grassetto.
   Rapporti di contrasto: 5,0 su bianco, 4,7 sull'azzurro tenue, 3,2 rispetto al testo (WCAG: il link si distingue dal colore). */
.entry-content a:not(.btn):not(.wp-block-button__link),
.voce-testa__sommario a,
.nota-fonte a,
.luogo-fonte p a,
.luoghi-testo a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-link) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.entry-content a:not(.btn):not(.wp-block-button__link):hover,
.voce-testa__sommario a:hover,
.nota-fonte a:hover,
.luogo-fonte p a:hover,
.luoghi-testo a:hover {
  color: var(--color-primary-dark);
  text-decoration-color: currentColor;
}

/*
 * "Eyebrow"/kicker: etichetta piccola, maiuscola, in corsivo di peso —
 * concettualmente un titolo (stesso font-family/weight del gruppo h1-h4),
 * ma di livello più basso in dimensione. Unico uso in tutto il sito per
 * "Oggi la Chiesa celebra", la ricorrenza di un santo, la data sopra le
 * card home: prima erano tre blocchi CSS quasi identici, ora uno solo.
 */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
}
/* Su sfondo scuro/gradiente (es. dentro .site-header, .site-footer) */
.eyebrow--on-dark { color: #fff; }

/* Testo secondario de-enfatizzato: descrizioni di card, note, sottotitoli */
.text-muted {
  color: var(--color-text-light);
}

img { max-width: 100%; display: block; height: auto; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/*
 * Pagine di contenuto (testo, schede, preghiere, articoli): come un
 * col-lg-8 + col-lg-4 di Bootstrap. Sotto i 992px una sola colonna (prima il
 * testo, poi la colonna destra); da 992px in su griglia a due colonne
 * (--content-columns), testo a SINISTRA, stesso asse dell'header e dei
 * riquadri. La colonna destra (sidebar.php) ha come primo blocco le ultime 5
 * notizie. Vedi docs/design-system.md.
 */
.content-layout { padding-block: 3rem; }
/* Sotto la fascia di sezione il contenuto parte più vicino */
.section-banner + .content-layout { padding-top: var(--banner-gap); }
.content-aside { margin-top: 3rem; }
@media (min-width: 992px) {
  .content-layout {
    display: grid;
    grid-template-columns: var(--content-columns);
    column-gap: 3rem;
    align-items: start;
  }
  .content-aside { margin-top: 0; }
}

/* "Contenuti correlati": lista a titolo normale (non a pulsante), come .aside-news */
.correlazioni-elenco { list-style: none; margin: 0; padding: 0; }
.correlazioni-elenco li { padding-block: 0.6rem; border-bottom: 1px solid var(--color-border); }
.correlazioni-elenco li:first-child { padding-top: 0; }
.correlazioni-elenco li:last-child { border-bottom: 0; padding-bottom: 0; }
.correlazioni-elenco a { font-weight: 600; color: var(--color-text); }
.correlazioni-elenco a:hover { color: var(--color-primary); }
/* Fuori dalla colonna destra (single-luogo.php, categorie dei luoghi): fondino, come .luogo-fonte */
.correlazioni-box { margin: 2.5rem 0; padding: 1.2rem 1.4rem; background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.correlazioni-titolo { margin: 0 0 0.5em; }

/* Elenco dei luoghi di una categoria, ripiegato quando è lungo: pillola cliccabile, come .diario-menu > summary */
.luoghi-accordion { margin-top: 1.5rem; }
.luoghi-accordion > summary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 1.1rem; list-style: none; cursor: pointer;
  font-family: var(--font-titoli); font-weight: 600; font-size: var(--text-base);
  color: var(--color-primary-dark); background: var(--color-bg-soft);
  border: 1px solid var(--color-border); border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.luoghi-accordion > summary::-webkit-details-marker { display: none; }
.luoghi-accordion > summary::after {
  content: ''; width: 0.5rem; height: 0.5rem; margin-top: -0.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.luoghi-accordion[open] > summary::after { margin-top: 0.1rem; transform: rotate(225deg); }
.luoghi-accordion > summary:hover { color: var(--color-primary); background: #fff; border-color: var(--color-primary); }
.luoghi-accordion[open] > summary { color: var(--color-primary); border-color: var(--color-primary); }
.luoghi-accordion .luoghi-elenco { margin-top: 1.5rem; }

/* Blocchi della colonna destra */
.aside-block + .aside-block { margin-top: 2.5rem; }
.aside-cerca__input {
  width: 100%;
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  outline: none;
}
.aside-cerca__input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12); }
.aside-cerca__risultati { margin-top: 0.6rem; }
.aside-cerca__stato { margin: 0.4rem 0 0; font-size: var(--text-sm); color: var(--color-text-light); }
.aside-block__title {
  font-size: var(--text-h4);
  margin-bottom: 1rem;
}
.aside-news {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.aside-news li {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.aside-news li:first-child { padding-top: 0; }
.aside-news time {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}
.aside-news a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.aside-news a:hover { color: var(--color-primary); }
.aside-block__more {
  font-size: var(--text-sm);
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.42em 1.2em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
  color: #fff;
  box-shadow: 0 6px 16px rgba(27, 76, 180, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Freccia sempre presente (decorativa): non scriverla nel testo del pulsante */
.btn::after {
  content: "\2192" / "";
  transition: transform 0.15s ease;
}
.btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(27, 76, 180, 0.3);
}
.btn:hover::after { transform: translateX(3px); }

/* CTA secondaria, versione leggera da usare più spesso (es. nelle card): fondo bianco e bordo
   in un unico azzurro (--color-gradient-start), testo blu, niente ombra. La primaria (.btn) è una per
   pagina o per sezione. */
.btn--secondary {
  color: var(--color-primary);
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(var(--color-gradient-start), var(--color-gradient-start)) border-box;
  box-shadow: none;
}
.btn--secondary:hover {
  color: var(--color-primary-dark);
  background:
    linear-gradient(var(--color-bg-soft), var(--color-bg-soft)) padding-box,
    linear-gradient(var(--color-gradient-start), var(--color-gradient-start)) border-box;
  box-shadow: none;
  transform: none;
}

.section-title {
  margin-bottom: 2.5rem;
}
/* Titoli delle sezioni della home (Oggi, Aggiornamenti, Preghiere): a misura di h3 */
.section-title h2,
.data-oggi { font-size: var(--text-h3); }
.section-title p {
  color: var(--color-text-light);
  max-width: 560px;
}

/* Pagina "Santo del giorno": la celebrazione di oggi in evidenza, le altre sotto, le celebrazioni del mese */
.santo-hero {
  position: relative;
  margin-block: 0 2.5rem;
  padding: 2rem 1.8rem;
  text-align: left;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -20px rgba(30, 64, 175, 0.5);
}
.santo-hero .eyebrow { margin-bottom: 0.6rem; }
.santo-hero__nome {
  margin-bottom: 0.4rem;
}
/* La scheda sta dentro il riquadro, sotto il nome */
.santo-hero__nome + * { margin-top: 1.5rem; }
.santo-hero img { border-radius: var(--radius-lg); }

.santo-hero__onomastico { margin: 1.1rem 0 0; font-size: var(--text-h3); line-height: 1.35; color: var(--color-text); }
.santo-hero__onomastico strong { font-weight: 600; color: var(--color-primary-dark); }
/* "Si festeggia anche" è secondario: un po' più piccolo dell'onomastico principale */
.santo-hero__onomastico + .santo-hero__onomastico { margin-top: 0.4rem; font-size: var(--text-sm); color: var(--color-text-light); }
.santo-hero__onomastico + .santo-hero__onomastico strong { color: var(--color-text-light); }
.santo-hero__qualifica { margin: 0; font-size: var(--text-sm); color: var(--color-text-light); }
/* Le altre celebrazioni dello stesso giorno: solo nomi, in piccolo, separate da un filetto sottile */
.risultati-santi { margin-bottom: 2rem; }
.risultati-santi h2 { font-size: var(--text-h4); margin-bottom: 0.5rem; }
.risultati-santi ul { list-style: none; margin: 0; padding: 0; }
.risultati-santi li { padding: 0.25rem 0; }
.celebrazioni-altre { margin-top: 1.5rem; padding-top: 0.5rem; }
.celebrazioni-altre h2 { font-size: var(--text-h4); margin-bottom: 0.5rem; color: var(--color-text-light); }
.celebrazioni-altre ul { list-style: none; margin: 0; padding: 0; }
.celebrazioni-altre li { padding: 0.25rem 0; font-size: var(--text-base); }

/* Elenco delle celebrazioni del mese: numero del giorno e nomi */
.celebrazioni-mese { margin-block: 2.5rem 3rem; }
.celebrazioni-mese h2 { margin-bottom: 1rem; }
.celebrazioni-mese ul { list-style: none; margin: 0; padding: 0; }
.celebrazioni-mese li { display: flex; align-items: baseline; gap: 1rem; padding: 0.5rem 0.75rem; margin-inline: -0.75rem; border-radius: var(--radius-md); font-size: var(--text-base); }
.celebrazioni-mese li:nth-child(even) { background: var(--color-bg-soft); }   /* righe alternate, al posto dei filetti */
.celebrazioni-mese__giorno { flex: 0 0 2.2rem; font-weight: 700; color: var(--color-primary); text-align: right; font-variant-numeric: tabular-nums; }

/*
 * Box Preghiera: ogni testo di preghiera (Padre Nostro, Ave Maria, una
 * preghiera intera...) sta dentro questo riquadro, ovunque compaia. In
 * Gutenberg: blocco Gruppo → stile "Preghiera" (classe is-style-preghiera,
 * registrata in functions.php). Nei template PHP: class="box-preghiera".
 * Vedi docs/design-system.md.
 */
.box-preghiera,
.is-style-preghiera {
  margin-block: 1.25rem;
  padding: 1.75rem 2rem;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
}
.box-preghiera > :first-child,
.is-style-preghiera > :first-child { margin-top: 0; }
.box-preghiera > :last-child,
.is-style-preghiera > :last-child { margin-bottom: 0; }
/* Titolo: etichetta dorata, come .eyebrow ma in oro */
.box-preghiera :is(h2, h3, h4),
.is-style-preghiera :is(h2, h3, h4) {
  font-family: var(--font-heading);   /* etichetta: resta nel font dei testi (Lato), non il font dei titoli */
  margin-top: 2.25rem;   /* staccato dal testo che precede; il primo elemento del riquadro resta a 0 (regola sopra) */
  margin-bottom: 0.75rem;
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-gold);
}
/* Testo: Playfair tondo, allineato a sinistra per la leggibilità */
.box-preghiera p,
.is-style-preghiera p {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: var(--text-prayer);
  line-height: 1.8;
  text-wrap: pretty;
}

/*
 * Elenchi puntati e numerati nei contenuti (testo scritto in Gutenberg o con
 * the_content()): un solo aspetto per tutto il sito. Scope .entry-content, così
 * non toccano i menu e gli elenchi dei componenti (nav, santi, footer), che
 * hanno già il loro reset. Vedi docs/design-system.md.
 */
.entry-content :is(ul, ol) {
  margin: 0 0 1.25em;
  padding-left: 1.6rem;
}
.entry-content li {
  margin-bottom: 0.5em;
  padding-left: 0.3rem;
  line-height: var(--lh-corpo);
}
.entry-content li:last-child { margin-bottom: 0; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
/* Segnaposto in oro; i numeri anche in grassetto, nel font dei titoli */
.entry-content li::marker { color: var(--color-gold); }
.entry-content ol > li::marker {
  font-family: var(--font-heading);
  font-weight: 700;
}
/* Elenchi annidati: più compatti, pallino vuoto / lettere */
.entry-content li > :is(ul, ol) {
  margin-top: 0.5em;
  margin-bottom: 0;
}
.entry-content ul ul { list-style: circle; }
.entry-content ol ol { list-style: lower-alpha; }

/*
 * Card "Da Fatima / Da Međugorje / ...": riquadro per i messaggi mariani
 * (citazioni di Maria, inviti, richieste), con il luogo nel titolo. Scheda bianca con ombra, come
 * le card della home, titolo-etichetta dorato. In Gutenberg: blocco Gruppo →
 * stile "Messaggio mariano" (is-style-messaggio); nei template PHP:
 * class="card-messaggio". L'ultima riga con classe "nota-fonte" (Avanzate →
 * Classi CSS) è la nota di fonte/stato, piccola. Vedi docs/design-system.md.
 */
.card-messaggio,
.is-style-messaggio {
  margin-block: 1.75rem;
  padding: 1.75rem 2rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -20px rgba(30, 64, 175, 0.5);
}
.card-messaggio > :first-child,
.is-style-messaggio > :first-child { margin-top: 0; }
.card-messaggio > :last-child,
.is-style-messaggio > :last-child { margin-bottom: 0; }
.card-messaggio :is(h2, h3, h4),
.is-style-messaggio :is(h2, h3, h4) {
  font-family: var(--font-heading);   /* etichetta: resta nel font dei testi (Lato), non il font dei titoli */
  margin-bottom: 0.75rem;
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-gold);
}
/* Il messaggio: Playfair corsivo (come il "Totus Tuus"), voce di Maria; il
   primo paragrafo dopo il titolo apre con le virgolette alte dorate */
.card-messaggio p,
.is-style-messaggio p {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-quote);
  line-height: 1.7;
  color: var(--color-text);
  text-wrap: pretty;
}
.card-messaggio > :is(h2, h3, h4) + p::before,
.is-style-messaggio > :is(h2, h3, h4) + p::before {
  content: "\201C" / "";
  display: block;
  margin-bottom: -0.3em;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-gold);
}
.card-messaggio p.nota-fonte,
.is-style-messaggio p.nota-fonte {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-light);
}

/*
 * Citazioni (blocco Citazione di Gutenberg, <blockquote>): nessun bordo.
 * Segno di virgolette dorato in alto, testo in corsivo, autore/fonte sotto in
 * piccolo. Vedi docs/design-system.md.
 */
.entry-content blockquote,
.wp-block-quote {
  margin: 1.75rem 0;
  padding: 0;
  border: 0;
}
.entry-content blockquote::before,
.wp-block-quote::before {
  content: "\201C" / "";
  display: block;
  margin-bottom: -0.35em;
  font-family: var(--font-script);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-gold);
}
.entry-content blockquote p,
.wp-block-quote p {
  font-style: italic;
  font-size: var(--text-quote);
  line-height: 1.6;
  color: var(--color-text);
}
.entry-content blockquote :is(cite, footer),
.wp-block-quote :is(cite, footer) {
  display: block;
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/*
 * Nota di fonte (.nota-fonte): riga piccola e grigia che chiude un contenuto citando la fonte
 * (articolo, libro, testo di partenza). Vale ovunque; dentro le card dei messaggi mariani ha la
 * variante più stretta definita sotto. Vedi docs/design-system.md.
 */
.nota-fonte {
  margin-top: 1.5rem;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-light);
}

/* Calendario dei santi (colonna destra): griglia di 7 colonne, senza giorni della settimana */
.aside-calendario + .aside-block,
.aside-navigatore + .aside-block { margin-top: 2.5rem; }
.calendario__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.calendario__nav > a {
  padding: 0.2rem 0.7rem;
  font-size: var(--text-h3);
  line-height: 1;
}
.calendario__mese {
  flex: 1;
  padding: 0.55rem 2.4rem 0.55rem 1rem;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  /* freccia disegnata a mano (chevron) invece di quella nativa, che restava attaccata al bordo */
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231e40af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E") no-repeat right 1rem center / 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
}
.calendario__giorni {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}
.calendario__giorni li { margin: 0; padding: 0; }
.calendario__giorni :is(a, span) {
  display: block;
  padding: 0.45rem 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
}
.calendario__giorni a:hover { background: var(--color-border); color: var(--color-text); }
/* giorno senza celebrazione (per ora): attenuato, non cliccabile; si attiva da solo quando il calendario ne avrà una */
.calendario__giorni span.is-disabled { color: var(--color-text-light); background: transparent; opacity: 0.45; }
.calendario__giorni :is(a, span).is-oggi { font-weight: 700; color: var(--color-gold); }
/* giorno con una celebrazione del calendario: sfondo più marcato (non cliccabile) */
.calendario__giorni span.ha-celebrazione { background: var(--color-border); font-weight: 600; }
.calendario__giorni a.is-selected,
.calendario__giorni a.is-selected:hover { background: var(--color-primary); color: #fff; font-weight: 600; }

/*
 * Card delle notizie (.news-card), valide in home e nell'elenco /notizie/. In home sono tre card
 * affiancate (.news-grid); nell'elenco sono card "da una riga" (.news-list + .news-card--riga):
 * data, titolo e anteprima a sinistra, pulsante "Leggi" a destra. Cliccabili per intero (vedi
 * docs/design-system.md: il link del titolo si estende su tutta la card).
 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-block: 2rem 4rem;
}
.news-list {
  display: grid;
  gap: 1rem;
  margin-block: 2rem 3rem;
}
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.news-card:hover { box-shadow: 0 14px 30px -20px rgba(30, 64, 175, 0.5); }
.news-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.news-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.2rem 1.4rem 1.5rem;
}
.news-card__body p { flex-grow: 1; }
.news-card h3 { margin-bottom: var(--spazio-titolo-testo); }
.news-card time {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}
.news-card .btn { align-self: flex-start; margin-top: 0.5rem; }
/* come nelle altre card, il pulsante non si sposta (renderebbe piccola l'area cliccabile) e reagisce alla card */
.news-card .btn:hover { transform: none; }
.news-card:hover .btn--secondary {
  color: var(--color-primary-dark);
  background:
    linear-gradient(var(--color-bg-soft), var(--color-bg-soft)) padding-box,
    linear-gradient(var(--color-gradient-start), var(--color-gradient-start)) border-box;
}
.news-card:hover .btn::after { transform: translateX(3px); }

/* Variante da una riga (elenco notizie) */
.news-card--riga {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 0;
  box-shadow: 0 10px 30px -22px rgba(30, 64, 175, 0.5);
}
.news-card--riga:hover {
  box-shadow: 0 16px 32px -20px rgba(30, 64, 175, 0.5);
}
.news-card--riga img {
  flex-shrink: 0;
  width: 7rem;
  height: 5rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.news-card--riga .news-card__body { padding: 0; }
.news-card--riga .news-card__body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--lh-compatto);
}
.news-card--riga .btn { flex-shrink: 0; align-self: center; margin-top: 0; }
@media (max-width: 640px) {
  .news-card--riga { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .news-card--riga img { width: 100%; height: 9rem; }
}

/* Fascia di sezione: versione sottile della top-banner della home (stesso gradiente fisso) */
.section-banner {
  width: 100%;
  padding-block: 1.6rem;
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  /* allineato a sinistra con il contenuto sotto (stessa colonna del .container) e con il titolo della home, non centrato */
  padding-inline: max(20px, calc((100% - var(--container-width)) / 2 + 20px));
}
.section-banner__title {
  font-family: var(--font-titoli);
  font-weight: 500;
  color: #fff;
  margin: 0;
}
/* Riga sopra il titolo (categoria di una voce) e riga sotto (data e firma): piccole, bianche, come il sommario */
.section-banner__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.section-banner__meta { margin: 0; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.9); }
.section-banner__summary {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.95);
  max-width: 38rem;
  line-height: 1.55;
  margin: 0;
}

/* Elenchi e archivi sotto la fascia di sezione: stessa distanza dall'alto ovunque */
.archivio-sezione { padding-block: var(--banner-gap) 3rem; }
.archivio-sezione .news-list,
.archivio-sezione .news-grid { margin-top: 0; }

/* Archivio preghiere: card a quadrotti, 3 per riga (2, 1 su schermi più stretti), senza data */
.news-grid--quadri { grid-template-columns: repeat(3, 1fr); margin-bottom: 2rem; }
/* altezza dinamica: tutte alte come la più alta della riga (la griglia le allunga) */
.news-card--quadro { height: 100%; }
.news-card--quadro .news-card__body { padding: 1.4rem; }
.news-card--quadro .news-card__body p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--lh-compatto);
}
@media (max-width: 720px)  { .news-grid--quadri { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .news-grid--quadri { grid-template-columns: 1fr; } }

/* Elenco di link a pillola (home: tutte le preghiere) e pulsante di fine sezione */
.elenco-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.elenco-link a {
  display: block;
  padding: 0.35rem 0.95rem;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-primary);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.elenco-link a:hover { color: #fff; background: var(--color-primary); }
.sezione-cta { margin: 1.5rem 0 3rem; }

/* Link alla stessa preghiera nell'altra lingua, a fine preghiera */
.preghiera-correlata {
  margin-top: 1.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-light);
}
.preghiera-correlata a { font-weight: 600; }

/* Pagina Tempo liturgico */
.tempo-colore {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.35em;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  vertical-align: baseline;
}
.tempo-colore--viola { background: var(--liturgia-viola); border-color: var(--liturgia-viola); }
.tempo-colore--verde { background: var(--liturgia-verde); border-color: var(--liturgia-verde); }
.tempo-colore--rosso { background: var(--liturgia-rosso); border-color: var(--liturgia-rosso); }
.tempo-colore--bianco { background: var(--liturgia-bianco); }

.tempo-oggi {
  margin-bottom: 2.5rem;
  padding: 2rem 1.8rem;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -20px rgba(30, 64, 175, 0.5);
}
.tempo-oggi .eyebrow { margin-bottom: 0.6rem; }
.tempo-oggi__nome { margin-bottom: 0.2rem; }
.tempo-oggi__settimana { font-weight: 600; color: var(--color-primary); }
.tempo-oggi__dati {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
  display: grid;
  gap: 0.5rem;
}
.tempo-oggi__dati li { font-size: var(--text-sm); }
.tempo-oggi__dati span {
  display: inline-block;
  min-width: 11rem;
  color: var(--color-text-light);
}
.tempo-oggi__azioni { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }

.tempo-stagioni { display: grid; gap: 1rem; margin-block: 1.2rem 2.5rem; }
.tempo-stagione {
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.tempo-stagione.is-corrente { border-color: var(--color-primary); box-shadow: 0 10px 30px -22px rgba(30, 64, 175, 0.6); }
.tempo-stagione h3 { margin-bottom: 0.2rem; }
.tempo-stagione__ora {
  margin-left: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
}
.tempo-stagione__date { font-size: var(--text-sm); color: var(--color-text-light); margin-bottom: 0.5rem; }
.tempo-stagione p:last-child { margin-bottom: 0; }

.tempo-feste { list-style: none; padding: 0; margin: 1.2rem 0 2.5rem; }
.tempo-feste li {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.tempo-feste li.is-passata { color: var(--color-text-light); }
.tempo-feste__data { font-weight: 600; }
@media (max-width: 640px) {
  .tempo-feste li { grid-template-columns: 1fr; gap: 0.1rem; }
  .tempo-oggi__dati span { display: block; min-width: 0; }
}

/* Fascetta del tempo liturgico corrente, tra l'header e la top story: stesso gradiente fisso (nessuna cucitura)
   e stesso bordino chiaro sotto dell'header. Cliccabile solo sul testo (.fascia-liturgica__link), non su tutta la
   larghezza; all'hover compare un "›" a destra. */
.fascia-liturgica {
  padding: 0.45rem 0;
  font-size: var(--text-xs);
  color: #fff;
  /* Il gradiente da solo è troppo chiaro a sinistra per il testo bianco (contrasto circa 1,5:1): sopra si stende il blu scuro del sito
     con una trasparenza che segue la stessa diagonale del gradiente di sotto (fisso, stesso angolo): forte dove il fondo è chiaro,
     quasi nulla dove è già blu. Il testo supera 4,5:1 su tutta la larghezza e la fascetta continua a seguire il gradiente. */
  --fascia-velo-inizio: color-mix(in srgb, var(--color-primary-dark) 40%, transparent);
  --fascia-velo-fine: color-mix(in srgb, var(--color-primary-dark) 10%, transparent);
  background:
    linear-gradient(135deg, var(--fascia-velo-inizio), var(--fascia-velo-fine)),
    linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
  background-attachment: fixed, fixed;
}
.fascia-liturgica__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;   /* da telefono: un po' di distanza tra santo/tempo e percorso */
}
/* Santo del giorno e tempo liturgico: a destra dal computer; su telefono a sinistra e sopra il percorso */
.fascia-liturgica__info {
  order: -1;   /* da telefono santo e tempo stanno sopra il percorso */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.9rem;
}
/* Percorso e santo/tempo stanno sulla stessa riga solo se c'è posto (da 1100px): prima vanno su due righe, con santo e tempo sopra */
@media (min-width: 1100px) {
  .fascia-liturgica__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.15rem 1.5rem; }
  .fascia-liturgica__info { order: 0; margin-left: auto; justify-content: flex-end; flex-wrap: nowrap; flex: none; }
}
/* In home non c'è il percorso: santo e tempo restano a destra anche sotto i 1100px */
@media (min-width: 700px) {
  body.home .fascia-liturgica__info { margin-left: auto; justify-content: flex-end; flex-wrap: nowrap; }
}

/* Breadcrumb dentro la fascetta: bianco, in carattere piccolo come il resto della fascetta */
.fascia-liturgica .breadcrumb { min-width: 0; max-width: 100%; }
.breadcrumb__lista { display: flex; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.breadcrumb__voce { display: inline-flex; align-items: center; flex: none; min-width: 0; color: rgba(255, 255, 255, 0.92); }
.breadcrumb__voce:last-child { flex: 0 1 auto; }
.breadcrumb__voce + .breadcrumb__voce::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.55rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb__home { display: inline-flex; align-items: center; }
.breadcrumb__corrente { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Santo del giorno e tempo liturgico: sulla stessa riga con un filetto in mezzo dal computer, uno sopra l'altro su telefono */
.fascia-liturgica__santo { color: #fff; }
.fascia-liturgica__santo:hover { color: #fff; }
.fascia-liturgica__santo::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 0.9rem;
  background: rgba(255, 255, 255, 0.45);
  vertical-align: -0.12em;
}
/* Da telefono: "Oggi" al posto di "Santo del giorno" e niente settimana, così santo e tempo stanno su una riga */
.fascia-liturgica__etichetta-estesa { display: none; }
.fascia-liturgica__settimana { display: none; }
.fascia-liturgica__tempo::after { display: none; }
@media (min-width: 700px) {
  .fascia-liturgica__etichetta-estesa { display: inline; }
  .fascia-liturgica__etichetta-breve { display: none; }
  .fascia-liturgica__settimana { display: inline; }
  .fascia-liturgica__tempo::after { display: inline; }
}
.fascia-liturgica__etichetta { margin-right: 0.45rem; color: rgba(255, 255, 255, 0.92); }
.fascia-liturgica__nome { transition: opacity 0.15s ease; }
/* all'hover il nome si fa appena più tenue (lo stesso effetto delle voci del menu), senza sottolineatura */
.fascia-liturgica__santo:hover .fascia-liturgica__nome { opacity: 0.8; }
.fascia-liturgica__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem 0.6rem;
  color: #fff;
}
.fascia-liturgica__link:hover { color: #fff; }
.fascia-liturgica .tempo-colore { margin-right: 0; box-shadow: 0 0 0 1px #fff; border-color: #fff; }
.fascia-liturgica .tempo-colore--viola { border-color: var(--liturgia-viola); }
.fascia-liturgica .tempo-colore--verde { border-color: var(--liturgia-verde); }
.fascia-liturgica .tempo-colore--rosso { border-color: var(--liturgia-rosso); }
.fascia-liturgica__tempo { font-weight: 400; }
.fascia-liturgica__settimana { font-weight: 400; }
.fascia-liturgica__tempo::after { content: '·'; margin-left: 0.6rem; font-weight: 400; }
.fascia-liturgica__freccia {
  margin-left: -0.2rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.fascia-liturgica__link:hover .fascia-liturgica__freccia { opacity: 1; transform: none; }

/* Card "Vangelo del giorno": riferimento del brano in evidenza, link al testo ufficiale */
.vangelo-oggi {
  margin-block: 1.5rem 2.5rem;
  padding: 1.6rem 1.8rem;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -20px rgba(30, 64, 175, 0.5);
}
.vangelo-oggi .eyebrow { margin-bottom: 0.4rem; }
.vangelo-oggi__sigla { margin-bottom: 0.4rem; }
.vangelo-oggi p { color: var(--color-text-light); margin-bottom: 0; }
.vangelo-oggi .btn { margin-top: 1rem; }


/* Diario: filtro per categoria (pillole), voce in evidenza e griglia di card */
.diario-filtri { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.diario-filtri a {
  padding: 0.45rem 1.1rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.diario-filtri a:hover { color: var(--color-primary); background: var(--color-bg-soft); }
.diario-filtri a[aria-current="page"] { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

.diario-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.diario-griglia--home { margin-block: 2rem 1rem; }

.diario-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.diario-card:hover { box-shadow: 0 16px 32px -20px rgba(30, 64, 175, 0.5); }
.diario-card h3 a::after { content: ''; position: absolute; inset: 0; }
.diario-card__img img { display: block; width: 100%; height: 11rem; object-fit: cover; }
.diario-card__corpo { display: flex; flex-direction: column; flex-grow: 1; padding: 1.3rem 1.5rem 1.4rem; }
.diario-card__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin: 0 0 0.6rem; }
.diario-card__meta time { font-size: var(--text-xs); color: var(--color-text-light); }
.diario-card h3 { margin-bottom: var(--spazio-titolo-testo); line-height: 1.3; }
.diario-card__testo {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
  margin: 0 0 1rem;
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--lh-compatto);
}
.diario-card__piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin: 0; font-size: var(--text-sm); }
.diario-card__vangelo { color: var(--color-text-light); }
.diario-card__leggi { margin-left: auto; font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); }
.diario-card:hover .diario-card__leggi { color: var(--color-primary-dark); }

/* La voce più recente, in evidenza in cima all'archivio */
.diario-card--evidenza { background: var(--color-bg-soft); border: 0; border-radius: var(--radius-lg); box-shadow: 0 10px 30px -22px rgba(30, 64, 175, 0.5); }
.diario-card--evidenza .diario-card__corpo { padding: clamp(1.5rem, 4vw, 2.6rem); }
.diario-card--evidenza h3 { font-size: var(--text-h2); line-height: 1.2; margin-bottom: 0.8rem; }
.diario-card--evidenza .diario-card__testo { -webkit-line-clamp: 4; font-size: var(--text-base); }
@media (min-width: 820px) {
  .diario-card--evidenza:has(.diario-card__img) { flex-direction: row; }
  .diario-card--evidenza .diario-card__img { flex: 0 0 42%; }
  .diario-card--evidenza .diario-card__img img { height: 100%; }
}

/* Testata di una voce (riflessione, notizia): categoria sopra, titolo, data sotto in piccolo */
.voce-testa { margin-bottom: 1.5rem; }
.voce-testa .eyebrow { display: block; margin-bottom: 0.5rem; }
.voce-testa h1 { margin-bottom: 0.6rem; }   /* la dimensione è nel master degli H1 */
.voce-testa__sommario { margin: 0 0 0.8rem; font-size: var(--text-quote); line-height: 1.5; color: var(--color-text-light); }
.voce-testa time { display: block; font-size: var(--text-sm); color: var(--color-text-light); }
/* Data e firma sulla stessa riga (voci del Diario) */
.voce-testa__meta { margin: 0; font-size: var(--text-sm); color: var(--color-text-light); }
.voce-testa__meta time { display: inline; }

/* Riquadro del Vangelo in testa a una riflessione: compatto, pulsante a destra, senza bordi laterali */
.vangelo-oggi--voce {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  margin-block: 0 2rem; padding: 1.1rem 1.4rem;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.vangelo-oggi--voce .vangelo-oggi__sigla { font-size: var(--text-h3); margin: 0.15rem 0 0.3rem; }
.vangelo-oggi--voce .nota-fonte { margin: 0; }
.vangelo-oggi--voce .btn { margin-top: 0; }

/* Altre preghiere sotto il testo di una preghiera: stessa distanza dall'alto delle sezioni della home */
.altre-preghiere { margin-top: 3rem; }   /* è la stessa .fascia-preghiere della home */
/* Sotto il collegamento finale basta lo spazio del footer (come in home), senza sommare i margini */
body.single-preghiera .site-footer { margin-top: 0; }   /* la fascia delle altre preghiere arriva fino al footer */
.altre-preghiere .section-title { margin-bottom: 1rem; }

/* Temi e personaggi: etichette in fondo alla voce, indice nell'archivio, titolo delle pagine per tag */
.diario-tag-box { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.diario-tag-gruppo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.diario-tag-gruppo__titolo { min-width: 6.5rem; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--label-letter-spacing); text-transform: uppercase; color: var(--color-gold); }
.diario-tag-lista { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.diario-tag {
  display: inline-block; padding: 0.3rem 0.85rem;
  font-size: var(--text-sm); color: var(--color-primary); text-decoration: none;
  background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.diario-tag:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.diario-tag-titolo { font-size: var(--text-h2); margin-bottom: 1.5rem; }

/* Titoli dentro i testi di pagina e di articolo (privacy, fonti, diario): più piccoli di quelli di sezione, con aria sopra */
.entry-content h2 { font-size: var(--text-h3); margin: 2rem 0 0.6rem; }
.entry-content h3 { font-size: var(--text-h4); margin: 1.5rem 0 0.5rem; }
.entry-content > :first-child { margin-top: 0; }

/* Griglia del Diario: una sola voce a tutta larghezza, due voci a metà, tre o più in colonne da almeno 320px */
.diario-griglia--n1 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .diario-griglia--n2 { grid-template-columns: repeat(2, 1fr); }
}

/* Barra del Diario: categorie a sinistra, due menu a tendina (Temi, Personaggi) a destra */
.diario-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.5rem; margin-bottom: 2rem; }
.diario-menu-gruppo { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.diario-menu { position: relative; }
.diario-menu > summary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 1rem; list-style: none; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-text-light); background: #fff;
  border: 1px solid var(--color-border); border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.diario-menu > summary::-webkit-details-marker { display: none; }
.diario-menu > summary::after {
  content: ''; width: 0.42rem; height: 0.42rem; margin-top: -0.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.diario-menu > summary:hover { color: var(--color-primary); background: var(--color-bg-soft); }
.diario-menu[open] > summary { color: var(--color-primary); background: var(--color-bg-soft); border-color: var(--color-primary); }
.diario-menu[open] > summary::after { margin-top: 0.15rem; transform: rotate(225deg); }
.diario-menu__pannello {
  position: absolute; z-index: 20; right: 0; top: calc(100% + 0.5rem);
  width: min(92vw, 34rem); padding: 1rem 1.1rem;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -22px rgba(30, 64, 175, 0.45);
}
@media (max-width: 700px) {
  .diario-menu-gruppo { width: 100%; }
  .diario-menu__pannello { position: static; width: auto; margin-top: 0.6rem; }
  .diario-menu[open] { flex-basis: 100%; }
}
.diario-indietro { margin: 0 0 0.5rem; font-size: var(--text-sm); }

/* Pagina del Rosario: una riga che spiega cosa accade in ogni mistero, sotto il titolo */
.mistero-sintesi { display: block; margin-top: 0.15rem; font-size: var(--text-base); color: var(--color-text-light); }