/* ==========================================================================
   Dingda 2026 — Header / Footer / 手機底部聯絡列
   獨立檔案，避免與 style.css 衝突；沿用 style.css 既有 :root tokens。
   銅棕 --copper 僅用於 CTA 按鈕 / active 底線 / hover / 上傳圖面（主動作）。
   ========================================================================== */

:root{
  /* style.css 尚未定義、但 DESIGN.md 有規格的衍生 token，本檔案局部補上 */
  --hf-ease-out: cubic-bezier(.16,.84,.44,1);
  --hf-dur-fast: 180ms;
  --hf-dur: 280ms;
  --hf-hairline-strong: rgba(109, 115, 120, .5);
}

/* ==========================================================================
   1. Header — 桌機 sticky top-nav（暖白底 / 72px / 底部 1px hairline）
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--paper);
  border-bottom: 1px solid var(--line-metal-15);
}

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

@media (min-width: 1024px){
  .site-header__inner{
    height: 72px;
  }
}

/* -- Logo -- */
.site-header__logo a{
  display: flex;
  align-items: center;
  height: 100%;
}

.site-header__logo-img{
  max-height: 40px;
  width: auto;
}

.site-header__logo-text{
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
}

/* -- 主選單（桌機顯示，平板/手機收起用漢堡） -- */
.site-header__nav{
  display: none;
}

.nav-menu{
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-menu li{
  display: block;
}

.nav-menu a{
  display: inline-block;
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .2px;
  color: var(--ink);
  padding: 8px 14px;
  transition: color var(--hf-dur-fast) var(--hf-ease-out);
}

.nav-menu a:hover{
  color: var(--copper);
}

/* 當前頁面：copper 底線標示（借 nav-link[aria-current] 規格） */
.nav-menu li.current-menu-item > a,
.nav-menu a[aria-current="page"]{
  color: var(--copper);
  box-shadow: inset 0 -2px 0 var(--copper);
}

/* -- 右側：電話 + CTA + 漢堡 -- */
.site-header__actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__phone{
  display: none;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink);
  white-space: nowrap;
}

.site-header__cta{
  padding: 10px 20px;
  font-size: .9375rem;
  white-space: nowrap;
}

/* -- 漢堡（手機/平板顯示，桌機隱藏） -- */
.site-header__hamburger{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.site-header__hamburger span{
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--ink);
  transition: transform var(--hf-dur) var(--hf-ease-out), opacity var(--hf-dur-fast) var(--hf-ease-out);
}

/* -- 手機下拉選單（漢堡展開） -- */
.site-header__mobile-nav{
  display: none;
  background-color: var(--paper);
  border-bottom: 1px solid var(--line-metal-15);
  padding: 8px 24px 16px;
}
/* 手機選單展開時可捲動，底部留出固定聯絡列(60px)的空間，末項不被擋 */
.site-header__mobile-nav.is-open{
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
}

.site-header__mobile-nav.is-open{
  display: block;
}

.nav-menu-mobile li + li{
  border-top: 1px solid var(--line-metal-15);
}

.nav-menu-mobile a{
  display: block;
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  padding: 14px 4px;
}

.nav-menu-mobile a:hover,
.nav-menu-mobile a:active{
  color: var(--copper);
}

/* -- 斷點：≥1024 完整桌機三段式，漢堡隱藏 -- */
@media (min-width: 1024px){
  .site-header__nav{
    display: block;
  }

  .site-header__phone{
    display: inline-block;
  }

  .site-header__hamburger{
    display: none;
  }

  .site-header__mobile-nav{
    display: none !important;
  }
}

/* ==========================================================================
   2. Footer — 深灰藍底（section-dark 規格），密集資訊架構
   ========================================================================== */
