header/footer chrome polish: logo in footer, search in NAV bar, NAV bar restyle

- Footer bottom: replace the plain "Broadcast Beat" text wordmark
    with the same logo image used in the top-left header (so footer
    matches header brand mark).

  - Move the site-wide search input out of the top sticky row and
    into the Browse bar that sits below the 728x90 leaderboard. Top
    row is now just logo / reading-list / notification bell.

  - Browse bar redesign for personality + alignment:
      * 48px tall, dark navy gradient with a 2px accent-blue bottom
        border and a horizontal sheen across the top edge
      * Search input (pill shape, focus-glow ring) sits flush left
      * Menu items (Events ▾, Newsletter, Forum, About ▾) are now
        right-aligned via flex justify-between
      * Each menu item is uppercase + tracked, hover lights an
        accent-blue underline that scales in from the left
      * EventsDropdown and AboutDropdown buttons now use the same
        .bb-browse-item class — fixes the vertical alignment issue
        where they were rendering at the old 60px nav-link-bb height
        while the new bar is 48px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/Header.tsx

@@ -350,60 +350,7 @@ export default function Header() {
                 <NotificationCenter />
               </div>
 
-              {/* Enhanced Search */}
-              <div className="hidden md:flex items-center gap-2">
-                <div className={`search-bar-wrapper ${searchFocused ? "search-bar-expanded" : ""}`}>
-                  <input
-                    ref={searchRef}
-                    type="search"
-                    placeholder={searchFocused ? "Search articles..." : "Search..."}
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e?.target?.value)}
-                    onFocus={() => setSearchFocused(true)}
-                    onBlur={() => setSearchFocused(false)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        e.preventDefault();
-                        submitSearch();
-                      }
-                    }}
-                    className="search-input search-input-enhanced pr-16"
-                    aria-label="Search articles (press / to focus)"
-                  />
-                  {searchQuery && (
-                    <button
-                      type="button"
-                      onClick={() => { setSearchQuery(""); searchRef.current?.focus(); }}
-                      className="search-clear-btn"
-                      aria-label="Clear search">
-                      <CloseIcon size={11} />
-                    </button>
-                  )}
-                  {!searchQuery && !searchFocused && (
-                    <span className="search-kbd-hint" aria-hidden="true">/</span>
-                  )}
-                  {(searchQuery || searchFocused) && (
-                    <button
-                      type="button"
-                      onClick={submitSearch}
-                      aria-label="Submit search"
-                      className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[#3b82f6] hover:text-[#60a5fa] transition-colors cursor-pointer"
-                    >
-                      <SearchIcon size={13} strokeWidth={1.75} />
-                    </button>
-                  )}
-                  {!searchQuery && !searchFocused && (
-                    <button
-                      type="button"
-                      onClick={() => searchRef.current?.focus()}
-                      aria-label="Focus search"
-                      className="absolute right-8 top-1/2 -translate-y-1/2 text-[#666] hover:text-[#3b82f6] transition-colors cursor-pointer"
-                    >
-                      <SearchIcon size={13} strokeWidth={1.75} />
-                    </button>
-                  )}
-                </div>
-              </div>
+              {/* Search moved to the Browse bar below the leaderboard */}
 
               {/* Mobile Hamburger */}
               <button
@@ -532,20 +479,53 @@ export default function Header() {
         </div>
       )}
 
-      {/* BROWSE BAR — primary nav (was previously above the banner) */}
+      {/* BROWSE BAR — search left, primary nav right */}
       <div className="bb-browse-bar hidden md:block" role="navigation" aria-label="Browse sections">
         <div className="max-w-container mx-auto px-4">
           <div className="bb-browse-row">
-            <EventsDropdown />
-            {navLinks.map((link) => (
-              <Link
-                key={link.label}
-                href={link.href}
-                className="bb-browse-item">
-                {link.label}
-              </Link>
-            ))}
-            <AboutDropdown />
+            {/* Search (left) */}
+            <div className="bb-browse-search">
+              <SearchIcon size={14} strokeWidth={1.75} className="bb-browse-search-icon" aria-hidden="true" />
+              <input
+                ref={searchRef}
+                type="search"
+                placeholder="Search broadcast news…"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e?.target?.value)}
+                onFocus={() => setSearchFocused(true)}
+                onBlur={() => setSearchFocused(false)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    submitSearch();
+                  }
+                }}
+                aria-label="Search articles"
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => { setSearchQuery(""); searchRef.current?.focus(); }}
+                  aria-label="Clear search"
+                  className="bb-browse-search-clear">
+                  <CloseIcon size={11} />
+                </button>
+              )}
+            </div>
+
+            {/* Menu (right) */}
+            <nav className="bb-browse-menu" aria-label="Main sections">
+              <EventsDropdown />
+              {navLinks.map((link) => (
+                <Link
+                  key={link.label}
+                  href={link.href}
+                  className="bb-browse-item">
+                  {link.label}
+                </Link>
+              ))}
+              <AboutDropdown />
+            </nav>
           </div>
         </div>
       </div>