/*
Theme Name: Tocca a te!
Theme URI: https://toccaate.com
Author: leonardomicheli
Description: Tema a blocchi per Tocca a te! — intervento precoce mediato dai caregiver. Supporto a distanza per genitori ed educatori.
Version: 1.1.11
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tocca-a-te
Tags: blog, one-column, block-patterns, full-site-editing
*/

/* -------------------------------------------------------------------------
   Questo file contiene solo ciò che theme.json non sa esprimere.
   Tutto il resto (colori, tipografia, spaziature, layout) sta nei token.
   ------------------------------------------------------------------------- */

/* --- Colonne che hanno bisogno di respiro ------------------------------- */
/* Il core impila le colonne solo sotto i 782px. Nel form dei contatti la
   colonna del riquadro è larga e fissa, quindi in mezzo c'è una fascia in cui
   al form restano 193px. Qui l'impilamento sale a 1024px — la stessa soglia
   dell'hamburger, così il sito ha un solo punto di rottura.
   Le tre regole del core da contrastare stanno in blocks/columns/style.css e
   usano `!important`, quindi serve `!important` anche qui.

   L'aggancio è `:has()` e non una classe perché quella griglia è già scritta
   nel contenuto della pagina, nel database: così la correzione vale anche
   dove le pagine sono già state montate, senza doverle rimontare. */
@media (min-width: 782px) and (max-width: 1023px) {
  .wp-block-columns:has(> .wp-block-column > .tat-box) {
    flex-wrap: wrap !important;
  }
  .wp-block-columns:has(> .wp-block-column > .tat-box) > .wp-block-column {
    flex-basis: 100% !important;
  }
}
/* Sopra i 1024 il riquadro dei contatti segue il contenitore invece di restare
   a 400px fissi: 400/1200 del disegno = 33%, arrotondato a 34%. Il valore sta
   nello stile inline del blocco, quindi serve `!important` per superarlo. */
@media (min-width: 1024px) {
  .wp-block-columns > .wp-block-column:has(> .tat-box) {
    flex-basis: 34% !important;
  }
}

/* Le foto dentro immagine+testo (Interveniamo): qualunque proporzione arrivi
   dalla libreria — oggi 16:10 — si tagliano a 4:3, si arrotondano e non
   superano i 450px. Quando il blocco impila, la foto si centra. */
.wp-block-media-text__media img {
  display: block;
  width: 100%;
  max-width: 450px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--wp--custom--raggio--lg);
  margin-inline: auto;
}
/* La copertina delle fondatrici in home è una composizione quadrata: niente
   ritaglio 4:3, che taglierebbe i ritratti. Il raggio resta. */
.tat-presentazione .wp-block-media-text__media img {
  aspect-ratio: auto;
  max-width: none;
}

/* Stessa storia per immagine+testo: il core lo impila solo sotto i 600, e nella
   fascia in mezzo il testo si riduce a una colonna da 300px che manda a capo
   ogni cinque parole. Anche qui la soglia è quella del sito.
   Le regole del core da contrastare stanno in blocks/media-text/style.css,
   dentro `@media (max-width: 600px)` e con `!important` sulla griglia. */
@media (min-width: 601px) and (max-width: 1023px) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Il footer a quattro colonne: fra 782 e 1023 le percentuali del disegno
   (32/18/22/28) lo stringono troppo — la colonna del menu scendeva a 92px e
   «Ci presentiamo» andava a capo. In quella fascia va a 2×2. Sopra i 1024
   restano le proporzioni del disegno, sotto i 782 impila il core.
   Il gap orizzontale è 48px, quindi metà colonna è `50% - 24px`; le larghezze
   stanno negli stili inline dei blocchi, da cui `!important`. */
@media (min-width: 782px) and (max-width: 1023px) {
  .tat-footer > .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .tat-footer > .wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 24px) !important;
  }
}

/* --- Attacco fra fasce a tutta larghezza --------------------------------- */
/* Ogni sezione porta il proprio padding verticale, quindi il blockGap globale
   (24px) fra due fasce consecutive è spazio di troppo: quando entrambe hanno un
   fondo colorato si vede come una riga bianca. Succedeva in tre punti — pilastri
   → missione in home, evidenza → missione in Ci presentiamo, citazione → CTA
   scura in Tocca a noi. Il selettore resta su `.alignfull + .alignfull` di
   proposito: azzerare il gap fra TUTTI i figli di post-content romperebbe la
   spaziatura dei paragrafi nelle pagine che usano page.html. */
