Mobile hero search: compact magnify button + dropdown under the input

- Submit button is now a 44x44 magnify icon inside the search pill on mobile instead of a full-width stacked button (desktop keeps the جستجو text).
- Anchor the typeahead dropdown to the search pill so results appear directly under the input rather than below the popular-search chips; full pill width.

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

src/JobsMedical.Web/Pages/Index.cshtml

@@ -19,7 +19,10 @@
                 <span class="hs-ico">🔎</span>
                 <input type="search" name="Q" autocomplete="off"
                        placeholder="جستجو: پرستار، mmt، دندان‌پزشک…" />
-                <button type="submit" class="btn btn-accent btn-lg">جستجو</button>
+                <button type="submit" class="btn btn-accent btn-lg hs-submit" aria-label="جستجو">
+                    <span class="hs-submit-txt">جستجو</span>
+                    <span class="hs-submit-ico" aria-hidden="true">🔎</span>
+                </button>
             </div>
             <div class="hero-chips">
                 <span class="hc-label">جستجوهای پرطرفدار:</span>

src/JobsMedical.Web/Pages/Shared/_Layout.cshtml

@@ -242,7 +242,9 @@
             var box = document.createElement('div');
             box.className = 'nav-search-results';
             box.style.display = 'none';
-            form.appendChild(box);
+            // Anchor the dropdown to the input's box (the hero pill) so it sits
+            // directly under the input rather than below the popular-search chips.
+            (input.closest('.hero-search-pill') || form).appendChild(box);
             var timer;
             function hide() { box.style.display = 'none'; box.innerHTML = ''; }
             input.addEventListener('input', function () {

src/JobsMedical.Web/wwwroot/css/site.css

@@ -305,14 +305,17 @@ mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px;
 
 /* Homepage hero — search-engine box (replaces the old filter form) */
 .hero-search { position: relative; max-width: 720px; margin: 10px auto 0; }
-.hero-search-pill { display: flex; align-items: center; gap: 8px; background: var(--surface);
+.hero-search-pill { position: relative; display: flex; align-items: center; gap: 8px; background: var(--surface);
   border-radius: 16px; padding: 8px; box-shadow: 0 18px 44px rgba(0,0,0,.20); }
 .hero-search-pill .hs-ico { font-size: 18px; opacity: .55; flex: 0 0 auto; padding-inline-start: 10px; }
 .hero-search-pill input { flex: 1; min-width: 0; border: none; background: transparent; font-family: inherit;
   font-size: 16px; padding: 10px 4px; color: var(--ink); }
 .hero-search-pill input:focus { outline: none; }
 .hero-search-pill .btn { flex: 0 0 auto; }
-.hero-search .nav-search-results { inset-inline: 0; min-width: 0; top: calc(100% + 8px); text-align: start; }
+.hs-submit .hs-submit-ico { display: none; } /* desktop shows the «جستجو» label; icon is mobile-only */
+/* Dropdown anchors to the pill (its positioned ancestor) → sits directly under the input,
+   full pill width (override the header dropdown's min/max-width caps). */
+.hero-search .nav-search-results { inset-inline: 0; min-width: 0; max-width: none; top: calc(100% + 8px); text-align: start; }
 .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; font-size: 13px; }
 .hero-chips .hc-label { color: rgba(255,255,255,.85); }
 .hero-chips a { background: rgba(255,255,255,.16); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 600; transition: background .15s; }
@@ -324,11 +327,14 @@ mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px;
   .hero p { font-size: 12.5px; line-height: 1.8; margin-bottom: 20px; }
   .section-head h2, .page-head h1 { font-size: 18px; }
   .hero-search { margin-top: 6px; }
-  .hero-search-pill { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 14px; }
+  /* Stay a single row: text input + a compact magnify button sitting inside the pill. */
+  .hero-search-pill { gap: 6px; padding: 6px; border-radius: 12px; }
   .hero-search-pill .hs-ico { display: none; }
-  .hero-search-pill input { width: 100%; border: 1px solid var(--line); border-radius: 10px;
-    padding: 11px 14px; font-size: 14px; background: var(--bg); }
-  .hero-search-pill .btn { width: 100%; }
+  .hero-search-pill input { padding: 10px 10px; font-size: 14px; }
+  .hero-search-pill .btn.hs-submit { width: 44px; min-width: 44px; height: 44px; padding: 0;
+    border-radius: 10px; font-size: 18px; justify-content: center; }
+  .hs-submit .hs-submit-txt { display: none; }
+  .hs-submit .hs-submit-ico { display: inline; }
   .hero-chips { gap: 6px; font-size: 12px; }
   .hero-chips .hc-label { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
   .stat-pill .n { font-size: 18px; }