/*
 * FAQ accordion items, used inside sections/home-faq-contact.php
 * (28-faq-contact.css owns the section, the grid and the form card). Built
 * on native <details>/<summary> - open/close, keyboard and screen reader
 * support all come from the browser, no JS. Only the marker is restyled.
 *
 * The plate itself is the shared .accordion-card (00-accordion-card.css);
 * this file owns the marker, the question row and the answer. The
 * open/close marker is the round accent-tinted badge used by the hero
 * bullets, the "what you get" benefits and the testimonial quote mark -
 * plus turns into minus when the item is open.
 */

.faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.83vw;
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.04vw;
    font-size: 1.04vw;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
}

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

.faq-item__question::after {
    content: "+";
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.98vw;
    height: 1.98vw;
    border-radius: 50%;
    background: rgba(47, 111, 237, 0.1);
    color: var(--color-accent);
    font-size: 1.25vw;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-item[open] .faq-item__question::after {
    content: "\2212";
    background: var(--color-accent);
    color: #fff;
}

.faq-item__answer {
    color: var(--color-text-muted);
    margin: 1.04vw 0 0;
    padding-top: 1.04vw;
    border-top: 1px solid var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
    .faq-item__question::after {
        transition: none;
    }
}

@media only screen and (max-width: 767.98px) {
    .faq__list {
        gap: 3.2vw;
    }

    .faq-item__question {
        gap: 4vw;
        font-size: 4.27vw;
    }

    .faq-item__question::after {
        width: 8.53vw;
        height: 8.53vw;
        font-size: 5.33vw;
    }

    .faq-item__answer {
        font-size: 3.73vw;
        margin: 4vw 0 0;
        padding-top: 4vw;
    }
}