/* ============================================================
   LE CHIAMATE ALL'AZIONE — quarta consegna di design
   Caricato dopo i fogli di pagina e prima di quello del piede.

   Prima c'erano dodici classi a fare il mestiere di quattro, con
   quattro altezze scelte una alla volta. Qui ce ne sono quattro,
   tre misure e sei stati.

   QUATTRO VARIANTI
     primaria    l'azione per cui la pagina esiste. Una sola per
                 schermata: se ce ne sono due, una non lo e'.
     secondaria  un'alternativa vera, non un ripiego.
     terziaria   ripensamento, ritorno, servizio. Quante servono.
     spenta      azione che esistera' ma non ancora.

   TRE MISURE — l'altezza non si sceglie a occhio
     L  60 / 56 sul telefono   azione principale, invio dei moduli
     M  52 / 48                testata, azioni dentro le schede
     S  44 / 44                terziarie e azioni di servizio

   La S non scende mai sotto 44 su nessun formato: e' il minimo
   perche' un pollice colpisca il bersaglio, non una scelta
   estetica.

   LE SUPERFICI
   La variante non cambia, cambia come si veste. Il pulsante
   bianco su fondo blu non e' un componente diverso: e' la
   primaria vista su un altro fondo. Trattarlo come variante a se'
   significherebbe inventarne una nuova a ogni fondo nuovo.

   NAVIGAZIONE ESCLUSA
   Le pillole del menu NON ereditano queste classi. Sono
   navigazione: un menu di sei voci tutte a forma di pulsante non
   ha gerarchia, e accanto alla primaria vera nessuno distingue
   piu' qual e' l'azione della pagina.
   ============================================================ */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--_project-font---border-radius--58);
  font-family: var(--_project-font---project-font--font-family, inherit);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* ------------------------------------------------------------
   LE TRE MISURE
   ------------------------------------------------------------ */
.cta--l { height: 60px; padding: 0 34px; }
.cta--m { height: 52px; padding: 0 26px; }
.cta--s { height: 44px; padding: 0 18px; }

@media screen and (max-width: 767px) {
  .cta--l { height: 56px; }
  .cta--m { height: 48px; }
  /* la S resta 44: sotto non si scende */
}

/* Larghezza piena: non e' una variante ma un modificatore.
   Obbligatorio sul telefono per l'invio dei moduli, vietato sul
   desktop, dove un pulsante largo 680px smette di leggersi come
   pulsante. */
.cta--piena { width: 100%; }

@media screen and (min-width: 992px) {
  .cta--piena.solo-mobile { width: auto; }
}

/* Due comandi a larghezza piena impilati: 8px di stacco, e il
   secondo e' terziario. Mai due rettangoli identici uno
   sull'altro: ci si tocca per sbaglio. */
.cta--piena + .cta--piena { margin-top: 8px; }

/* ------------------------------------------------------------
   LE QUATTRO VARIANTI, su fondo chiaro
   ------------------------------------------------------------ */
.cta--primaria {
  background-color: var(--primary-color);
  color: var(--neutral-01);
}

.cta--secondaria {
  background-color: var(--neutral-01);
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
}

.cta--terziaria {
  background-color: #0000;
  color: var(--primary-color);
  padding-left: 0;
  padding-right: 0;
}

.cta--spenta {
  background-color: var(--disabled-bg-color);
  color: var(--disabled-text);
  cursor: default;
  pointer-events: none;
}

/* ------------------------------------------------------------
   GLI STATI
   ------------------------------------------------------------ */

/* Il ripiego senza libreria: un cambio di fondo morbido. E'
   scritto per primo di proposito, perche' e' anche il
   comportamento quando GSAP non carica e quando qualcuno ha
   chiesto meno animazioni. */
@media (hover: hover) {
  .cta--primaria:hover { background-color: var(--primary-color-hover); }
  .cta--secondaria:hover {
    background-color: var(--primary-color);
    color: var(--neutral-01);
  }
  /* La terziaria non si riempie: diventerebbe un pulsante.
     Le cresce solo un filo da sinistra. */
  .cta--terziaria:hover { color: var(--primary-color-hover); }
  .cta--terziaria:hover .cta-filo { transform: scaleX(1); }
}

.cta-filo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}

/* Pressione: nessun movimento, solo il colore. Sul telefono e'
   lo stato che sostituisce il passaggio del mouse. */
.cta--primaria:active { background-color: var(--primary-color-hover); }
.cta--secondaria:active {
  background-color: var(--primary-color);
  color: var(--neutral-01);
}

