/**
 * Blog Build Theme Scripts
 *
 * Contains implementations for:
 * 1. Menu Accessibility
 * 1. Dark/Light Mode Toggle
 * 2. Search Bar Toggle
 * 3. Sidebar Menu Toggle
 *
 * @package BlogBuild
 * @since 1.0.0
 */


document.addEventListener('DOMContentLoaded', function() {
    "use strict";
    
    // Get the menu element
    const magicElementorMenu = document.getElementById('main-menu');
    
    // Initialize accessible dropdown if menu exists
    if (magicElementorMenu) {
        blogBuildAccessibleDropDown(magicElementorMenu);
    }

});


/**
 * Makes dropdown menus keyboard accessible
 * 
 * @param {HTMLElement} el - The menu element to make accessible
 */
function blogBuildAccessibleDropDown(el) {
    // Find all links within the menu
    const menuLinks = el.querySelectorAll('a');
    
    // Add event listeners to each link
    menuLinks.forEach(function(link) {
        // When link gets focus
        link.addEventListener('focus', function() {
            // Find the parent li and add hover class
            let parentLi = findParentLi(this);
            if (parentLi) {
                parentLi.classList.add('hover');
            }
        });
        
        // When link loses focus
        link.addEventListener('blur', function() {
            // Find the parent li and remove hover class
            let parentLi = findParentLi(this);
            if (parentLi) {
                parentLi.classList.remove('hover');
            }
        });
    });
}

/**
 * Helper function to find parent li element
 * 
 * @param {HTMLElement} element - The element to find parent for
 * @return {HTMLElement|null} - The parent li element or null
 */
function findParentLi(element) {
    let currentElement = element;
    
    // Traverse up the DOM until we find an li or reach the top
    while (currentElement && currentElement.tagName !== 'LI') {
        currentElement = currentElement.parentElement;
    }
    
    return currentElement;
}