/**
 * ============================================================================
 * NAME: flyout-shop.js
 * PATH: /brand-kit/js/flyout-shop.js
 * VERSION: 1.0.0
 * PURPOSE: Custom Shop flyout (replaces Max Mega Menu)
 * 
 * BEHAVIOR:
 * - Desktop: Hover "Shop" → opens, mouse leave → closes
 * - Tablet: Tap "Shop" → opens, tap outside → closes
 * - Click/tap category → navigates, flyout closes
 * - No timeouts, no animations, purely functional
 * 
 * FALLBACK: If JS fails, nothing breaks — "Shop" just has no action
 * ============================================================================
 */

(function() {
    'use strict';

    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    function init() {
		const shopLink = document.querySelector('#menu-item-410 a');  // "Shop" menu link
        const body = document.body;
        let flyout = null;
        let overlay = null;
        let isOpen = false;
        let closeTimeout = null;

        // If "Shop" link doesn't exist, exit silently
        if (!shopLink) return;

        // Create flyout panel and overlay (injected once)
        function createElements() {
            if (flyout) return;

            // Full-screen black overlay (90% opacity)
            overlay = document.createElement('div');
            overlay.id = 'mma-flyout-overlay';
            overlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.9);
                z-index: var(--mma-z-overlay, 900);
                display: none;
                pointer-events: auto;
            `;

            // Flyout panel (will be styled by CSS)
            flyout = document.createElement('div');
            flyout.id = 'mma-flyout-panel';
            flyout.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: none;
                pointer-events: auto;
                z-index: calc(var(--mma-z-overlay, 900) + 1);
            `;

            body.appendChild(overlay);
            body.appendChild(flyout);
        }

        // Open flyout (copies mega menu content into panel)
        function openFlyout() {
            if (isOpen) return;
            createElements();

            // Find existing mega menu content from MMM (or custom markup)
			const megaMenuContent = document.querySelector('#menu-item-410 .mega-sub-menu');
            if (!megaMenuContent) return;

            // Clone content into flyout
            flyout.innerHTML = '';
            const clone = megaMenuContent.cloneNode(true);
            flyout.appendChild(clone);

            overlay.style.display = 'block';
            flyout.style.display = 'block';
            isOpen = true;
            body.style.overflow = 'hidden';  // Prevent scroll while open
        }

        // Close flyout
        function closeFlyout() {
            if (!isOpen) return;
            overlay.style.display = 'none';
            flyout.style.display = 'none';
            isOpen = false;
            body.style.overflow = '';
        }

        // Delayed close (for mouse leave)
        function scheduleClose() {
            if (closeTimeout) clearTimeout(closeTimeout);
            closeTimeout = setTimeout(closeFlyout, 50);
        }

        function cancelClose() {
            if (closeTimeout) {
                clearTimeout(closeTimeout);
                closeTimeout = null;
            }
        }

        // DESKTOP: Hover events
        shopLink.addEventListener('mouseenter', openFlyout);
        shopLink.addEventListener('mouseleave', scheduleClose);

        if (flyout) {
            flyout.addEventListener('mouseenter', cancelClose);
            flyout.addEventListener('mouseleave', scheduleClose);
            overlay.addEventListener('mouseenter', cancelClose);
            overlay.addEventListener('mouseleave', scheduleClose);
        }

        // TABLET / TOUCH: Tap outside closes
        document.addEventListener('click', function(e) {
            if (!isOpen) return;
            // If click is outside flyout AND not on shop link, close
            if (flyout && !flyout.contains(e.target) && e.target !== shopLink) {
                closeFlyout();
            }
        });

        // If user taps "Shop" while open, close it
        shopLink.addEventListener('click', function(e) {
            if (isOpen) {
                e.preventDefault();
                closeFlyout();
            } else {
                e.preventDefault();
                openFlyout();
            }
        });

        // Optional: Close on ESC key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && isOpen) {
                closeFlyout();
            }
        });
    }
})();        <!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="robots" content="noindex, nofollow">
            <title>Coming Soon</title>

            <style>
                html, body {
                    margin: 0;
                    padding: 0;
                    height: 100%;
                    width: 100%;
                    background: #000;
                }

                body {
                    background-image: url('https://MMA-images.b-cdn.net/website/witches-construction-maintenance/coming-soon-witch.webp');
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            </style>
        </head>
        <body></body>
        </html>