/* 1. 徹底隱藏 Bootstrap 原始按鈕 */
.navbar-toggle {
  display: none !important;
}

/* 2. 自訂漢堡按鈕的基礎樣式 (桌機版預設隱藏) */
.custom-hamburger {
  display: none; 
}

/* 3. 手機版 RWD 樣式 (768px 以下顯示) */
@media (max-width: 768px) {
  .custom-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 使用 center，不要用 space-around */
    align-items: center;
    
    /* 核心設定：全部統一使用 vw */
    gap: 2vw; /* 線條之間的固定間距 */
    width: 14vw; 
    height: 14vw; 
    
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2vw; /* 內距也用 vw 保持比例 */
    margin: 0;
    z-index: 1050;
    -webkit-appearance: none;
  }

  /* 無障礙焦點樣式 */
  .custom-hamburger:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* 現代化三條線設計 */
  .custom-hamburger .line {
    width: 100%;
    height: 0.8vw; /* 線條厚度 */
    background-color: #333333; 
    border-radius: 0.5vw;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
  }

  /* === 點擊後的叉叉動畫 === */
  .custom-hamburger.is-active .line:nth-child(1) {
    /* 向下移動： gap (2vw) + 線條厚度 (0.8vw) = 2.8vw */
    transform: translateY(2.8vw) rotate(45deg);
  }
  
  .custom-hamburger.is-active .line:nth-child(2) {
    opacity: 0; 
    transform: scale(0);
  }
  
  .custom-hamburger.is-active .line:nth-child(3) {
    /* 向上移動： gap (2vw) + 線條厚度 (0.8vw) = 2.8vw */
    transform: translateY(-2.8vw) rotate(-45deg);
  }
}