/* Inteplast Taiwan — 全站導覽樣式（單一來源）
   規則：
   1. 這是 navbar / mega menu / 搜尋視窗樣式的唯一來源。
      各頁面 <style> 內不要再放 .header / .top-utility-bar / .nav-* / .mega-* / .search-* 規則。
   2. 因為不再有重複規則互相覆蓋，本檔完全不使用 !important。
      若某頁樣式沒生效，是那一頁還留著舊的重複規則，請刪掉它，不要加 !important。
   3. 頂欄與頁首高度統一用 --utility-h / --header-h，頁面內容請用
      padding-top: calc(var(--utility-h) + var(--header-h) + 間距)，不要硬寫 31px。
*/

:root {
  --primary-navy: #0A2540;
  --brand-blue: #00529B;
  --accent-azure: #00A8FF;
  --surface-white: #FFFFFF;
  --text-main: #1E293B;
  --text-muted: #64748B;
  --border-color: #E2E8F0;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --shadow-mega: 0 30px 60px -12px rgba(10, 37, 64, 0.22);
  --radius-full: 9999px;
  --radius-md: 16px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 頂欄高度：原本寫 31px 是猜的，實際內容高 34.71px，
     導致 .header 的 top 往上壓、蓋掉頂欄底部約 3.7px（各頁字體渲染差異一變，被蓋掉的量就變，
     看起來就是「每頁黑色那條位置不一樣」）。現在頂欄用固定 height + line-height: 1，
     高度不再受字體影響，header 永遠貼齊頂欄底部。 */
  --utility-h: 34px;
  --header-h: 88px;
}

/* 注入前的骨架：navbar.js 還沒執行時，頂部就已經是實色，不會先空一塊再跳出來。
   注入後 #site-header-component 不再是 :empty，這條自動失效。 */
#site-header-component:empty {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--utility-h) + var(--header-h));
  z-index: 1000;
  background: linear-gradient(#051322 0 var(--utility-h), rgba(255, 255, 255, 0.96) var(--utility-h) 100%);
  border-bottom: 1px solid var(--border-color);
}

/* 集團頂欄 */
.top-utility-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--utility-h);
  line-height: 1;
  z-index: 1050;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 40px;
  background: #051322;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.utility-left,
.utility-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.utility-left a,
.utility-right a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}

.utility-left a:hover,
.utility-right a:hover {
  color: var(--accent-azure);
}

.region-badge {
  background: rgba(0, 168, 255, 0.18);
  color: var(--accent-azure);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.7rem;
  margin-right: 6px;
}

/* 頁首 */
/* 三欄 grid：選單真正置中，不會被左右兩塊的寬度變化推動。
   （原本是 flex + space-between，logo 或語言鈕寬度一變，選單位置就跟著跑，
   這是各頁導覽「看起來位置不一樣」的主因之一。） */
