<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{% block title %}Benjamin Mosley{% endblock %}</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

    <link rel="icon" href="{{ url_for('static', filename='BM.png') }}">
    <!-- Tailwind (compiled) -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">

    {% block head %}{% endblock %}
  </head>

  <body class="min-h-screen bg-[rgb(var(--bg))] text-[rgb(var(--fg))] font-sans flex flex-col">
    <!-- Header -->
    <header class="border-b border-[rgb(var(--border))]">
      <div class="container-page h-16 flex items-center justify-between">
        <a href="/" class="flex items-center gap-3">
          <div class="h-8 w-8 rounded-xl bg-accent shadow-glass"></div>
          <span class="font-archivo font-semibold text-2xl tracking-wide">Benjamin Mosley</span>
        </a>

        <!-- Desktop nav -->
        <nav class="hidden sm:flex items-center gap-6">
          <a class="nav-link" href="/blog">Blog</a>
          <a class="nav-link" href="/resume">Resume</a>
          <a class="nav-link" href="/projects">Projects</a>
          <a class="nav-link" href="/contact">Contact</a>
        </nav>

        <!-- Mobile menu button -->
        <button id="menuBtn" class="sm:hidden btn btn-ghost" aria-controls="mobileNav" aria-expanded="false">
          Menu
        </button>
      </div>

      <!-- Mobile nav -->
      <nav id="mobileNav" class="hidden sm:hidden border-t border-[rgb(var(--border))]">
        <div class="container-page py-3 flex flex-col gap-2">
          <a class="nav-link" href="/blog">Blog</a>
          <a class="nav-link" href="/resume">Resume</a>
          <a class="nav-link" href="/projects">Projects</a>
          <a class="nav-link" href="/contact">Contact</a>
        </div>
      </nav>
    </header>

    <!-- Main -->
    <main class="flex-1">
      {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    <footer class="border-t border-[rgb(var(--border))]">
      <div class="container-page py-8 text-sm text-[rgb(var(--muted))]">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
          <p>© {{ now().year }} Benjamin Mosley.</p>
          <div class="flex items-center gap-4">
            <a class="nav-link" href="https://github.com/Benny-ui-ux" target="_blank" rel="noopener">GitHub</a>
            <a class="nav-link" href="https://bennyshouse.net">Business Site</a>
            <a class="nav-link" href="mailto:ben@bennyshouse.net">Email</a>
          </div>
        </div>
      </div>
    </footer>

    <!-- Tiny JS: mobile menu + theme toggle hook -->
    <script>
      (function () {
        const btn = document.getElementById('menuBtn');
        const nav = document.getElementById('mobileNav');
        if (btn && nav) {
          btn.addEventListener('click', () => {
            const isOpen = !nav.classList.contains('hidden');
            nav.classList.toggle('hidden');
            btn.setAttribute('aria-expanded', String(!isOpen));
          });
        }
        // Optional theme persistence
        const key = 'bm-theme';
        const root = document.documentElement;
        const saved = localStorage.getItem(key);
        if (saved) root.setAttribute('data-theme', saved);
        window.toggleTheme = function () {
          const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
          root.setAttribute('data-theme', next);
          localStorage.setItem(key, next);
        }
      })();
    </script>
    {% block scripts %}{% endblock %}
  </body>
</html>