.cta:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   OCCUPATO — stato nuovo
   Parte all'invio e dura finche' il server non risponde. NON e'
   lo stato spento: spento vuol dire "non si puo'", occupato vuol
   dire "sto gia' facendo". Confonderli fa credere che il modulo
   sia stato rifiutato.

   Serve piu' sul telefono che sul desktop: in rete mobile fra il
   tocco e la risposta passano secondi, e senza segnale la gente
   preme due volte e arrivano due candidature.
   ------------------------------------------------------------ */
.cta[aria-busy="true"] {
  pointer-events: none;
}

.cta[aria-busy="true"] .cta-girandola {
  display: inline-block;
}

.cta-girandola {
  display: none;
  width: 16px;
  height: 16px;
  flex: none;
  border: 2px solid currentColor;
  border-top-color: #0000;
  border-radius: 100px;
  animation: cta-gira .7s linear infinite;
}

@keyframes cta-gira {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   IL BADGE DELLO STATO SPENTO
   Sta a cavallo del bordo superiore, allineato a destra, meta'
   dentro e meta' fuori, con un anello bianco che lo stacca dal
   fondo grigio.

   ATTENZIONE: il badge esce dai bordi, quindi il pulsante che lo
   ospita NON puo' avere overflow: hidden - che e' invece quello
   che serve all'onda del passaggio del mouse. I due non si
   scontrano davvero, perche' il badge sta solo sullo spento e lo
   spento non ha hover, ma se qualcuno applicasse la classe
   dell'onda a tutti i pulsanti in blocco il badge verrebbe
   tagliato a meta' senza che nessuno se ne accorga.
   ------------------------------------------------------------ */
.cta--spenta {
  overflow: visible;
  margin-top: 6px;
}

.cta-badge {
  position: absolute;
  top: -11px;
  right: 16px;
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--_project-font---border-radius--58);
  background-color: var(--secondary-color);
  box-shadow: 0 0 0 3px var(--neutral-01);
  color: var(--neutral-01);
  font-family: var(--_project-font---project-font--secondary-font, inherit);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   LE SUPERFICI
   I rapporti di contrasto sono quelli reali del design system:
   dove il bianco non passa, il testo diventa scuro.
   ------------------------------------------------------------ */

/* Fondo neutral-02: il solo bordo della secondaria sparisce sul
   grigio verdino, quindi le si da' un fondo bianco pieno. */
.su-neutro .cta--secondaria { background-color: var(--neutral-01); }

/* Fondo blu del marchio. Vietato il gradiente qui: attraversa
   questo stesso blu e buca la parola. */
.su-blu .cta--primaria { background-color: var(--neutral-01); color: var(--primary-color); }
.su-blu .cta--secondaria { background-color: #0000; border-color: var(--neutral-01); color: var(--neutral-01); }
.su-blu .cta--terziaria { color: var(--neutral-01); }
.su-blu .cta:focus-visible { outline-color: var(--neutral-01); }

@media (hover: hover) {
  .su-blu .cta--primaria:hover { background-color: var(--neutral-02); color: var(--primary-color); }
  .su-blu .cta--secondaria:hover { background-color: var(--neutral-01); color: var(--primary-color); }
  .su-blu .cta--terziaria:hover { color: var(--neutral-02); }
}

/* Fondo viola: il bianco qui da' 3.93:1, sotto la soglia. Il
   testo passa a neutral-04, che da' 4.74:1. */
.su-viola .cta--primaria { background-color: var(--neutral-01); color: var(--primary-color); }
.su-viola .cta--secondaria { background-color: #0000; border-color: var(--neutral-04); color: var(--neutral-04); }
.su-viola .cta--terziaria { color: var(--neutral-04); text-decoration: underline; }
.su-viola .cta:focus-visible { outline-color: var(--neutral-01); }

/* Fondo verde: il bianco qui da' 1.34:1, illeggibile. */
.su-verde .cta--primaria { background-color: var(--neutral-04); color: var(--neutral-01); }
.su-verde .cta--secondaria { background-color: #0000; border-color: var(--neutral-04); color: var(--neutral-04); }
.su-verde .cta--terziaria { color: var(--neutral-04); text-decoration: underline; }
.su-verde .cta:focus-visible { outline-color: var(--neutral-04); }

/* Fondo scuro: il blu del marchio su nero stacca 2.53:1 e il
   pulsante affoga. Finche' non esiste un blu pensato per i fondi
   scuri, qui resta il bianco pieno. */
.su-scuro .cta--primaria { background-color: var(--neutral-01); color: var(--neutral-04); }
.su-scuro .cta--secondaria { background-color: #0000; border-color: var(--neutral-01); color: var(--neutral-01); }
.su-scuro .cta--terziaria { color: var(--neutral-01); }
.su-scuro .cta:focus-visible { outline-color: var(--neutral-01); }

/* ------------------------------------------------------------
   AZIONI DISTRUTTIVE
   Nessun pulsante rosso: destructive-text su bianco da' 4.15:1 e
   il fondo rosso col bianco 4.16:1, entrambi sotto la soglia per
   il testo a 16px. In questo design system un pulsante rosso oggi
   non passa, quindi rimuovere e' una terziaria scura sottolineata
   con un'icona esplicita. Il rosso resta dove funziona: gli
   errori dei moduli.
   ------------------------------------------------------------ */
.cta--distruttiva {
  color: var(--neutral-04);
  text-decoration: underline;
}

@media (hover: hover) {
  .cta--distruttiva:hover { color: var(--neutral-04); }
}

/* ------------------------------------------------------------
   L'ONDA DEL PASSAGGIO DEL MOUSE
   Il disegno vero lo fa js/cta.js con GSAP. Qui c'e' solo il
   contenitore, e soprattutto la condizione: l'onda esiste SOLO
   dove c'e' un mouse vero e sopra i 992px. Su uno schermo tocco
   non esiste un "vicino al pulsante", e un bersaglio che si
   sposta sotto il dito e' un bersaglio mancato.
   ------------------------------------------------------------ */
.cta-onda {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .cta--primaria.cta-animata,
  .cta--secondaria.cta-animata {
    overflow: hidden;
  }

  /* IL COLORE DELL'ONDA
     L'onda non e' una decorazione: e' il fondo del passaggio del
     mouse che arriva scorrendo invece che in dissolvenza. Quindi
     il suo colore e' ESATTAMENTE il background-color dello stato
     :hover della stessa variante sulla stessa superficie. Se i
     due divergono si vede uno scalino quando l'onda finisce.
     Il valore di partenza era currentColor, cioe' il colore del
     TESTO: su una primaria blu dipingeva un'onda bianca che
     cancellava la parola mentre la copriva. */
  .cta-animata .cta-onda path { fill: var(--cta-onda); }

  .cta--primaria   { --cta-onda: var(--primary-color-hover); }
  .cta--secondaria { --cta-onda: var(--primary-color); }

  /* su-neutro cambia solo il fondo a riposo, non quello del
     passaggio del mouse: l'onda resta quella di base. */

  .su-blu .cta--primaria   { --cta-onda: var(--neutral-02); }
  .su-blu .cta--secondaria { --cta-onda: var(--neutral-01); }

  /* Viola, verde e scuro non dichiarano un :hover per la
     primaria, e la regola di superficie vince su quella di base
     perche' ha la stessa specificita' ed e' scritta dopo. Il
     fondo quindi non cambia. L'onda dipinge lo stesso scarto che
     userebbe quel :hover se esistesse: il bianco si sporca di
     neutral-02, il quasi nero si schiarisce a neutral-03. */
  .su-viola .cta--primaria { --cta-onda: var(--neutral-02); }
  .su-scuro .cta--primaria { --cta-onda: var(--neutral-02); }
  .su-verde .cta--primaria { --cta-onda: var(--neutral-03); }

  /* La secondaria su viola, verde e scuro e' trasparente con
     bordo e testo neutral-04 o neutral-01: qualsiasi riempimento
     pareggerebbe l'onda al testo e cancellerebbe la parola.
     Finche' quelle superfici non hanno un :hover pieno, li'
     l'onda non gira e resta il cambio di colore morbido. */
  .su-viola .cta--secondaria .cta-onda,
  .su-verde .cta--secondaria .cta-onda,
  .su-scuro .cta--secondaria .cta-onda { display: none; }
  .cta-animata .cta-onda {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .cta-animata .cta-testo {
    position: relative;
    z-index: 1;
  }
}

/* Chi ha chiesto meno animazioni le perde tutte e tiene il
   cambio di fondo: non e' un ripiego di serie B, e' la stessa
   informazione detta senza movimento. */
@media (prefers-reduced-motion: reduce) {
  .cta-animata .cta-onda { display: none; }
  .cta { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
  .cta-girandola { animation-duration: 1.4s; }
}