/* ============================================= MOBILE NAV — Hamburger Menu Appended to all pages via in ============================================= */ /* Hamburger button — hidden on desktop, shown on mobile */ .hamburger-btn { display: none; background: none; border: none; color: rgba(255, 255, 255, 0.9); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px; margin-left: 8px; transition: color 0.2s; flex-shrink: 0; } .hamburger-btn:hover, .hamburger-btn:focus { color: #e879a0; outline: none; } /* ─── Mobile breakpoint ─────────────────────── */ @media (max-width: 768px) { /* Show the hamburger button */ .hamburger-btn { display: block; } /* Allow nav-inner row to wrap so the open menu can appear as a second full-width row */ nav.site-nav .nav-inner { flex-wrap: wrap; align-items: center; } /* Logo stretches to fill the row so lang + burger naturally sit flush to the right */ nav.site-nav .logo { flex: 1; } /* Nav links: hidden by default on mobile (mirrors the per-page inline media query) */ nav.site-nav .nav-links { display: none; } /* ── Open state ──────────────────────────── */ nav.site-nav.nav-open .nav-links { display: flex !important; flex-direction: column; width: 100%; order: 10; /* appears below the logo/lang/burger row */ gap: 0; padding: 6px 0 14px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); animation: mobileNavSlide 0.18s ease-out; } nav.site-nav.nav-open .nav-links li { width: 100%; list-style: none; } nav.site-nav.nav-open .nav-links a { display: block; padding: 11px 2px; font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.07); transition: color 0.15s; text-decoration: none; } nav.site-nav.nav-open .nav-links li:last-child a { border-bottom: none; } nav.site-nav.nav-open .nav-links a:hover { color: #e879a0; } nav.site-nav.nav-open .nav-links a.active { color: #e879a0; font-weight: 700; } } /* Slide-in animation */ @keyframes mobileNavSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }