Search bar pinned again, now flush under the header at every width (sticky offset follows the header's real height); v2.25.2

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/App.tsx

@@ -419,11 +419,23 @@ function SiteHeader({ content }: { content: SiteContent }) {
   const [studiesOpen, setStudiesOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
   const studiesDropdownRef = useRef<HTMLDivElement>(null)
+  const headerRef = useRef<HTMLElement>(null)
   const spotifyUrl = content.platformSpotifyUrl || '/spotify'
   const location = useLocation()
   const episodesActive = location.pathname.startsWith('/episodes') || location.pathname.startsWith('/finished') || location.pathname.startsWith('/nuggets')
   const studiesActive = location.pathname.startsWith('/study') || location.pathname === '/scripture'
 
+  // The pinned search bar sits just under the header, whatever height the header is at this screen size
+  useEffect(() => {
+    const header = headerRef.current
+    if (!header) return
+    const update = () => document.documentElement.style.setProperty('--site-header-h', `${header.getBoundingClientRect().height}px`)
+    update()
+    const observer = new ResizeObserver(update)
+    observer.observe(header)
+    return () => observer.disconnect()
+  }, [])
+
   useEffect(() => {
     function handleOutsideClick(e: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
@@ -438,7 +450,7 @@ function SiteHeader({ content }: { content: SiteContent }) {
   }, [episodesOpen, studiesOpen])
 
   return (
-    <header className="site-header">
+    <header className="site-header" ref={headerRef}>
       <div className="header-inner">
         <Link to="/" className="header-logo" aria-label="Home">
           <img src="/book_icon.png" alt="" className="header-logo-img" />