From 09d42ba2a9a59f654cbc9451410cd3f5efbcbad5 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sun, 28 Jun 2026 17:32:05 -0500
Subject: [PATCH] fix: style mobile menu per spec

Per the user's spec, the mobile menu is:
- Dark navy background, white links, 95% viewport width
- Parent items (those with child links) get an orange chevron
- Child items get an orange border; nothing else gets any border
- Bottom of menu has a Contact link styled as a button and social icons

Changes:

1. Menu CSS (styles/navigation/nav-mobile-sliding.css):
   - Switch the menu background from white to bg-cwc-blue-02 (dark navy)
   - Switch menu item text from black to white
   - Hide the existing .menu-vdi__submenu and show the children inline under their
     parent with a 2px orange border, rounded corners, and white text
   - Style the existing chevron SVG inside the parent <button> with the orange
     secondary color so it's visible against the navy background
   - Add a .menu-vdi__footer block (Contact button + social icons) anchored to
     the bottom of the menu panel, shown only when the toggle is aria-expanded
   - Hide .menu-vdi__footer entirely at desktop so it doesn't leak into the
     page DOM and trigger accessibility warnings

2. Menu template (views/components/nav-main.php):
   - Append a .menu-vdi__footer div after the menu items containing a Contact
     link to home_url('/contact/') and the existing social-media partial
   - The footer renders inside <nav> but is positioned via fixed CSS to align
     with the menu panel

Header/toggle button unchanged - the orange/coral rounded button design from
the original mobile-fidelity plan was already correct and is left alone.
---
 styles/navigation/nav-mobile-sliding.css | 178 +++++++++++++++++------
 views/components/nav-main.php            |  20 +++
 2 files changed, 150 insertions(+), 48 deletions(-)

