From a89f9067e2ecc8672b16f469090e1d60f165408d Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Sat, 21 Feb 2026 14:42:45 -0500
Subject: [PATCH] Sync: enhance header behavior for light hero backgrounds with
 dynamic class toggling

---
 theme/assets/css/main.css | 10 ++++++----
 theme/assets/js/main.js   | 13 +++++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 82cd8c1..fd863bc 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -295,10 +295,12 @@ p:last-child { margin-bottom: 0; }
 }
 .logo-text strong { font-weight: 800; color: var(--color-accent); }
 
-/* When header is over light background (inner pages) */
-.page-header-light .site-header { background: var(--color-bg); box-shadow: var(--shadow-sm); }
-.page-header-light .logo-text { color: var(--color-heading); }
-.page-header-light .nav-menu a { color: var(--color-text); }
+/* When header is over a light hero (set by JS) — unscrolled only */
+.site-header.over-light-hero:not(.scrolled) .nav-menu a { color: var(--color-text); }
+.site-header.over-light-hero:not(.scrolled) .nav-menu a:hover,
+.site-header.over-light-hero:not(.scrolled) .nav-menu .current-menu-item > a { color: var(--color-primary); }
+.site-header.over-light-hero:not(.scrolled) .logo-text { color: var(--color-heading); }
+.site-header.over-light-hero:not(.scrolled) .nav-toggle span { background: var(--color-heading); }
 
 /* Nav */
 .site-nav { margin-left: auto; }
diff --git a/theme/assets/js/main.js b/theme/assets/js/main.js
index 2c5830c..a5349fb 100644
--- a/theme/assets/js/main.js
+++ b/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 ──────────────────────────────────── */