/* =====================================================================
   FF Theme · pagina Contatti (/contatti/), dopo pagina.css
   Dal concept pagine/federicofloris-contatti-concept.html (blocco «PAGINA CONTATTI»).
   Differenze dal concept:
   - l'animazione del punto «Aperto adesso» si chiama ff-now-pulse: nel concept ridefiniva ff-pulse
     e cambiava anche il punto della barra in basso;
   - i canali sono tutti link (funzionano anche senza JavaScript): la freccia scende solo su «Altro» (data-go);
   - stati senza JavaScript (domande aperte, avviso sotto il modulo).
   ===================================================================== */

/* ===== 01 · stato dello studio ===== */
.ff-now{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);max-width:max-content}
.ff-now p{margin:0;font-size:.95rem}
.ff-now b{font-weight:600}
.ff-now span{color:var(--muted)}
.ff-now-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#2fa86b;box-shadow:0 0 0 4px color-mix(in srgb,#2fa86b 22%,transparent);animation:ff-now-pulse 2.4s ease-in-out infinite}
.ff-now.is-closed .ff-now-dot{background:var(--muted);box-shadow:0 0 0 4px color-mix(in srgb,var(--muted) 18%,transparent);animation:none}
@keyframes ff-now-pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,#2fa86b 10%,transparent)}}

/* ===== 02 · canali: righe grandi, l'etichetta del modulo a destra ===== */
.ff-ch-list{list-style:none;margin:clamp(40px,7vh,72px) 0 0;padding:0;border-top:1px solid var(--line)}
.ff-ch-list li{border-bottom:1px solid var(--line)}
.ff-ch-list a{position:relative;width:100%;display:grid;grid-template-columns:3rem minmax(0,.9fr) minmax(0,1.1fr) auto 2rem;align-items:baseline;gap:8px 24px;padding:clamp(18px,3vh,28px) 0;background:none;border:0;text-align:left;text-decoration:none;cursor:pointer;color:var(--fg);transition:padding var(--ff-t-mid) var(--ff-ease-out)}
.ff-ch-list small{font-size:.72rem;color:var(--accent)}
.ff-ch-list b{font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.ff-ch-list span:not(.ff-sub){color:var(--muted)}
.ff-ch-list em{font-style:normal;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:6px 9px;white-space:nowrap}
.ff-ch-list i{font-style:normal;justify-self:end;transition:transform var(--ff-t-mid) var(--ff-ease-out),color var(--ff-t-fast)}
/* passaggio: la riga si sposta, una linea magenta la attraversa */
.ff-ch-list a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--ff-ease-out)}
.ff-ch-list a:hover,.ff-ch-list a:focus-visible{padding-left:10px}
.ff-ch-list a:hover::after,.ff-ch-list a:focus-visible::after{transform:scaleX(1)}
.ff-ch-list a:hover b,.ff-ch-list a:focus-visible b{color:var(--accent)}
.ff-ch-list a:hover i{transform:translateX(5px);color:var(--accent)}
.ff-ch-list a[data-go]:hover i{transform:translateY(4px)}

