/* Mobile Menu Button */
.menu {
  display: none;
  padding: 7px 13px;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hamburger Icon (Default) */
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink-soft);
  border-radius: 2px;
  transition: 0.25s ease;
  position: relative;
}

.menu-icon::before {
  position: absolute;
  top: -6px;
}

.menu-icon::after {
  position: absolute;
  top: 6px;
}

/* When mobile menu is open → animate into "X" */
.menu.open .menu-icon {
  background: transparent; /* center line disappears */
}

.menu.open .menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.menu.open .menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* =========================================================
   Mobile Dropdown Menu
========================================================= */

.mobile-menu {
    display: none;
  }

  
  @media (max-width: 768px) {
    .mobile-menu {
      position: absolute;
      top: 64px;
      right: 20px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 0;
      width: 180px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px);
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 999;
    }
  
    .mobile-menu.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
  
    .mobile-menu a {
      padding: 10px 18px;
      color: var(--ink-soft);
      text-decoration: none;
      font-size: 0.95rem;
      transition: background var(--transition), color var(--transition);
    }
  
    .mobile-menu a:hover {
      background: rgba(255, 255, 255, 0.04);
      color: var(--ink);
    }

    .menu {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }