(() => {
    if (typeof window === 'undefined') return;

    const root = document.documentElement;
    const header = document.querySelector('header') as HTMLElement | null;
    const announcement = document.querySelector('.announcement-banner-wrapper') as HTMLElement | null;

    if (!root || (!header && !announcement)) return;

    const updateNavOffsets = () => {
        const announcementHeight = announcement ? announcement.getBoundingClientRect().height : 0;
        const headerHeight = header ? header.getBoundingClientRect().height : 0;

        root.style.setProperty('--announcement-height', `${announcementHeight}px`);
        root.style.setProperty('--header-height', `${headerHeight}px`);
    };

    updateNavOffsets();
    window.addEventListener('resize', updateNavOffsets);
    window.addEventListener('orientationchange', updateNavOffsets);
    window.addEventListener('load', updateNavOffsets);
})();