/* Header */
/* Il browser, quando l'header si restringe (o si allarga), "compensa" lo scroll per tenere fermo il contenuto (scroll anchoring):
   tornando indietro con la freccia, con lo scroll ripristinato attorno ai 60px, la compensazione riportava lo scroll sotto la
   soglia di uscita e l'header andava avanti e indietro all'infinito. Senza ancoraggio lo scroll non viene corretto. */
html { overflow-anchor: none; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /*
   * background-attachment:fixed ancora il gradiente al viewport invece che
   * alla singola box dell'header: così combacia esattamente con lo stesso
   * gradiente (stessa regola, stesso attachment) usato da .top-banner subito
   * sotto, in home.css. Senza questo, due elementi adiacenti con lo stesso
   * linear-gradient() calcolato sulla propria altezza producono colori
   * diversi nel punto di contatto — la "cucitura" visibile segnalata.
   */
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
  background-attachment: fixed;
  /* Nessun bordino chiaro sotto: la fascetta che segue ha ora un velo scuro e il confine si vede da sé (11 ottobre 2026) */
}

/*
 * Griglia a 3 colonne (1fr auto 1fr): logo a sinistra, menu DAVVERO centrato
 * (non solo "spinto al centro" da space-between, che lo sposta se logo e
 * icone hanno larghezze diverse), icone a destra.
 */
/* Utente connesso a WordPress: la barra di amministrazione (fissa, alta 32px; 46px sotto i 783px) copriva l'header appiccicoso.
   Sotto i 601px la barra non è più fissa e scorre via con la pagina, quindi l'header torna a top: 0.
   Le regole valgono solo con body.admin-bar: per i visitatori non cambia nulla. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .site-header { top: 0; } }

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.9rem;
  transition: padding-block 0.25s ease;
}
/* Header compatto allo scroll (classe aggiunta via JS, main.js) */
.site-header.is-compact .site-header__inner {
  padding-block: 0.5rem;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
}

.site-branding__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
}
.site-branding__mark img {
  width: 72px;
  height: auto;
  display: block;
  transition: width 0.25s ease;
}
.site-header.is-compact .site-branding__mark img {
  width: 42px;
}
/*
 * Link di navigazione: stessa tipografia per il menu dell'header (.main-nav)
 * e quello del footer (.footer-nav) — stesso menu WP, due posizioni diverse,
 * prima avevano due stili scollegati (il footer non aveva nessuna regola
 * propria, ereditava il testo normale del sito). Il layout invece diverge:
 * orizzontale e centrato in header, elenco verticale in footer (un
 * wrap a metà riga nel footer spezzava l'allineamento con le altre colonne).
 */
.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
}
.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}
.main-nav a,
.footer-nav a {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-base);
  color: #fff;
}
.main-nav a {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.main-nav a:hover,
.footer-nav a:hover { opacity: 0.8; }
/* Pagina corrente, solo nel menu principale (nel footer sarebbe rumore visivo): la voce sta dentro una
   pillola chiara semitrasparente, la stessa forma delle pillole del Diario */
.main-nav li.current-menu-item > a {
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.25rem;
}
/* Icone dell'header (YouTube, ricerca): glifo da 30px dentro un'area toccabile da 44px (minimo consigliato per il tocco) */
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.header-icon svg { width: 30px; height: 30px; }
.header-icon:hover { opacity: 0.8; }
.header-search-toggle[aria-expanded="true"] { opacity: 0.6; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 7px;   /* area toccabile di circa 44px, come le icone */
}
.menu-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
}

@media (max-width: 1040px) {
  /* Sotto i 1040px il menu torna un dropdown, non più una colonna centrata. Con sette voci il menu da solo è largo circa 700px:
     più i lati del logo e delle icone servono almeno 940px, quindi si passa al menu a tendina un po' prima (11 ottobre 2026) */
  .site-header__inner {
    display: flex;
    justify-content: space-between;
  }
  .menu-toggle { display: block; }
  .main-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 1rem 20px;
  }
  /* Menu a tendina con l'identità del sito (non l'elenco di base di WordPress): pannello con angoli e ombra, voci nel font dei titoli
     (Playfair), una freccia a destra e la voce corrente in pillola azzurra (niente filetti tra le voci) */
  .main-nav {
    border-bottom: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 24px 40px -20px rgba(23, 48, 127, 0.45);
    overflow: hidden;
  }
  .main-nav ul { padding: 0.6rem 16px 0.9rem; }
  .main-nav li { padding: 0; border-bottom: 0; }
  .main-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 0.9rem;
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--color-primary-dark);
    border-radius: var(--radius-md);
  }
  .main-nav a::after {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-top: 2px solid var(--color-gradient-start);
    border-right: 2px solid var(--color-gradient-start);
    transform: rotate(45deg);
  }
  /* nel menu a tendina la voce corrente ha lo sfondo chiaro e il testo blu */
  .main-nav li.current-menu-item > a { background: var(--color-bg-soft); color: var(--color-primary); }
  .main-nav a:hover { color: var(--color-primary); opacity: 1; }
}

