/* Stile generale del contenitore */
.faq-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Stile per ogni singolo blocco di FAQ */
.faq-item{
    display: flex;
    padding: 1em;
    margin: 5px;
    flex-direction: column;
    flex-wrap: nowrap;
}

.faq-item.elfq-12{
    width: 100%;
}

.faq-item.elfq-6{
    width: calc(50% - 10px);
}

.faq-item.elfq-4{
    width: calc(33.33333333% - 10px);
}

/* Stile per la domanda */
.faq-item .faq-question {
    width: 100%;
    padding: 0.5em 1em;
    cursor: pointer;
}

/* Il summary e' il comando che apre la risposta: niente marker nativo del browser, in nessun motore */
summary.faq-question {
    display: block;
    list-style: none;
}
summary.faq-question::-webkit-details-marker {
    display: none;
}
summary.faq-question::marker {
    content: none;
}

/* Focus da tastiera sempre visibile, disegnato all'interno: le voci dei template hanno spesso
   overflow:hidden, che taglierebbe un contorno esterno */
summary.faq-question:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* --- Apertura e chiusura: griglia css, 0fr <-> 1fr ---
   L'altezza della risposta non viene mai misurata ne' fissata in pixel: e' il
   motore di layout a interpolarla, quindi font caricati dopo, immagini o un
   resize non producono mai scatti a fine animazione. Il fallback per i browser
   senza transizione delle righe di griglia e' l'apertura istantanea. */
.faq-answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Con JavaScript attivo lo stato visivo lo guida la classe .is-open */
details.faq-item.is-open .faq-answer-wrap {
    grid-template-rows: 1fr;
}

/* Senza JavaScript vale l'apertura nativa di <details> */
details.faq-item[open]:not(.js-anim) .faq-answer-wrap {
    grid-template-rows: 1fr;
}

.faq-answer-wrap > .faq-answer {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    /* anche il padding verticale (che i template danno alla risposta con la classe open) transiziona:
       in chiusura scende a 0 insieme alla griglia, senza gradino finale */
    transition:
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 40ms,
        padding-top 480ms cubic-bezier(0.22, 1, 0.36, 1),
        padding-bottom 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

details.faq-item.is-open .faq-answer-wrap > .faq-answer,
details.faq-item[open]:not(.js-anim) .faq-answer-wrap > .faq-answer {
    opacity: 1;
}

/* Chi chiede meno movimento: apertura e chiusura senza animazione */
@media (prefers-reduced-motion: reduce) {
    .faq-answer-wrap,
    .faq-answer-wrap > .faq-answer {
        transition: none;
    }
}

/* Stile per gli elementi interni della risposta */
.faq-item .faq-answer > * {
    margin: 0;
    line-height: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    letter-spacing: inherit;
}

@media (max-width: 1024px){
    .faq-item{
        width: 100%!important;
    }
}