/* ============================================================
   CENTRO EGIZIANO GIGLIOLI — wordpress.css

   Quello che il mockup non poteva prevedere perche' era un sito statico:
   classi generate dal core (allineamenti, didascalie, screen reader), il
   collegamento "salta al contenuto", la barra di amministrazione sopra un
   header sticky, e i blocchi dell'editor dentro .prose.

   Caricato dopo style.css: qui non si ridefinisce la palette, la si usa.
   ============================================================ */

/* ---------------- ACCESSIBILITÀ ---------------- */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 14px 22px;
  top: 8px;
  left: 8px;
  z-index: 200;
  background: var(--white);
  color: var(--primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* Il menu mobile e' fixed a tutta pagina: mentre e' aperto la pagina non scorre. */
body.menu-open { overflow: hidden; }

/* ---------------- BARRA DI AMMINISTRAZIONE ---------------- */
/* L'header e' sticky con top:0 e finirebbe sotto la barra di WordPress. */
.admin-bar .site-header { top: 32px; }
.admin-bar .hd-mobile { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .hd-mobile { top: 46px; }
}

/* ---------------- ALLINEAMENTI E MEDIA DEL CORE ---------------- */
.alignleft {
  float: left;
  margin: 6px 28px 20px 0;
}

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

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide,
.alignfull { margin-inline: auto; }

.wp-caption { max-width: 100%; }

.wp-caption img { border-radius: var(--r-md); }

.wp-caption-text,
.wp-element-caption,
figcaption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: left;
}

.wp-block-image img,
.prose img { border-radius: var(--r-md); }

.wp-block-quote,
.prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--secondary);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-700);
  font-style: italic;
}

.wp-block-quote cite,
.prose blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
  color: var(--text-muted);
}

.wp-block-table table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.wp-block-table td,
.wp-block-table th,
.prose td,
.prose th {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
}

.wp-block-table th,
.prose th {
  background: var(--blu-50);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink-800);
}

.wp-block-separator,
.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 44px 0;
}

.wp-block-button__link {
  font-family: var(--font-body);
  font-weight: 700;
  background: var(--cta);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 12px 20px;
  text-decoration: none;
}

.wp-block-button__link:hover { background: var(--cta-hover); }

/* ---------------- PAGINAZIONE ---------------- */
.gg-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
  flex-wrap: wrap;
}

.gg-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--grigio-200);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 15px;
  color: var(--primary);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}

.gg-pagination .page-numbers:hover { background: var(--blu-50); border-color: var(--blu-300); }

.gg-pagination .page-numbers.current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.gg-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--text-muted);
}

/* ---------------- STATI VUOTI ---------------- */
.gg-empty {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 72px 0;
}

.gg-empty h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 14px;
}

.gg-empty p {
  color: var(--text-soft);
  font-size: 17px;
}

/* ---------------- AVVISI PER GLI AMMINISTRATORI ---------------- */
/* Visibili solo a chi puo' intervenire: segnalano configurazioni mancanti. */
.gg-admin-hint {
  max-width: var(--container);
  margin: 24px auto;
  padding: 16px 20px;
  border: 1.5px dashed var(--accento-400);
  border-radius: var(--r-md);
  background: var(--accento-50);
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.6;
}

.gg-admin-hint strong { color: var(--accento-700); }

/* ---------------- RICHIAMO FINALE: PUNTI FORTI ---------------- */
/* Nel mockup (il-centro.html) questa griglia è fatta di stili inline ripetuti su
   ogni voce. Portandola a componente servono le classi, e queste sono le stesse
   dichiarazioni, una volta sola. */
.pf-punti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
  max-width: 640px;
}

.pf-punto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-punto svg[class*="lucide"] {
  width: 26px;
  height: 26px;
  color: #7fc4dc;
}

.pf-punto .t {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.pf-punto .d {
  color: #c5dde6;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .pf-punti { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------------- MODULI ---------------- */
/* Il mockup mostrava moduli finti e non prevedeva né consenso privacy né
   messaggi d'errore. Da quando i dati vengono davvero raccolti servono
   entrambi, più il campo trappola che deve restare invisibile. */

/* Consenso, dentro il riquadro chiaro della pagina contatti. */
.fcheck label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
  cursor: pointer;
}

.fcheck input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--cta);
  cursor: pointer;
}

.fcheck a { color: var(--link); }

