/*
==========================================================================

 PROJECT     : SIGNATURE SPREADS AND TREATS BY DI
 VERSION     : 1.0.0
 AUTHOR      : JB

===========================================================================
*/

.faq-page .faq-category {
    transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.faq-page .faq-category::after {
    transition: width var(--motion-duration-normal) var(--motion-ease-emphasized);
}

@media (hover: hover) {
    .faq-page .faq-category:hover,
    .faq-page .faq-category:focus-visible {
        color: var(--color-primary-dark);
    }
}

.faq-page .faq-category.is-active::after {
    width: 100%;
}

.faq-page .faq-question {
    transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.faq-page .faq-question i {
    transition:
        transform var(--motion-duration-normal) var(--motion-ease-emphasized),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

@media (hover: hover) {
    .faq-page .faq-question:hover,
    .faq-page .faq-question:focus-visible {
        color: var(--color-primary-dark);
    }

    .faq-page .faq-question:hover i,
    .faq-page .faq-question:focus-visible i {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
        color: #ffffff;
    }
}

.faq-page .faq-item.is-open .faq-question i {
    transform: rotate(45deg);
}

.faq-page .faq-group.is-entering {
    animation: faqGroupIn 420ms var(--motion-ease-emphasized);
}

@keyframes faqGroupIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-page .faq-support-icon {
    transition:
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-normal) var(--motion-ease-emphasized);
}

@media (hover: hover) {
    .faq-page .faq-support-item:hover .faq-support-icon,
    .faq-page .faq-support-item:focus-visible .faq-support-icon {
        border-color: var(--color-primary);
        background-color: var(--color-primary);
        color: #ffffff;
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-page .faq-category,
    .faq-page .faq-category::after,
    .faq-page .faq-question,
    .faq-page .faq-question i,
    .faq-page .faq-group.is-entering,
    .faq-page .faq-support-icon {
        transition: none;
        animation: none;
    }

    .faq-page .faq-item.is-open .faq-question i,
    .faq-page .faq-support-item:hover .faq-support-icon {
        transform: none;
    }
}