<script>
document.addEventListener('DOMContentLoaded', () => {
    const contentArea = document.querySelector('.page-content'); // Adjust selector as needed
    if (!contentArea) return;

    const headings = Array.from(contentArea.querySelectorAll('h2, h3, h4, h5, h6')); // Exclude <h1>

    let currentStack = []; // Stack to manage parent details elements

    headings.forEach((heading) => {
        const level = parseInt(heading.tagName.slice(1));

        // Skip <h4> elements with the class 'stats-list'
        if (heading.tagName === 'H4' && heading.classList.contains('stats-list')) {
            return;
        }

        // Create a new <details> and <summary> for the current heading
        const details = document.createElement('details');

        // Collapse by default if the heading has class 'dialogue' or 'newgameplus'
        if (heading.classList.contains('dialogue') || heading.classList.contains('newgameplus')) {
            details.open = false;
        } else {
            details.open = true; // Open by default for other headings
        }

        const summary = document.createElement('summary');
        summary.textContent = heading.textContent;

        // Append summary to details and replace heading with details
        details.appendChild(summary);
        heading.replaceWith(details);

        // Move all following siblings into the current <details> until the next heading
        let sibling = details.nextSibling;
        while (sibling && (!sibling.tagName || !sibling.tagName.match(/^H[2-6]$/i))) {
            const nextSibling = sibling.nextSibling; // Save the next sibling
            details.appendChild(sibling);           // Move current sibling into details
            sibling = nextSibling;                 // Move to the next sibling
        }

        // Handle nesting: Attach this <details> to the correct parent
        while (currentStack.length && currentStack[currentStack.length - 1].level >= level) {
            currentStack.pop(); // Remove higher or equal level parents from stack
        }

        if (currentStack.length) {
            currentStack[currentStack.length - 1].element.appendChild(details);
        }

        // Push the current <details> onto the stack
        currentStack.push({ level, element: details });
    });
});

</script>