/* =====================================================================
   Domande frequenti in home - indice a temi e risposta in evidenza
   (14/10/2026). Caricato solo sulla home e sulle sue varianti.

   Domande e risposte restano quelle del widget FAQ di Elementor (e i dati
   strutturati FAQPage non cambiano): faq.js le legge, le raggruppa per
   tema e costruisce
     - a sinistra l'indice delle domande, raggruppate;
     - a destra il pannello con la risposta aperta e, sotto, una prova
       concreta (confronto, i due dati del preventivo, i passi del cambio...);
     - in fondo la fascia "Non trovi la tua domanda?".
   Su telefono il pannello sparisce e la risposta si apre sotto la domanda.
   Il widget originale resta nella pagina, nascosto: senza lo script si
   vede quello, con la foto, come prima.
   Il selettore lungo serve a battere quello di main.css, che contiene un
   :has() con due classi.
   ===================================================================== */

/* -- Testata: titolo a sinistra, avvertenza a destra; la foto esce ----- */
body .lir-gabbia.lir-fx:has(> .lir-testa .lir-faq__foto){display:block}
/* .lir-testa ha una larghezza massima nelle regole generali: qui la
   testata occupa tutta la gabbia, sulle stesse colonne di indice e pannello */
body .lir-gabbia.lir-fx:has(> .lir-testa .lir-faq__foto) > .lir-testa{margin-bottom:clamp(30px,4vw,52px);max-width:none;width:100%}
body .lir-fx .lir-faq__foto.elementor-widget,
body .lir-fx > .elementor-widget-lir_faq{display:none}
.lir-fx__avviso{display:flex;gap:10px;align-items:flex-start}
.lir-fx__avviso svg{width:18px;height:18px;flex:none;margin-top:5px;color:var(--petrolio-chiaro)}
@media (min-width:980px){
  body .lir-fx > .lir-testa.e-con{
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(36px,4.5vw,56px);align-items:end;
  }
  body .lir-fx > .lir-testa > .elementor-widget{grid-column:1}
  body .lir-fx > .lir-testa > .lir-fx__guida{grid-column:2;grid-row:1 / span 2;align-self:end}
  body .lir-fx > .lir-testa h2{margin-bottom:0}
}

/* -- Indice e pannello -------------------------------------------------- */
.lir-fx__corpo{display:grid;gap:22px}
@media (min-width:980px){.lir-fx__corpo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,4.5vw,56px);align-items:start}}

.lir-fx__gruppo + .lir-fx__gruppo{margin-top:22px}
.lir-fx__nome{display:flex;align-items:center;gap:10px;margin:0;padding-bottom:8px;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--inchiostro-tenue)}
.lir-fx__nome::after{content:"";flex:1;height:1px;background:var(--linea)}
.lir-fx__domanda{position:relative}

/* Il pulsante e' una domanda, non un pulsante del kit: il prefisso batte
   lo stile globale dei pulsanti di Elementor (che tra l'altro impedisce di
   andare a capo: da qui il white-space). */
body .lir-fx .lir-fx__tasto,
body .lir-fx .lir-fx__tasto:hover,
body .lir-fx .lir-fx__tasto:focus,
body .lir-fx .lir-fx__tasto:active{
  appearance:none;box-sizing:border-box;cursor:pointer;width:100%;margin:0;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:14px;
  padding:13px 14px 13px 16px;border:0;border-radius:8px;background:transparent;box-shadow:none;text-align:left;text-transform:none;
  white-space:normal;overflow-wrap:break-word;
  font-family:var(--testo);font-weight:600;font-size:1.02rem;line-height:1.35;letter-spacing:0;color:var(--inchiostro-tenue);
  transition:background 220ms,color 220ms,box-shadow 220ms;
}
body .lir-fx .lir-fx__tasto:hover{color:var(--inchiostro)}
body .lir-fx .lir-fx__domanda.is-aperta .lir-fx__tasto{background:var(--bianco);color:var(--inchiostro);box-shadow:var(--ombra)}
body .lir-fx .lir-fx__tasto:focus{outline:0}
body .lir-fx .lir-fx__tasto:focus-visible{outline:2px solid var(--petrolio);outline-offset:-2px}
.lir-fx__tasto::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--petrolio);transform:scaleY(0);transition:transform 320ms cubic-bezier(.2,.6,.3,1)}
.lir-fx__domanda.is-aperta .lir-fx__tasto::before{transform:scaleY(1)}
.lir-fx__cerchio{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linea);color:var(--petrolio);
  transition:transform 260ms cubic-bezier(.2,.6,.3,1),background 220ms,color 220ms,border-color 220ms}
