<style>
    /* ... (keep your desktop styles here) ... */

    @media (max-width: 768px) {
        header {
            position: sticky;
            top: 0;
            z-index: 999;
            background: transparent;
        }

        /* BIGGER, SHIFTED 10px MORE TO THE LEFT (Right: 50px) */
        .nav-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 20px;
            right: 50px; /* Shifted 10px further left from your original 40px */
            
            width: 70px;  /* Increased size */
            height: 70px; /* Increased size */
            
            background: #ffffff;
            border: 3px solid #000000; 
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
            cursor: pointer;
            z-index: 1001; /* Higher than the menu */
            padding: 0;
            transition: all 0.2s ease;
        }

        .nav-toggle span {
            font-size: 3.5rem; 
            line-height: 1;
            color: #000000;
            font-weight: 900;
            display: block;
            text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
        }

        /* FULL SCREEN OVERLAY MENU */
        .coalition-horizontal-menu {
            display: none; 
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(255, 255, 255, 0.98); /* Clean white background */
            z-index: 1000;
            justify-content: center; /* Center items vertically */
            align-items: center;     /* Center items horizontally */
        }

        .coalition-horizontal-menu.is-open {
            display: flex !important;
        }

        .coalition-horizontal-menu a {
            font-size: 2rem; /* Larger for full screen */
            padding: 20px;
            color: #000;
            font-weight: 800;
            text-decoration: none;
            width: 100%;
            text-align: center; /* Ensures text isn't sitting far left */
            text-transform: uppercase;
        }

        /* CHANGE HAMBURGER TO X WHEN OPEN */
        .nav-toggle.is-active span {
            font-size: 3rem;
        }
    }
</style>

<header>
    <button class="nav-toggle" id="menuBtn" aria-controls="primary-nav" aria-expanded="false">
        <span id="toggleIcon">☰</span>
    </button>

    <nav id="primary-nav" class="coalition-horizontal-menu">
        <a href="<?php echo home_url('/'); ?>">Home</a>
        <a href="<?php echo home_url('/advertise'); ?>">Advertise</a>
        <a href="<?php echo home_url('/about'); ?>">About Us</a>
        <a href="<?php echo home_url('/distribute'); ?>">Distribute</a>
        <a href="<?php echo home_url('/faq'); ?>">FAQ</a>
        <a href="<?php echo home_url('/contact'); ?>">Contact</a>
    </nav>
</header>

<script>
    const menuBtn = document.getElementById('menuBtn');
    const nav = document.getElementById('primary-nav');
    const toggleIcon = document.getElementById('toggleIcon');

    menuBtn.addEventListener('click', function() {
        const isOpen = nav.classList.toggle('is-open');
        menuBtn.classList.toggle('is-active');
        
        // Update the icon and ARIA state
        if (isOpen) {
            toggleIcon.innerText = '✕'; // Changes to X
            menuBtn.setAttribute('aria-expanded', 'true');
            document.body.style.overflow = 'hidden'; // Prevents background scrolling
        } else {
            toggleIcon.innerText = '☰'; // Changes back to Hamburger
            menuBtn.setAttribute('aria-expanded', 'false');
            document.body.style.overflow = 'auto'; // Restores scrolling
        }
    });

    // Close menu when a link is clicked
    document.querySelectorAll('.coalition-horizontal-menu a').forEach(link => {
        link.addEventListener('click', () => {
            nav.classList.remove('is-open');
            menuBtn.classList.remove('is-active');
            toggleIcon.innerText = '☰';
            document.body.style.overflow = 'auto';
        });
    });
</script>