/* =============================================================================
   components/navigation.css — 站台共用頁首與桌機／手機導覽
   -----------------------------------------------------------------------------
   從 components.css §7B 拆出。HTML 唯一來源在 includes/header.php，互動在
   design-system/components.js。導覽連結／選單面板的基礎樣式仍在 components.css
   §7（.ds-navbar__* / .ds-menu*），本檔只負責站台頁首容器、項目定位與下拉／漢堡。
   載入順序：tokens.css → components.css → navigation.css → footer.css → page.css
   ============================================================================= */

.ds-site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  isolation: isolate;
}

/* 捲動後才淡入的白底與陰影（不透明度由 components.js 控制） */
.ds-site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ds-color-card);
  box-shadow: var(--ds-shadow-header);
  opacity: var(--header-surface-opacity, 0);
  pointer-events: none;
}

/* 一律白底（頁面頂端即為深色的頁面）：components.js 會跳過淡入至 0 */
.ds-site-header--solid::before { opacity: 1; }

.ds-site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(var(--ds-space-xs), 4vw, var(--ds-space-lg));
  width: 100%;
  max-width: var(--ds-header-max-width);
  height: var(--header-height, var(--ds-navbar-height));
  margin-inline: auto;
  padding-inline: var(--container-gutter, var(--ds-container-padding-desktop));
}

.ds-site-header__brand { display: inline-flex; flex-shrink: 0; }
.ds-site-header__brand img { height: clamp(22px, 6vw, 32px); width: auto; }

.ds-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  margin-left: auto;
}

/* 頁首 CTA 比一般膠囊更收斂：sm 高度、body-sm 字級；padding 隨寬度連續縮放，
   極窄螢幕不裁切固定導覽列（觸控目標仍保 44px） */
.ds-site-header__actions .ds-button {
  height: var(--ds-control-height-sm);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
  padding-inline: clamp(var(--ds-space-sm), 4vw, var(--ds-space-lg));
}

/* < 900px：頁首 CTA、白皮書與家多利官網都已放在手機選單面板中，隱藏。
   900–1023px：CTA 改為只顯示圖示的方形按鈕（見下方平板規則）；名稱由 aria-label 提供。 */
@media (max-width: 899px) {
  .ds-site-header__cta,
  .ds-site-header__whitepaper { display: none; }
}

.ds-site-header__cta-icon { display: none; }

/* 頁首選單項目（桌機主選單、下拉、手機選單面板）以 Action Ink 為預設字色；
   hover／目前頁面維持元件原本的狀態色。頁首文字連結改用 Heading 色。 */
.ds-site-header .ds-navbar__link--plain:not(:hover):not([aria-current="page"]),
.ds-site-header .ds-menu__link:not(:hover):not([aria-current="page"]),
.ds-mobile-nav__panel .ds-menu__link:not(:hover):not([aria-current="page"]) { color: var(--ds-color-action-ink); }

.ds-site-header .ds-text-link:not(:hover) { color: var(--ds-color-text-primary); }

.ds-site-header__whitepaper { white-space: nowrap; }

/* 家多利官網：≥ 1280px 為文字連結（前加細分隔線）；900–1279px 改為無底色的 logo 圖示連結，
   logo 以遮罩上 secondary 色，主選單間距同步收窄讓出位置；< 900px 為手機選單面板中的選單項目 */
.ds-site-header__partner {
  margin-left: var(--ds-space-xs);
  padding-left: var(--ds-space-sm);
  border-left: var(--ds-border-hairline);
  white-space: nowrap;
}

.ds-site-header__partner-icon {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ds-control-height-sm);
  height: var(--ds-control-height-sm);
  border-radius: var(--ds-radius-full);
  color: var(--ds-color-secondary);
  transition: background-color var(--ds-duration-fast) var(--ds-ease), color var(--ds-duration-fast) var(--ds-ease);
}

.ds-site-header__partner-icon:hover { background: var(--ds-color-secondary-wash); color: var(--ds-color-secondary-hover); }
.ds-site-header__partner-icon:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }

/* logo 原圖為品牌藍，以 alpha 遮罩改填 currentColor（secondary） */
.ds-site-header__partner-mark {
  width: 22px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("../../assets/images/home/uhome-logo-1.png") center / contain no-repeat;
  mask: url("../../assets/images/home/uhome-logo-1.png") center / contain no-repeat;
}

