function setHeaderHeightVar() {
    const header = document.querySelector('.global-header');
    if (!header) return;

    // Use offsetHeight (includes padding/border). Sticky state doesn't change this.
    const h = Math.ceil(header.offsetHeight || 0);
    document.documentElement.style.setProperty('--site-header-height', `${h}px`);
}

function initHeaderOverlay() {
    setHeaderHeightVar();

    // Recalc on resize and after fonts load (font swap can change header height)
    window.addEventListener('resize', setHeaderHeightVar);

    if (document.fonts && document.fonts.ready) {
        document.fonts.ready.then(setHeaderHeightVar).catch(() => {});
    }

    // Observe header size changes (menu wrap, responsive toggler, etc.)
    const header = document.querySelector('.global-header');
    if (header && window.ResizeObserver) {
        const ro = new ResizeObserver(() => setHeaderHeightVar());
        ro.observe(header);
    }
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initHeaderOverlay);
} else {
    initHeaderOverlay();
}