/**
 * FAQs Page Styles
 */

.tst-faqs-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-sky-blue);
}
.tst-faqs-header {
    text-align: left;
    margin-bottom: var(--spacing-lg);
}
.tst-faqs-title {
    font-size: var(--font-size-h1);
    color: var(--color-blue);
    margin: 0 0 var(--spacing-sm) 0;
    padding-top: var(--spacing-md);
    font-weight: 700;
}
.accordion {
    .accordion-item {
        margin-bottom: 25px;
        border-bottom: none;

        @media screen and (min-width: 768px) {
            margin-bottom: 35px;
        }
        &:nth-of-type(3n + 1) {
            .accordion-header {
                .accordion-button {
                    background-color: var(--color-light-green);

                    &:hover, &:focus-visible, &:not(.collapsed) {
                        background-color: var(--color-dark-green);
                    }
                }
            }
            .accordion-body {
                background-color: var(--color-dark-green);
            }
        }
        &:nth-of-type(3n + 2) {
            .accordion-header {
                .accordion-button {
                    background-color: var(--color-light-blue);

                    &:hover, &:focus-visible, &:not(.collapsed) {
                        background-color: var(--color-blue);
                    }
                }
            }
            .accordion-body {
                background-color: var(--color-blue);
            }
        }
        &:nth-of-type(3n + 3) {
            .accordion-header {
                .accordion-button {
                    background-color: var(--color-gold);

                    &:hover, &:focus-visible, &:not(.collapsed) {
                        background-color: var(--color-copper);
                    }
                }
            }
            .accordion-body {
                background-color: var(--color-copper);
            }
        }
    }
    .accordion-header {
        margin-bottom: 0 !important;

        .accordion-button {
            box-shadow: none;
            padding: var(--spacing-md);
            font-family: var(--font-interstate);
            font-weight: 800;
            font-size: var(--font-size-h4);
            color: #fff;
            line-height: 1.2;
            text-wrap: auto;
            gap: 10px;
            
            &:after {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
                width: 1.25rem !important;
                height: 1.25rem !important;
                background-size: 1.25rem !important;

                @media screen and (min-width: 768px) {
                    width: 1.5rem !important;
                    height: 1.5rem !important;
                    background-size: 1.5rem !important;
                }
                @media screen and (min-width: 992px) {
                    width: 1.75rem !important;
                    height: 1.75rem !important;
                    background-size: 1.75rem !important;
                }
            }
        }
    }
    .accordion-body {
        padding: var(--spacing-md);
        padding-top: 0;

        * {
            color: #fff;

            &:last-child {
                margin-bottom: 0 !important;
            }
        }
        a {
            transition: .2s ease-in-out;

            &:hover, &:focus-visible {
                color: var(--color-sky-blue) !important;
                text-decoration: none;
            }
        }
    }
}