main > .alignfull + .alignfull,
.entry-content > .alignfull + .alignfull {
  margin-block-start: 0;
}

/* --- Attacco fra header, contenuto e footer ------------------------------ */
/* WordPress mette il blockGap globale (24px) fra i blocchi di primo livello:
   header, main, footer. Con le fasce a tutta larghezza si vede come una riga
   bianca fra l'header e l'hero, e fra la fascia scura di chiusura e il footer.
   Le sezioni portano già il proprio padding verticale, quindi qui va a zero. */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* --- Occhiello ---------------------------------------------------------- */
/* Style variation di core/paragraph. Maiuscolo e tracking non sono opzioni
   native del blocco paragrafo, quindi vivono qui. */
.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 700;
  line-height: 1.43;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-brand);
}

/* --- Bottoni: varianti ---------------------------------------------------- */
/* Il primario è già in theme.json. Qui le altre tre. */

.wp-block-button.is-style-secondario .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--text-primary);
  border: 1.5px solid var(--wp--preset--color--border-strong);
}
.wp-block-button.is-style-secondario .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bg-surface-alt);
}

.wp-block-button.is-style-inverso .wp-block-button__link {
  background-color: var(--wp--preset--color--bg-surface);
  color: var(--wp--preset--color--text-primary);
}
.wp-block-button.is-style-inverso .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--bg-surface-alt);
}

.wp-block-button.is-style-testo .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--text-brand);
  padding: 6px 4px;
  border-radius: var(--wp--custom--raggio--sm);
}
.wp-block-button.is-style-testo .wp-block-button__link::after {
  content: " →";
}
.wp-block-button.is-style-testo .wp-block-button__link:hover {
  text-decoration: underline;
}

/* Variante dimensione grande, per gli hero. */
.wp-block-button.is-style-grande .wp-block-button__link {
  padding: 18px 36px;
}

/* --- Focus visibile ------------------------------------------------------ */
/* Obbligatorio per l'accessibilità: senza, chi naviga da tastiera si perde. */
:where(
  a,
  button,
  input,
  textarea,
  select,
  summary,
  .wp-block-button__link
):focus-visible {
  outline: 2px solid var(--wp--preset--color--action-focus);
  outline-offset: 2px;
}

/* --- Citazione ----------------------------------------------------------- */
/* Le virgolette decorative in mandarino. */
.wp-block-quote.is-style-evidenza {
  border: 0;
  padding-left: 0;
  position: relative;
  padding-top: 48px;
}
.wp-block-quote.is-style-evidenza::before {
  content: "\201C";
  position: absolute;
  top: -12px;
  left: 0;
  font-family: var(--wp--preset--font-family--titoli);
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--accent-brand);
}
.wp-block-quote.is-style-evidenza cite {
  display: block;
  margin-top: 12px;
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--label);
  font-style: normal;
  font-weight: 600;
  color: var(--wp--preset--color--text-muted);
}

/* --- FAQ (core/details) --------------------------------------------------- */
.wp-block-details {
  box-sizing: border-box; /* assets/faq.js anima l'altezza misurata con offsetHeight */
  border-top: 1px solid var(--wp--preset--color--border-subtle);
  padding: 24px 0;
}
.wp-block-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 700;
  color: var(--wp--preset--color--text-primary);
}
.wp-block-details summary::-webkit-details-marker {
  display: none;
}
.wp-block-details summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--wp--preset--color--text-brand);
  border-bottom: 2px solid var(--wp--preset--color--text-brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
/* `.tat-chiude` lo mette faq.js mentre la risposta si richiude: `open` resta
   fino a fine animazione, la freccia deve girare subito. */
.wp-block-details[open]:not(.tat-chiude) summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.wp-block-details > :not(summary) {
  margin-top: 16px;
  max-width: var(--wp--custom--misura--lettura);
  color: var(--wp--preset--color--text-muted);
}

/* --- Categorie: tag e filtri --------------------------------------------- 
   SOSPESE dal 20 settembre 2026: nessun template stampa più post-terms né i
   filtri, le regole restano per quando le categorie tornano (functions.php). */
.tat-tag,
.wp-block-post-terms a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--wp--custom--raggio--pill);
  background-color: var(--wp--preset--color--bg-accent-soft);
  color: var(--wp--preset--color--text-brand);
  font-size: var(--wp--preset--font-size--body-s);
  text-decoration: none;
}
.tat-tag--attivo,
.tat-filtri .current a {
  background-color: var(--wp--preset--color--action-primary);
  color: var(--wp--preset--color--text-on-accent);
}

