/* FAQ / Accordion Block Styles */

.faq-accordion {
    --faq-accordion-transition-duration: .3s;

    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    .faq-accordion-list {
        margin-top: .5rem;
    }
}

.faq-accordion-list {
    .faq-accordion-item {
        border-bottom: 1px solid var(--wp--preset--color--border-03, #e0e0e0);

        .faq-accordion-heading {
            margin: 0;
        }

        .faq-accordion-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            border: none;
            font: inherit;
            font-size: 1.125rem;
            text-align: left;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            gap: 1rem;
            padding: 1.5rem 1rem;
            background-color: var(--wp--preset--color--bg-05);
            transition: background-color var(--faq-accordion-transition-duration) ease;

            .faq-accordion-icon {
                position: relative;
                flex-shrink: 0;
                width: 1.25rem;
                height: 1.25rem;

                &::before, &::after {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 0.875rem;
                    height: 2px;
                    transform: translate(-50%, -50%);
                    background-color: currentColor;
                    border-radius: 2px;
                    transition: transform var(--faq-accordion-transition-duration) ease;
                }

                &::after {
                    width: 2px;
                    height: 0.875rem;
                }
            }
        }

        &:first-child {
            .faq-accordion-trigger {
                border-radius: .25rem .25rem 0 0;
            }
        }

        &:last-child {
            border: none;

            .faq-accordion-trigger {
                border-radius: 0 0 .25rem .25rem;
            }
        }

        .faq-accordion-content-wrapper {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows var(--faq-accordion-transition-duration) ease;

            > div {
                overflow: hidden;
            }
        }

        .faq-accordion-content-inner {
            padding: 0 1rem 1.5rem;
        }

        &.is-open {
            .faq-accordion-trigger {
                background-color: var(--wp--preset--color--bg-white);

                .faq-accordion-icon::after {
                    transform: translate(-50%, -50%) rotate(90deg);
                    opacity: 0;
                }
            }

            .faq-accordion-content-wrapper {
                grid-template-rows: 1fr;
            }
        }
    }

    @media (min-width: 64rem) {
        .faq-accordion-item {
            .faq-accordion-trigger {
                padding: 2.5rem 1.5rem 2.5rem 2rem;
            }

            .faq-accordion-content-inner {
                padding: 0 4rem 2.5rem 2rem;
            }
        }
    }
}

.faq-accordion-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}