Fix mobile navigation layout

Reduce the hero top spacing and compact navigation controls on mobile widths to prevent overflow.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 2b70e48d-f2cd-45a4-8daa-5c11d535ea08

Author: brunoborges

site/styles.css

@@ -281,7 +281,7 @@ nav {
 /* ---------- Hero ---------- */
 .hero {
   text-align: center;
-  padding: 80px 24px 16px;
+  padding: 56px 24px 16px;
   max-width: 800px;
   margin: 0 auto;
 }
@@ -1978,7 +1978,35 @@ footer a:hover {
   }
 
   .nav-inner {
-    padding: 0 16px;
+    padding: 0 12px;
+  }
+
+  .logo {
+    flex-shrink: 0;
+    font-size: 1rem;
+    white-space: nowrap;
+  }
+
+  .nav-right {
+    gap: 8px;
+  }
+
+  .cmd-bar {
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+  }
+
+  .cmd-bar-label {
+    display: none;
+  }
+
+  .cmd-bar::before {
+    content: "⌕";
+    color: var(--accent);
+    font-size: 1.2rem;
+    line-height: 1;
   }
 
   .hero {
@@ -2084,6 +2112,12 @@ footer a:hover {
   }
 }
 
+@media (max-width: 360px) {
+  .github-link {
+    display: none;
+  }
+}
+
 /* ---------- Responsive: ≤ 500px ---------- */
 @media (max-width: 500px) {
   .hero-actions,

templates/index.html

@@ -193,7 +193,10 @@
         </a>
         <button class="theme-toggle" id="themeToggle" aria-label="{{nav.toggleTheme}}">☀️</button>
 {{localePicker}}
-        <div class="cmd-bar" id="searchTrigger">{{search.searchTrigger}} <kbd>⌘K</kbd></div>
+        <button type="button" class="cmd-bar" id="searchTrigger" aria-label="{{search.searchTrigger}}">
+          <span class="cmd-bar-label">{{search.searchTrigger}}</span>
+          <kbd>⌘K</kbd>
+        </button>
       </div>
     </div>
   </nav>