/* Consenso, dentro il riquadro scuro della newsletter. */
.news-consenso {
  margin-top: 14px;
}

.news-consenso label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #cfe3ea;
  cursor: pointer;
}

.news-consenso input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--cta);
  cursor: pointer;
}

.news-consenso a { color: #fff; text-decoration: underline; }

/* Campo trappola per i programmi automatici: fuori dallo schermo, non
   display:none — alcuni robot ignorano i campi nascosti in quel modo. */
.gg-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Messaggi d'errore. */
.gg-errore {
  background: #fdecea;
  border: 1.5px solid #e6a5a1;
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #7a2320;
}

.gg-errore ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.gg-errore li { margin: 3px 0; }

/* Variante su fondo scuro, per la newsletter. */
.gg-errore.chiaro {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #ffe2e0;
}

/* Informativa di Google, più piccola della nota principale. */
.gg-recaptcha-nota {
  font-size: 11.5px;
  line-height: 1.45;
  margin-top: 8px;
}

.gg-recaptcha-nota a { color: inherit; text-decoration: underline; }

/* Il distintivo di reCAPTCHA si sovrapporrebbe al pulsante "torna su": è
   nascosto, e l'informativa richiesta da Google è stampata sotto i moduli. */
.grecaptcha-badge { visibility: hidden; }

/* ---------------- ELENCHI SENZA CONTENUTO ---------------- */
/* Una sezione col solo titolo e il vuoto sotto sembra un difetto: qui si dice
   esplicitamente che non c'è ancora nulla. */
.gg-vuoto {
  max-width: 860px;
  margin: 0;
  padding: 26px 28px;
  border: 1.5px dashed var(--grigio-300);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------------- LOGHI ---------------- */
/* Rete di sicurezza: il CSS del mockup fissa solo l'altezza del logo e lascia
   la larghezza all'attributo width dell'immagine. Se quell'attributo è
   sbagliato — è successo: 260 dichiarati su un file da 235 — il logo esce
   stirato e allarga l'intestazione fino a far sbordare la pagina.
   Con width:auto la larghezza la decide sempre la proporzione reale. */
.hd-logo img,
.site-footer .brand img {
  width: auto;
  max-width: 100%;
}

/* ---------------- NIENTE SCORRIMENTO ORIZZONTALE ---------------- */

/* L'occhiello è inline-flex senza wrap: sotto i 340 px la riga
   "Certaldo · Val d'Elsa · dal 1933", con letter-spacing .14em, non ci sta e
   allarga la pagina. Sopra quella soglia questa regola non cambia nulla,
   perché su una riga sola il wrap non ha effetto. */
.kicker {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* Rete di sicurezza sugli anelli decorativi.
   Gli .arc-ring sono posizionati di proposito fuori dai bordi della loro
   sezione, e vengono ritagliati dalle sezioni che hanno overflow:hidden. Le
   sezioni generiche (.section) non ce l'hanno, quindi un anello può sporgere
   oltre il bordo destro della finestra: misurati 2 px su chi-siamo a 360.

   Non si mette overflow:hidden sul contenitore dell'anello, perché lì dentro
   c'è anche il cartellino .cap-card, che di proposito sporge dalla figura e
   verrebbe tagliato.

   La regola sta su `html` e non su `body`: per specifica `clip` sul body NON si
   propaga al viewport, a differenza di `hidden`, e infatti provandola sul body
   non cambiava nulla (verificato: overflow del body `clip`, dell'html
   `visible`, scorrimento invariato).

   Si usa `clip` e non `hidden` perché clip non crea un contenitore di
   scorrimento. Verificato che l'intestazione resti sticky e si agganci a top 0
   dopo lo scroll. Il contenuto che deve scorrere in orizzontale ha comunque il
   proprio contenitore con overflow-x:auto. */
html,
body {
  overflow-x: clip;
}

/* Servono ENTRAMBE, misurato: con la regola sul solo `html` la pagina scorreva
   ancora di 2 px (scrollX 2, scrollWidth 347 su 345); con la sola regola sul
   `body` non cambiava niente, perché `clip` sul body non si propaga al
   viewport. Insieme: scrollX 0. */

/* Safari sotto la 16 non conosce `clip`: lì hidden è accettabile, perché su
   html il contenitore di scorrimento è comunque il viewport e lo sticky
   dell'intestazione continua a funzionare. */
@supports not (overflow-x: clip) {
  html {
    overflow-x: hidden;
  }
}