/* ============================================================
   Header Styles — Foxconntech Design System v2.0
   basic-style token 已由 base.html 載入的 basic-style.css 提供
   ============================================================ */

/* ── Header Shell ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #ffffff;
  border-bottom: 1px solid #dce3ed;
  box-shadow: 0 2px 12px rgba(12, 35, 64, 0.08);
}

.header-bar {
  height: 80px;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 5rem;
  padding-right: 5rem;
}

/* ── Logo ─────────────────────────────────────────────────── */
.header-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo {
  width: 120px;
  margin: 0;
}

/* ── Desktop Nav ─────────────────────────────────────────── */
.desktop-nav {
  display: flex;
  align-self: stretch;
}

.desktop-nav-list {
  list-style: none;
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  position: static;
  /* dropdown 定位相對於 .site-header */
}

.nav-item>a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  color: #0c2340;
  font-size: 1.125rem;
  font-weight: 500;
  transition: color 0.2s ease;
  white-space: nowrap;
}

/* 英文版 nav 文字較長，調整字體與 padding 確保適當間距與不換行/不溢出 */
html[lang="en"] .nav-item>a {
  font-size: 0.9375rem;
  padding: 0 10px;
}

.nav-item>a:hover,
.nav-item.is-active>a {
  color: var(--color-accent);
}

/* ── Language Globe Dropdown (Desktop) ─────────────────────── */
.nav-lang--globe {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 12px;
  flex-shrink: 0;
}

/* 地球按鈕本體 */
.lang-globe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  color: #5a6b7e;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  line-height: 0;
}

.lang-globe-btn:hover,
.nav-lang--globe:hover .lang-globe-btn {
  color: var(--color-accent);
  transform: scale(1.12);
}

/* 隱藏標籤文字與箭頭 */
.lang-globe-label,
.lang-globe-chevron {
  display: none;
}

