/* ===========================================================
   Componenti condivisi tra più pagine: bottoni, sezione contatti.
   Caricato da base.html su tutto il sito principale.
   =========================================================== */

:root{
  --radius-card:1.25rem;   /* stesso raggio delle schede dell'Hub */
  --radius-field:.6rem;
  --shadow-soft:0 2px 6px rgba(30,30,30,.06), 0 12px 32px rgba(30,30,30,.08);
}

/* ===== Bottoni a pillola =====
   Principale: fondo #007a3f, testo bianco (5.45:1 — #008f4a darebbe 4.18:1,
   sotto soglia per testo normale). Secondario: solo bordo, fondo trasparente.
   Altezza minima 48px per il tocco. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:48px;
  padding:.7rem 1.75rem;
  border:2px solid transparent;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible{ outline:3px solid var(--color-ink); outline-offset:3px; }
.btn svg{ width:1.25em; height:1.25em; fill:currentColor; flex:none; }
/* htmx mette .htmx-request sull'elemento che invia (il form), non sul bottone */
form.htmx-request .btn{ opacity:.6; cursor:wait; }

.btn-primary,
.btn-primary:visited{
  background:var(--color-link-green);
  border-color:var(--color-link-green);
  color:#fff;
}
.btn-primary:hover{ background:var(--color-ink); border-color:var(--color-ink); color:#fff; }

.btn-secondary,
.btn-secondary:visited{
  background:transparent;
  border-color:var(--color-link-green);
  color:var(--color-link-green);
}
.btn-secondary:hover{ background:var(--color-link-green); color:#fff; }

/* Secondario su fondo scuro (sezione Hub): bordo e testo chiari */
.btn-secondary--light,
.btn-secondary--light:visited{
  border-color:var(--color-hub-text);
  color:var(--color-hub-text);
}
.btn-secondary--light:hover{ background:var(--color-hub-text); color:var(--color-hub-bg); }
.btn-secondary--light:focus-visible{ outline-color:var(--color-hub-text); }

/* ===== Sezione contatti =====
   Stesso componente in Contatti, in fondo alla home e alle pagine servizi:
   a sinistra titolo, testo, tempo di risposta e WhatsApp; a destra il
   modulo in un pannello bianco. */
.contact-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  align-items:start;
}
@media(min-width:900px){
  .contact-layout{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:var(--space-6);
  }
}
.contact-intro h1,
.contact-intro h2{ margin-top:0; }
.contact-intro p{ max-width:28rem; }
/* Tempo di risposta: riga a sé, con più peso */
.contact-response{
  color:var(--color-ink);
  font-weight:600;
  font-size:var(--text-lg);
}
.contact-whatsapp{ margin-top:var(--space-4); }
.contact-whatsapp-number{
  margin:.6rem 0 0;
  color:var(--color-text-secondary);
  font-size:var(--text-sm);
}

.contact-panel{
  background:#fff;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:clamp(1.5rem, 3vw, 2.5rem);
}

/* ===== Modulo =====
   Nome e Azienda affiancati, Email e Messaggio a tutta larghezza. Tutti i
   campi con stesso bordo (3.45:1 sul bianco, WCAG 1.4.11). */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-3);
}
.form-field--full{ grid-column:1 / -1; }

.form-field label{
  display:block;
  font-weight:600;
  font-size:1rem;
  margin-bottom:.4rem;
}
.form-field input,
.form-field textarea{
  display:block;
  width:100%;
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.4;
  padding:.7rem .9rem;
  border:1px solid var(--color-field-border);
  border-radius:var(--radius-field);
  background:#fff;
  color:var(--color-ink);
}
.form-field input{ height:3.1rem; }
.form-field textarea{ min-height:9rem; resize:vertical; }
/* Focus: bordo verde (1px di bordo + 1px di ombra = 2px, senza spostare
   il layout). #008f4a sul bianco 4.18:1, sopra la soglia 3:1. */
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--color-brand-green);
  box-shadow:0 0 0 1px var(--color-brand-green);
}
/* Django aggiunge aria-invalid="true" ai campi con errori */
.form-field [aria-invalid="true"]{ border-color:#a4262c; }

.form-error{
  color:#a4262c; /* 7.26:1 su bianco */
  font-size:var(--text-sm);
  margin:.4rem 0 0;
}

.form-actions{ margin-top:var(--space-3); }

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.form-message{
  margin:0 0 var(--space-3);
  padding:.9rem 1.1rem;
  border-left:3px solid var(--color-line);
}
.form-message:last-child{ margin-bottom:0; }
.form-message--success{ border-left-color:var(--color-brand-green); color:var(--color-ink); }
.form-message--warning,
.form-message--error{ border-left-color:#a4262c; }

@media(max-width:800px){
  .form-grid{ grid-template-columns:1fr; }
  .contact-section .btn{ width:100%; }
}

/* ===== Ingresso delle testate (pagine interne e Contatti) =====
   Solo CSS, parte al caricamento, una volta sola: titolo, sottotitolo e
   apertura salgono di pochi pixel in dissolvenza in sequenza ravvicinata,
   e sotto il titolo si disegna da sinistra un filetto verde che resta.
   Nessun elemento viene nascosto da JavaScript: senza script il contenuto
   è visibile. Durata complessiva circa 0,8 s. */
.intro-enter > h1::after{
  content:"";
  display:block;
  width:4.5rem;
  height:3px;
  margin-top:1rem;
  background:var(--color-brand-green);   /* grafica: 4.18:1 su bianco, soglia 3:1 */
  transform-origin:left center;
  animation:intro-line .5s ease-out .2s both;
}
.intro-enter > h1,
.intro-enter > p{ animation:intro-rise .45s ease-out both; }
.intro-enter > :nth-child(2){ animation-delay:.12s; }
.intro-enter > :nth-child(3){ animation-delay:.24s; }
.intro-enter > :nth-child(4){ animation-delay:.34s; }

@keyframes intro-rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
@keyframes intro-line{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

/* Movimento ridotto: nessuna animazione, filetto già disegnato. Serve una
   regola esplicita: quella globale in base.css accorcia le durate ma non i
   ritardi, e gli elementi resterebbero invisibili per qualche istante. */
@media (prefers-reduced-motion: reduce){
  .intro-enter > h1,
  .intro-enter > p,
  .intro-enter > h1::after{ animation:none; }
}