/* ===== 03 · scrivimi ===== */
.ff-write-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,120px);margin-top:clamp(40px,7vh,72px);align-items:start}
.ff-ci{margin:0;border-top:1px solid var(--line)}
.ff-ci>div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.ff-ci dt{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:.35em}
.ff-ci dd{margin:0;line-height:1.5;min-width:0}
.ff-ci-mail{font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:600;letter-spacing:-.02em;text-decoration:none;line-height:1.2;overflow-wrap:anywhere}
.ff-ci-mail:hover{color:var(--accent)}
/* email e pulsante Copia centrati sulla stessa riga (vanno a capo insieme se non c'è spazio) */
.ff-ci dd:has(.ff-ci-mail){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ff-ci-map{display:flex;width:max-content;max-width:100%;margin-top:10px}
.ff-ci-small{color:var(--muted);font-size:.9rem}
.ff-hours{border-collapse:collapse;width:100%;font-size:.92rem}
.ff-hours th,.ff-hours td{padding:3px 0;text-align:left;font-weight:400}
.ff-hours th{color:var(--muted);width:7.5rem}
.ff-hours tr.is-today th,.ff-hours tr.is-today td{color:var(--fg);font-weight:600}
.ff-hours tr.is-today th::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px -14px;background:var(--accent);transform:rotate(45deg)}
/* orari: ogni fascia è un blocco che non si spezza; se non c'è spazio va a capo la fascia intera */
.ff-slot-h{white-space:nowrap}
.ff-cmsg{display:grid;gap:22px;min-width:0}
.ff-cmsg-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ff-cmsg .ff-field>span small{text-transform:none;letter-spacing:0;opacity:.8}
.ff-cmsg textarea{min-height:130px}
.ff-cmsg .ff-check a{color:inherit;text-underline-offset:3px}
.ff-cmsg .ff-form-msg{margin:0}
.ff-cmsg-f{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.ff-cmsg-done{display:grid;gap:10px;padding:24px;border:1px solid var(--accent);animation:ff-in 400ms var(--ff-ease-out)}
.ff-cmsg-done:focus{outline:none}
.ff-cmsg-done b{font-size:1.6rem;letter-spacing:-.03em}
.ff-cmsg-done p{margin:0}
.ff-cmsg-nojs{margin:0;padding:10px 14px;border-left:2px solid var(--accent);font-size:.9rem;color:var(--muted)}
/* suggerimento sotto l'argomento del messaggio */
.ff-cmsg-hint{margin:4px 0 0;padding:10px 14px;border-left:2px solid var(--accent);font-size:.9rem;color:var(--muted);animation:ff-in 320ms var(--ff-ease-out)}
.ff-cmsg-hint .ff-link{background:none;border-top:0;border-left:0;border-right:0;padding:0 0 1px;margin:0 4px;cursor:pointer;color:var(--fg);font:inherit;font-weight:600}
.ff-cmsg-hint span{white-space:nowrap}

/* ===== 04 · prima di scrivere (ultima sezione: lascia spazio alla barra in basso) ===== */
.ff-pre-faq{margin-top:clamp(32px,6vh,56px);max-width:62rem}
.ff-pre-faq button{font-size:1.1rem;padding:18px 0}
.ff-pre-faq .ff-fa p{font-size:1rem}
.ff-pre-all{margin-top:clamp(24px,4vh,36px)}
.ff-page .ff-pre{padding-bottom:calc(var(--ff-barh) + clamp(40px,7vh,72px))}
/* senza JavaScript le risposte non si aprono: tutte aperte, senza il segno più */
html:not(.ff-js) .ff-pre-faq .ff-fa{grid-template-rows:1fr}
html:not(.ff-js) .ff-pre-faq button{cursor:default;pointer-events:none}
html:not(.ff-js) .ff-pre-faq .ff-plus{display:none}

/* ===== Larghezze ===== */
@media (max-width:1180px){
  .ff-ch-list a{grid-template-columns:3rem minmax(0,1fr) auto 1.5rem}
  .ff-ch-list span:not(.ff-sub){grid-column:2;grid-row:2;font-size:.92rem}
  .ff-ch-list em{grid-column:3;grid-row:1}
  .ff-ch-list i{grid-column:4;grid-row:1}
}
/* desktop stretto e tablet in due colonne (900–1180): la colonna dei recapiti è stretta, le etichette vanno sopra */
@media (min-width:900px) and (max-width:1180px){
  .ff-ci>div{grid-template-columns:1fr;gap:6px}
  .ff-ci dt{padding-top:0}
}
@media (max-width:899px){
  .ff-write-grid{grid-template-columns:1fr}
  .ff-now{max-width:100%}
}
@media (max-width:599px){
  .ff-ch-list a{grid-template-columns:2.4rem minmax(0,1fr) 1.2rem;gap:6px 12px}
  .ff-ch-list em{display:none}
  .ff-ch-list i{grid-column:3}
  .ff-cmsg-2{grid-template-columns:1fr}
  .ff-ci>div{grid-template-columns:1fr;gap:6px}
  .ff-hours th{width:6.5rem}
  .ff-page .ff-scene.ff-hero .ff-actions{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;margin-inline:0;padding-inline:0}
}
@media (prefers-reduced-motion:reduce){.ff-now-dot{animation:none}}