// Event Delegation for SPA: Listens to the whole document for toggle changes
document.addEventListener('change', function(e) {
    // Check if the changed element is one of our dynamic toggles
    if (e.target && e.target.classList.contains('dynamic-toggle')) {
        
        // Find the target section ID stored in the data-target attribute
        const sectionId = e.target.getAttribute('data-target');
        const section = document.getElementById(sectionId);
        
        if (!section) return;

        // Execute the slide down/hide logic
        if (e.target.checked) {
            section.style.display = 'block';
            section.style.opacity = 0;
            let opacity = 0;
            let timer = setInterval(function() {
                if(opacity >= 1) {
                    clearInterval(timer);
                    section.style.opacity = 1;
                } else {
                    section.style.opacity = opacity;
                    opacity += 0.1;
                }
            }, 20);
        } else {
            section.style.display = 'none';
            section.style.opacity = 0;
        }
    }
});