.lir-fx__cerchio svg{width:11px;height:11px}
.lir-fx__tasto:hover .lir-fx__cerchio,
.lir-fx__domanda.is-aperta .lir-fx__cerchio{background:var(--petrolio);border-color:var(--petrolio);color:#fff}
.lir-fx__domanda.is-aperta .lir-fx__cerchio{transform:translateX(3px)}
.lir-fx__cassetto{display:none}

.lir-fx__pannello{background:var(--bianco);border:1px solid var(--linea);border-radius:14px;overflow:hidden;min-height:470px}
@media (min-width:980px){.lir-fx__pannello{position:sticky;top:clamp(110px,12vw,130px)}}
.lir-fx__risposta{display:none;gap:18px;padding:clamp(26px,3.4vw,40px)}
.lir-fx__risposta.is-attiva{display:grid;animation:lir-fx-entra 420ms cubic-bezier(.2,.6,.3,1)}
@keyframes lir-fx-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lir-fx__tema{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--petrolio-chiaro)}
.lir-fx__risposta h3{margin:0;font-family:var(--titolo);font-weight:600;font-size:clamp(1.4rem,1.15rem + .8vw,1.8rem);line-height:1.18;letter-spacing:-.012em;text-wrap:balance;color:var(--inchiostro)}
.lir-fx__testo p{margin:0 0 .8em;color:var(--inchiostro-tenue);font-size:1.04rem;line-height:1.66;max-width:60ch}
.lir-fx__testo p:last-child{margin-bottom:0}

