/* Widget "Lascia un messaggio": un <details>, così la riga è sempre
   visibile e il form compare solo a chi ha davvero una domanda.
   Si apre nel flusso, non come popover sovrapposto: viveva nell'angolo
   del footer, ora è contenuto di pagina sopra al footer, e un pannello
   in posizione assoluta coprirebbe le FAQ che stanno sopra. In più il
   brand non usa ombre (--shadow-lg: none), quindi un pannello flottante
   non avrebbe niente che lo stacchi dallo sfondo. */
.c-message-widget {
  max-width: var(--space-480);
}

/* Sottolineatura piena come ogni altro link della pagina: il tratteggio
   lo faceva sembrare un'altra cosa, ma apre un form come un link apre
   una pagina. Colore della riga e accento all'hover li dà il tema. */
.c-message-widget summary {
  list-style: none;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
}

.c-message-widget summary::-webkit-details-marker {
  display: none;
}

/* scroll-margin-bottom: js/message-widget.js allinea il fondo del
   pannello al fondo della viewport — senza questo resterebbe appiccicato
   al bordo dello schermo. */
.c-message-widget__panel {
  scroll-margin-bottom: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-12);
  padding: var(--space-18);
  border-radius: var(--radius-8);
  background: var(--color-background);
  border: var(--border-width-1) solid var(--color-border);
}

/* .c-form__input porta flex: 999 1 var(--space-240), dimensionato per il
   form in riga dell'hero. In colonna quel basis diventa un'altezza e la
   casella email viene alta 240px: qui ogni campo sta alto quanto serve. */
.c-message-widget__panel .c-form__input {
  flex: 0 0 auto;
}

.c-message-widget__panel textarea.c-form__input {
  min-height: var(--space-120);
}

/* Il bottone non si allarga a tutta la colonna: è un invio, non la CTA
   principale della pagina. */
.c-message-widget__panel .c-button {
  align-self: start;
}

/* Il summary è un link a tutti gli effetti: stesso trattamento di `a`
   in base.css — colore del testo, riga grigia, accento all'hover. */
.c-message-widget summary {
  color: inherit;
  text-decoration-color: var(--color-grey);
  text-underline-offset: 0.15em;
}

.c-message-widget summary:hover {
  text-decoration-color: var(--color-accent);
}

.c-message-widget__panel {
  border-radius: var(--radius-4);
}