schnittfest/assets/scss/_faq.scss

@use "variables" as *;

.faq {
    padding: 120px 0 0;

    @include md {
        padding-top: 160px;
    }

    &__inner {
        @include inner;
        display: grid;
        gap: 48px;

        @include md {
            grid-template-columns: 5fr 7fr;
            gap: 64px;
            align-items: start;
        }
    }

    &__head {
        display: grid;
        gap: 24px;

        @include md {
            position: sticky;
            top: 120px;
        }
    }

    &__text {
        max-width: 40ch;
        font-size: 20px;

        a {
            font-weight: 700;
            text-decoration: underline wavy $red;
            text-underline-offset: 4px;
        }
    }

    &__list {
        display: grid;
        gap: 16px;
    }
}

.faq-item {
    border: 3px solid $ink;
    border-radius: $radius;
    background: $cream;
    box-shadow: 5px 5px 0 $ink;
    transition: box-shadow 0.3s $ease, translate 0.3s $ease;

    &:hover {
        translate: -2px -2px;
        box-shadow: 8px 8px 0 $ink;
    }

    &[open] {
        background: $yellow;
    }

    &__question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 24px;
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
            display: none;
        }
    }

    &__title {
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.3;
        font-weight: 800;
    }

    &__icon {
        position: relative;
        flex: none;
        width: 36px;
        height: 36px;
        border: 3px solid $ink;
        border-radius: 50%;
        background: $cream;
        transition: rotate 0.4s $ease;

        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 14px;
            height: 3px;
            background: $ink;
            translate: -50% -50%;
        }

        &::after {
            rotate: 90deg;
        }
    }

    &[open] &__icon {
        rotate: 135deg;
    }

    &__answer {
        padding: 0 24px 24px;
        font-size: 17px;

        ul, ol {
            margin: 8px 0 0 20px;
        }

        ul { list-style: disc; }
        ol { list-style: decimal; }
    }
}