.header {
  position: fixed;
  top: var(--utility-h);
  left: 0;
  width: 100%;
  min-height: var(--header-h);
  z-index: 1000;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 40px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 16px rgba(10, 37, 64, 0.05);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

/* 整組 logo 圖（含中英文公司名）。原本 58px 太小，放大到 66px，
   --header-h 一併從 72px 加到 88px，頁面 padding-top 用變數算就會自動跟上。 */
.logo-image {
  height: 66px;
  max-height: 70px;
  width: auto;
  object-fit: contain;
}

.logo-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo-text-tw {
  /* 標誌中文名使用標楷體；未安裝標楷體的裝置退回黑體 */
  font-family: 'DFKai-SB', 'BiauKai', 'Kaiti TC', 'STKaiti', 'KaiTi', 'Noto Sans TC', sans-serif;
  font-size: 1.34rem;
  font-weight: 800;
  color: var(--primary-navy);
  letter-spacing: 1px;
  line-height: 1.2;
}

.logo-text-en {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* 主選單 */
.nav-menu {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-link-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 10;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-link-item:hover,
.nav-link-item.active,
.nav-item:hover > .nav-link-item {
  background: rgba(0, 82, 155, 0.08);
  color: var(--brand-blue);
}

.caret-icon {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.nav-item:hover .caret-icon,
.nav-item.open-dropdown .caret-icon {
  transform: rotate(180deg);
}

/* 六大類 Mega Menu */
.mega-menu-panel-6cat {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: min(1310px, calc(100vw - 60px));
  box-sizing: border-box;
  padding: 36px 42px;
  z-index: 1100;
  background: var(--surface-white);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 32px 72px -12px rgba(10, 37, 64, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 滑鼠從選單移到面板途中的緩衝區 */
.mega-menu-panel-6cat::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
  z-index: -1;
}

.nav-item:hover .mega-menu-panel-6cat,
.nav-item.open-dropdown .mega-menu-panel-6cat {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  text-align: left;
}

.mega-col-title-sm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid rgba(0, 82, 155, 0.18);
}

.mega-col-title-sm i {
  font-size: 1.08rem;
}

.mega-sub-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-sub-links a {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  color: #334155;
  text-decoration: none;
  font-size: 0.90rem;
  font-weight: 600;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.mega-sub-links a:hover {
  color: var(--brand-blue);
  background: rgba(0, 82, 155, 0.06);
  transform: translateX(3px);
}

/* 頁首右側 */
.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 固定寬度：切換語言時「EN / 繁中」↔「繁中 / EN」字寬不同，
   沒有 min-width 的話整條右側會縮放 */
.lang-toggle {
  min-width: 108px;
  text-align: center;
  padding: 8px 16px;
  background: var(--surface-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-navy);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lang-toggle:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--brand-blue), #00386B);
  color: var(--surface-white);
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 82, 155, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 82, 155, 0.35);
}

/* 這顆按鈕在 site-search.js 載入後會被常駐搜尋條（.om-searchbar）取代；
   樣式保留是為了載入前那一瞬間不要跳版。 */
.search-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 8px;
  background: #F1F5F9;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: #0F172A;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.search-trigger-btn:hover {
  background: var(--brand-blue);
  color: var(--surface-white);
  border-color: var(--brand-blue);
  transform: scale(1.06);
}

/* 桌機窄版（≤1400px）：logo＋五個選單＋搜尋＋語言鈕＋聯繫鈕會塞不進一列。
   聯繫鈕不隱藏（客戶最重要的入口），改成只留信封圖示的圓鈕；
   logo、選單內距、語言鈕一併縮一階。語言切換全程保留，
   1024px 以下才整組交給漢堡抽屜。 */
@media (max-width: 1400px) {
  .header { padding: 12px 20px; }
  .header-logo { gap: 10px; }
  .logo-image { height: 50px; }
  .nav-menu { gap: 2px; }
  .nav-link-item { padding: 8px 9px; font-size: 0.85rem; }
  .header-right { gap: 8px; }
  .header-right .contact-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 9999px;
  }
  .header-right .contact-btn span { display: none; }
  .lang-toggle { min-width: 88px; padding: 8px 10px; font-size: 0.8rem; }
}

/* 平板／手機（≤1024px）：交給 mobile-nav.js 的漢堡選單。
   斷點統一為全站三段：1024 / 768 / 480 */
@media (max-width: 1024px) {
  :root {
    --utility-h: 0px;
  }
  .top-utility-bar,
  .nav-menu {
    display: none;
  }
  .header {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
  }
  .logo-image {
    height: 54px;
  }
}

/* 小手機（≤480px）再縮一階，讓漢堡按鈕有空間 */
@media (max-width: 480px) {
  .logo-image {
    height: 42px;
  }
}

/* 搜尋視窗（.om-*）的樣式由 src/site-search.js 自行注入，這裡不再重複一份。
   原本的 .search-modal-* / .search-result-* / .search-quick-tags / .quick-tag-btn 已刪除：
   site-search.js 會移除 #searchModalOverlay，那些規則不會有元素套用。 */