/* Pagina «contatti» (/contatti/, /en/contact/): stili propri del gruppo in-arrivo-contatti, con il prefisso .contatti- .
   Vale il contratto di style.css: nessuna risorsa esterna, animazioni e transizioni solo in @media (prefers-reduced-motion: no-preference),
   stati nascosti solo sotto html.js. */

/* ---------- Intro: testo a sinistra, il biglietto con l'indirizzo a destra ---------- */
.contatti-intro .lead { margin-bottom: var(--space-6); }
.contatti-punti { max-width: 52ch; }
.contatti-punti li span { color: var(--text-muted); }

/* Il biglietto: una carta con il marchio, l'indirizzo grande e il pulsante. Con un puntatore fine si inclina leggermente
   (data-inclina in effetti.js imposta --mx e --my; senza JavaScript o con il movimento ridotto restano 0). */
.contatti-biglietto { position: relative; isolation: isolate; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--ombra-forte); padding: var(--space-8); transform: perspective(1200px) rotateX(calc(var(--my) * -5deg)) rotateY(calc(var(--mx) * 7deg)); }
.contatti-biglietto::before { content: ""; position: absolute; z-index: -1; right: -30%; bottom: -55%; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--primary-soft), transparent 68%); pointer-events: none; }
.contatti-biglietto-testa { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
.contatti-sigillo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--brand-deep), var(--brand-bright)); color: #FFFFFF; box-shadow: 0 8px 20px rgba(30, 123, 255, .3); }
.contatti-biglietto-nome { display: grid; font-weight: 700; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.01em; }
.contatti-biglietto-nome small { font-weight: 500; font-size: .8125rem; color: var(--text-muted); letter-spacing: 0; }
.contatti-indirizzo { margin-bottom: var(--space-6); }
.contatti-indirizzo .mail-grande { color: var(--text); text-decoration-color: var(--brand-bright); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.contatti-indirizzo .mail-grande:hover { color: var(--primary); }
.contatti-biglietto .actions { margin-bottom: 0; }
/* tablet: il biglietto non si allarga a tutta la colonna */
@media (max-width: 899.98px) { .contatti-biglietto { max-width: 560px; margin-inline: auto; } }
/* La rotta (decorativa): da te a noi, un punto che viaggia lungo una linea tratteggiata. La linea e' un container (inline-size):
   il punto si muove con transform in unita' cqw, non cambiando left, cosi' il ciclo non rifa' il layout */
.contatti-rotta { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-8) 0 0; font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.contatti-rotta-linea { flex: 1; position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px); container-type: inline-size; }
.contatti-rotta-linea i { position: absolute; top: -5px; left: calc(100% - 12px); display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-bright); box-shadow: 0 0 0 4px rgba(30, 123, 255, .22); }

/* ---------- Cosa scriverci: due carte con elenchi ---------- */
.contatti-elenco { gap: var(--space-2); }
.contatti-elenco .ico { width: 20px; height: 20px; margin: 3px 0 0; color: var(--success); }
.contatti-elenco li span { color: var(--text-muted); }

/* ---------- Modulo di contatto (ADR-0043): compare solo con JavaScript e con la sfida dell'API (contatto.js toglie `hidden`);
   senza, la pagina resta com'era, con l'indirizzo. Campi nativi con etichetta, bordi a 4,5:1 (--text-muted), bersagli di 44 px,
   errori in rosso con il testo (mai solo il colore), tema chiaro e scuro dai token. ---------- */
#scrivici[hidden], .contatti-modulo [hidden] { display: none; }
.contatti-modulo-blocco { margin-top: var(--space-8); }
.contatti-modulo-carta { max-width: 860px; margin-inline: auto; padding: var(--space-8); }
.contatti-modulo-testa { margin-bottom: var(--space-6); }
.contatti-modulo-testa h3 { font-size: 1.5rem; }
.contatti-modulo { display: grid; gap: var(--space-6) var(--space-4); }
@media (min-width: 720px) { .contatti-modulo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contatti-campo-largo { grid-column: 1 / -1; }
.contatti-campo { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.contatti-campo label { font-weight: 600; color: var(--text); }
.contatti-facoltativo { font-weight: 500; color: var(--text-muted); }
.contatti-campo input:not([type="checkbox"]), .contatti-campo textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); font: inherit; font-size: 1rem; line-height: 1.4; color: var(--text);
  background: var(--bg); border: 1.5px solid var(--text-muted); border-radius: var(--radius-s); }
.contatti-campo textarea { min-height: 168px; resize: vertical; }
.contatti-campo input:focus-visible, .contatti-campo textarea:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-color: var(--primary); }
.contatti-campo [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.contatti-modulo p.contatti-nota-campo { margin: 0; font-size: .9375rem; color: var(--text-muted); }
.contatti-modulo p.contatti-errore { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--danger); }
.contatti-consenso { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px; }
/* area di tocco di 44 px attorno alla casella da 24 (UI.md, WCAG 2.5.5): e' parte dell'etichetta, quindi un tocco la spunta; la casella resta sopra */
.contatti-consenso label::before { content: ""; position: absolute; top: 0; left: -10px; width: 44px; height: 44px; }
.contatti-consenso input { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; margin: 10px 0 0; accent-color: var(--primary); }
.contatti-consenso label { padding: var(--space-2) 0; font-weight: 500; }
.contatti-consenso input:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.contatti-consenso input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
/* campo esca: fuori dallo schermo e fuori dall'albero dell'accessibilita' (aria-hidden, tabindex -1); i programmi lo riempiono */
.contatti-esca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contatti-invio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.contatti-modulo .btn .ico { width: 20px; height: 20px; margin: 0; color: currentColor; }
.contatti-modulo .btn[aria-disabled="true"] { cursor: progress; }
.contatti-modulo p.contatti-verifica { display: flex; align-items: flex-start; gap: var(--space-2); flex: 1 1 260px; margin: 0; font-size: .9375rem; }
.contatti-verifica .ico { margin: 2px 0 0; color: var(--success); }
.contatti-modulo p.contatti-esito { margin: 0; font-weight: 600; color: var(--text); border-radius: var(--radius-s); }
.contatti-esito:not(:empty) { padding: var(--space-3) var(--space-4); background: var(--primary-soft); }
.contatti-esito[data-tipo="ok"] { background: var(--success-soft); color: var(--success); }
.contatti-modulo p.contatti-esito[data-tipo="ok"] { color: var(--success); }
.contatti-modulo p.contatti-esito[data-tipo="errore"] { color: var(--danger); background: var(--danger-soft); }
.contatti-esito:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (max-width: 639.98px) { .contatti-modulo-carta { padding: var(--space-6) var(--space-4); } .contatti-invio .btn { width: 100%; } }

/* ---------- Nota sulla privacy: come il «Parliamo chiaro», con il lucchetto ---------- */
.contatti-nota { border-left-color: var(--success); }
.contatti-nota .ico { color: var(--success); }

/* ---------- Movimento (solo chi non chiede di ridurlo) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .contatti-biglietto { transition: transform .3s ease; }
  .contatti-rotta-linea i { animation: contatti-viaggio 5s ease-in-out infinite; }
}
@keyframes contatti-viaggio { 0% { transform: translateX(calc(12px - 100cqw)); opacity: 0; } 8% { opacity: 1; } 70% { transform: none; opacity: 1; } 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }