feat: replace menu opacity hack with proper overlay

- Add #menu-overlay div (fixed, full screen, z-index below menu)
- Overlay fades in/out via opacity+visibility transition (cursor: pointer)
- Click on overlay closes the menu
- Remove opacity: 0.1 hack on main/footer/etc. when menu-open

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

assets/css/base/_body.scss

@@ -139,10 +139,6 @@ body, #site-header, #site-footer{
 body.menu-open,
 body.is-hidden{
     overflow-y: hidden;
-    main, footer, #nav-highlight, .btn--back-to-top, .bottom-bar__inner{
-        transition: opacity .3s ease-in;
-        opacity: 0.1;
-    }
 }
 
 

assets/css/partials/_site-menu.scss

@@ -75,16 +75,33 @@
     }
 }
 
+#menu-overlay{
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--z-header) - 2);
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity .3s ease-in, visibility .3s ease-in;
+}
+
 body.menu-open{
 
     #site-menu{
         right: 0;
-
     }
 
     #menu-toggle{
         .open{ display: none; }
         .close{ display: block!important; }
     }
-  
+
+    #menu-overlay{
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+
 }

assets/js/header.js

@@ -1,10 +1,16 @@
 export function headerToggle() {
   const header = document.getElementById("site-header");
   const buttonToggle = document.querySelector("#menu-toggle");
+  const overlay = document.getElementById("menu-overlay");
 
   if (!header || !buttonToggle) return;
+
   buttonToggle.addEventListener("click", () => {
-    const isOpen = document.body.classList.toggle("menu-open");
+    document.body.classList.toggle("menu-open");
+  });
+
+  overlay?.addEventListener("click", () => {
+    document.body.classList.remove("menu-open");
   });
 }
 

site/snippets/header.php

@@ -89,3 +89,4 @@
   </div>
 </header>
 <?php snippet('nav') ?>
+<div id="menu-overlay"></div>