fix(mobile-nav): inline social icons with logo on row 1, nav drops to row 2

The previous mobile header stacked as three centered rows (logo,
nav, social) which felt busy. Switch to a two-row layout: row 1
puts the logo on the left and social icons on the right via
flex-row + space-between; row 2 holds the nav via flex-basis:100%
and order:3. Header thins out, nav becomes the only centered row.

At ultra-narrow widths the row 1 contents can wrap if needed -
flex-wrap stays on - so the layout degrades gracefully.

Author: Sohailm25

theme/static/css/site.css

@@ -531,21 +531,23 @@ a:hover { color: var(--brown); text-decoration-color: var(--brown); }
 }
 @media (max-width: 700px) {
   .site-header-inner {
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
+    justify-content: space-between;
     gap: var(--space-3);
     padding: var(--space-3) var(--space-4);
   }
-  .site-logo { align-self: center; }
-  .site-nav { flex: none; width: 100%; }
+  .site-logo { flex: 0 0 auto; }
+  .site-social { flex: 0 0 auto; justify-content: flex-end; }
+  .site-nav { flex: 1 1 100%; order: 3; }
   .site-nav ul {
     flex-wrap: wrap;
     justify-content: center;
     gap: var(--space-2) var(--space-4);
   }
   .site-nav li { white-space: nowrap; }
   .site-nav a { white-space: nowrap; font-size: 0.78rem; }
-  .site-social { justify-content: center; }
   .site-main { padding: var(--space-5) var(--space-4); }
   .hero {
     flex-direction: column-reverse;