.site-footer{
  background-color: var(--steel);
  color: var(--metal-on-dark, #A9AEB2);
  padding: 48px 0 24px;
}

.site-footer__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px){
  .site-footer__inner{
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.site-footer__logo-text{
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--paper);
  margin-bottom: 12px;
}

.site-footer__desc{
  font-family: var(--font-zh);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--metal-on-dark, #A9AEB2);
  max-width: 40ch;
}

.site-footer__heading{
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: 1rem;
  color: var(--paper);
  margin-bottom: 16px;
}

.site-footer__menu li + li,
.site-footer__contact-list li + li{
  margin-top: 10px;
}

.site-footer__menu a,
.site-footer__contact-list a{
  font-family: var(--font-zh);
  font-size: .9375rem;
  color: var(--paper);
  transition: color var(--hf-dur-fast) var(--hf-ease-out);
}

.site-footer__menu a:hover,
.site-footer__contact-list a:hover{
  color: var(--copper);
}

.site-footer__contact-list{
  font-size: .9375rem;
  color: var(--metal-on-dark, #A9AEB2);
}

.site-footer__placeholder{
  color: var(--metal-on-dark, #A9AEB2);
  font-style: normal;
  opacity: .7;
}

.site-footer__bottom{
  margin-top: 32px;
}

.site-footer__bottom .hairline{
  border-top: 1px solid rgba(244, 242, 237, .16);
  margin-bottom: 16px;
}

.site-footer__copyright{
  font-family: var(--font-en);
  font-size: .8125rem;
  color: var(--metal-on-dark, #A9AEB2);
  margin: 0;
}

/* ==========================================================================
   3. 手機底部固定三按鈕聯絡列
   基底 display/position/z-index/background/border 已在 style.css .mobile-contact-bar 定義，
   本檔案只補：內部 3 欄 grid、icon/文字排版、安全區、body 底部留白。
   ========================================================================== */
/* 手機聯絡列的顯示由 style.css 的斷點控制（<768 顯示、≥1024 隱藏）。
   本檔只在「會顯示」的斷點內補 3 欄 grid，避免無條件 display:grid 蓋掉桌機隱藏。 */
.mobile-contact-bar{
  height: 60px;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 1023px){
  .mobile-contact-bar{
    display: grid;
  }
}
@media (min-width: 1024px){
  .mobile-contact-bar{
    display: none;
  }
}

.mobile-contact-bar__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink);
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: .75rem;
  line-height: 1;
}

.mobile-contact-bar__item + .mobile-contact-bar__item{
  border-left: 1px solid var(--line-metal-15);
}

.mobile-contact-bar__icon{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 上傳圖面＝主動作，唯一使用 copper 的聯絡列項目 */
.mobile-contact-bar__item.primary{
  color: var(--copper);
}

.mobile-contact-bar__item.is-disabled{
  opacity: .4;
  pointer-events: none;
}

/* 手機需為固定列預留底部空間，避免遮擋內容（<768） */
@media (max-width: 767px){
  body{
    padding-bottom: 60px;
  }
}

/* 桌機：mobile-contact-bar 已由 style.css 在 ≥1024 隱藏；768–1023 平板維持顯示不留 body padding衝突 */
@media (min-width: 1024px){
  body{
    padding-bottom: 0;
  }
}

/* ══ 桌機主選單 dropdown（產品等含子選單項）══════════════════════════ */
.nav-menu li{ position: relative; }
.nav-menu .sub-menu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(28,30,32,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--hf-dur-fast) var(--hf-ease-out),
              transform var(--hf-dur-fast) var(--hf-ease-out),
              visibility var(--hf-dur-fast);
  z-index: 200;
}
/* hover 或 focus-within 展開 */
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu .sub-menu li{ width: 100%; }
.nav-menu .sub-menu a{
  display: block;
  padding: 10px 20px;
  font-size: .9375rem;
  color: var(--ink);
  white-space: nowrap;
}
.nav-menu .sub-menu a:hover{
  color: var(--copper);
  background: var(--paper);
}
/* 父項有子選單時加下拉指示箭頭 */
.nav-menu .menu-item-has-children > a::after{
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .6;
}
/* 手機/平板：dropdown 改為靜態展開，不用 hover */
@media (max-width: 1023px){
  .nav-menu .sub-menu{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding-left: 16px;
    min-width: 0;
  }
}

/* ══ Logo 圖 + 文字並排（垂直置中，不撐高選單）══════════════════════ */
.site-header__logo-link{
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  text-decoration: none;
}
.site-header__logo-img{
  max-height: 44px;   /* 限制圖高，header 64/72px 不被撐高 */
  width: auto;
  display: block;
  flex: none;
}
.site-header__logo-wordmark{
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}
.site-header__logo-zh{
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .5px;
  color: var(--ink);
  white-space: nowrap;
}
.site-header__logo-en{
  font-family: var(--font-en);
  font-weight: 500;
  font-size: .625rem;
  letter-spacing: .8px;
  color: var(--metal);
  white-space: nowrap;
  text-transform: uppercase;
}
/* RWD：手機/平板只留 Logo 圖、置中，文字 wordmark 隱藏 */
@media (max-width: 1023px){
  .site-header__logo-wordmark{ display: none; }
  .site-header__logo-link{ justify-content: flex-start; }
  .site-header__logo-img{ max-height: 40px; }
}

/* ══ 手機選單二階 accordion（產品點擊展開，預設收起避免過長）══════════ */
.nav-menu-mobile .menu-item-has-children{ position: relative; }
/* 父項右側折疊箭頭按鈕 */
.nav-menu-mobile .submenu-toggle{
  position: absolute;
  top: 0; right: 0;
  width: 52px; height: 52px;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-menu-mobile .submenu-toggle::before{
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--hf-dur-fast) var(--hf-ease-out);
}
.nav-menu-mobile .menu-item-has-children.is-open > .submenu-toggle::before{
  transform: rotate(-135deg) translateY(-2px);
}
/* 子選單預設收起 */
.nav-menu-mobile .sub-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--hf-dur) var(--hf-ease-out);
  background: rgba(109,115,120,.05);
}
.nav-menu-mobile .menu-item-has-children.is-open > .sub-menu{
  max-height: 720px;  /* 足夠容納 9 子項 */
}
.nav-menu-mobile .sub-menu a{
  padding-left: 20px;
  font-size: .9375rem;
  color: var(--metal);
}
.nav-menu-mobile .sub-menu a:hover{ color: var(--copper); }