/*
WRUniverse accordion fade/slide polish.
CSS-only support for FAQ and any future accordion using:
.faq-item / .faq-question / .faq-answer
or
.accordion-item / .accordion-button / .accordion-panel
*/

.faq-answer,
.accordion-panel {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition:
        max-height .34s ease,
        opacity .24s ease,
        transform .28s ease,
        padding-top .28s ease,
        padding-bottom .28s ease;
    will-change: max-height, opacity, transform;
}

.faq-item.is-open .faq-answer,
.accordion-item.is-open .accordion-panel {
    max-height: 800px;
    opacity: 1;
    transform: translateY(0);
    padding-top: 0 !important;
    padding-bottom: 20px !important;
}

.faq-question,
.accordion-button {
    transition:
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease;
}

.faq-toggle,
.accordion-toggle {
    transition:
        transform .24s ease,
        background-color .22s ease,
        border-color .22s ease;
}

.faq-item.is-open .faq-toggle,
.accordion-item.is-open .accordion-toggle {
    transform: rotate(180deg);
}

.faq-item,
.accordion-item {
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.faq-item:hover,
.accordion-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 55px rgba(0,0,0,.24);
}

@media (prefers-reduced-motion: reduce) {
    .faq-answer,
    .accordion-panel,
    .faq-question,
    .accordion-button,
    .faq-toggle,
    .accordion-toggle,
    .faq-item,
    .accordion-item {
        transition: none !important;
        transform: none !important;
    }
}