Built On Transparency.
Driven By Trust.
Powered By Collaboration.

function wrapHeadingLines() {
    const headings = document.querySelectorAll('[data-heading]');

    headings.forEach(heading => {
        // Get the computed styles of the heading
        const computedStyle = window.getComputedStyle(heading);
        const headingWidth = heading.offsetWidth;

        // Create a hidden element for measuring
        const measure = document.createElement('span');
        measure.style.cssText = `
            position: absolute;
            visibility: hidden;
            white-space: nowrap;
            font: ${computedStyle.font};
        `;
        document.body.appendChild(measure);

        // Get the text content and preserve all spaces
        const text = heading.textContent;
        const words = text.split(/(\s+)/); // Split into words AND spaces to preserve spacing
        let lines = [];
        let currentLine = [];

        // Build lines word by word
        words.forEach(word => {
            measure.textContent = currentLine.join('') + word; // Join without adding extra spaces

            if (measure.offsetWidth > headingWidth && currentLine.length > 0) {
                lines.push(currentLine.join('')); // Push the current line
                currentLine = [word]; // Start a new line
            } else {
                currentLine.push(word); // Add the word to the current line
            }
        });

        // Add the last line
        if (currentLine.length > 0) {
            lines.push(currentLine.join(''));
        }

        // Remove measuring element
        document.body.removeChild(measure);

        // Replace heading content with wrapped lines
        heading.innerHTML = lines
            .map(line => `<span class="line" style="display: block;">${line}</span>`)
            .join('');
    });
}

// Run on load and resize
document.addEventListener('DOMContentLoaded', wrapHeadingLines);
let resizeTimer;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(wrapHeadingLines, 250);
});