/* --- Misura di lettura ---------------------------------------------------- */
/* Da applicare alla colonna testo degli articoli. */
/* La misura di lettura sta sul contenitore (contentSize del blocco, 680px =
   --wp--custom--misura--lettura), non sui figli: in `ch` sarebbe relativa al
   font di OGNI elemento, e i titoli finirebbero più larghi del corpo testo,
   spezzando il bordo sinistro della colonna. */

/* --- Marchio tipografico -------------------------------------------------- */
/* Segnaposto finché non arriva un logo disegnato: allora diventa core/site-logo. */
.tat-logo {
  margin: 0;
  font-family: var(--wp--preset--font-family--titoli);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.31;
  letter-spacing: -0.01em;
}
.tat-logo a {
  color: var(--wp--preset--color--text-primary);
  text-decoration: none;
}
.tat-logo span {
  color: var(--wp--preset--color--accent-brand);
}

/* --- Testata -------------------------------------------------------------- */
.tat-header {
  border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}
.tat-header__nav {
  gap: 32px;
}
.tat-header .wp-block-navigation {
  --wp--style--block-gap: 36px;
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
}
/* Solo le VOCI del menu, non «ogni link dentro il nav»: l'overlay del menu
   mobile viene renderizzato dentro lo stesso elemento <nav>, e con il selettore
   generico il bottone «Scrivici» dell'overlay perdeva il suo testo bianco
   prendendo il cacao delle voci — cacao su mandarino, contrasto fuori norma. */
.tat-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--text-primary);
  text-decoration: none;
}
.tat-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--text-brand);
}
/* La testata resta in alto durante lo scorrimento.
   Lo sticky va sull'elemento <header> del template part, NON su .tat-header:
   il riferimento di un elemento sticky è il suo genitore, e .tat-header è alto
   esattamente quanto il suo genitore — non avrebbe spazio per muoversi. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Gli ancoraggi interni (salta al contenuto, link a #sezione) non devono
   finire sotto la testata appiccicata. */
html {
  scroll-padding-top: var(--tat-testata);
}
:root {
  --tat-testata: 72px;
}

/* Il bottone CTA compare accanto all'hamburger da 600px: logo, hamburger e
   bottone ci stanno comodamente. Il selettore è volutamente a due classi
   perché il core emette `body .is-layout-flex { display: flex }`
   (specificità 0,1,1): con la sola `.tat-header__cta` (0,1,0) il bottone
   restava visibile anche sotto i 600px. */
.tat-header .tat-header__cta {
  display: none;
}
@media (min-width: 600px) {
  :root {
    --tat-testata: 92px;
  }
  .tat-header .tat-header__cta {
    display: flex;
  }
}

/* Il blocco navigazione del core passa all'hamburger sotto i 600px. Ma fra 600
   e 1024 il menu orizzontale non ci sta: logo, quattro voci e bottone spezzano
   le parole su due righe e la testata cresce a 109px. Qui la soglia si alza a
   1024px, ripristinando in quella fascia il comportamento del sotto-600.
   Le due regole del core da contrastare stanno in blocks/navigation/style.css,
   entrambe dentro `@media (min-width: 600px)`; il prefisso `.tat-header` serve
   solo ad aggiungere una classe di specificità. */
@media (min-width: 600px) and (max-width: 1023px) {
  .tat-header
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(
      .is-menu-open
    ) {
    display: none;
  }
  .tat-header
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* Rete di sicurezza: wordmark e voci di menu non spezzano mai una parola. */
.tat-logo,
.tat-header .wp-block-navigation-item__label {
  white-space: nowrap;
}
.tat-header .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--text-primary);
}

/* --- Menu mobile (template part area navigation-overlay) ------------------ */
/* Il contenitore a schermo pieno è quello del core (position: fixed, inset 0).
   Il core gli mette `background-color: inherit`, che però prende il valore del
   <nav> genitore — trasparente: sotto l'overlay si vedeva la pagina scorrere.
   Il fondo va dichiarato qui. */
.tat-header .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--bg-page);
}
.tat-overlay {
  padding: 0 0 32px;
}
.tat-overlay__bar {
  padding: 16px 20px;
}
.tat-overlay .wp-block-navigation-item {
  width: 100%;
  border-top: 1px solid var(--wp--preset--color--border-subtle);
}
.tat-overlay .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 18px 20px;
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  color: var(--wp--preset--color--text-primary);
  text-decoration: none;
}
/* La lista delle voci deve occupare tutta la larghezza: senza questo il <ul>
   si stringe sul contenuto (150px) e `width: 100%` sulle voci diventa il 100%
   di 150px — righe e separatori a metà schermo. */
