✅ Header Visibility Test

• ✅ Custom element <genesis-header> displays as block
• ✅ Header has 70px minimum height
• ✅ Dark glassmorphism background visible
• ✅ White text on dark background (high contrast)
• ✅ Logo and title clearly visible
• ✅ Sticky positioning works

Scroll down to test sticky behavior ↓

Section 2: Custom Element Reset

The custom element <genesis-header> now has:

• display: block - No longer inline (0px height)
• width: 100% - Full width container
• surface-glass entity - Dark glassmorphism background

This ensures the browser treats it as a proper block-level element.

Section 3: Entity Variant Update

Changed from genesis-entity('primary') to genesis-entity('surface-glass'):

• Before: White background (oklch(0.99 0.005 90)) with white text = invisible!
• After: Dark background (oklch(0.15 0.02 250 / 0.85)) with white text = visible!

Section 4: Spatial Engine Fix

Removed genesis-environment('navigation-primary') from header wrapper:

• Issue: navigation-primary applies left: -100% on mobile
• Fix: Only navigation menu (__nav) should use that mixin
• Result: Header wrapper no longer hidden on mobile

Section 5: Visual Verification

Scroll to the top to verify:

• ✅ Header is sticky and follows scroll
• ✅ Minimum 70px height maintained
• ✅ Dark glassmorphism effect visible
• ✅ White text clearly readable
• ✅ No layout shifts or collapse