FAQ Accordion

<ul class="faq-accordion-list">
    <li class="faq-accordion-item">
        <button type="button" class="faq-accordion-btn">
            <h3 class="faq-accordion-title">כותרת השאלה הראשונה?</h3>
            <span class="faq-icon"></span>
        </button>
        <div class="faq-accordion-content">
            <div class="faq-content-inner">
                כאן נכנסת התשובה המפורטת לשאלה. האקורדיון יחשב את הגובה אוטומטית.
            </div>
        </div>
    </li>
    <li class="faq-accordion-item">
        <button type="button" class="faq-accordion-btn">
            <h3 class="faq-accordion-title">כותרת השאלה השנייה?</h3>
            <span class="faq-icon"></span>
        </button>
        <div class="faq-accordion-content">
            <div class="faq-content-inner">
                עוד תשובה מפורטת שתופיע בלחיצה אנימטיבית.
            </div>
        </div>
    </li>
</ul>

.faq-accordion-list {
    display: flex;
    width: 100%;
    gap: 12px;
    flex-direction: column;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.faq-accordion-item {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}
.faq-accordion-item.active {
    border-color: #71F494;
    background: rgba(113, 244, 148, 0.05);
}
.faq-accordion-btn {
    background: transparent;
    display: flex;
    width: 100%;
    align-items: center;
    padding: 20px 24px;
    gap: 20px;
    text-align: right;
    justify-content: space-between;
    cursor: pointer;
    border: none;
    color: #f8fafc;
    font-family: inherit;
    transition: all 0.2s ease;
}
.faq-accordion-btn:hover,
.faq-accordion-btn:focus-visible {
    background: rgba(255, 255, 255, 0.05);
}
.faq-accordion-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}
.faq-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
    background: #94a3b8;
    position: absolute;
    content: "";
    transition: all 0.3s ease;
}
.faq-icon::before {
    width: 16px;
    height: 2px;
    left: 2px;
    top: 9px;
}
.faq-icon::after {
    width: 2px;
    height: 16px;
    top: 2px;
    left: 9px;
}
.faq-accordion-item.active .faq-icon::before,
.faq-accordion-item.active .faq-icon::after {
    background: #71F494;
}
.faq-accordion-item.active .faq-icon::before {
    transform: scale(0.8, 1);
}
.faq-accordion-item.active .faq-icon::after {
    transform: scale(1, 0);
}
.faq-accordion-content {
    width: 100%;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-accordion-item:not(.active) .faq-accordion-content {
    max-height: 0 !important;
}
.faq-content-inner {
    color: #94a3b8;
    font-size: 16px;
    line-height: 1.6;
    padding: 0 24px 24px 24px;
}

document.addEventListener("DOMContentLoaded", function() {
    const items = document.querySelectorAll('.faq-accordion-item');
    if (!items.length) return;

    // 1. הזרקת מאפייני נגישות דינמיים
    items.forEach((item, index) => {
        const btn = item.querySelector('.faq-accordion-btn');
        const content = item.querySelector('.faq-accordion-content');

        if (btn && content) {
            const btnId = 'faq-btn-' + index + '-' + Math.floor(Math.random() * 1000);
            const contentId = 'faq-text-' + index + '-' + Math.floor(Math.random() * 1000);

            btn.id = btnId;
            btn.setAttribute('aria-controls', contentId);
            btn.setAttribute('aria-expanded', item.classList.contains('active') ? 'true' : 'false');

            content.id = contentId;
            content.setAttribute('role', 'region');
            content.setAttribute('aria-labelledby', btnId);
        }
    });

    // 2. עדכון גובה דינמי לאקורדיונים
    function updateAccordionHeights() {
        items.forEach(item => {
            const content = item.querySelector('.faq-accordion-content');
            const inner = item.querySelector('.faq-content-inner');
            if (content && inner) {
                content.style.maxHeight = inner.offsetHeight + 'px';
            }
        });
    }

    // הפעלה בטעינה וגם אחרי שפונטים ותמונות נטענו במלואם (קריטי לוורדפרס)
    updateAccordionHeights();
    window.addEventListener('load', updateAccordionHeights);

    // עדכון גבהים בשינוי גודל מסך
    let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            updateAccordionHeights();
        }, 150);
    });

    // 3. לוגיקת הלחיצה והפתיחה
    items.forEach(item => {
        const btn = item.querySelector('.faq-accordion-btn');
        if (!btn) return;

        btn.addEventListener('click', () => {
            const isActive = item.classList.contains('active');
            
            // סגירת כל שאר האקורדיונים
            items.forEach(otherItem => {
                otherItem.classList.remove('active');
                const otherBtn = otherItem.querySelector('.faq-accordion-btn');
                if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');
            });

            // פתיחת האקורדיון הנוכחי
            if (!isActive) {
                item.classList.add('active');
                btn.setAttribute('aria-expanded', 'true');
            }
        });
    });
});