Sync: enhance header behavior for light hero backgrounds with dynamic class toggling

theme/assets/js/main.js

@@ -17,6 +17,19 @@ document.addEventListener('DOMContentLoaded', () => {
     window.addEventListener('scroll', () => {
       header.classList.toggle('scrolled', window.scrollY > 40);
     }, { passive: true });
+
+    /* Detect whether the hero beneath the header has a light background.
+       .hero (homepage) is white in light mode; .page-hero stays dark.
+       Re-evaluate when the theme toggle changes data-theme. */
+    function updateHeroContrast() {
+      const isLight = document.documentElement.getAttribute('data-theme') !== 'dark';
+      const hasLightHero = isLight && document.querySelector('.hero') && !document.querySelector('.page-hero');
+      header.classList.toggle('over-light-hero', !!hasLightHero);
+    }
+    updateHeroContrast();
+    new MutationObserver(updateHeroContrast).observe(document.documentElement, {
+      attributes: true, attributeFilter: ['data-theme']
+    });
   }
 
   /* ── Mobile nav toggle ──────────────────────────────────── */