/* 頁首樣式 - 聯合通科技股份有限公司 */

/* 主要頁首容器 */
.site-header {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: fixed; /* 改為fixed而非sticky，提高相容性 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s ease;
}

/* 頁首狀態類別 */
.header-hidden {
  transform: translateY(-100%); /* 向上隱藏 */
}

.header-scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 捲動時加深陰影 */
}

/* 透明頁首樣式（用於首頁視差背景） */
.header-transparent {
  background-color: rgba(255, 255, 255, 0.9); /* 稍微提高不透明度 */
  box-shadow: none;
}

.header-transparent .nav-link {
  color: #333; /* 改為深色而非白色，提高可讀性 */
}

/* 為了彌補fixed頁首佔用的空間 */
body {
  padding-top: 80px; /* 調整為新的頁首高度 */
}

/* 在透明頁首上，移除body的頂部間距 */
body.home {
  padding-top: 0;
}

/* 容器設定 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 頁首包裝容器 - 新增 */
.header-wrapper {
  display: flex;
  justify-content: flex-end; /* 改為靠右對齊 */
  align-items: center;
  padding: 15px 0;
}

/* 公司標誌 */
.logo {
  flex: 0 0 auto;
  margin-right: 30px; /* 與導航保持距離 */
}

.logo-img {
  max-height: 50px;
  width: auto;
}

/* 主要導航 */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 改為靠右對齊 */
  flex: 1; /* 佔據剩餘空間 */
}

/* 導航列表 */
.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap; /* 確保不換行 */
}

/* 導航項目 */
.nav-item {
  margin: 0 15px; /* 調整間距 */
  position: relative;
  white-space: nowrap; /* 確保文字不換行 */
}

/* 導航連結 */
.nav-link {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 5px;
  display: block;
  position: relative;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #0066cc;
}

/* 連結底部線條效果 - 簡化 */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #0066cc;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* 下拉選單樣式 */
.dropdown {
  position: relative;
}

.dropdown-toggle::after {
  content: '\f107'; /* FontAwesome 向下箭頭 */
  font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif; /* 增加相容性 */
  font-weight: 900;
  margin-left: 5px;
  transition: transform 0.2s ease;
}

/* 下拉選單容器 - 解決易滑掉問題 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  display: none; /* 使用簡單的顯示/隱藏而非複雜的CSS轉場 */
  padding: 10px 0;
  z-index: 100;
  margin-top: 5px; /* 添加一些間距 */
}

/* 下拉選單項目 */
.dropdown-menu li {
  list-style: none;
}

.dropdown-menu li a {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dropdown-menu li a i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
  color: #0066cc;
}

.dropdown-menu li a:hover {
  background: #f5f5f5;
  color: #0066cc;
  padding-left: 20px;
}

/* 當下拉選單激活時顯示選單 */
.dropdown.active .dropdown-menu {
  display: block; /* 簡單的顯示/隱藏 */
}

/* 下拉選單保持顯示的寬容區域 - 解決易滑掉問題 */
.dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px; /* 增加可點擊區域 */
  background: transparent;
}

/* 當下拉選單激活時旋轉箭頭 */
.dropdown.active .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* 移動裝置選單按鈕 */
.mobile-menu-toggle {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 20px;
  position: relative;
  margin-left: 15px; /* 與導航保持距離 */
}

.mobile-menu-toggle span {
  display: block;
  height: 2px;
  background: #333;
  width: 100%;
  position: absolute;
  left: 0;
  transition: 0.25s ease-in-out;
}

.mobile-menu-toggle span:nth-child(1) {
  top: 0;
}

.mobile-menu-toggle span:nth-child(2) {
  top: 9px;
}

.mobile-menu-toggle span:nth-child(3) {
  top: 18px;
}

/* 移動裝置選單按鈕激活狀態 */
.mobile-menu-toggle.active span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* 響應式設計 */
@media (max-width: 991px) {
  /* 調整頁首空間 */
  body {
    padding-top: 70px; /* 縮小在平板上的頂部間距 */
  }
  
  /* 調整 logo 大小 */
  .logo-img {
    max-height: 40px;
  }
  
  /* 縮小導航間距 */
  .nav-item {
    margin: 0 8px;
  }
  
  .header-wrapper {
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  /* 調整頁首空間 */
  body {
    padding-top: 65px; /* 縮小在手機上的頂部間距 */
  }
  
  /* 調整頁首在行動裝置的布局 */
  .header-wrapper {
    justify-content: space-between;
    padding: 8px 0;
  }
  
  .logo-img {
    max-height: 35px;
  }
  
  .mobile-menu-toggle {
    display: block;
  }
  
  /* 行動裝置時導航顯示在LOGO下方 */
  .main-nav {
    order: 3; /* 改變排序順序 */
    width: 100%;
    margin-top: 10px;
    justify-content: flex-start;
  }
  
  /* 行動裝置時的導航列表樣式 */
  .nav-list {
    flex-direction: row; /* 保持水平排列 */
    position: fixed;
    top: 65px; /* 應與行動裝置頁首高度一致 */
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    padding: 0;
    max-height: 0; /* 使用max-height而非多重屬性 */
    overflow-y: hidden;
    overflow-x: auto; /* 允許水平滾動 */
    transition: max-height 0.3s ease;
    justify-content: flex-start;
  }
  
  .nav-list.active {
    max-height: 60px; /* 只顯示一行高度 */
    overflow-y: hidden;
    padding: 10px 0;
  }
  
  .nav-item {
    margin: 0 10px;
    width: auto; /* 不佔據全寬 */
    flex-shrink: 0; /* 防止縮小 */
  }
  
  .nav-link {
    padding: 12px 15px;
    border-bottom: none; /* 移除底部邊框 */
    border-right: 1px solid #eee; /* 改為右側邊框 */
  }
  
  .nav-item:last-child .nav-link {
    border-right: none; /* 最後一項無邊框 */
  }
  
  /* 行動裝置下拉選單 - 解決彈窗顯示問題 */
  .dropdown-menu {
    position: fixed; /* 改為固定定位，確保在行動裝置上正確顯示 */
    top: 125px; /* 調整頂部距離，確保在導航列表下方顯示 */
    left: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 100%; /* 在行動裝置上使用全寬 */
    margin-top: 0;
    border-radius: 0; /* 移除圓角 */
    background-color: #fff;
    max-height: calc(100vh - 125px); /* 限制最大高度為視窗高度減去頂部距離 */
    overflow-y: auto; /* 允許垂直滾動 */
    z-index: 1001; /* 確保顯示在最上層 */
  }
  
  /* 添加延遲隱藏效果 */
  .dropdown:not(:hover) .dropdown-menu {
    animation-delay: 0.3s; /* 增加延遲，防止意外滑出 */
  }
  
  /* 下拉選單項目在行動裝置上的樣式 */
  .dropdown-menu li a {
    padding: 12px 15px;
    white-space: normal; /* 允許文字換行 */
  }
  
  .dropdown-menu li a:hover {
    padding-left: 20px;
  }
  
  /* 防止下拉選單底線重疊 */
  .nav-link::after {
    display: none;
  }
  
  /* 調整首頁透明頁首在行動裝置上的行為 */
  .header-transparent {
    background-color: #fff; /* 在行動裝置上不使用透明效果 */
  }
  
  .header-transparent .nav-link {
    color: #333;
  }
}

/* 為JavaScript添加類以處理頁面加載時的初始狀態 */
.js-loading .site-header {
  transition: none !important;
}