@media (max-width: 1279px) {
  .ds-site-header__partner { display: none; }
}

@media (min-width: 900px) and (max-width: 1279px) {
  .ds-site-header__partner-icon { display: inline-flex; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .ds-site-header .ds-navbar__menu--wide { gap: var(--ds-space-md); }
}

/* 桌機主選單：容器與斷點來自 .ds-navbar__menu（+ --wide / --end），
   連結樣式來自 .ds-navbar__link--plain，此處只處理項目定位與下拉。 */
.ds-site-nav__item { position: relative; display: flex; align-items: center; }

.ds-nav-dropdown {
  position: absolute;
  top: calc(100% + var(--ds-space-xs));
  left: 0;
  min-width: 440px;
  display: none;
}

[data-nav-dropdown]:hover > .ds-nav-dropdown,
[data-nav-dropdown]:focus-within > .ds-nav-dropdown { display: grid; }

/* 觸發項與面板之間的隱形橋接，避免游標穿越間隙時關閉 */
[data-nav-dropdown]:hover::after,
[data-nav-dropdown]:focus-within::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--ds-space-xs);
}

[data-nav-dropdown]:hover .ds-navbar__caret,
[data-nav-dropdown]:focus-within .ds-navbar__caret { transform: rotate(180deg); }

/* --- 漢堡按鈕與手機主選單面板 --- */
.ds-mobile-nav__button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--ds-control-height-md);
  height: var(--ds-control-height-md);
  background: transparent;
  border: 0;
  border-radius: var(--ds-radius-md);
}

.ds-mobile-nav__button:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

.ds-mobile-nav__bar {
  width: 18px;
  height: 2px;
  background: var(--ds-color-text-primary);
  transition: transform var(--ds-duration-fast) var(--ds-ease),
              opacity var(--ds-duration-fast) var(--ds-ease);
}

.ds-mobile-nav__button[aria-expanded="true"] .ds-mobile-nav__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ds-mobile-nav__button[aria-expanded="true"] .ds-mobile-nav__bar:nth-child(2) { opacity: 0; }
.ds-mobile-nav__button[aria-expanded="true"] .ds-mobile-nav__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 手機選單面板：獨立於 header 之外的同層元素（不是 header 子節點），固定在畫面
   右側、寬度為視窗 70%、從最上方（top:0）整片蓋到底，由右至左滑入／滑出；z-index
   高於遮罩、遮罩又高於 header，所以展開時連同頁首原本那條列都會被蓋住（頁首本身
   不需要另外隱藏）。關閉時仍用 [hidden] 完全移出版面／焦點／AT，離場動畫期間先設
   inert，動畫結束（transitionend，或不需要動畫時立即）才補回 [hidden]，讓面板在
   滑出的當下就不可被點擊或用 Tab 聚焦（見 components.js setMenu）。 */
.ds-mobile-nav__panel {
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 60;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  overflow-y: auto;
  background: var(--ds-color-card);
  border: 0;
  border-radius: 0;
  box-shadow: var(--ds-shadow-panel);
  transform: translateX(100%);
  transition: transform var(--ds-duration-slow) var(--ds-ease);
}

.ds-mobile-nav__panel.is-open {
  transform: translateX(0);
}

.ds-mobile-nav__panel[hidden] { display: none !important; }

/* 面板自己的頂列：重現一次品牌 logo（高度對齊 header）＋關閉鍵，取代被遮罩蓋住
   的頁首；捲動選單列表時這一列用 sticky 固定在頂端。 */
.ds-mobile-nav__panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height, var(--ds-navbar-height));
  padding-inline: var(--container-gutter, var(--ds-container-padding-desktop));
  background: var(--ds-color-card);
  border-bottom: var(--ds-border-hairline);
}

.ds-mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-control-height-md);
  height: var(--ds-control-height-md);
  background: transparent;
  border: 0;
  border-radius: var(--ds-radius-md);
  color: var(--ds-color-text-primary);
  cursor: pointer;
}

.ds-mobile-nav__close:focus-visible {
  outline: none;
  box-shadow: var(--ds-shadow-focus);
}