diff --git a/styles/navigation/nav-mobile-sliding.css b/styles/navigation/nav-mobile-sliding.css
index d3df530..b7a2311 100644
--- a/styles/navigation/nav-mobile-sliding.css
+++ b/styles/navigation/nav-mobile-sliding.css
@@ -15,11 +15,14 @@
     }
 
     .menu-vdi--sliding {
-      @apply relative overflow-hidden bg-white w-[95%] right-0 z-10 py-6;
+      @apply relative overflow-hidden right-0 z-10 py-8 flex flex-col;
       @apply absolute hidden; /* Hidden by default */
       top: var(--hgtHeader);
       min-height: calc(100vh - var(--hgtHeader));
-      
+      width: 95%;
+      background: var(--color-cwc-blue-02);
+      color: var(--color-white);
+
       /* Container for all navigation levels */
       .menu-vdi__viewport {
         @apply flex transition-transform duration-300 ease-in-out;
@@ -34,8 +37,8 @@
 
       /* Back button for secondary levels */
       .menu-vdi__back {
-        @apply flex items-center gap-2 p-4 border-b border-gray-200 font-bold text-black hover:bg-secondary-200 focus-visible:bg-secondary-200 cursor-pointer;
-        
+        @apply flex items-center gap-2 p-4 border-b border-gray-200 font-bold text-white hover:bg-white/10 focus-visible:bg-white/10 cursor-pointer;
+
         svg {
           @apply w-5 h-5;
         }
@@ -43,36 +46,71 @@
 
       /* Level indicator for context */
       .menu-vdi__level-title {
-        @apply p-4 border-b border-gray-200 font-bold text-lg text-center bg-gray-50;
+        @apply p-4 border-b border-white/20 font-bold text-lg text-center text-white bg-white/10;
       }
 
-      /* Navigation items in sliding mode */
-      .menu-vdi__item {
+      /* Top-level menu items */
+      .menu-vdi__level--main > .menu-vdi__level-items > .menu-vdi__item {
         a,
         button {
           /* text */
-          @apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
+          @apply font-bold text-22px text-white no-underline leading-snug;
           /* spacing & display */
-          @apply block w-full p-4;
+          @apply flex items-center w-full px-6 py-5;
           /* interaction */
-          @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+          @apply focus-visible:bg-white/10 hover:bg-white/10;
         }
 
         a {
-          @apply block w-full;
+          justify-content: flex-start;
         }
 
         button {
-          @apply flex w-full justify-between items-center;
-          
-          /* Arrow indicator for items with children */
-          svg {
-            @apply w-5 h-5;
+          justify-content: space-between;
+        }
+
+        /* Parent items keep their orange chevron visible */
+        button svg {
+          fill: none;
+          stroke: var(--color-secondary);
+          stroke-width: 2.5;
+          width: 0.875rem;
+          height: 0.875rem;
+          transition: transform 0.2s ease;
+        }
+
+        /* Rotate the chevron when the parent's submenu is expanded */
+        button[aria-expanded="true"] svg {
+          transform: rotate(180deg);
+        }
+      }
+
+      /* Child items: orange border, no chevron, indented under their parent */
+      .menu-vdi__submenu {
+        @apply flex flex-col gap-2 py-2;
+
+        .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;
+
+          span {
+            @apply block w-full text-16px text-white p-3;
+          }
+
+          a {
+            @apply block w-full text-16px text-white p-3 no-underline;
+          }
+
+          &:hover,
+          &:focus-visible {
+            background: rgba(255, 255, 255, 0.1);
           }
         }
       }
 
-      /* Hide submenu toggles in sliding mode as they become navigation buttons */
+      /* Hide traditional submenus in sliding mode as their parent items become navigation buttons */
       .menu-vdi__toggle {
         /* Override the accordion toggle behavior */
         &[aria-expanded="true"] {
@@ -86,45 +124,89 @@
         }
       }
 
-      /* Hide traditional submenus in sliding mode */
-      .menu-vdi__submenu {
-        @apply hidden;
-      }
-
       /* Ensure menu items in sliding viewport have proper styling */
       .menu-vdi__level-items {
-        @apply flex-col;
-        
-        .menu-vdi__item {
-          @apply w-full;
-          
-          a {
-            @apply p-4 block w-full no-underline;
-          }
-          
-          span {
-            @apply p-4 block w-full font-bold;
-          }
-        }
-        
-        /* Style nested items that were converted from submenus */
-        .menu-vdi__nested-items {
-          @apply block;
-          
-          .menu-vdi__item {
-            @apply w-full;
-            
-            a {
-              @apply p-4 pl-8 block w-full no-underline; /* Add indent for nested items */
-            }
-          }
-        }
+        @apply flex flex-col gap-0;
       }
     }
 
+    /* Footer area: Contact button + social icons below the menu. The footer is a
+       sibling of .menu-vdi--sliding inside .nav-main, so it cannot be a descendant
+       selector of the menu. */
+    .menu-vdi__footer {
+      display: none;
+    }
+
+    .nav-main__toggle[aria-expanded="true"] ~ .menu-vdi__footer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+      padding: 2rem 1.5rem 1.5rem;
+      inset: auto 2.5% 0;
+      position: fixed;
+      max-width: 95%;
+    }
+
+    .menu-vdi__contact-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      text-align: center;
+      text-decoration: none;
+      background: var(--color-secondary);
+      border-radius: 1.25rem 0.25rem;
+      color: var(--color-white);
+      padding: 0.75rem 2.5rem;
+      width: 100%;
+      max-width: 20rem;
+    }
+
+    .menu-vdi__contact-button:hover,
+    .menu-vdi__contact-button:focus-visible {
+      filter: brightness(1.1);
+    }
+
+    .menu-vdi__social {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+    }
+
+    .menu-vdi__social-icon {
+      align-items: center !important;
+      display: inline-flex !important;
+      height: 2.75rem !important;
+      justify-content: center !important;
+      padding: 0 !important;
+      width: 2.75rem !important;
+    }
+
+    .menu-vdi__social-icon svg {
+      fill: var(--color-white);
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    .menu-vdi__social-icon:hover,
+    .menu-vdi__social-icon:focus-visible {
+      opacity: 0.8;
+    }
+
     /* Show sliding menu when toggle button is expanded and menu has sliding class */
     .nav-main__toggle[aria-expanded="true"] + .menu-vdi--sliding {
       @apply !block; /* Use !important to override hidden */
     }
   }
+}
+
+/* The mobile menu footer (Contact button + social icons) only renders inside
+   the open mobile menu. Hide it on desktop where it would otherwise leak into
+   the DOM and trigger accessibility warnings. */
+@media screen and (min-width: 62.5rem) {
+  .menu-vdi__footer {
+    display: none !important;
+  }
 }
\ No newline at end of file
diff --git a/views/components/nav-main.php b/views/components/nav-main.php
index 75822f9..7bdf370 100644
--- a/views/components/nav-main.php
+++ b/views/components/nav-main.php
@@ -21,4 +21,24 @@ global $views;
 		$menuItems->render();
 	}
 	?>
+
+	<div class="menu-vdi__footer">
+		<a class="menu-vdi__contact-button button dark" href="<?php echo esc_url( home_url( '/contact/' ) ); ?>">
+			<?php echo esc_html__( 'Contact', 'cwc' ); ?>
+		</a>
+
+		<div class="menu-vdi__social">
+			<?php
+			get_template_part(
+				'views/partials/social-media',
+				null,
+				array(
+					'circle'  => false,
+					'classes' => 'menu-vdi__social-icon',
+					'size'    => '20',
+				)
+			);
+			?>
+		</div>
+	</div>
 </nav>