JOUWWEB.templateConfig = {
        header: {
            selector: '.header-wrap__inner',
            mobileSelector: '.jw-mobile-menu',
            updatePusher: function (topHeight) {
                var $sliderStyle = $('#sliderStyle');

                if ($sliderStyle.length === 0) {
                    $sliderStyle = $('<style />')
                        .attr('id', 'sliderStyle')
                        .appendTo(document.body);
                }

                // Header height without mobile bar
                var headerHeight = $('.header-wrap__inner').outerHeight();

                var paddingTop = topHeight;
                var paddingBottom = Math.min(headerHeight * (2/3), 60);
                $sliderStyle.html(
                    '.jw-slideshow-slide-content {' +
                    '    padding-top: ' + paddingTop + 'px;' +
                    '    padding-bottom: ' + paddingBottom + 'px;' +
                    '}' +
                    '.bx-controls-direction {' +
                    '    margin-top: ' + ((paddingTop - paddingBottom) / 2) + 'px;' +
                    '}'
                );

                // make sure slider also gets correct height (because of the added padding)
                $('.jw-slideshow-slide[aria-hidden=false]').each(function (index) {
                    var $this = $(this);
                    topHeight = $this.outerHeight() > topHeight ? $this.outerHeight() : topHeight;
                    $this.closest('.bx-viewport').css({
                        height: topHeight + 'px',
                    });
                });

                // If a page has a message-bar, offset the mobile nav.
                const $messageBar = $('.message-bar');
                if ($messageBar.length > 0) {
                    $('.js-mobile-menu, .jw-menu-clone').css('top', $messageBar.outerHeight());
                }
            },
        },
        mainContentOffset: function () {
            const $body = $('body');

            function measureAffixedHeaderHeight() {
                const $headerWrap = $('.header-wrap');
                const $headerWrapInner = $('.header-wrap__inner');

                // Early return if header is already affixed
                if ($body.hasClass('jw-is-header-affix')) {
                    return $headerWrap.height();
                }

                // Switch to affixed header (without transition)
                $headerWrapInner.css('transition', 'none');
                $body.addClass('jw-is-header-affix');

                // Measure affixed header height
                const headerHeight = $headerWrap.height();

                // Switch back to unaffixed header (without transition)
                $body.removeClass('jw-is-header-affix');
                $headerWrap.height(); // force reflow
                $headerWrapInner.css('transition', '');

                return headerHeight;
            }

            const headerHeight = measureAffixedHeaderHeight();
            return $('.main').offset().top - ($body.hasClass('jw-menu-is-mobile') ? 0 : headerHeight);
        },
    };