add_action('wp_footer', function () {
?>
<style>
.mw-mobile-menu-button,
.mw-mobile-drawer,
.mw-mobile-overlay {
    display: none;
}

@media (max-width: 768px) {

    /* Hide desktop navigation only */
    header nav,
    .main-navigation,
    .primary-navigation,
    .wp-block-navigation {
        display: none !important;
    }

    /* Mobile hamburger */
    .mw-mobile-menu-button {
        display: flex;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        background: transparent;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 99998;
        margin-left: auto;
    }

    .mw-mobile-menu-button span {
        width: 20px;
        height: 1.5px;
        background: #2d2925;
        display: block;
        border-radius: 3px;
    }

    /* Overlay */
    .mw-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 17, 14, 0.28);
        opacity: 0;
        visibility: hidden;
        transition: all 0.25s ease;
        z-index: 99998;
    }

    .mw-mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Drawer */
    .mw-mobile-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: min(84vw, 340px);
        height: 100dvh;
        padding: 20px;
        background: #f7f1e8;
        transform: translateX(105%);
        transition: transform 0.3s ease;
        z-index: 99999;
        overflow-y: auto;
        box-shadow: -10px 0 35px rgba(0,0,0,0.08);
    }

    .mw-mobile-drawer.active {
        transform: translateX(0);
    }

    .mw-drawer-top {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 24px;
    }

    .mw-drawer-close {
        border: 0;
        background: transparent;
        font-size: 28px;
        line-height: 1;
        color: #2d2925;
        cursor: pointer;
        padding: 4px;
    }

    /* Menu styling */
    .mw-mobile-drawer ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mw-mobile-drawer li {
        margin: 0 !important;
        border-bottom: 1px solid rgba(45, 41, 37, 0.09);
    }

    .mw-mobile-drawer a {
        display: block;
        padding: 14px 2px;
        color: #2d2925 !important;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 500;
        text-decoration: none !important;
    }

    .mw-mobile-drawer .sub-menu {
        padding-left: 12px !important;
        border-left: 1px solid #ddd2c6;
    }

    .mw-mobile-drawer .sub-menu a {
        font-size: 11px;
        color: #70665d !important;
        padding: 10px 0;
    }

    body.mw-drawer-open {
        overflow: hidden;
    }
}
</style>

<div class="mw-mobile-overlay"></div>

<div class="mw-mobile-drawer" aria-hidden="true">
    <div class="mw-drawer-top">
        <button class="mw-drawer-close" type="button" aria-label="Close menu">
            ×
        </button>
    </div>

    <div class="mw-mobile-menu-content"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

    const possibleMenus = [
        'header .wp-block-navigation',
        'header .main-navigation',
        'header .primary-navigation',
        'header nav'
    ];

    let desktopMenu = null;

    for (const selector of possibleMenus) {
        desktopMenu = document.querySelector(selector);
        if (desktopMenu) break;
    }

    if (!desktopMenu) return;

    const drawer  = document.querySelector('.mw-mobile-drawer');
    const overlay = document.querySelector('.mw-mobile-overlay');
    const content = document.querySelector('.mw-mobile-menu-content');
    const closeButton = document.querySelector('.mw-drawer-close');

    /* Copy existing WordPress menu */
    const menuList = desktopMenu.querySelector('ul');

    if (menuList) {
        content.appendChild(menuList.cloneNode(true));
    }

    /* Create hamburger */
    const button = document.createElement('button');

    button.className = 'mw-mobile-menu-button';
    button.type = 'button';
    button.setAttribute('aria-label', 'Open menu');
    button.setAttribute('aria-expanded', 'false');

    button.innerHTML = `
        <span></span>
        <span></span>
        <span></span>
    `;

    desktopMenu.parentNode.insertBefore(button, desktopMenu.nextSibling);

    function openDrawer() {
        drawer.classList.add('active');
        overlay.classList.add('active');
        drawer.setAttribute('aria-hidden', 'false');
        button.setAttribute('aria-expanded', 'true');
        document.body.classList.add('mw-drawer-open');
    }

    function closeDrawer() {
        drawer.classList.remove('active');
        overlay.classList.remove('active');
        drawer.setAttribute('aria-hidden', 'true');
        button.setAttribute('aria-expanded', 'false');
        document.body.classList.remove('mw-drawer-open');
    }

    button.addEventListener('click', openDrawer);
    closeButton.addEventListener('click', closeDrawer);
    overlay.addEventListener('click', closeDrawer);

    drawer.querySelectorAll('a').forEach(function(link) {
        link.addEventListener('click', closeDrawer);
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeDrawer();
        }
    });

});
</script>
<?php
});