/* ✅ Header 固定設定：桌機與手機共用 */
header, .sticky-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
  background-color: #F4F4F4;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  height:90px;
}
body { margin-top: 81px; }

/* ✅ 手機 Header 與 Logo 對齊設定 */
@media screen and (max-width: 768px) {
  header, .sticky-header {
    height: 80px !important;
  }
  header .logo {
    height: 70px;
    display: flex;
    align-items: center;
    padding-top: 15px;
  }
  header .logo img {
    height: 20px;
    margin: 15px;
  }
  header .navigation {
    font-size: 25px;
    line-height: 1.5;
  }
}

/* ✅ 桌機選單樣式與 hover 效果 */
.main-navigation .menu > li {
  margin: 0 12px;
}
.main-navigation .menu > li > a,
nav li a {
  display: inline-block;
  font-size: 16px;
  letter-spacing: 0.5px;
  padding: 12px 4px;
  transition: transform 0.25s ease, color 0.2s ease;
}
.main-navigation .menu > li > a:hover,
nav li a:hover {
  transform: scale(1.08);
  color: #2A3D66 !important;
}

/* ✅ 桌機子選單滑入動畫 */
@media (min-width: 769px) {
  .main-navigation .menu ul.sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .main-navigation .menu li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ✅ 手機選單外層背景 */
.menu-modal {
  background-color: #F7F4EF !important;
}

/* ✅ 手機選單每一列主選單項目 */
.menu-modal .modal-menu > li {
  border-bottom: 1px solid #DDD5CC;
  background-color: #EFEAE4;
  padding: 16px 20px;
  font-size: 17px;
  color: #3C463D;
  transition: background-color 0.3s ease;
}
.menu-modal .modal-menu > li:hover {
  background-color: #E6E1DC;
}

/* ✅ 主選單文字（手機 + 桌機） */
.menu-modal .modal-menu > li > a {
  padding: 18px 20px !important;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #2B2F2C !important;
  background-color: #EFE9E3 !important;
  display: block;
  transition: color 0.3s ease;
}
.menu-modal .modal-menu > li > a:hover {
  color: #2A3D66 !important;
}

/* ✅ 手機子選單樣式 */
.menu-modal .modal-menu li .sub-menu {
  background-color: #FFFFFF;
  margin: 0 0 12px 0;
  padding: 10px 0;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  animation: fadeSlideIn 0.3s ease both;
}
.menu-modal .modal-menu li .sub-menu li {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 400;
  color: #7A8079 !important;
  border-bottom: 1px solid #F1F1F1;
}
.menu-modal .modal-menu li .sub-menu li:last-child {
  border-bottom: none;
}
.menu-modal .modal-menu li .sub-menu li:hover {
  background-color: #F9F9F9;
  color: #2A3D66;
}
.menu-modal .modal-menu .sub-menu a {
  padding-left: 32px !important;
}

/* ✅ 子選單箭頭動畫 */
.menu-modal .menu-item-has-children > a::after {
  content: '▸';
  font-size: 13px;
  float: right;
  margin-right: 10px;
  transition: transform 0.3s ease;
}
.menu-modal .menu-item-has-children.open > a::after {
  transform: rotate(90deg);
}

/* ✅ 手機選單進場動畫 */
.menu-modal.active .modal-menu > li {
  opacity: 0;
  transform: scale(0.95) translateY(8px);
  animation: fadeGrowIn 0.35s ease forwards;
}
.menu-modal.active .modal-menu > li:nth-child(1) { animation-delay: 0.05s; }
.menu-modal.active .modal-menu > li:nth-child(2) { animation-delay: 0.10s; }
.menu-modal.active .modal-menu > li:nth-child(3) { animation-delay: 0.15s; }
.menu-modal.active .modal-menu > li:nth-child(4) { animation-delay: 0.20s; }
.menu-modal.active .modal-menu > li:nth-child(5) { animation-delay: 0.25s; }
.menu-modal.active .modal-menu > li:nth-child(6) { animation-delay: 0.30s; }
.menu-modal.active .modal-menu > li:nth-child(7) { animation-delay: 0.35s; }
.menu-modal.active .modal-menu > li:nth-child(8) { animation-delay: 0.40s; }
.menu-modal.active .modal-menu > li:nth-child(9) { animation-delay: 0.45s; }
.menu-modal.active .modal-menu > li:nth-child(10) { animation-delay: 0.50s; }

/* ✅ 動畫關鍵幀 */
@keyframes fadeGrowIn {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ✅ CTA 按鈕樣式（聯絡我們） */
.menu-modal .modal-menu a[href*="contact"],
.menu-modal .modal-menu a[href*="line"],
.menu-modal .modal-menu a[href*="聯絡我們"] {
  display: block;
  background-color: transparent;
  border: 1px solid #4E5F4E;
  color: #4E5F4E !important;
  border-radius: 6px;
  margin: 24px 20px 0 20px;
  text-align: center;
  padding: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.menu-modal .modal-menu a[href*="contact"]:hover {
  background-color: #4E5F4E;
  color: #fff !important;
}