<!-- NAV -->
<style nonce="{{ csp_nonce }}">
    .nav-inner {
        display: flex; align-items: center; justify-content: space-between;
        height: 64px; max-width: 1120px; margin: 0 auto; padding: 0 24px;
    }
    .logo {
        font-size: 18px; font-weight: 700; color: var(--text);
        text-decoration: none; letter-spacing: -0.02em;
        font-family: var(--font);
    }
    .logo span { color: var(--accent); }
    .nav-links { display: flex; align-items: center; gap: 28px; }
    .nav-links > a:not(.btn):not(.logo) {
        color: var(--text-muted); text-decoration: none; font-size: 14px;
        font-weight: 500; transition: color 0.15s;
        font-family: var(--font);
    }
    .nav-links > a:not(.btn):not(.logo):hover { color: var(--text); }

    .btn-logout {
        background: transparent; border: 1px solid var(--border);
        color: var(--text-muted);
        padding: 7px 16px; font-size: 13px; border-radius: 6px;
        cursor: pointer; transition: background 0.15s, border-color 0.15s;
        font-family: var(--font);
    }
    .btn-logout:hover { background: var(--bg-elevated); border-color: var(--accent); color: var(--accent); }

    .user-email {
        font-size: 13px; color: var(--text-muted);
    }

    /* NAV CONTAINER */
   nav {
       position: sticky;
       top: 0;
       background: var(--bg-card);
       border-bottom: 1px solid var(--border);
       z-index: 50;
       width: 100%;
   }

    .nav-hamburger {
        display: none; background: none; border: none; cursor: pointer;
        padding: 8px; line-height: 0;
    }
    .nav-hamburger svg { display: block; }
    .nav-hamburger svg path { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }

    /* MOBILE MENU */
    @media (max-width: 640px) {
        .nav-hamburger { display: block; }
        .nav-links {
            position: absolute; top: 64px; left: 0; right: 0; z-index: 101;
            flex-direction: column; align-items: stretch; gap: 0;
            background: var(--bg-card); border-bottom: 1px solid var(--border);
            padding: 8px 0; display: none;
        }
        .nav-links.open { display: flex; }
        .nav-links > a:not(.btn):not(.logo),
        .nav-links .btn-sm {
            padding: 12px 24px; font-size: 15px; width: 100%;
            text-align: left; box-sizing: border-box;
        }
        .nav-links .btn-sm { border-radius: 0; margin: 4px 12px; width: calc(100% - 24px); justify-content: center; }
        .nav-links .btn-logout { border-radius: 0; margin: 4px 12px; width: calc(100% - 24px); display: inline-flex; justify-content: center; }
        .nav-links .user-email { padding: 8px 24px; font-size: 13px; }
        .nav-links form { display: block; }
    }

    @media (max-width: 640px) {
        .hide-mobile { display: none !important; }
    }
</style>
<nav>
    <div class="nav-inner">
        <a href="/" class="logo">Agent<span>Forms</span></a>
        <button class="nav-hamburger" aria-label="Menu">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M3 6h18M3 12h18M3 18h18"/>
            </svg>
        </button>
        <div class="nav-links">
            {% if session.get('user_id') %}
            <a href="/auth/dashboard">Dashboard</a>
            <a href="/sites/">Sites</a>
            <a href="/documents/">Documents</a>
            <a href="/teams/">Teams</a>
            <a href="/settings/">Settings</a>
            <a href="/api/docs">API Docs</a>
            <a href="https://relay.agentforms.io" target="_blank" rel="noopener">Downloads</a>
            {% if user and user.email %}
            <span class="user-email">{{ user.email }}</span>
            {% endif %}
            <form method="POST" action="/auth/logout">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
                <button type="submit" class="btn-logout">Logout</button>
            </form>
            {% else %}
            <a href="/features">Features</a>
            <a href="/pricing">Pricing</a>
            <a href="/api/docs">Docs</a>
            <a href="https://relay.agentforms.io" target="_blank" rel="noopener">Downloads</a>
            <a href="/auth/login" class="btn btn-outline btn-sm">Sign in</a>
            <a href="/auth/register" class="btn btn-sm">Sign up</a>
            {% endif %}
        </div>
    </div>
</nav>
<script nonce="{{ csp_nonce }}">
(function(){
    var menu = document.querySelector('.nav-links');
    var btn = document.querySelector('.nav-hamburger');
    if (!menu || !btn) return;
    btn.addEventListener('click', function() {
        menu.classList.toggle('open');
    });
    document.addEventListener('click', function(e) {
        if (!menu.contains(e.target) && !btn.contains(e.target)) {
            menu.classList.remove('open');
        }
    });
    menu.querySelectorAll('a').forEach(function(a) {
        a.addEventListener('click', function() { menu.classList.remove('open'); });
    });
})();
</script>