.tat-overlay__menu {
  gap: 0;
  width: 100%;
  align-items: stretch;
}
.tat-overlay__cta {
  padding: 24px 20px 0;
}

/* --- Piede ---------------------------------------------------------------- */
.tat-logo--chiaro a {
  color: var(--wp--preset--color--text-on-inverse);
}

.tat-footer h4 {
  margin-bottom: 16px;
}
.tat-footer p {
  margin-block: 0 12px;
}
.tat-footer a {
  color: inherit;
  text-decoration: none;
}
.tat-footer a:hover {
  text-decoration: underline;
}
.tat-footer__legale {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--accent-brand);
  gap: 12px 24px;
}
.tat-footer__legale p {
  margin: 0;
}

/* --- Hero ----------------------------------------------------------------- */
/* L'hero della home è una fotografia a tutta larghezza col testo sopra, e la
   colonna di testo si ferma a 560px come nel disegno, allineata a sinistra: un
   `constrained` centrerebbe i figli, quindi qui serve una max-width. */
.tat-hero__testo {
  max-width: 560px;
}
/* Il velo sulla foto è quello del blocco cover: piatto, al 50%, in un cacao
   profondo (#33241f) scelto nel pattern — richiesta del 20 settembre, al posto
   della sfumatura quasi opaca che c'era prima. Con un velo piatto la
   leggibilità dipende anche dalla foto: va scelta scura nella metà sinistra,
   dove sta il testo. */
/* Sulla foto l'occhiello mandarino sparirebbe: qui va in crema. */
.tat-eyebrow--foto {
  color: var(--wp--preset--color--text-on-inverse);
}

/* --- Badge di rassicurazione ---------------------------------------------- */
.tat-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 20px 12px 16px;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--raggio--pill);
  background-color: var(--wp--preset--color--bg-surface);
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  color: var(--wp--preset--color--text-primary);
}
.tat-badge svg {
  flex: 0 0 auto;
  color: var(--wp--preset--color--text-brand);
}
/* Sopra la foto dell'hero il badge bianco su fondo chiaro sparirebbe: bordo e
   testo passano al chiaro e il fondo resta trasparente, così è il velo scuro a
   fare da superficie. */
.tat-badge--chiaro {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: transparent;
  color: var(--wp--preset--color--text-on-inverse);
}
.tat-badge--chiaro svg {
  color: currentColor;
}

/* --- Card (pilastri) ------------------------------------------------------ */
/* Le colonne si allungano già alla stessa altezza: qui rendiamo la card
   alta quanto la colonna e spingiamo il link in fondo con margin-top:auto,
   così i titoli restano allineati fra loro. */
.wp-block-column:has(> .tat-card) {
  display: flex;
}
.tat-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--raggio--lg);
  background-color: var(--wp--preset--color--bg-surface);
}
.tat-card > * {
  margin-block: 0 16px;
}
.tat-card__azione {
  margin-top: auto;
  padding-top: 16px;
}
.tat-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--wp--custom--raggio--md);
  background-color: var(--wp--preset--color--bg-accent-soft);
  color: var(--wp--preset--color--text-brand);
}

/* --- Missione ------------------------------------------------------------- */
/* Sul fondo scuro l'occhiello deve virare al mandarino: il text-brand
   della variante di default non ha contrasto sufficiente su cacao. */
.tat-eyebrow--chiaro {
  color: var(--wp--preset--color--accent-brand);
}
.tat-missione p {
  margin: 0;
}

/* --- Video ---------------------------------------------------------------- */
.tat-video .wp-block-embed__wrapper {
  border-radius: var(--wp--custom--raggio--lg);
  overflow: hidden;
  background-color: var(--wp--preset--color--bg-inverse);
}
.tat-video figcaption {
  margin-top: 12px;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--text-muted);
  text-align: left;
}

/* --- Card articolo (query loop) ------------------------------------------- */
.tat-card-articolo {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--raggio--lg);
  background-color: var(--wp--preset--color--bg-surface);
}
/* Il `constrained` della card dà ai figli margini laterali auto `!important` e
   il blockGap sopra: in una colonna flex i margini auto vincono sullo stretch e
   il figlio si stringe sul contenuto e si centra. Si vedeva nella figura con
   WordPress 7.0 (che scrive `aspect-ratio` sulla figura, non sull'img: senza
   larghezza definita la proporzione non si applica, foto naturale) e nel corpo
   delle card correlate, che senza estratto restava largo quanto il titolo con
   ~30px di margine per lato. Nel disegno copertina e corpo sono a tutta
   larghezza, gap 0. */
