Add mobile header search bar and reduce hero-calculators gap

- Add compact search input in header next to logo (mobile only, homepage)
- Hide "Boring Math" text on very small screens to fit search bar
- Sync header search with main search functionality
- Move currency selector below filters on mobile
- Reduce vertical padding between hero and calculators section on mobile

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: kitfunso

src/layouts/BaseLayout.astro

@@ -148,7 +148,7 @@ const ogImageURL = ogImage
       <nav class="max-w-7xl mx-auto px-6 py-4">
         <div class="flex items-center justify-between">
           <!-- Logo -->
-          <a href="/" class="group flex items-center gap-3" aria-label="Boring Math Home">
+          <a href="/" class="group flex items-center gap-3 shrink-0" aria-label="Boring Math Home">
             <div
               class="relative w-10 h-10 rounded-xl bg-[var(--color-accent)] flex items-center justify-center overflow-hidden group-hover:scale-105 transition-transform duration-500"
             >
@@ -158,7 +158,7 @@ const ogImageURL = ogImage
               >
               </div>
             </div>
-            <div class="flex flex-col">
+            <div class="hidden sm:flex flex-col">
               <span
                 class="font-display text-xl text-[var(--color-cream)] leading-none tracking-tight"
                 >Boring Math</span
@@ -169,6 +169,38 @@ const ogImageURL = ogImage
             </div>
           </a>
 
+          <!-- Mobile Header Search (homepage only) -->
+          {
+            (currentPath === '/' || currentPath === '') && (
+              <div class="flex-1 mx-3 md:hidden">
+                <div class="relative">
+                  <svg
+                    class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-muted)]"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    />
+                  </svg>
+                  <input
+                    type="text"
+                    id="header-search-input"
+                    placeholder="Search..."
+                    class="w-full pl-9 pr-3 py-2 bg-[var(--color-charcoal)] border border-white/10 rounded-xl
+                         text-sm text-[var(--color-cream)] placeholder:text-[var(--color-muted)]
+                         focus:border-[var(--color-accent)] focus:ring-1 focus:ring-[var(--color-accent)]/20
+                         transition-all duration-300"
+                  />
+                </div>
+              </div>
+            )
+          }
+
           <!-- Desktop Navigation -->
           <div class="hidden md:flex items-center gap-1">
             <a

src/pages/index.astro

@@ -1143,10 +1143,10 @@ const categoryColors: Record<string, string> = {
   </section>
 
   <!-- Calculators Section with Category Filter -->
-  <section class="relative px-6 py-6" id="calculators">
+  <section class="relative px-6 py-3 md:py-6" id="calculators">
     <div class="max-w-7xl mx-auto">
-      <!-- Search Bar and Currency Selector -->
-      <div class="max-w-2xl mx-auto mb-5">
+      <!-- Search Bar and Currency Selector - Hidden on mobile (search is in header) -->
+      <div class="max-w-2xl mx-auto mb-5 hidden md:block">
         <div class="flex items-center gap-3">
           <div class="relative flex-1">
             <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--color-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1174,6 +1174,10 @@ const categoryColors: Record<string, string> = {
           <HomepageCurrencySelector client:idle />
         </div>
       </div>
+      <!-- Mobile Currency Selector (search is in header) -->
+      <div class="flex justify-end mb-3 md:hidden">
+        <HomepageCurrencySelector client:idle />
+      </div>
 
       <!-- Recent Section (hidden by default, shown via JS) -->
       <div id="recently-used-section" class="hidden mb-5">
@@ -1462,6 +1466,7 @@ const categoryColors: Record<string, string> = {
     const calculatorCards = document.querySelectorAll('.calculator-card');
     const emptyState = document.getElementById('empty-state');
     const searchInput = document.getElementById('search-input') as HTMLInputElement;
+    const headerSearchInput = document.getElementById('header-search-input') as HTMLInputElement;
     const clearSearch = document.getElementById('clear-search');
     const favoritesFilter = document.getElementById('favorites-filter');
     const recentlyUsedSection = document.getElementById('recently-used-section');
@@ -1506,10 +1511,13 @@ const categoryColors: Record<string, string> = {
       // Reset active filter badge
       activeFilterBadge?.classList.add('hidden');
 
-      // Clear search input
+      // Clear search inputs (desktop and header)
       if (searchInput) {
         searchInput.value = '';
       }
+      if (headerSearchInput) {
+        headerSearchInput.value = '';
+      }
       clearSearch?.classList.add('hidden');
 
       // Show all calculator cards
@@ -1893,23 +1901,28 @@ const categoryColors: Record<string, string> = {
       });
     });
 
-    // Search functionality
-    searchInput?.addEventListener('input', () => {
-      currentSearch = searchInput.value;
+    // Search functionality - sync both desktop and header (mobile) search inputs
+    function handleSearch(value: string) {
+      currentSearch = value;
       filterCards();
 
+      // Sync both inputs
+      if (searchInput && searchInput.value !== value) searchInput.value = value;
+      if (headerSearchInput && headerSearchInput.value !== value) headerSearchInput.value = value;
+
       // Show/hide clear button
       if (clearSearch) {
         clearSearch.classList.toggle('hidden', !currentSearch);
       }
-    });
+    }
+
+    searchInput?.addEventListener('input', () => handleSearch(searchInput.value));
+    headerSearchInput?.addEventListener('input', () => handleSearch(headerSearchInput.value));
 
     clearSearch?.addEventListener('click', () => {
+      handleSearch('');
       if (searchInput) {
-        searchInput.value = '';
-        currentSearch = '';
-        filterCards();
-        clearSearch.classList.add('hidden');
+        clearSearch?.classList.add('hidden');
         searchInput.focus();
       }
     });