/* ═══════════════════════════════════════════════════════════════════════════
   fab.css — menu contatti radiale, in pagina volutamente solo mobile.
   Colori e forma appartengono al tema; il modulo dà soltanto posizione,
   movimento e area di tocco.

   Il file è diviso in due: **com'è fatto** (sempre definito) e **dove sta**
   (fisso in basso a destra, solo sotto i 780 px). Serve perché una vetrina o
   un'anteprima possano mostrare il pulsante anche su schermo largo, dentro un
   riquadro, senza dover riscrivere l'aspetto da capo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── com'è fatto ────────────────────────────────────────────────────────── */
.fab-radiale { display: none; width: 3rem; height: 3rem; z-index: var(--fab-livello, 40); }
.fab-radiale ul { margin: 0; padding: 0; list-style: none; }
.fab-radiale li {
  position: absolute; right: 0; bottom: 0;
  opacity: 0; pointer-events: none;
  transform: translate3d(0,0,0) scale(.94);
  transition: transform 220ms cubic-bezier(.23,1,.32,1) var(--fab-ritardo, 0ms),
              opacity 220ms cubic-bezier(.23,1,.32,1) var(--fab-ritardo, 0ms);
}
.fab-radiale.fab-aperta li {
  opacity: 1; pointer-events: auto;
  transform: translate3d(var(--fab-x, 0),var(--fab-y, 0),0) scale(1);
}
.fab-radiale a, .fab-radiale button {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 0; border-radius: var(--fab-raggio, 999px);
  color: var(--fab-contrasto, Canvas);
  background: var(--fab-fondo, CanvasText);
}
.fab-radiale a { text-decoration: none; }
.fab-radiale button { position: relative; z-index: 1; cursor: pointer; }
.fab-radiale button::before, .fab-radiale button::after {
  content: ""; position: absolute; width: 1rem; height: 2px;
  background: currentColor;
  transition: transform 220ms cubic-bezier(.23,1,.32,1);
}
.fab-radiale button::after { transform: rotate(90deg); }
.fab-radiale.fab-aperta button::before { transform: rotate(45deg); }
.fab-radiale.fab-aperta button::after { transform: rotate(-45deg); }
.fab-etichetta {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── dove sta ───────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .fab-radiale {
    display: block; position: fixed;
    right: max(var(--fab-bordo, 1rem), env(safe-area-inset-right));
    bottom: max(var(--fab-bordo, 1rem), env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab-radiale li, .fab-radiale button::before, .fab-radiale button::after { transition: none; }
}