.tat-card-articolo > * {
  margin: 0 !important;
}
/* Da elemento flex la figura ha `min-height: auto`, cioè l'altezza naturale
   dell'img, che vince sui 16/9. `min-height: 0` la lascia alla proporzione.
   Vale con entrambi i markup (7.0 e 7.1). */
.tat-card-articolo .wp-block-post-featured-image {
  width: 100%;
  min-height: 0;
}
.tat-card-articolo .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.tat-card-articolo__corpo {
  flex: 1 1 auto;
}
.tat-card-articolo .wp-block-post-title a {
  color: var(--wp--preset--color--text-primary);
  text-decoration: none;
}
.tat-card-articolo .wp-block-post-title a:hover {
  color: var(--wp--preset--color--text-brand);
}
.tat-card-articolo .wp-block-post-terms a {
  text-decoration: none;
}
/* La griglia di post-template deve dare celle di pari altezza. */
.tat-griglia-articoli.is-layout-grid > li {
  display: flex;
}

/* Riga data · tempo di lettura dentro la card. Il punto di separazione non sta
   nel markup: lo mette il CSS davanti al tempo di lettura, così quando la riga
   va a capo (a 768 la card ha 264px di testo e la riga ne vuole ~290) il punto
   viaggia con il suo testo invece di restare orfano a fine riga. I due pezzi
   non si spezzano al loro interno. */
/* Mese abbreviato («17 set 2026») come nel disegno («12 marzo 2026»): con
   «Settembre» per intero la riga non stava in una card da 300px. */
.tat-card-articolo__meta .wp-block-post-date {
  text-transform: lowercase;
}
.tat-card-articolo__meta > * {
  margin: 0;
  white-space: nowrap;
}
/* La riga sta sopra il titolo e gli è vicina (4px): il resto del corpo tiene il
   blockGap da 12. Il selettore batte la regola di layout del core (`> * + *`). */
.tat-card-articolo__corpo > .wp-block-post-title {
  margin-block-start: 4px;
}
/* Il «Leggi l'articolo» sta nel template della card, quindi in tutte: si mostra
   solo nell'articolo in evidenza (sotto), nelle altre il titolo è già il link. */
.tat-card-articolo .tat-leggi {
  display: none;
}
.tat-card-articolo__meta .tat-tempo-lettura::before {
  content: "·";
  margin-right: 8px; /* = gap della riga: il punto resta a metà fra i due */
}

/* --- Articolo in evidenza -------------------------------------------------- */
/* Il disegno (20 settembre, seconda versione) vuole il primo articolo
   dell'archivio come card bordata a tutta riga, orizzontale: testo a sinistra
   con l'occhiello «In evidenza» in cima, foto a destra larga 500 e alta quanto
   la card. Si fa qui e non con una seconda query loop: la griglia eredita la
   query principale (`inherit: true`), e in quel caso il filtro
   `query_loop_block_query_vars` non scatta — l'esclusione del doppione
   andrebbe in `pre_get_posts` con la paginazione da ricontrollare.
   ponytail: vale su ogni pagina dell'elenco, non solo sulla prima; con dieci
   articoli per pagina non si vede, se un giorno si vedrà serve la strada PHP. */