/*
 * Pannello di ricerca: dropdown chiaro sotto l'header (stesso trattamento
 * "pannello chiaro su sfondo scuro" del menu mobile), con elenco risultati
 * raggruppato per content type — vedi assets/js/search.js. Apertura/chiusura
 * via classe .is-open (non l'attributo hidden, che non si può animare) con
 * dissolvenza + leggero scorrimento, invece di comparire di scatto.
 */
.site-search {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  /* Sfondo semi-trasparente + blur: lascia intravedere cosa c'è sotto
     (il gradiente dell'header/banner o il contenuto della pagina) invece
     di uno stacco netto azzurro -> bianco */
  background: rgba(243, 250, 253, 0.75);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 20px 40px -16px rgba(23, 48, 127, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.site-search.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-search__inner { padding-block: 1.5rem 2rem; }

.site-search__form {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.6rem 0.6rem 0.6rem 1.2rem;
}
/* Una sola X: quella del browser nel campo di ricerca si nasconde, resta il nostro pulsante di chiusura */
.site-search__input::-webkit-search-cancel-button,
.site-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.site-search__input::-ms-clear { display: none; }
.site-search__form-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-light); }
.site-search__input {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  border: none;
  outline: none;
  background: none;
}
.site-search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}
.site-search__close:hover { color: #fff; background: var(--color-primary); }

.site-search__results {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* telefono: una colonna */
  gap: 1.2rem;
  /* Con tanti risultati la colonna scorre al suo interno (altrimenti da telefono il fondo non si raggiunge,
     perché il pannello è fissato sotto l'header) */
  max-height: min(60vh, 34rem);
  max-height: min(60dvh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  align-content: start;
}
.site-search__all {
  grid-column: 1 / -1;
  justify-self: center;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.3rem 0 0.6rem;
}
/* Freccia che invita a scorrere: fissa in fondo alla colonna, con un velo che sfuma i risultati */
.site-search__more {
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 2.6rem;
  margin-top: -2.6rem;
  color: var(--color-primary);
  background: linear-gradient(to bottom, rgba(243, 250, 253, 0), rgba(243, 250, 253, 0.95) 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.site-search__results.has-more .site-search__more { opacity: 1; }
.site-search__more svg { animation: site-search-rimbalzo 1.4s ease-in-out infinite; }
@keyframes site-search-rimbalzo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-search__more svg { animation: none; }
}
/* Al massimo due colonne (quattro, con i nomi lunghi dei luoghi, restavano strette e a capo su cinque righe) */
@media (min-width: 760px) {
  .site-search__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.site-search__status {
  grid-column: 1 / -1;
  color: var(--color-text-light);
  font-size: var(--text-sm);
}
.site-search__group {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  box-shadow: 0 6px 18px -12px rgba(30, 64, 175, 0.3);
}
.site-search__group-title {
  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-primary);
  margin: 0 0 0.5rem;
}
.site-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-search__list li { font-size: var(--text-sm); }
/* Ogni risultato è una riga cliccabile: nome in evidenza e, per i santi, la data in una piccola etichetta a destra */
.site-search__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* se non c'è posto accanto al nome, l'etichetta (data o località) scende sotto */
  justify-content: space-between;
  gap: 0.15rem 0.8rem;
  margin-inline: -0.6rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm, 10px);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.3;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-search__item:hover,
.site-search__item:focus-visible {
  background: var(--color-bg-soft);
  color: var(--color-primary);
}
.site-search__item-meta {
  flex-shrink: 0;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-text-light);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-search__item:hover .site-search__item-meta { background: #fff; color: var(--color-primary); }

/* Footer */
.site-footer {
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
  color: #fff;
  margin-top: 4rem;
  padding-block: 3rem 1.5rem;
}
.site-footer a { color: #fff; }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
/* Da tablet in su: colonna del marchio più larga e più aria tra le colonne, così "Esplora" non resta attaccato al testo a sinistra */
@media (min-width: 800px) {
  .site-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
    column-gap: 4rem;
  }
}
/* Font-family/weight/size già dalla regola h4 condivisa (theme.css): qui solo le differenze di contesto */
.site-footer__heading {
  color: #fff;
  margin-bottom: 0.8rem;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}
.site-footer__brand .site-footer__heading { margin-bottom: 0; font-size: var(--text-h2); }   /* nome del sito: grande quanto un titolo di sezione */
.site-footer__brand-mark {
  width: 56px;
  height: auto;
  flex-shrink: 0;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-base);
}
.footer-social svg { width: 26px; height: 26px; flex-shrink: 0; }
.footer-social:hover { opacity: 0.8; }
.site-footer__descrizione {
  /* stessa dimensione dei link del footer (.footer-nav a, .footer-social): --text-base */
  font-size: var(--text-base);
  line-height: var(--lh-corpo);
  max-width: 22rem;
}
.site-footer__bottom {
  /* una sola riga: copyright a sinistra, link legali a destra (a capo e centrati su schermi stretti) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: 1.2rem;
  font-size: var(--text-xs);   /* riga legale: più piccola del resto del footer (14px) */
  opacity: 0.9;
}
@media (max-width: 700px) {
  .site-footer__bottom { justify-content: flex-start; text-align: left; }
}

/* Accessibilità: link "Vai al contenuto", focus ben visibile da tastiera, animazioni ridotte su richiesta */
.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 10000;
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary-dark);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); }
#contenuto:focus { outline: none; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }
/* Campi di ricerca: niente contorno attorno al campo; il focus si vede dall'anello morbido sul riquadro che lo contiene */
.aside-cerca__input:focus-visible,
.site-search__input:focus-visible { outline: none; }
.site-search__form:focus-within { box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.28); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/*
 * Telefono (fino a 700px): regole dedicate, il computer non cambia (12 ottobre 2026).
 * - Gradiente visibile e continuo: il gradiente "fisso" sul viewport di un telefono lasciava header, fascetta e banner quasi tutti
 *   azzurri (e iOS ignora background-attachment: fixed). Qui la diagonale a 135 gradi sta sul body, alta quanto la testata
 *   (header + fascetta + banner, misurata da main.js in --testata-h); gli elementi sono trasparenti e la fascetta ha il velo scuro.
 * - Spazi: bordi laterali da 16px e card meno imbottite, per usare meglio la larghezza.
 * - Icone dell'header più grandi (area 48px, glifo 36px, barre del menu 34px).
 * - Percorso (breadcrumb) a due livelli: solo la voce precedente e quella corrente.
 */
