/* css/faq.css — FAQ Page Specific Styles */

/* Pure CSS plus/minus accordion icon — no Lucide dependency needed.
   Uses two overlapping <span> bars to form a + shape.
   When .is-open is applied, the vertical bar rotates to 0° and fades
   out, leaving only the horizontal bar (minus sign). */

.faq-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-icon span {
    position: absolute;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Horizontal bar (always visible) */
.faq-icon span:first-child {
    background: currentColor;
}

/* Vertical bar (rotates to 0 when open) */
.faq-icon span:last-child {
    background: currentColor;
    transform: rotate(90deg);
}

/* When item is open, rotate vertical bar to match horizontal = minus */
.faq-item.is-open .faq-icon span:last-child {
    transform: rotate(0deg);
    opacity: 0;
}