@media (min-width: 782px) {
  .tat-archivio .tat-griglia-articoli.is-layout-grid > li:first-child {
    grid-column: 1 / -1;
    /* fra l'evidenza e la griglia il disegno lascia 64, la griglia 32 */
    margin-bottom: var(--wp--preset--spacing--32);
  }
  .tat-archivio
    .tat-griglia-articoli
    > li:first-child
    .tat-card-articolo__corpo {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* L'occhiello vive nel CSS perché la card è la stessa per tutti gli
     articoli: un paragrafo nel template comparirebbe in ogni card. */
  .tat-archivio
    .tat-griglia-articoli
    > li:first-child
    .tat-card-articolo__corpo::before {
    content: "In evidenza";
    margin-bottom: 8px;
    font-family: var(--wp--preset--font-family--testo);
    font-size: var(--wp--preset--font-size--eyebrow);
    font-weight: 700;
    line-height: 1.43;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-brand);
  }
  /* Il layout `constrained` del core mette `margin-left/right: auto !important`
     su ogni figlio: dentro una colonna flex centrerebbero le righe strette.
     L'`!important` batte quello del core, che sta in un `:where()`. */
  .tat-archivio
    .tat-griglia-articoli
    > li:first-child
    .tat-card-articolo__corpo
    > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Titolo a corpo h2 (36 nel disegno). L'`!important` batte la classe
     `has-h-3-font-size` del blocco, che il core emette con `!important`. */
  .tat-archivio .tat-griglia-articoli > li:first-child .wp-block-post-title {
    font-size: var(--wp--preset--font-size--h-2) !important;
    margin-block-start: 12px; /* nella card normale è 4 */
  }
  /* «Leggi l'articolo →»: stesso vestito del bottone «Testo con freccia». */
  .tat-archivio .tat-griglia-articoli > li:first-child .tat-leggi {
    display: inline-block;
    margin-top: 4px; /* + blockGap 12 = i 16 del disegno */
    padding: 6px 4px;
    border-radius: var(--wp--custom--raggio--sm);
    font-weight: 600;
    color: var(--wp--preset--color--text-brand);
    text-decoration: none;
  }
  .tat-archivio .tat-griglia-articoli > li:first-child .tat-leggi::after {
    content: " →";
  }
  .tat-archivio .tat-griglia-articoli > li:first-child .tat-leggi:hover {
    text-decoration: underline;
  }
  /* Due colonne solo se l'immagine c'è davvero: senza immagine in evidenza il
     blocco del core non stampa niente, e mezza card resterebbe vuota. */
  .tat-archivio
    .tat-griglia-articoli
    > li:first-child
    .tat-card-articolo:has(> figure.wp-block-post-featured-image) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(500px, 42%);
    align-items: stretch;
  }
  /* La foto riempie la cella e non ne detta l'altezza: in assoluto dentro la
     figura (che il core fa già `position: relative`), così l'altezza della card
     la decide il testo. Il core scrive `aspect-ratio:16/9` inline sull'img:
     si toglie solo con `!important`. */
  .tat-archivio
    .tat-griglia-articoli
    > li:first-child
    .wp-block-post-featured-image {
    order: 2;
    min-height: 0;
    /* I margini auto del `constrained` li azzera già `.tat-card-articolo > *`:
       da elemento di griglia con margini auto la figura non si allargava e,
       senza contenuto in flusso, restava a 0px (misurato: 0×422). */
    width: 100%;
  }
  .tat-archivio
    .tat-griglia-articoli
    > li:first-child
    .wp-block-post-featured-image
    img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
    object-fit: cover;
  }
}

/* --- Riga titolo + link (sezione articoli) -------------------------------- */
.tat-riga-titolo {
  gap: 24px 32px;
}

/* --- Filtri categoria (blocco tocca-a-te/filtri-categoria) ---------------- */
.tat-filtri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* --- Paginazione ---------------------------------------------------------- */
.tat-paginazione {
  /* Il blocco query-pagination non supporta i margini: un `style` di margine
     nel markup non passa la validazione dell'editor. Lo spazio sta qui. */
  margin-top: var(--wp--preset--spacing--64);
  gap: 8px;
}
.tat-paginazione .wp-block-query-pagination-numbers,
.tat-paginazione .wp-block-query-pagination-previous,
.tat-paginazione .wp-block-query-pagination-next {
  margin: 0;
}
.tat-paginazione .wp-block-query-pagination-numbers {
  display: flex;
  gap: 8px;
}
.tat-paginazione a,
.tat-paginazione .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--raggio--pill);
  background-color: var(--wp--preset--color--bg-surface);
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  color: var(--wp--preset--color--text-primary);
  text-decoration: none;
}
.tat-paginazione .page-numbers.current {
  border-color: transparent;
  background-color: var(--wp--preset--color--action-primary);
  color: var(--wp--preset--color--text-on-accent);
}
.tat-paginazione a:hover {
  border-color: var(--wp--preset--color--border-strong);
}

/* --- Articolo singolo ------------------------------------------------------ */
.tat-articolo__testata .wp-block-post-terms {
  display: flex;
  justify-content: center;
}
/* Le briciole sopra il titolo: qui la categoria è testo, non un chip. */
.tat-briciole p {
  margin: 0;
}
.tat-briciole .wp-block-post-terms a {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}
.tat-articolo__meta p {
  margin: 0;
}
/* Misura di lettura: il contenuto sta su 760px, ma immagini, citazioni e
   video possono uscire in larga. */
