/* =========================================================================
   ASUKA — Layout：Header / Mega Menu / Footer
   ========================================================================= */

/* ================= HEADER ================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
/* 捲動後、或滑鼠停在選單上時的實心底 */
.site-header.is-solid,
.site-header.is-open {
  background: var(--ink-900);
  border-bottom-color: var(--line-dark);
}
/* 淺色頁首（內頁用）*/
body[data-header="light"] .site-header { background: var(--ink-900); }

.site-header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

/* ---- Logo ---- */
.brand { display: flex; align-items: baseline; gap: 10px; flex: none; }

/* 圖片 logo（content.js 的 brand.useImageLogo = true 時）
   高度統一由這裡控制，換 logo 檔不用改程式 */
.brand--image { align-items: center; }
/* v1.0：主管反應 logo 偏小，各尺寸上調約三成 */
.brand--image img { height: 46px; width: auto; }
.site-footer .brand--image img { height: 56px; }
@media (max-width: 640px) { .brand--image img { height: 34px; } }
.brand__mark {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: var(--fw-black);
  letter-spacing: .1em;
  color: var(--text-on-dark);
}
.brand__mark span { color: var(--brand); }
.brand__sub {
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-on-dark-3);
  white-space: nowrap;
}

/* ---- 主選單 ---- */
.nav { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: .92rem;
  font-weight: var(--fw-medium);
  color: var(--text-on-dark-2);
  border-radius: var(--radius-sm);
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav__link:hover,
.nav__item.is-hover .nav__link,
.nav__item.is-active .nav__link { color: var(--text-on-dark); }
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__item.is-active .nav__link::after { transform: scaleX(1); }
/* v1.16：滑鼠移到選項上（或鍵盤 focus）時也出現橘線，標示目前要點的是哪一個。
   .is-hover 由 ui.js 加上：游標移進下拉選單時，橘線仍留在對應的選項下。 */
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__item.is-hover .nav__link::after { transform: scaleX(1); }
/* 指向其他選項時，暫時收起「目前所在頁面」的橘線，畫面上永遠只有一條 */
.nav.has-hover .nav__item.is-active:not(.is-hover) .nav__link::after { transform: scaleX(0); }
.nav.has-hover .nav__item.is-active:not(.is-hover) .nav__link { color: var(--text-on-dark-2); }
.nav__caret { width: 9px; height: 9px; opacity: .6; }

/* ---- Mega menu ---- */
.mega {
  position: fixed;
  left: 0; right: 0; top: var(--header-h);
  background: var(--ink-850);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  z-index: var(--z-menu);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-7) var(--gutter) var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 300px;
  gap: var(--sp-7);
}
.mega__col > * + * { margin-top: var(--sp-3); }
.mega__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--brand-soft);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-dark);
}
.mega__link {
  display: block;
  font-size: .95rem;
  color: var(--text-on-dark-2);
  padding: 5px 0;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.mega__link:hover { color: var(--brand); transform: translateX(4px); }

.mega__feature {
  background: linear-gradient(160deg, var(--ink-700), var(--ink-800));
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: var(--sp-5);
  color: var(--text-on-dark);
}
.mega__feature > * + * { margin-top: var(--sp-3); }

/* ---- 右側工具 ---- */
.header-tools { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.lang {
  display: flex;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lang__btn {
  padding: 6px 13px;
  font-size: .78rem;
  font-weight: var(--fw-semi);
  letter-spacing: .04em;
  color: var(--text-on-dark-3);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang__btn.is-active { background: var(--brand); color: #fff; }
.lang__btn:not(.is-active):hover { color: var(--text-on-dark); }

/* ---- 漢堡（行動版） ---- */
.burger { display: none; width: 44px; height: 44px; position: relative; flex: none; }
.burger span {
  position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--text-on-dark);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; }
.burger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- 行動版抽屜 ---- */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 0;
  background: var(--ink-900);
  z-index: var(--z-menu);
  overflow-y: auto;
  padding: var(--sp-5) var(--gutter) var(--sp-9);
  transform: translateX(100%);
  transition: transform .34s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer__group { border-bottom: 1px solid var(--line-dark); }
.drawer__toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  font-size: 1.05rem; font-weight: var(--fw-semi);
  color: var(--text-on-dark);
}
.drawer__toggle::after { content: "+"; font-size: 1.3rem; color: var(--brand); }
/* 沒有子選單的項目：不顯示展開符號，改用箭頭 */
.drawer__toggle--link::after { content: "→"; font-size: 1rem; }
.drawer__group.is-open .drawer__toggle::after { content: "−"; }
.drawer__panel { display: none; padding-bottom: var(--sp-4); }
.drawer__group.is-open .drawer__panel { display: block; }
.drawer__panel a { display: block; padding: 8px 0 8px 12px; color: var(--text-on-dark-2); font-size: .95rem; }
.drawer__panel a:hover { color: var(--brand); }
.drawer__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--brand-soft);
}

@media (max-width: 1180px) {
  .nav, .mega { display: none; }
  .burger { display: block; }
  .site-header__inner { justify-content: space-between; }
  .header-tools { margin-inline-start: auto; }
  .brand__sub { display: none; }
}
@media (min-width: 1181px) { .drawer { display: none; } }

/* 手機：收起「聯絡我們」按鈕（抽屜內仍有入口），語言鈕縮小 */
@media (max-width: 640px) {
  .header-tools > .btn { display: none; }
  .lang__btn { padding: 5px 10px; font-size: .72rem; }
}

/* 抽屜底部的聯絡按鈕 */
.drawer__cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ================= FOOTER ================= */
.site-footer {
  background: var(--ink-900);
  color: var(--text-on-dark);
  padding-top: var(--sp-9);
  border-top: 3px solid var(--brand);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(var(--cols, 4), 1fr);   /* v1.19.3：欄數跟著 content.js 的 footer.columns */
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
}
.footer__brand > * + * { margin-top: var(--sp-4); }
.footer__col > * + * { margin-top: var(--sp-3); }
.footer__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--brand-soft);
}
.footer__col a {
  display: block;
  font-size: .9rem;
  color: var(--text-on-dark-2);
  padding: 3px 0;
  transition: color .18s var(--ease);
}
.footer__col a:hover { color: var(--brand); }

.footer__contact { font-size: .9rem; color: var(--text-on-dark-2); }
.footer__contact dt {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-on-dark-3);
  margin-top: var(--sp-3);
}
.footer__contact dd { margin: 2px 0 0; }
.footer__contact a:hover { color: var(--brand); }

.footer__social { display: flex; gap: var(--sp-2); }
.footer__social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  color: var(--text-on-dark-2);
  transition: all .2s var(--ease);
}
.footer__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-on-dark-3);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__legal a:hover { color: var(--brand); }

@media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer__top { grid-template-columns: 1fr; gap: var(--sp-6); } }