<style>
.small-legend {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-top: 10px;
}

.highlight {
    background-color: #f8a51c; /* Temporary highlight color */
    transition: background-color 1s ease;
}
</style>

<script>
$(function(){

    var leftNav = $('#page-content .left-navigation ul li').eq(-1);
    var newUL = $('<ul>').addClass('focus-menu');
    var legend = $('<legend>').text('Go To:').addClass('small-legend'); // Apply the class to the legend
    var fieldset = $('<fieldset>').append(legend).append(newUL); // Wrap the legend and the UL in a fieldset

    // Directly create <li> elements with <a> tags
    newUL.html('<li><a href="#">Learn to Swim and&nbsp;Pre-School&nbsp;(ages 3 and older)</a></li>' +
               '<li><a href="#">Parent/Child (6 months-3 years)</a></li>' +
               '<li><a href="#">Private Swimming Lessons</a></li>' +
               '<li><a href="#">Adaptive Aquatics</a></li>' +
               '<li><a href="#">Springboard Diving</a></li>' +
               '<li><a href="#">Adult Lessons</a></li>' +
               '<li><a href="#">Swim Team Prep</a></li>' +
               '<li><a href="#">Class Descriptions</a></li>');

    leftNav.append(fieldset); // Append the fieldset (which contains the legend and the list)

    // Smooth scroll functionality for all <a> tags with href starting with #
    $('a[href^="#"]').on('click', function(event) {
        event.preventDefault();
        var targetText = $(this).text().trim(); // Get the text of the clicked <a> element

        // Find the corresponding heading by matching the text
        var targetH3 = $('h3').filter(function() {
            return $(this).text().trim() === targetText;  // Match the exact text of <h3>
        });

        if (targetH3.length) {
            // Calculate the scroll position to center the target <h3> element
            var scrollPosition = targetH3.offset().top - ($(window).height() / 2) + (targetH3.outerHeight() / 2);

            // Scroll to the target <h3> element
            $('html, body').animate({
                scrollTop: scrollPosition
            }, 1000, function() {
                // After scrolling, set focus on the target <h3>
                targetH3.attr('tabindex', -1).focus();
                
                // Highlight the target element
                targetH3.addClass('highlight');

                // Remove the highlight after a delay with fade effect
                setTimeout(function() {
                    targetH3.removeClass('highlight');
                }, 2000); // Highlight for 2 seconds
            });
        }
    });

});
</script>