/* La prova sotto la risposta */
.lir-fx__prova{padding:18px;border-radius:10px;background:var(--fondo-tenue);border:1px solid var(--linea-tenue)}
.lir-fx__prova p{margin:0}
.lir-fx__pt{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-tenue);margin-bottom:12px !important}
.lir-fx__fasi{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lir-fx__fasi span{font-size:.8rem;font-weight:600;color:var(--petrolio);background:var(--petrolio-velo);border-radius:3px;padding:4px 10px}
.lir-fx__fasi i{width:14px;height:1px;background:var(--petrolio-chiaro)}
.lir-fx__albo{display:flex;align-items:center;gap:10px;margin-top:12px !important;font-size:.86rem;color:var(--inchiostro)}
.lir-fx__albo svg{width:20px;height:20px;flex:none;color:var(--petrolio)}
.lir-fx__confronto{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lir-fx__confronto > div{background:var(--bianco);border:1px solid var(--linea-tenue);border-radius:8px;padding:12px 14px}
.lir-fx__confronto > div.is-noi{border-color:var(--petrolio);box-shadow:inset 0 3px 0 var(--petrolio)}
.lir-fx__confronto b{display:block;font-family:var(--titolo);font-weight:600;font-size:.98rem;margin-bottom:6px;color:var(--inchiostro)}
.lir-fx__confronto ul{margin:0;padding:0;list-style:none}
.lir-fx__confronto li{position:relative;margin:0;padding:3px 0 3px 16px;font-size:.84rem;color:var(--inchiostro-tenue)}
.lir-fx__confronto li::before{content:"";position:absolute;left:2px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--linea)}
.lir-fx__confronto .is-noi li::before{background:var(--petrolio-chiaro)}
.lir-fx__ponte{grid-column:1 / -1;text-align:center;font-size:.8rem;color:var(--inchiostro-tenue)}
.lir-fx__campi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lir-fx__campo{display:grid;gap:6px}
.lir-fx__campo span{font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--inchiostro-tenue)}
.lir-fx__campo div{background:var(--bianco);border:1px solid var(--linea);border-radius:3px;padding:10px 12px;font-size:.92rem;color:var(--inchiostro)}
.lir-fx__campo em{font-style:normal;color:#9AAAB1}
.lir-fx__esito{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--inchiostro)}
.lir-fx__esito svg{width:18px;height:18px;flex:none;color:var(--petrolio)}
.lir-fx__passi{display:grid;margin:0;padding:0;list-style:none;counter-reset:lir-fx-passo}
.lir-fx__passi li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding-bottom:14px;counter-increment:lir-fx-passo}
.lir-fx__passi li::before{content:counter(lir-fx-passo);position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--bianco);border:1.5px solid var(--petrolio);color:var(--petrolio);font-family:var(--titolo);font-weight:600;font-size:.86rem}
.lir-fx__passi li:not(:last-child)::after{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--petrolio-velo)}
.lir-fx__passi li:last-child{padding-bottom:0}
.lir-fx__passi li:last-child::before{background:var(--petrolio);color:#fff}
.lir-fx__passi b{display:block;padding-top:4px;font-size:.92rem;line-height:1.3;color:var(--inchiostro)}
.lir-fx__passi span{font-size:.82rem;color:var(--inchiostro-tenue)}
.lir-fx__due{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body .lir-fx__due a{display:grid;gap:4px;padding:12px 14px;border-radius:8px;background:var(--bianco);border:1px solid var(--linea-tenue);text-decoration:none;color:var(--inchiostro);transition:border-color 200ms}
body .lir-fx__due a:hover{border-color:var(--petrolio-chiaro);color:var(--inchiostro)}
.lir-fx__due b{font-size:.92rem}
.lir-fx__due span{font-size:.8rem;color:var(--inchiostro-tenue)}
.lir-fx__sede{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.9rem;color:var(--inchiostro)}
.lir-fx__sede span{font-size:.8rem;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--petrolio);color:#fff}
.lir-fx__nota{display:flex;align-items:center;gap:8px;margin-top:12px !important;font-size:.84rem;color:var(--inchiostro-tenue)}
.lir-fx__nota svg{width:16px;height:16px;flex:none;color:var(--petrolio)}

.lir-fx__piede{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-top:18px;border-top:1px solid var(--linea-tenue)}
.lir-fx__piede span{font-size:.85rem;color:var(--inchiostro-tenue)}
body a.lir-fx__rimando{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:var(--petrolio);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
body a.lir-fx__rimando:hover{color:var(--petrolio-scuro)}
.lir-fx__rimando svg{width:11px;height:11px;transition:transform 200ms cubic-bezier(.2,.6,.3,1)}
.lir-fx__rimando:hover svg{transform:translateX(3px)}

/* -- Fascia finale ------------------------------------------------------ */
.lir-fx__chiusura{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(30px,4vw,48px);padding:22px 26px;border-radius:12px;background:var(--petrolio-scuro);color:#fff}
.lir-fx__chiusura p{margin:0;font-family:var(--titolo);font-weight:600;font-size:1.2rem;line-height:1.3}
.lir-fx__chiusura p span{display:block;margin-top:2px;font-family:var(--testo);font-weight:400;font-size:.9rem;color:#B7CCD4}
body a.lir-fx__bottone{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:var(--raggio-comando);background:#fff;color:var(--petrolio-scuro);text-decoration:none;font-weight:600;font-size:.96rem}
body a.lir-fx__bottone:hover{background:var(--petrolio-velo);color:var(--petrolio-scuro)}
.lir-fx__bottone svg{width:12px;height:12px;transition:transform 200ms cubic-bezier(.2,.6,.3,1)}
.lir-fx__bottone:hover svg{transform:translateX(3px)}

/* -- Telefono: niente pannello, la risposta si apre sotto la domanda ---- */
@media (max-width:979px){
  .lir-fx__pannello{display:none}
  .lir-fx__cassetto{display:grid;grid-template-rows:0fr;transition:grid-template-rows 420ms cubic-bezier(.2,.6,.3,1)}
  .lir-fx__domanda.is-aperta .lir-fx__cassetto{grid-template-rows:1fr}
  .lir-fx__cassetto > div{overflow:hidden;min-height:0}
  .lir-fx__cassetto .lir-fx__risposta{display:grid;padding:14px 4px 22px 16px;animation:none}
  .lir-fx__cassetto .lir-fx__tema,.lir-fx__cassetto h3{display:none}
}
@media (max-width:520px){.lir-fx__confronto,.lir-fx__campi,.lir-fx__due{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .lir-fx__risposta.is-attiva{animation:none}
  .lir-fx__tasto::before,.lir-fx__cerchio,.lir-fx__cassetto,.lir-fx__rimando svg,.lir-fx__bottone svg{transition:none}
}