/*
 * Questions and answers, shown one at a time.
 * Deliberately low-key: colours come from the surrounding page, so it suits light and dark pages alike.
 * Without JavaScript (no .faq-is-carousel class) every question is simply listed.
 */
.faq-carousel {
    max-width: 760px;
    margin: 2rem auto 1rem auto;
    font-size: 0.95rem;
}

.faq-carousel .faq-carousel-title {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.4;
    opacity: 0.6;
    background: none;
    color: inherit;
    border: 0;
    padding: 0;
    margin: 0 0 0.6rem 0;
}

.faq-carousel .faq-q {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    padding: 0;
    margin: 0 0 0.35rem 0;
}

.faq-carousel .faq-slide p {
    line-height: 1.55;
    opacity: 0.85;
    margin: 0 0 0.75rem 0;
}

.faq-carousel .faq-slide a {
    color: inherit;
    text-decoration: underline;
}

/* Carousel mode: slides share one grid cell, so the box is always as tall as the longest answer and never jumps. */
.faq-is-carousel .faq-slides {
    display: grid;
}

.faq-is-carousel .faq-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s;
}

.faq-is-carousel .faq-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.faq-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.faq-prev,
.faq-next {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.5;
    cursor: pointer;
}

.faq-prev:hover,
.faq-next:hover,
.faq-prev:focus-visible,
.faq-next:focus-visible {
    opacity: 1;
}

.faq-dots {
    display: flex;
    gap: 0.1rem;
}

/* Generous click area, small visible dot. */
.faq-dot {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.faq-dot::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.25;
}

.faq-dot[aria-current="true"]::before {
    opacity: 0.85;
}

.faq-dot:focus-visible {
    outline: 1px solid currentColor;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .faq-is-carousel .faq-slide {
        transition: none;
    }
}