/*
 * Minty'Lab: FAQ.
 *
 * Built on <details>, so it opens and closes with no JavaScript. The height
 * animation of the mock-up is not reproduced: a <details> cannot be
 * transitioned in every browser yet, and a blunt open is better than an
 * accordion that needs a script to be usable at all.
 */
.mpb-faq__inner {
    position: relative;
    z-index: 1;
}

.mpb-faq__title {
    margin: 0.875rem 0 1.875rem;
}

.ml-faq {
    display: block;
    border-top: 2px solid var(--color-ink);
    max-width: 56.25rem;
}

.ml-faq__item {
    border-bottom: 1px solid var(--color-line);
}

.ml-faq__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: 1.375rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title-sm);
    text-transform: uppercase;
    color: var(--color-ink);
}

.ml-faq__item > summary::-webkit-details-marker {
    display: none;
}

.ml-faq__item > summary:hover {
    color: var(--color-brand-bolder);
}

.ml-faq__item > summary:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--border-radius-sm);
}

.mpb-faq__toggle {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    flex: none;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-line);
    background-color: var(--color-white);
    transition:
        transform 320ms ease,
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base);
}

.ml-faq__item[open] .mpb-faq__toggle {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-mint);
    transform: rotate(45deg);
}

.mpb-faq__answer {
    padding-bottom: var(--spacing-lg);
    max-width: 45rem;
}

.mpb-faq__answer p {
    font-size: 0.96875rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm);
}

.mpb-faq__answer p:last-child {
    margin-bottom: 0;
}