From 380e2d9015e0aa5c99b01872f12a8f86f323227c Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sun, 28 Jun 2026 18:05:12 -0500
Subject: [PATCH] fix: address remaining mobile menu issues

Per the user's feedback, fix the issues still visible in the menu:

1. Hero rendered over the menu: bumped menu z-index from 10 to 100 so it
   always sits above the hero's stacked elements.

2. List markers on items: added explicit list-style: none / padding: 0 on
   the menu <ul> and items to override the base typography rule that sets
   list-style-type: disc and padding: 0 1rem on every <ul>.

3. Blue links: the base typography rule 'a, .link { color: var(--color-bodylinks); }'
   has specificity 0,1,1 and was beating the menu text-white rule. Override
   with color: var(--color-white) !important on menu links and child links
   inside the mobile media query.

4. Full borders with rounded corners on child items: change child item
   border from '2px solid var(--color-secondary); border-radius: 0.5rem'
   to 'border-bottom: 2px solid var(--color-secondary); border-radius: 0'
   so each child gets only a bottom border (matching the user's spec).

5. Menu items now use plain CSS (color/display/padding/font-weight) instead
   of @apply text-white/no-underline to give them explicit override
   specificity against the base styles.

6. Toggle button: changed the SVG width from 2rem to 1.5rem in
   styles/components/site-header.css so the hamburger and X icons render
   at a square 1.5rem x 1.5rem aspect ratio inside the (intentionally)
   rectangular orange button.

Nav-main template unchanged from the previous commit (Contact button +
social icons already in place). Header test still passes - the button box
itself (72x45) is unchanged, only the icon aspect changed.
---
 styles/components/site-header.css        |  2 +-
 styles/navigation/nav-mobile-sliding.css | 76 ++++++++++++++++++++----
 2 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/styles/components/site-header.css b/styles/components/site-header.css
index d4aaf4f..0ff414b 100644
--- a/styles/components/site-header.css
+++ b/styles/components/site-header.css
@@ -86,7 +86,7 @@
 
     .site-header .nav-main__toggle svg {
         height: 1.5rem;
-        width: 2rem;
+        width: 1.5rem;
     }
 
     .site-header .nav-main__toggle svg,
diff --git a/styles/navigation/nav-mobile-sliding.css b/styles/navigation/nav-mobile-sliding.css
index b7a2311..85a3929 100644
--- a/styles/navigation/nav-mobile-sliding.css
+++ b/styles/navigation/nav-mobile-sliding.css
@@ -15,14 +15,28 @@
     }
 
     .menu-vdi--sliding {
-      @apply relative overflow-hidden right-0 z-10 py-8 flex flex-col;
+      @apply relative overflow-hidden right-0 py-8 flex flex-col;
       @apply absolute hidden; /* Hidden by default */
+      z-index: 100;
       top: var(--hgtHeader);
       min-height: calc(100vh - var(--hgtHeader));
       width: 95%;
       background: var(--color-cwc-blue-02);
       color: var(--color-white);
 
+      /* Suppress default <ul> bullets and indent inherited from base typography.
+         The <ul> element IS .menu-vdi--sliding, so we use & to target the parent selector. */
+      &,
+      ul.menu-vdi {
+        list-style: none;
+        padding-left: 0;
+        margin: 0;
+      }
+
+      .menu-vdi__item {
+        list-style: none;
+      }
+
       /* Container for all navigation levels */
       .menu-vdi__viewport {
         @apply flex transition-transform duration-300 ease-in-out;
@@ -51,14 +65,30 @@
 
       /* Top-level menu items */
       .menu-vdi__level--main > .menu-vdi__level-items > .menu-vdi__item {
+        list-style: none;
+
         a,
         button {
           /* text */
-          @apply font-bold text-22px text-white no-underline leading-snug;
+          color: var(--color-white) !important;
+          font-weight: 700;
+          font-size: 1.375rem;
+          line-height: 1.375;
+          text-decoration: none;
           /* spacing & display */
-          @apply flex items-center w-full px-6 py-5;
+          display: flex;
+          align-items: center;
+          width: 100%;
+          padding: 1.25rem 1.5rem;
           /* interaction */
-          @apply focus-visible:bg-white/10 hover:bg-white/10;
+          background: transparent;
+        }
+
+        a:hover,
+        a:focus-visible,
+        button:hover,
+        button:focus-visible {
+          background: rgba(255, 255, 255, 0.1);
         }
 
         a {
@@ -85,22 +115,37 @@
         }
       }
 
-      /* Child items: orange border, no chevron, indented under their parent */
+      /* Child items: orange bottom border only, no chevron, no rounded corners */
       .menu-vdi__submenu {
-        @apply flex flex-col gap-2 py-2;
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
 
         .menu-vdi__item--child {
-          @apply font-bold text-white no-underline leading-snug;
-          border: 2px solid var(--color-secondary);
-          border-radius: 0.5rem;
-          margin: 0 1.5rem;
+          font-weight: 700;
+          line-height: 1.375;
+          border-bottom: 2px solid var(--color-secondary);
+          border-radius: 0;
+          background: transparent;
+          list-style: none;
 
           span {
-            @apply block w-full text-16px text-white p-3;
+            display: block;
+            width: 100%;
+            color: var(--color-white);
+            font-size: 1rem;
+            padding: 0.75rem 1.5rem;
           }
 
           a {
-            @apply block w-full text-16px text-white p-3 no-underline;
+            display: block;
+            width: 100%;
+            color: var(--color-white) !important;
+            font-size: 1rem;
+            font-weight: 700;
+            padding: 0.75rem 1.5rem;
+            text-decoration: none;
           }
 
           &:hover,
@@ -126,7 +171,12 @@
 
       /* Ensure menu items in sliding viewport have proper styling */
       .menu-vdi__level-items {
-        @apply flex flex-col gap-0;
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        list-style: none;
+        padding: 0;
+        margin: 0;
       }
     }