/* Lo spazio fra i blocchi lo mette già il blockGap del gruppo: aggiungere qui
   un margine sotto lo raddoppierebbe. Serve solo il respiro in più sopra ai
   titoli, che il blockGap da solo non può esprimere. */
.tat-lettura > h2,
.tat-lettura > h3 {
  margin-top: 40px;
}
.tat-autrici p {
  margin: 0;
}

/* --- Testata delle pagine «Su di me» ---------------------------------------- */
/* Foto e nome affiancati sul desktop; sotto i 600 la riga va a capo da sola e
   il testo si centra sotto la foto. */
.tat-testata-bio {
  align-items: center;
}
.tat-testata-bio .tat-bio__foto {
  flex: 0 0 auto;
  margin: 0;
}
@media (max-width: 599px) {
  .tat-testata-bio {
    justify-content: center;
    text-align: center;
  }
}

/* --- Testata delle pagine -------------------------------------------------- */
/* Il gruppo stringe il contenuto a 820-840px per il sottotitolo, ma nel disegno
   occhiello e titolo corrono su tutti i 1200: «Un intervento precoce, guidato
   da voi» a 56px sta su una riga a 1200 e va a capo a 840. Si allarga solo il
   titolo; sotto i 1440 lo limita comunque il contenitore. */
.tat-hero-pagina > .wp-block-heading {
  max-width: 1200px;
}

/* --- Bio delle professioniste ---------------------------------------------- */
.tat-bio {
  align-items: center;
  text-align: center;
}
.tat-bio__foto img {
  border-radius: var(--wp--custom--raggio--pill);
}
.tat-bio h2,
.tat-bio p {
  margin: 0;
}
/* Nel disegno le due schede stanno dentro 944px (1200 meno 128 per lato), così
   le due persone si leggono come una coppia e non ai due terzi della pagina.
   Il contenuto della pagina è nel database, quindi la misura sta qui e non
   nel blocco; il centramento lo fa già il layout `constrained` del core. */
.wp-block-columns:has(> .wp-block-column > .tat-bio) {
  max-width: 944px;
}

/* --- Box in evidenza dentro il testo --------------------------------------- */
.tat-box {
  border-radius: var(--wp--custom--raggio--lg);
}
/* Niente reset dei margini qui: azzerarli sovrascriverebbe il blockGap che
   WordPress genera per il gruppo, e i blocchi dentro il box si toccherebbero.
   Il layout a blocchi azzera già i margini dei figli da solo. */
.tat-nota {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wp--preset--color--border-subtle);
}

/* --- Passi numerati -------------------------------------------------------- */
/* La griglia dei passi è un core/group con columnCount: a differenza di
   post-template, il core NON la rende responsive, e a 390px le due colonne
   sforavano il viewport di 29px (il numero è largo 56px fissi e il titolo non
   può andare sotto una certa misura). Sotto i 600px va a colonna singola. */
@media (max-width: 599px) {
  .tat-passi {
    grid-template-columns: 1fr;
  }
}
.tat-step {
  align-items: flex-start;
}
.tat-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--wp--custom--raggio--pill);
  background-color: var(--wp--preset--color--bg-accent-soft);
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--h-4);
  font-weight: 700;
  color: var(--wp--preset--color--text-brand);
}
.tat-step h3,
.tat-step p {
  margin: 0;
}

/* --- Elenchi puntati nei box ----------------------------------------------- */
.tat-elenco {
  margin: 0;
  padding-left: 1.2em;
}
.tat-elenco li + li {
  margin-top: 8px;
}

/* --- FAQ: la fisarmonica ---------------------------------------------------- */
/* L'attributo name su core/details rende il gruppo esclusivo: aprirne una
   chiude le altre, senza una riga di JavaScript. Qui serve solo il filetto
   di chiusura sull'ultima. */
.tat-faq .wp-block-details:last-child {
  border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}

/* --- CTA scura ------------------------------------------------------------- */
/* Il riquadro di chiusura, pesca o cacao, ha gli angoli arrotondati come le
   card e i box: nel disegno lo è, e nessuna regola lo faceva. */
.tat-cta {
  border-radius: var(--wp--custom--raggio--lg);
}
.tat-cta-scura p {
  margin: 0;
}

