/* --- 漢堡選單按鈕樣式 --- */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: white;
  transition: 0.3s;
}

/* 漢堡轉叉叉動畫 */
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 手機版選單 RWD 覆蓋 --- */
@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  .nav-links {
    display: flex; /* 覆蓋原本的 display: none */
    position: fixed;
    top: 64px;
    right: -100%; /* 預設隱藏在右側 */
    width: 70%;
    height: calc(100vh - 64px);
    background: var(--charcoal-mid);
    flex-direction: column;
    padding: 40px;
    gap: 30px;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    border-left: 1px solid var(--orange);
  }

  .nav-links.active {
    right: 0; /* 點擊後拉進畫面 */
  }

  .nav-links a {
    font-size: 18px;
    color: white;
    width: 100%;
    display: block;
  }
}