From c162f2e4e7f226485b5c6413bd6b8b3acd9782db Mon Sep 17 00:00:00 2001
From: Jonathon Wright <jonny.wright225@gmail.com>
Date: Fri, 3 Jul 2026 20:47:09 +1000
Subject: [PATCH] nav: phone tabs on a compact second row - zero-JS,
 scrollable, no hamburger

The links were display:none under 720px (desktop-only nav). Phones now wrap the bar: brand +
theme toggle row 1, the five tabs row 2 (mono 0.78rem, overflow-x scroll, hidden scrollbar).
Media block placed AFTER the base rules - same-specificity source order was eating the first attempt.
---
 src/components/Nav.astro | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 9ebe832..6c858e0 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -120,4 +120,32 @@ const links = [
       display: flex;
     }
   }
+  /* phones: the tabs live on a compact second row (zero-JS, no hamburger) —
+     the bar wraps: brand + toggle on row 1, links across row 2 */
+  @media (max-width: 719px) {
+    .nav__inner {
+      height: auto;
+      flex-wrap: wrap;
+      row-gap: 0;
+      padding-block: 0.55rem 0.6rem;
+    }
+    .nav__links {
+      display: flex;
+      order: 3;
+      width: 100%;
+      gap: var(--space-4);
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+      font-size: 0.78rem;
+      padding-top: 0.5rem;
+    }
+    .nav__links::-webkit-scrollbar {
+      display: none;
+    }
+    .nav__links a {
+      flex-shrink: 0;
+      padding-bottom: 0.15rem;
+    }
+  }
 </style>