/* Studio Profile V2 -- FAQ Accordion
 *
 * HTML structure (from renderer):
 *   .sp-faq__list > .sp-faq-item > .sp-faq-item__q + .sp-faq-item__a
 * Independent toggle -- multiple items can be open simultaneously.
 */

 /*
 * List container
 * ---------------------------------------------------------------- */

.sp-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

 /*
 * Individual FAQ item
 * ---------------------------------------------------------------- */

.sp-faq-item {
    border-bottom: 1px solid var(--color-border);
}

 /*
 * Question (clickable)
 * ---------------------------------------------------------------- */

.sp-faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: background var(--transition-fast);
}

.sp-faq-item__q:hover {
    background: var(--color-bg-hover);
}

 /*
 * Chevron indicator
 * ---------------------------------------------------------------- */

.sp-faq-item__chevron {
    color: var(--color-text-muted);
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}

.sp-faq-item.open .sp-faq-item__chevron {
    transform: rotate(180deg);
}

 /*
 * Answer (collapsible)
 * ---------------------------------------------------------------- */

.sp-faq-item__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.sp-faq-item.open .sp-faq-item__a {
    max-height: 500px;
    padding: 0 0 var(--space-4);
}