Add Studies dropdown with Scripture Index link; split nav triggers into hover+click

- Studies nav item is now a dropdown (same pattern as Episodes): hover to expand,
  click the label to navigate directly to /study
- Dropdown contains: All Studies (/study) and Scripture Index (/scripture)
- Episodes dropdown follows the same split pattern: label navigates, caret toggles
- Dropdown menus open on CSS :hover (desktop) and stay toggle-able on mobile
- v1.2.1

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

src/App.tsx

@@ -377,20 +377,26 @@ function SiteSearchBar({ content }: { content: SiteContent }) {
 function SiteHeader({ content }: { content: SiteContent }) {
   const [menuOpen, setMenuOpen] = useState(false)
   const [episodesOpen, setEpisodesOpen] = useState(false)
+  const [studiesOpen, setStudiesOpen] = useState(false)
   const dropdownRef = useRef<HTMLDivElement>(null)
+  const studiesDropdownRef = useRef<HTMLDivElement>(null)
   const spotifyUrl = content.platformSpotifyUrl || '/spotify'
   const location = useLocation()
   const episodesActive = location.pathname.startsWith('/episodes') || location.pathname.startsWith('/finished')
+  const studiesActive = location.pathname.startsWith('/study') || location.pathname === '/scripture'
 
   useEffect(() => {
     function handleOutsideClick(e: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
         setEpisodesOpen(false)
       }
+      if (studiesDropdownRef.current && !studiesDropdownRef.current.contains(e.target as Node)) {
+        setStudiesOpen(false)
+      }
     }
-    if (episodesOpen) document.addEventListener('mousedown', handleOutsideClick)
+    if (episodesOpen || studiesOpen) document.addEventListener('mousedown', handleOutsideClick)
     return () => document.removeEventListener('mousedown', handleOutsideClick)
-  }, [episodesOpen])
+  }, [episodesOpen, studiesOpen])
 
   return (
     <header className="site-header">
@@ -410,23 +416,31 @@ function SiteHeader({ content }: { content: SiteContent }) {
         <nav id="site-nav" className={`header-nav ${menuOpen ? 'header-nav--open' : ''}`}>
           {/* Episodes dropdown */}
           <div ref={dropdownRef} className={`nav-dropdown${episodesOpen ? ' nav-dropdown--open' : ''}`}>
-            <button
-              type="button"
-              className={`nav-dropdown-trigger${episodesActive ? ' header-nav-link--active' : ''}`}
-              onClick={() => setEpisodesOpen(o => !o)}
-              aria-expanded={episodesOpen}
-            >
-              Episodes <span className="nav-dropdown-arrow" aria-hidden="true">{episodesOpen ? '▴' : '▾'}</span>
-            </button>
-            {episodesOpen && (
-              <div className="nav-dropdown-menu">
-                <NavLink to="/episodes" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Current Series</NavLink>
-                <NavLink to="/finished" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Finished Books</NavLink>
-              </div>
-            )}
+            <div className="nav-dropdown-trigger">
+              <NavLink to="/episodes" className={`nav-dropdown-label${episodesActive ? ' header-nav-link--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Episodes</NavLink>
+              <button type="button" className="nav-dropdown-caret" onClick={() => setEpisodesOpen(o => !o)} aria-expanded={episodesOpen} aria-label="Episodes menu">
+                <span aria-hidden="true">{episodesOpen ? '▴' : '▾'}</span>
+              </button>
+            </div>
+            <div className="nav-dropdown-menu">
+              <NavLink to="/episodes" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Current Series</NavLink>
+              <NavLink to="/finished" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Finished Books</NavLink>
+            </div>
           </div>
           <NavLink to="/questions" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Q&amp;A</NavLink>
-          <NavLink to="/study" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Studies</NavLink>
+          {/* Studies dropdown */}
+          <div ref={studiesDropdownRef} className={`nav-dropdown${studiesOpen ? ' nav-dropdown--open' : ''}`}>
+            <div className="nav-dropdown-trigger">
+              <NavLink to="/study" className={`nav-dropdown-label${studiesActive ? ' header-nav-link--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Studies</NavLink>
+              <button type="button" className="nav-dropdown-caret" onClick={() => setStudiesOpen(o => !o)} aria-expanded={studiesOpen} aria-label="Studies menu">
+                <span aria-hidden="true">{studiesOpen ? '▴' : '▾'}</span>
+              </button>
+            </div>
+            <div className="nav-dropdown-menu">
+              <NavLink to="/study" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>All Studies</NavLink>
+              <NavLink to="/scripture" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Scripture Index</NavLink>
+            </div>
+          </div>
           <NavLink to="/study/account" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>My Account</NavLink>
           <NavLink to="/resources" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Resources</NavLink>
           <NavLink to="/about" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>About</NavLink>