/* ---------- Mobile menu: hamburger button and slide-out panel ---------- */
.nav-toggle, .nav-backdrop { display: none; }

@media (max-width: 720px) {
  /* Only collapse the menu when the script is running, so it always works without it */
  .has-js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--text); cursor: pointer;
    position: relative; z-index: 2;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

  .has-js .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1;
    width: min(80vw, 320px); overflow-y: auto;
    padding: 5.5rem 1.25rem 2rem;
    background: var(--bg); border-left: 1px solid var(--line);
    box-shadow: -10px 0 30px rgba(30, 27, 46, 0.12);
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .has-js .site-nav::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--c-magenta), var(--c-coral), var(--c-sun), var(--c-teal), var(--c-violet));
  }
  .has-js .site-nav.is-open { transform: none; visibility: visible; transition: transform 0.25s ease; }
  .has-js .site-nav ul { flex-direction: column; gap: 0.35rem; }
  .has-js .site-nav a { font-size: 1.15rem; padding: 0.75rem 1rem; }

  .has-js .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 0;
    background: rgba(18, 16, 28, 0.45);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .has-js .nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }

  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { z-index: 30; }
}