window.addEventListener('DOMContentLoaded', () => {

    //CONFIG: specify a limiting media query
    //n.b. this is so small-screen/high-zoom layouts can un-stick the header
    //in which case, scroll-padding is unnecessary and wastes valuable space
    //so it will only be applied if the page matches this media query
    const MEDIA_MATCH = '(min-width: 40rem)';

    //CONFIG: specify extra padding to allow for focus outlines
    //n.b. this avoids the possibility of the outline being slightly clipped,
    //when a focused element is close to the threshold, since scroll-padding
    //applies to the layout box, and outline isn't part of the layout box
    const EXTRA_PADDING = 6;

    //get the header reference
    const header = document.querySelector('header');

    //create a style node and get its stylesheet reference
    const style = document.head.appendChild(document.createElement('style'));
    const stylesheet = style.sheet;

    //function: apply scroll padding from header height
    const applyScrollPadding = () => {

        //delete any existing rule from the stylesheet
        //n.b. using while in case of race conditions that add duplicate rules
        while(stylesheet.cssRules.length) {
            stylesheet.deleteRule(0);
        }

        //get the header height, and add a little extra as specified
        let height = header.offsetHeight + EXTRA_PADDING;

        //create a new rule for scroll padding from the header height
        //filtered using :has(main *:focus) if that's supported
        //so that it doesn't apply to elements inside the header
        //n.b. it's fine to use pixels, because any change in height
        //caused by text resizing will trigger the resize observer
        if('CSS' in window && CSS.supports('selector(:has(*))')) {
            stylesheet.insertRule(`html:has(main *:focus) { scroll-padding-top:${height}px }`);
        } else {
            stylesheet.insertRule(`html { scroll-padding-top:${height}px }`);
        }

        //if an element outside the header is currently focused,
        //and the change in height has caused it to become obscured,
        //then scroll it into view (as though the user had tabbed there)
        //n.b. this prevents active focus being obscured on the fly
        //but is not technically required for 2.4.11 conformance
        let focused = document.activeElement || document.body;
        if(focused !== document.body && !header.contains(focused)) {
            if(focused.getBoundingClientRect().top < height) {
                focused.scrollIntoView();
            }
        }
    };

    //define a resize observer to monitor the size of the header
    //n.b. this fires on first observation, then for anything that resizes
    //the elements, eg. font size, text spacing, window size or orientation
    const observer = new ResizeObserver(applyScrollPadding);

    //function: enable resize monitor and apply scroll-padding
    //n.b. this is abstracted so we can turn it on and off
    //in response to changes in the media query match status
    const enableResizeMonitor = () => {
        observer.observe(header);
    };

    //function: disable resize monitor and remove applied scroll-padding
    const disableResizeMonitor = () => {
        observer.unobserve(header);
        while(stylesheet.cssRules.length) {
            stylesheet.deleteRule(0);
        }
    };

    //pass the limiting media query to matchMedia to get the initial match
    //then define a change listener to update this when the match changes
    //and either enable or disable the resize monitor accordingly
    const query = window.matchMedia(MEDIA_MATCH);
    query.addEventListener('change', (e) => {
        if(e.matches) {
            enableResizeMonitor();
        } else {
            disableResizeMonitor();
        }
    });

    //if we already match the current media, enable the monitor
    if(query.matches) {
        enableResizeMonitor();
    }

});