From 8b5275a30be211da63656808aff15058f8c2ed3f Mon Sep 17 00:00:00 2001
From: dave <futurechimp@users.noreply.github.com>
Date: Mon, 13 Apr 2026 11:42:11 +0000
Subject: [PATCH] fix: dropdown hover gap and z-index so menu is clickable on
 desktop and mobile

Invisible bridge element fills the gap between toggle and menu so
hover chain doesn't break. Dropdown z-index raised above hero graphic
so links aren't obscured on mobile.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 website/style.css | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/website/style.css b/website/style.css
index 6db8cbfe..acb7940d 100644
--- a/website/style.css
+++ b/website/style.css
@@ -114,18 +114,27 @@ header nav a:hover { color: var(--text); opacity: 1; }
   cursor: pointer;
 }
 
-.nav-dropdown-menu {
-  display: none;
+/* Invisible bridge between toggle and menu so hover doesn't break */
+.nav-dropdown::after {
+  content: '';
   position: absolute;
   top: 100%;
   right: 0;
-  margin-top: 0.5rem;
+  width: 100%;
+  height: 0.5rem;
+}
+
+.nav-dropdown-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 0.5rem;
   padding: 0.5rem 0;
   min-width: 140px;
-  z-index: 100;
+  z-index: 200;
 }
 
 .nav-dropdown-menu a {
@@ -153,6 +162,8 @@ header nav a:hover { color: var(--text); opacity: 1; }
 
 .hero-graphic {
   margin-bottom: 2.5rem;
+  position: relative;
+  z-index: 1;
 }
 
 .hero-husky {