/* 選單項目在上，「驗屋白皮書」「預約諮詢」推到面板底部（內容超過一屏時接在項目後方） */
.ds-mobile-nav__list {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: var(--ds-space-lg) var(--container-gutter, var(--ds-container-padding-desktop));
}

.ds-mobile-nav__list > :not(.ds-mobile-nav__cta) { flex-shrink: 0; }

/* 推到底部的按鈕與最後一個選單項目之間保留最小間距 */
.ds-mobile-nav__list > [data-mobile-nav-row]:has(+ .ds-mobile-nav__cta) { margin-bottom: var(--ds-space-lg); }

/* 選單列表之間的淺灰分隔線：只套在真正的選單列（分類、無子選單的連結），
   底部「驗屋白皮書」「預約諮詢」CTA 是獨立的按鈕樣式，不套用同一條分隔線。 */
[data-mobile-nav-row] + [data-mobile-nav-row] { border-top: var(--ds-border-hairline); }

.ds-mobile-nav__cta {
  width: 100%;
  margin-top: auto;
}

.ds-mobile-nav__cta + .ds-mobile-nav__cta { margin-top: var(--ds-space-sm); }

/* 背景遮罩：與面板同步淡入淡出，點擊可關閉選單（由 components.js 的「點擊選單外
   關閉」邏輯處理，遮罩在 DOM 上位於 header 之外即視為選單外）。顏色沿用
   .video-lightbox__backdrop 同一組深色遮罩值，維持全站遮罩色一致；z-index 高於
   header，展開時會連同頁首一起蓋住。 */
.ds-mobile-nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(10, 10, 15, .82);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ds-duration-slow) var(--ds-ease);
}

.ds-mobile-nav__scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* 選單開啟時鎖住 body 捲動，沿用 .video-lightbox-open 同一種作法 */
body.ds-mobile-nav-open { overflow: hidden; }

/* 手機選單內有子項目的分類：點擊大標題向下展開／收合，用 grid-template-rows
   0fr → 1fr 技巧做高度動畫（不需量測實際內容高度）；收合時子選單本身設
   inert，避免看不到的連結仍可被 Tab 聚焦。 */
.ds-mobile-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ds-mobile-nav__caret {
  color: var(--ds-color-text-muted);
  transition: transform var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-mobile-nav__trigger[aria-expanded="true"] .ds-mobile-nav__caret {
  color: var(--ds-color-primary);
  transform: rotate(180deg);
}

.ds-mobile-nav__sublist {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ds-duration-slow) var(--ds-ease);
}

.ds-mobile-nav__sublist.is-open { grid-template-rows: 1fr; }

.ds-mobile-nav__sublist-inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-left: var(--ds-space-md);
  overflow: hidden;
}

.ds-mobile-nav__sublink {
  color: var(--ds-color-text-secondary);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

/* 900–1023px：選單、白皮書連結與 CTA 在平板寬度放不下：選單改小一階字級、收窄間距，
   CTA 改為圖示方形按鈕。 */
@media (min-width: 900px) and (max-width: 1023px) {
  .ds-site-header__inner { gap: var(--ds-space-xs); }
  .ds-site-header__brand img { height: clamp(24px, 3.2vw, 32px); }

  .ds-site-header .ds-navbar__menu { gap: 0; }

  .ds-site-header .ds-navbar__link,
  .ds-site-header .ds-navbar__trigger {
    padding-inline: var(--ds-space-xxs);
    font-size: var(--ds-text-body-sm-size);
  }


  .ds-site-header__actions .ds-site-header__cta {
    width: var(--ds-control-height-sm);
    padding-inline: 0;
  }

  .ds-site-header__cta-label { display: none; }
  .ds-site-header__cta-icon { display: inline-block; }
}

/* 網站頁首的收合斷點為 900px（元件庫 SPEC-NAV 為 768px，見 components.css §7）：
   768–899px 主選單、白皮書、CTA 與家多利官網放不下一列，同樣收合為漢堡 */
@media (max-width: 899px) {
  .ds-site-header .ds-navbar__menu { display: none; }
}

@media (min-width: 900px) {
  .ds-mobile-nav__button,
  .ds-mobile-nav__panel,
  .ds-mobile-nav__scrim { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-mobile-nav__panel,
  .ds-mobile-nav__scrim,
  .ds-mobile-nav__sublist { transition: none; }
}