@media (max-width: 700px) {
  /* Un solo gradiente diagonale per tutta la testata: sta sul body, alto quanto header + fascetta + banner (main.js misura e imposta
     --testata-h) e scorre con la pagina. Fascetta e banner sono trasparenti; l'header ha lo stesso gradiente, allineato in alto, così lo sviluppo è continuo senza cuciture. */
  body {
    background:
      linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end)) top left / 100% var(--testata-h, 640px) no-repeat,
      var(--color-bg);
  }
  /* L'header è appiccicoso e deve coprire ciò che scorre sotto: ha sempre lo stesso gradiente del body, allineato in alto a sinistra
     (a pagina ferma i due coincidono, senza cuciture); a header compatto e a pagina scrollata mostra sempre l'inizio del gradiente */
  .site-header {
    background:
      linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end)) top left / 100% var(--testata-h, 640px) no-repeat,
      var(--color-gradient-start);
  }
  /* sicurezza: ciò che segue il banner ha sempre fondo pieno, anche se la misura della testata fosse in ritardo.
     flow-root tiene dentro il blocco il margine del primo titolo (altrimenti esce sopra e lì si vede il gradiente del body) */
  .top-banner ~ *,
  .section-banner ~ * { display: flow-root; background-color: var(--color-bg); }
  .fascia-liturgica {
    background: linear-gradient(135deg, var(--fascia-velo-inizio), var(--fascia-velo-fine));
    background-attachment: scroll;
  }
  .section-banner { background: none; padding-inline: 16px; }
  .site-footer { background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end)); }

  .container, .top-banner__inner { padding-inline: 16px; }

  /* footer: marchio a tutta larghezza, poi "Esplora" e "Segui" affiancati (prima "Segui" finiva sotto, in fondo) */
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.2rem; }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }

  /* card e riquadri meno imbottiti */
  .portale, .daily-card, .santo-hero, .tempo-oggi, .tempo-stagione, .vangelo-oggi { padding: 1.4rem 1.1rem; }
  .box-preghiera, .is-style-preghiera, .is-style-messaggio { padding: 1.2rem 1rem; }
  .news-card__body, .news-card--quadro .news-card__body { padding: 1.1rem 1rem; }
  .news-card--riga { padding: 1.1rem 1rem; }
  .diario-card__corpo { padding: 1.1rem 1rem 1.2rem; }
  .diario-card--evidenza .diario-card__corpo { padding: 1.3rem 1.1rem; }

  /* icone dell'header più grandi */
  .header-icon { width: 48px; height: 48px; }
  .header-icon svg { width: 36px; height: 36px; }
  .menu-toggle { padding: 12px 7px; }
  .menu-toggle span { width: 34px; height: 3px; margin: 6px 0; border-radius: 2px; }
  .main-nav ul { padding-inline: 12px; }

  /* breadcrumb: due livelli (la voce prima dell'ultima e l'ultima) */
  .breadcrumb__voce:nth-last-child(n+3) { display: none; }
  .breadcrumb__voce:nth-last-child(2)::before { display: none; }   /* la prima voce rimasta non ha la freccia davanti */
}

/* Fascetta su due righe (sotto i 1100px): un filetto chiaro e leggero separa santo/tempo dal percorso */
@media (max-width: 1099px) {
  .fascia-liturgica__inner { gap: 0.4rem; }
  .fascia-liturgica .breadcrumb {
    width: 100%;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
}