/* ==========================================================================
   moveIn – sezione FAQ (#faq): titolo a sinistra che resta in vista, domande a destra
   come elenco numerato con righe sottili; la domanda aperta diventa una scheda bianca.
   Solo stili: il testo è in about.php ($t['faq'], lo stesso del JSON-LD FAQPage).
   ========================================================================== */

#faq { counter-reset: mi-faq; interpolate-size: allow-keywords; }
#faq .lp-faq-wrap {
    max-width: 1160px; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 72px; align-items: start;
}
#faq .lp-section-head { position: sticky; top: 110px; margin: 0; }
#faq .lp-section-head h2 { text-wrap: balance; }
#faq .mi-faq-more { margin: 22px 0 0; font-size: .98rem; color: var(--lp-muted, #55607a); }
#faq .mi-faq-more a {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 18px;
    border: 1px solid var(--lp-line, #e3e8f2); border-radius: 999px; background: #fff;
    color: var(--lp-blue-dark, #2a5191); font-weight: 500; text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#faq .mi-faq-more a:hover { border-color: var(--lp-blue, #3a68ad); box-shadow: 0 8px 20px -14px rgba(22, 41, 74, .45); }

/* Elenco */
#faq .lp-faq { gap: 4px; }
#faq .lp-faq details {
    counter-increment: mi-faq;
    background: transparent; border: 0; border-bottom: 1px solid var(--lp-line, #e3e8f2); border-radius: 0;
    transition: background-color .25s ease, box-shadow .25s ease, border-radius .25s ease;
}
#faq .lp-faq details[open] {
    background: #fff; border-radius: 20px; border-bottom-color: transparent;
    box-shadow: 0 20px 44px -28px rgba(22, 41, 74, .4);
}
#faq .lp-faq summary { justify-content: flex-start; align-items: center; gap: 18px; padding: 22px 20px; }
#faq .lp-faq summary::before {   /* numero della domanda */
    content: counter(mi-faq, decimal-leading-zero); flex: none; width: 28px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .95rem; color: var(--lp-gold, #d6a02a);
}
#faq .lp-faq summary h3 { flex: 1; font-size: 1.08rem; font-weight: 500; line-height: 1.4; transition: color .2s ease; }
#faq .lp-faq summary:hover h3 { color: var(--lp-blue-dark, #2a5191); }
/* più in un cerchio: ruota e diventa × quando la risposta è aperta */
#faq .lp-faq summary::after, #faq .lp-faq details[open] summary::after {
    content: ''; flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--lp-line, #e3e8f2); background-color: #fff; color: var(--lp-blue, #3a68ad);
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat;
    transition: transform .3s cubic-bezier(.22, .7, .2, 1), background-color .2s ease, color .2s ease, border-color .2s ease;
}
#faq .lp-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--lp-blue, #3a68ad); border-color: var(--lp-blue, #3a68ad); color: #fff; }
#faq .lp-faq details p { padding: 0 72px 24px 66px; line-height: 1.65; }
/* apertura morbida dove il browser lo permette (altrove si apre di colpo, come prima) */
#faq .lp-faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size .35s cubic-bezier(.22, .7, .2, 1), content-visibility .35s allow-discrete; }
#faq .lp-faq details[open]::details-content { block-size: auto; }

@media (max-width: 900px) {
    #faq .lp-faq-wrap { grid-template-columns: 1fr; gap: 28px; }
    #faq .lp-section-head { position: static; }
}
@media (max-width: 600px) {
    #faq .lp-faq summary { gap: 12px; padding: 18px 14px; }
    #faq .lp-faq summary::before { width: 22px; font-size: .85rem; }
    #faq .lp-faq summary h3 { font-size: 1rem; }
    #faq .lp-faq details p { padding: 0 16px 20px 48px; }
}
@media (prefers-reduced-motion: reduce) {
    #faq .lp-faq details, #faq .lp-faq summary::after, #faq .lp-faq details::details-content { transition: none; }
}

/* ==========================================================================
   Sfondo blu (come la fascia dei numeri); la risposta aperta resta una scheda bianca
   ========================================================================== */
#faq.lp-section-tint { position: relative; isolation: isolate; background: var(--lp-blue-deep, #16294a); color: #fff; }
#faq::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(600px 300px at 8% 0%, rgba(58, 104, 173, .55), transparent 70%),
                radial-gradient(700px 360px at 95% 100%, rgba(58, 104, 173, .55), transparent 70%);
}
#faq .lp-kicker { color: #9fb8e6; }
#faq h2 { color: #fff; }
#faq .mi-faq-more { color: rgba(255, 255, 255, .72); }
#faq .mi-faq-more a { border-color: transparent; }
#faq .lp-faq details { border-bottom-color: rgba(255, 255, 255, .14); }
#faq .lp-faq summary h3 { color: #fff; }
#faq .lp-faq summary:hover h3 { color: #cfe0ff; }
#faq .lp-faq summary::after { background-color: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
#faq .lp-faq details[open] summary h3 { color: var(--lp-ink, #16213a); }
#faq .lp-faq details[open] summary::after { background-color: var(--lp-blue, #3a68ad); border-color: var(--lp-blue, #3a68ad); color: #fff; }
#faq .lp-faq details[open] { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); }

/* banner "Pronto a partire?" subito dopo le FAQ: un po' di respiro tra i due blocchi blu */
#faq + .lp-final { padding-top: 88px; }
@media (max-width: 600px) { #faq + .lp-final { padding-top: 56px; } }