🎨 Palette: Enhance site logo with accessible Back to Top functionality

.Jules/palette.md

@@ -50,3 +50,7 @@
 ## 2025-05-14 - Social Sharing Implementation
 **Learning:** Placeholders for social sharing buttons significantly degrade UX when users expect to share discovered content. Standardizing these intents with popup windows (550x450) provides a "premium" feel while keeping users on the platform.
 **Action:** Always verify if sharing icons in modals are functional; if not, implement standardized platform intents using centered popups.
+
+## 2025-07-16 - Logo as Functional Navigation Anchor
+**Learning:** Transforming the site logo into a "Back to Top" trigger provides a persistent, intuitive navigation path in long-scrolling archives. Enhancing it with `role="button"` and `tabindex="0"` ensures this functionality is accessible to screen readers and keyboard users, while synchronizing it with the mobile menu state prevents UI overlap.
+**Action:** Always enhance the primary brand element with 'Back to Top' functionality and accessibility attributes (ARIA roles/labels) to improve orientation and usability.

index.html

@@ -64,7 +64,7 @@
   <!-- Navigation Header -->
   <header class="navbar">
     <div class="navbar-container">
-      <div class="navbar-brand">
+      <div class="navbar-brand" id="navbarBrand" role="button" tabindex="0" aria-label="Ruh Al Tarikh - Back to Top" title="Back to Top">
         <div class="brand-icon">
           <svg viewBox="0 0 100 100" width="32" height="32" fill="currentColor">
             <path d="M50 10 L90 90 L10 90 Z"/>

js/app.js

@@ -116,6 +116,7 @@ const DOM = {
     episodesSection: document.getElementById('episodesSection'),
     menuToggle: document.getElementById('menuToggleBtn'),
     scrollToTop: document.getElementById('scrollToTop'),
+    navbarBrand: document.getElementById('navbarBrand'),
 
     // Watch Later
     watchLaterBtn: document.getElementById('watchLaterBtn'),
@@ -1257,9 +1258,26 @@ function bindEvents() {
         window.addEventListener('scroll', () => {
             DOM.scrollToTop.classList.toggle('show', window.scrollY > 500);
         });
-        DOM.scrollToTop.addEventListener('click', () => {
+
+        const scrollToTopAction = () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
+            if (document.body.classList.contains('mobile-nav-active')) {
+                document.body.classList.remove('mobile-nav-active');
+                if (DOM.menuToggle) DOM.menuToggle.setAttribute('aria-expanded', 'false');
+            }
+        };
+
+        DOM.scrollToTop.addEventListener('click', scrollToTopAction);
+
+        if (DOM.navbarBrand) {
+            DOM.navbarBrand.addEventListener('click', scrollToTopAction);
+            DOM.navbarBrand.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    scrollToTopAction();
+                }
+            });
+        }
     }
 
     // Header scroll effect