/* ==========================================================================
   SOLO LA COLLA DI WORDPRESS

   Qui dentro NON va disegno. Il disegno sta in style.css (design system
   Maskai) e in mita.css (variante scura), che sono copie identiche di
   html/css/ e si riallineano con wordpress/sync-assets.sh.

   Qui sta soltanto quello che serve perche' il markup generato da WordPress
   e dai plugin entri in quel disegno senza romperlo. Se una regola qui
   dentro non nomina una classe di WordPress o di un plugin, e' nel file
   sbagliato.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BARRA DI AMMINISTRAZIONE
   La barra e' fissa e alta 32px (46 sul piccolo). Senza queste tre regole la
   testata sticky ci finisce sotto e il cassetto mobile la copre.
   -------------------------------------------------------------------------- */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .nav-overlay { top: 32px; }

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

/* --------------------------------------------------------------------------
   CONTACT FORM 7
   CF7 avvolge ogni campo in uno <span class="wpcf7-form-control-wrap">. Nei
   contenitori a griglia lo span viene gia' trattato come blocco, ma dirlo
   esplicitamente evita sorprese dove la griglia non c'e'.
   -------------------------------------------------------------------------- */
.quote-form .wpcf7-form-control-wrap { display: block; }

/* Le pastiglie dei moduli sono figlie dirette di un flex: i due span di CF7
   in mezzo le raccoglierebbero tutte in un unico blocco e andrebbero a capo
   insieme. `display: contents` li fa sparire dal layout lasciando i figli
   dove devono stare. */
.quote-form__modules .wpcf7-form-control-wrap,
.quote-form__modules .wpcf7-checkbox { display: contents; }

/* Errore sotto il campo, come .field-error del prototipo. */
.quote-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--size-caption);
  color: var(--red-error);
}
.quote-form .wpcf7-not-valid { border-color: var(--red-error); }

/* Lo spinner ce l'ha gia' il bottone (.btn__spinner): quello di CF7 sarebbe
   un secondo cerchietto che gira accanto al primo. */
.quote-form .wpcf7-spinner { display: none; }

/* Il messaggio di esito. In caso di successo non si vede: al suo posto
   compare il pannello disegnato (#quote-success), vedi assets/js/wp-cf7.js.
   Resta pero' nel DOM e resta leggibile agli screen reader. */
.quote-form .wpcf7-response-output {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  font-size: var(--size-caption);
  color: var(--ink-soft);
}
.quote-form.invalid .wpcf7-response-output,
.quote-form.spam .wpcf7-response-output,
.quote-form.failed .wpcf7-response-output {
  border-color: var(--red-error);
  color: var(--red-error);
}
.quote-form.sent .wpcf7-response-output { display: none; }

/* CF7 monta il form dentro un proprio contenitore: senza questo, il pannello
   di conferma erediterebbe un margine che non gli appartiene. */
.panel .wpcf7 { margin: 0; }

/* --------------------------------------------------------------------------
   CONTENUTO DALL'EDITOR
   Le pagine legali si scrivono a blocchi: qui si copre quello che l'editor
   puo' produrre e che il design system non conosce.
   -------------------------------------------------------------------------- */
.prose figure { margin: var(--space-l) 0; }
.prose figure img { max-width: 100%; height: auto; border-radius: var(--radius-m); }
.prose figcaption { margin-top: var(--space-xs); font-size: var(--size-caption); color: var(--ink-soft); }
.prose blockquote {
  margin: var(--space-l) 0;
  padding-left: var(--space-m);
  border-left: 2px solid var(--green-signal);
  color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-l) 0; }
.prose th, .prose td { padding: var(--space-xs) var(--space-s); border-bottom: 1px solid var(--line); text-align: left; }
.prose code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--mist); font-size: 0.9em; }

.page-links { margin-top: var(--space-xl); font-size: var(--size-caption); }
.page-links a { color: var(--green-signal); }

/* Allineamenti dell'editor dentro una colonna stretta: si tengono dentro,
   altrimenti sfondano la misura di lettura. */
.prose .alignwide,
.prose .alignfull { max-width: 100%; margin-inline: 0; }
.prose .aligncenter { margin-inline: auto; }