/*
=========================================================
FAQ page
=========================================================
*/

.faq-page {
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            rgba(239, 249, 255, .96) 0%,
            rgba(255, 255, 255, 1) 36%
        );
}


/*
=========================================================
FAQ hero
=========================================================
*/

.faq-hero {
    padding:
        clamp(3.5rem, 8vw, 6rem)
        0
        clamp(2.75rem, 6vw, 4.5rem);
}

.faq-hero__title {
    max-width: 900px;

    margin: 0;

    color: var(--color-text);

    font-size:
        clamp(
            2.5rem,
            6vw,
            5.2rem
        );

    font-weight: var(--font-weight-bold);
    line-height: 1.03;
}

.faq-hero__description {
    max-width: 760px;

    margin:
        var(--space-xl)
        0
        0;

    color: var(--color-text-light);

    font-size: var(--font-size-lg);
    line-height: 1.75;
}


/*
=========================================================
FAQ content
=========================================================
*/

.faq-content {
    padding:
        0
        0
        clamp(5rem, 10vw, 8rem);
}

.faq-list {
    display: grid;

    gap: var(--space-md);

    max-width: 1040px;
    margin-inline: auto;
}


/*
=========================================================
FAQ item
=========================================================
*/

.faq-item {
    overflow: hidden;

    border:
        1px solid
        rgba(77, 181, 247, .18);

    border-radius: var(--radius-xl);

    background:
        rgba(255, 255, 255, .96);

    box-shadow: var(--shadow-sm);

    transition:
        height .36s ease,
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}

.faq-item:hover {
    transform: translateY(-2px);

    border-color:
        rgba(77, 181, 247, .38);

    box-shadow: var(--shadow-md);
}

.faq-item[open] {
    border-color:
        rgba(77, 181, 247, .42);

    box-shadow: var(--shadow-md);
}

.faq-item.is-animating {
    pointer-events: none;
}

.faq-item__question {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: var(--space-lg);

    padding:
        var(--space-xl);

    color: var(--color-text);

    cursor: pointer;

    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question:focus-visible {
    outline:
        3px solid
        rgba(77, 181, 247, .32);

    outline-offset: -5px;
}

.faq-item__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    color: var(--color-primary-strong);

    background:
        rgba(110, 198, 255, .16);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.faq-item:nth-child(3n + 2)
.faq-item__number {
    color: var(--color-secondary-strong);

    background:
        rgba(154, 214, 157, .22);
}

.faq-item:nth-child(3n)
.faq-item__number {
    color: var(--color-warning-strong);

    background:
        rgba(255, 209, 102, .26);
}

.faq-item__question-text {
    font-size:
        clamp(
            var(--font-size-lg),
            2vw,
            1.35rem
        );

    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

.faq-item__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(77, 181, 247, .22);

    border-radius: 50%;

    color: var(--color-primary-strong);

    background:
        rgba(239, 249, 255, .9);

    font-size: 1.5rem;
    font-weight: var(--font-weight-normal);
    line-height: 1;

    transition:
        transform .32s ease,
        color var(--transition-normal),
        background-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.faq-item[open] .faq-item__toggle {
    transform: rotate(45deg);

    color: var(--color-text);

    background-color: var(--color-primary-hover);

    box-shadow:
        0 7px 16px
        rgba(77, 181, 247, .24);
}

.faq-item__answer {
    overflow: hidden;

    padding:
        0
        calc(
            var(--space-xl)
            + 48px
            + var(--space-lg)
        )
        var(--space-xl);

    color: var(--color-text-light);

    font-size: var(--font-size-md);
    line-height: 1.8;

    opacity: 0;

    transform: translateY(-8px);

    transition:
        opacity .26s ease,
        transform .32s ease;
}

.faq-item[open] .faq-item__answer {
    opacity: 1;

    transform: translateY(0);
}

.faq-item__answer p {
    margin:
        0
        0
        var(--space-md);
}

.faq-item__answer p:last-child {
    margin-bottom: 0;
}


/*
=========================================================
Empty state
=========================================================
*/

.faq-empty {
    max-width: 700px;

    margin-inline: auto;

    padding:
        clamp(2.5rem, 7vw, 4.5rem);

    border:
        1px dashed
        rgba(77, 181, 247, .36);

    border-radius: var(--radius-xl);

    background:
        rgba(248, 253, 255, .84);

    text-align: center;
}

.faq-empty__icon {
    display: grid;
    place-items: center;

    width: 76px;
    height: 76px;

    margin-inline: auto;

    border-radius: 50%;

    color: var(--color-primary-strong);

    background:
        rgba(110, 198, 255, .16);

    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

.faq-empty__title {
    margin:
        var(--space-xl)
        0
        0;

    color: var(--color-text);

    font-size: var(--font-size-2xl);
}

.faq-empty__text {
    max-width: 520px;

    margin:
        var(--space-md)
        auto
        0;

    color: var(--color-text-light);

    line-height: 1.7;
}


/*
=========================================================
Responsive
=========================================================
*/

@media (max-width: 767.98px) {
    .faq-item__question {
        gap: var(--space-md);

        padding: var(--space-lg);
    }

    .faq-item__number {
        width: 42px;
        height: 42px;
    }

    .faq-item__toggle {
        width: 38px;
        height: 38px;
    }

    .faq-item__answer {
        padding:
            0
            var(--space-lg)
            var(--space-lg);
    }
}

@media (max-width: 575.98px) {
    .faq-hero__description {
        font-size: var(--font-size-md);
    }

    .faq-item__question {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .faq-item__number {
        display: none;
    }

    .faq-item__question-text {
        font-size: var(--font-size-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-item__toggle,
    .faq-item__answer {
        transition: none;
    }

    .faq-item:hover {
        transform: none;
    }

    .faq-item__answer,
    .faq-item[open] .faq-item__answer {
        opacity: 1;

        transform: none;
    }
}