/* 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;
  /* 兩側 auto（依內容），中間 minmax(0, 1fr)：選單只拿「剩下的」空間。
     原本中間是 auto —— auto 軌道會先吃滿 max-content，日文選單（INTEPLASTについて、
     持続可能な開発）比中文寬將近一倍，於是整排不縮、直接溢出到右邊，
     疊在搜尋條與語言鈕上面。改成 1fr（最小 0）後，塞不下時由 .nav-link-item
     自己折成兩行，右側元件永遠完整。 */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px 40px;
  max-width: 100%;
  overflow: visible;
  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;
  min-width: 0;
}

/* 整組 logo 圖（含中英文公司名）。原本 58px 太小，放大到 66px，
   --header-h 一併從 72px 加到 88px，頁面 padding-top 用變數算就會自動跟上。

   max-width 讓它在選單變寬時等比縮小，而不是把版面撐破 —— 日文選單
   比中文寬很多，沒有這行就會發生 logo 被推出畫面。 */
.logo-image {
  height: 66px;
  max-height: 70px;
  width: auto;
  max-width: 100%;
  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;
}

/* 主選單 */
/* justify-self: stretch（撐滿中間那一欄）+ justify-content: center（選單自己置中）：
   原本是 justify-self: center，選單寬度＝內容寬度，內容一長就溢出。
   現在寬度上限＝可用空間，置中效果不變。 */
.nav-menu {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0 8px;
  min-width: 0;
}

/* 選單項目的左右內距隨可用寬度收縮。
   日文（製品センター、持続可能な開発）與英文（Sustainability）都比
   中文長，固定 18px 內距時整排會超出視窗；用 clamp 讓它在窄螢幕
   先縮內距與字級，撐不住才交給 1000px 的漢堡選單。 */
/* white-space: normal（原本是 nowrap）：一行塞不下的長標籤折成兩行，
   而不是撐破版面去蓋住右側。88px 的 --header-h 容得下兩行。 */
.nav-link-item {
  padding: 8px clamp(9px, 1.15vw, 18px);
  font-size: clamp(0.84rem, 0.92vw, 0.92rem);
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

.nav-item {
  position: relative;
  min-width: 0;
}

/* display 必須是 inline-block，不能是 inline-flex：
   inline-flex 裡的文字是匿名 flex item，寬度不夠時它不會斷行、只會溢出 ——
   結果就是日文選單被壓成一列疊在一起（ホームINTEPLASTについて製品センター）。
   inline-block 走一般文字排版，才會照 white-space: normal 折成兩行。
   下拉箭頭（.caret-icon）改用 margin 對齊，不靠 flex gap。 */
.nav-link-item {
  display: inline-block;
  position: relative;
  z-index: 10;
  border-radius: var(--radius-full);
  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 {
  margin-left: 6px;
  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;
}

/* 語言鈕：地球圖示＋語言名＋小箭頭，沒有外框也沒有底色 ——
   它不是行動按鈕（那是「聯繫我們」的位置），是狀態顯示＋切換入口，
   給它一顆藥丸外框反而在頁首搶了聯繫鈕的注意力。

   min-width 仍保留：切語言時「繁體中文」↔「English」字寬不同，
   沒有它整條右側會跟著縮放。 */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 104px;
  padding: 8px 4px;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-navy);
  cursor: pointer;
  transition: color 0.2s ease;
}

.lang-toggle svg { flex: 0 0 auto; }
.lang-toggle .lang-globe { width: 19px; height: 19px; }
.lang-toggle .lang-caret { width: 10px; height: 10px; opacity: .6; transition: transform .2s ease; }
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-toggle .lang-label { white-space: nowrap; }

.lang-toggle:hover { 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);
}

/* 桌機窄版（≤1600px）：logo＋五個選單＋搜尋＋語言鈕＋聯繫鈕會塞不進一列。
   斷點原本是 1400px，但那是以中文選單量的 —— 日文（INTEPLASTについて、
   持続可能な開発）與英文（Sustainability）都寬得多，1400～1600 之間
   就會把 logo 推出畫面，所以提早一階收縮。

   聯繫鈕不隱藏（客戶最重要的入口），改成只留信封圖示的圓鈕；
   logo、選單內距、語言鈕一併縮一階。語言切換全程保留，
   1024px 以下才整組交給漢堡抽屜。 */
@media (max-width: 1600px) {
  .header { padding: 12px 20px; }
  .header-logo { gap: 10px; }
  .logo-image { height: 50px; }
  .nav-menu { gap: 2px; }
  .nav-link-item { padding: 8px clamp(6px, 0.7vw, 9px); font-size: clamp(0.78rem, 0.86vw, 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: 0; padding: 8px 2px; font-size: 0.82rem; gap: 5px; }
  .lang-toggle .lang-label { display: none; }
}

/* 平板／手機（≤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;
  }

  /* 手機：搜尋與聯繫都在漢堡抽屜裡，但語言鈕留在頁首 ——
     「我看不懂這一頁」是最需要立刻解決的事，不該先叫使用者
     開一層選單才找得到。抽屜裡那顆就隱藏，避免兩個入口。 */
  .header-right { display: flex; gap: 4px; }
  .header-right .contact-btn,
  .header-right .search-trigger-btn { display: none; }
  .lang-toggle { min-width: 0; padding: 8px 6px; }
  .lang-toggle .lang-label { display: none; }
  .lang-toggle .lang-globe { width: 22px; height: 22px; }
  #mNavLang { display: none !important; }
}

/* 小手機（≤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，那些規則不會有元素套用。 */