/* 下拉面板 */
.lang-globe-dropdown {
  position: absolute;
  top: 100%;
  /* 緊貼按鈕底部，無間距，hover 不中斷 */
  left: 50%;
  width: 108px;
  background: #ffffff;
  border: 1px solid #dce3ed;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(12, 35, 64, 0.1);
  padding: 6px 0 4px;
  /* top padding 製造視覺空隙感 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 200;
}

/* hover 或 JS 控制顯示 */
.nav-lang--globe:hover .lang-globe-dropdown,
.nav-lang--globe.is-open .lang-globe-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 選項 */
.lang-globe-item,
.lang-globe-item:link,
.lang-globe-item:visited,
.lang-globe-item:active {
  display: block;
  padding: 9px 16px;
  font-size: 0.875rem;
  color: #0c2340 !important;
  font-weight: 400;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.lang-globe-item:hover {
  background: #f4f6f9;
  color: var(--color-accent) !important;
}

/* 目前選中語言：藍色文字加粗 */
.lang-globe-item.is-active {
  color: var(--color-accent) !important;
  font-weight: 600;
}

.nav-lang {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  flex-shrink: 0;
  /* Bug2 fix: 防止英文版被 flex 壓縮造成豎排 */
}

.lang-btn {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 2px 8px;
  margin: 0 2px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #dce3ed;
  color: #5a6b7e;
  background-color: transparent;
}

.lang-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.lang-btn.is-active {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  font-weight: 600;
  opacity: 1;
}

/* ── Desktop Dropdown Panel ──────────────────────────────── */
/* .nav-dropdown 放在 .nav-item li 內，用 position:fixed 實現全寬效果
   (fixed 相對於 viewport，top:80px 對齊 header-bar 底部) */
.nav-dropdown {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 隱形懸停橋接層：向上延伸 20px 進入 header 內部，避免滑鼠在邊界或斜向移動時因微小間隙導致面板閃退 */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

/* CSS hover 控制下拉顯示 */
.nav-item.has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dropdown-inner {
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  transition: transform 0.2s ease;
}

.nav-item.has-dropdown:hover .dropdown-inner {
  transform: translateY(0);
}

.dropdown-col {
  display: inline-block;
  padding: 0 2rem;
  min-width: 140px;
  list-style: none;
}

/* 分類標題 */
.dropdown-col .dropdown-title {
  position: relative;
  font-size: 1.125rem;
  padding-left: 1rem;
}

.dropdown-col .dropdown-title>a {
  color: var(--color-primary-dark);
}

.dropdown-col .dropdown-title>a:hover {
  color: var(--color-primary-dark);
}

/* 一般子連結 */
.dropdown-col li {
  font-size: 1rem;
  line-height: 1.6rem;
  padding-left: 15px;
}

.dropdown-col li a {
  color: var(--color-primary-light);
  transition: color 0.15s ease;
}

.dropdown-col li a:hover,
.dropdown-col li a.is-active-link {
  color: var(--color-accent-light);
}

/* 英文版下拉面板字體微調 */
html[lang="en"] .dropdown-col .dropdown-title {
  font-size: 1rem;
}

html[lang="en"] .dropdown-col li {
  font-size: 0.875rem;
  line-height: 1.5rem;
}


/* ── Mobile Controls ─────────────────────────────────────── */
/* 手機語言按鈕：預設隱藏，手機模式居中顯示 */
.mobile-lang {
  display: none;
  align-items: center;
  gap: 1rem;
  /* 加大兩個語言按鈕間距 */
}

/* 漢堡按鈕：預設隱藏，手機版 media query 開啟 */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  align-items: center;
  line-height: 0;
  margin-right: 0.5rem;
  /* 向左移離右邊緣 */
}

.hamburger-icon {
  height: 40px;
  width: auto;
  filter: invert(1) sepia(1) saturate(5) hue-rotate(185deg) brightness(0.3);
}

/* 手機版語言按鈕：純文字，深色（適合白色 header） */
.lang-btn-mobile,
.lang-btn-mobile:link,
.lang-btn-mobile:visited,
.lang-btn-mobile:active {
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
  margin: 0 4px;
  border: none;
  background-color: transparent;
  color: #5a6b7e;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
  text-decoration: none;
}

.lang-btn-mobile.is-active,
.lang-btn-mobile.is-active:link,
.lang-btn-mobile.is-active:visited {
  font-weight: bold;
  color: #0c2340;
}

/* ── Mobile Menu Drawer ──────────────────────────────────── */
.mobile-menu {
  display: none;
  background-color: var(--color-white);
  width: 100%;
  max-height: 600px;
  overflow-y: auto;
  z-index: 99;
}

.mobile-menu.is-open {
  display: block;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-item {
  border-bottom: 1px solid var(--color-primary);
  margin: 0;
}

/* Bug3 fix: basic-style.css 的全局 a:link 顏色為白色
   需要更高優先度的選擇器才能覆蓋 */
.mobile-menu .mobile-nav-link,
.mobile-menu .mobile-nav-link:link,
.mobile-menu .mobile-nav-link:visited,
.mobile-menu .mobile-nav-link:active {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--color-primary);
  font-size: 1rem;
}

.mobile-menu .mobile-nav-link:hover {
  color: var(--color-accent-light);
}

.mobile-menu .mobile-nav-link:active {
  background-color: rgba(0, 0, 0, 0.06);
  /* 按壓輕微變深 */
}

/* .mobile-has-submenu：column 方向 flex，上方是標題行，下方是 submenu */
.mobile-nav-item.mobile-has-submenu {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  /* 消除手機點擊高亮閃爍 */
  outline: none;
  user-select: none;
  /* 防止點擊時選取文字造成 repaint */
}

/* 標題行（包含文字連結 + 箭頭）— 點這裡觸發 toggle */
.mobile-nav-row {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem 0.75rem 1.5rem;
  transition: background-color 0.1s ease;
}

.mobile-nav-row:active {
  background-color: rgba(0, 0, 0, 0.06);
  /* 按壓時輕微變深 */
}

/* 標題連結：padding 歸零，只有文字字元本身可點擊跳頁 */
.mobile-menu .mobile-nav-title,
.mobile-menu .mobile-nav-title:link,
.mobile-menu .mobile-nav-title:visited,
.mobile-menu .mobile-nav-title:active {
  flex: none;
  padding: 0;
  margin: 0;
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1.4;
}

.mobile-menu .mobile-nav-title:hover {
  color: var(--color-accent-light);
}

/* 箭頭指示（視覺用，靠右） */
.mobile-nav-arrow {
  margin-left: auto;
  padding: 0 0.25rem;
  font-size: 0.65rem;
  color: var(--color-primary);
  transition: transform 0.2s ease;
  user-select: none;
}

.mobile-nav-arrow.is-open {
  transform: rotate(180deg);
}

/* ── Mobile First-Level Submenu ──────────────────────────── */
.mobile-submenu {
  display: none;
  background-color: #f0f4f8;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-submenu.is-open {
  display: block;
}

.mobile-submenu>li {
  margin: 0;
  border-bottom: 1px solid rgba(12, 35, 64, 0.07);
}

.mobile-submenu>li>a {
  display: block;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  color: var(--color-primary);
  font-size: 1rem;
  transition: background-color 0.1s ease, color 0.15s ease;
}

.mobile-submenu>li>a:hover {
  color: var(--color-accent-light);
}

.mobile-submenu>li>a:active {
  background-color: rgba(12, 35, 64, 0.05);
}

/* ── Mobile Second-Level Submenu ─────────────────────────── */
/* 二層 split row：同一層邏輯，li 為 column flex，row 含標題連結+箭頭 */
.mobile-has-submenu-inner {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}

.mobile-submenu-row {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem 0.6rem 2.5rem;
  transition: background-color 0.1s ease;
}

.mobile-submenu-row:active {
  background-color: rgba(12, 35, 64, 0.05);
}

.mobile-menu .mobile-submenu-title,
.mobile-menu .mobile-submenu-title:link,
.mobile-menu .mobile-submenu-title:visited,
.mobile-menu .mobile-submenu-title:active {
  flex: none;
  padding: 0;
  margin: 0;
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1.4;
}

.mobile-menu .mobile-submenu-title:hover {
  color: var(--color-accent-light);
}

.mobile-submenu-arrow {
  margin-left: auto;
  padding: 0 0.25rem;
  font-size: 0.65rem;
  color: #5a6b7e;
  transition: transform 0.2s ease;
  user-select: none;
}

.mobile-submenu-arrow.is-open {
  transform: rotate(180deg);
}

.mobile-submenu-inner {
  display: none;
  background-color: #e4eaf2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-submenu-inner.is-open {
  display: block;
}

.mobile-submenu-inner>li {
  margin: 0;
  border-bottom: 1px solid rgba(12, 35, 64, 0.06);
}

.mobile-submenu-inner>li>a {
  display: block;
  padding: 0.5rem 1rem 0.5rem 3.5rem;
  color: var(--color-primary);
  font-size: 0.95rem;
  transition: background-color 0.1s ease, color 0.15s ease;
}

.mobile-submenu-inner>li>a:hover {
  color: var(--color-accent-light);
}

.mobile-submenu-inner>li>a:active {
  background-color: rgba(12, 35, 64, 0.06);
}

/* ── Responsive Breakpoints ──────────────────────────────── */

/* 中型桌機/筆電（1201px ~ 1400px）：微調英文導覽列字體與間距 */
@media (max-width: 1400px) {
  html[lang="en"] .nav-item>a {
    font-size: 0.875rem;
    padding: 0 7px;
  }
}

/* 桌機（1201px 以上）：強制隱藏手機選單（避免從手機 resize 到桌機後殘留） */
@media (min-width: 1201px) {

  .mobile-menu,
  .mobile-menu.is-open {
    display: none !important;
  }
}

/* 手機/平板（1200px 以下）：切換為手機導覽模式 */
@media (max-width: 1200px) {
  .desktop-nav {
    display: none;
  }

  /* 手機模式：語言按鈕居中、漢堡靠右，形成 [Logo][lang][漢堡] 三段式 */
  .mobile-lang {
    display: flex;
  }

  .hamburger-btn {
    display: flex;
  }
}

/* 小螢幕手機（600px 以下）：微調間距與抽屜高度 */
@media (max-width: 600px) {
  .header-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mobile-menu {
    max-height: 500px;
  }

  .mobile-nav-link,
  .mobile-nav-toggle {
    padding: 1rem 1.5rem;
  }

  .mobile-submenu>li>a {
    padding: 0.75rem 1rem 0.75rem 2.5rem;
  }
}