/* --- Form contatti --------------------------------------------------------- */
/* Il modulo è reso dallo shortcode [tat-modulo-contatti]. I campi veri riusano
   `.tat-campo__box`, la stessa classe che vestiva il segnaposto: la resa resta
   quella del disegno e non c'è un secondo insieme di regole da tenere allineato. */
.tat-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block: 24px 24px;
}
.tat-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tat-campo__label {
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 600;
  color: var(--wp--preset--color--text-primary);
}
.tat-campo__box {
  /* Gli input nascono `content-box`: con width 100% più padding e bordo
     sbordavano di 38px sul telefono. Select e textarea sono border-box di
     default, per questo solo nome ed email uscivano dallo schermo. */
  box-sizing: border-box;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--raggio--md);
  background-color: var(--wp--preset--color--bg-surface);
  font-family: var(--wp--preset--font-family--testo);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.5;
  color: var(--wp--preset--color--text-primary);
}
.tat-campo__box::placeholder {
  color: var(--wp--preset--color--text-muted);
}
/* Il contorno di messa a fuoco non si toglie: senza, il modulo non è
   percorribile da tastiera. `outline-offset` lo stacca dal bordo del campo,
   che ha già un suo colore. */
.tat-campo__box:focus-visible,
.tat-consenso input:focus-visible {
  outline: 2px solid var(--wp--preset--color--action-focus);
  outline-offset: 2px;
}
/* `appearance: none` toglie la freccia di sistema, diversa su ogni
   piattaforma. Il colore qui è scritto a mano perché dentro un `url()` non si
   può interpolare una variabile CSS: è la stessa tinta di `text-primary`. */
select.tat-campo__box--scelta {
  appearance: none;
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%235B4038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
textarea.tat-campo__box--area {
  min-height: 140px;
  resize: vertical;
}
.tat-campo__aiuto {
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--text-muted);
}
.tat-campo__errore {
  font-size: var(--wp--preset--font-size--body-s);
  font-weight: 600;
  color: var(--wp--preset--color--text-brand);
}
.tat-campo__box[aria-invalid="true"] {
  border-color: var(--wp--preset--color--text-brand);
}
/* L'informativa breve sopra la spunta: deve leggersi come una nota, non come
   un campo del modulo, quindi corpo piccolo e un filo di distacco sopra. */
.tat-informativa {
  margin-top: 8px;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--text-muted);
}
.tat-informativa p {
  margin: 0 0 8px;
}
.tat-informativa p:last-child {
  margin-bottom: 0;
}
.tat-informativa__titolo {
  font-weight: 600;
  color: var(--wp--preset--color--text-primary);
}

.tat-consenso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--wp--preset--font-size--body-s);
  color: var(--wp--preset--color--text-muted);
}
.tat-consenso input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--wp--preset--color--action-primary);
}
.tat-consenso label {
  flex: 1;
  min-width: 200px;
}
/* L'esca sta fuori dallo schermo e non a `display: none`: molti automatismi
   saltano i campi nascosti, e un campo saltato non fa scattare la trappola. */
.tat-esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tat-form button.wp-block-button__link {
  border: 0;
  cursor: pointer;
}
.tat-esito {
  margin-block: 24px;
  padding: 20px 24px;
  border-left: 4px solid;
  border-radius: var(--wp--custom--raggio--md);
}
.tat-esito p {
  margin: 0;
}
.tat-esito p + p {
  margin-top: 8px;
}
.tat-esito--ok {
  border-color: var(--wp--preset--color--action-primary);
  background-color: var(--wp--preset--color--bg-accent-soft);
}
.tat-esito--ko {
  border-color: var(--wp--preset--color--text-brand);
  background-color: var(--wp--preset--color--bg-surface-alt);
}

/* --- Avviso dentro il box informazioni ------------------------------------- */
.tat-avviso {
  border-top: 1px solid var(--wp--preset--color--border-subtle);
}

/* -------------------------------------------------------------------------
   DA COMPLETARE:
   - pagina 404
   Ogni regola va verificata nel browser: le classi generate dai blocchi
   possono cambiare tra versioni di WordPress.
   ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------
   Fonti a fine articolo
   Stile di blocco «Fonti» (lista e paragrafo), da functions.php: carattere
   più piccolo e attenuato per le citazioni bibliografiche. Lo schema
   «Fonti e approfondimenti» lo porta già applicato.
   ------------------------------------------------------------------ */
.is-style-fonti {
  font-size: var(--wp--preset--font-size--body-s);
  line-height: 1.5;
  color: var(--wp--preset--color--text-muted);
}
.is-style-fonti a {
  color: inherit;
}