/* 手機選單：Stripe 式全螢幕覆蓋層 ＋ 單段 accordion
   ---------------------------------------------------------------------------
   參考＝Stripe 行動版導覽：全螢幕覆蓋層、單一垂直清單、每列 ＋/− 就地展開子項、
        導覽與頁面內容不會同時出現、CTA 留在清單底部
   調整＝面板改為 position:fixed inset:0 蓋滿 viewport（原本是 header 下方的下拉面板）；
        一段 accordion（原本要「導覽列 → 查看全部 N 項 → 群組 → items」三段）
   理由＝原設計把「導覽」和「當前分類的內容」畫成同一種左對齊深色文字，只隔一條 1px 線，
        使用者分不出哪裡是切換、哪裡是內容；實測舊版內容高 978px、可視 375px，要捲 2.6 屏。
        改成一次只顯示一層，導覽列固定 5 列不動，展開才出現內容。

   尺寸依專案規則：觸控列高 ≥ 44px（實際 56／48px）、文字連結 16px、內文 400。
   色彩沿用 figma-tokens.css：--figma-text-primary／secondary／accent(#005AFF)、
   --figma-border-primary。

   這支檔案在 index.html 的載入順序最後（footer.css 之後），所以同特異度的規則
   會贏過 style.css / menu-layout.css 裡舊的 @media(max-width:780px) 區塊。       */

/* ── 1. 覆蓋層本體：由「header 下方的下拉面板」改成全螢幕 ── */
@media (max-width: 780px) {
  .mega-panel {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    max-height: none;          /* 覆蓋 style.css 的 calc(100dvh - 66px) */
    padding-top: 66px;         /* 讓位給浮在上面的 header（logo ＋ X） */
    background: #fff;          /* 純白，不用 --figma-bg-primary 的淡藍灰色調，手機全螢幕面板要乾淨 */
    box-shadow: none;
    border-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* header 原本 z-index:30 會被面板（31）蓋住；全螢幕後 logo 與 X 必須浮在面板之上 */
  .site-header { z-index: 32; }
  /* drill-down 子畫面時，header 的 logo 位置換成返回箭頭（參考 Stripe：返回鈕放 logo 位置，不在面板內容裡另開一列） */
  .brand--back {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
  }
  .brand--back:hover { background: #F6F8FB; }
  .brand--back svg { width: 20px; height: 20px; color: var(--figma-text-primary); }
  /* header 右側三個 icon 按鈕（漢堡、search、返回）尺寸統一：44×44 觸控範圍。
     原本各自沿用 style.css 舊尺寸（hamburger 42px、search 38px、back 40px），看起來不一致 */
  .mobile-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
  }
  #search-open.icon-button {
    width: 44px;
    height: 44px;
  }
  /* 背景頁面不可捲動（inert 由 app.js 的 setBackgroundInert() 設定，
     鍵盤與指標都會被擋住；這裡只負責鎖住捲動） */
  body.mobile-menu-open { overflow: hidden; }
  /* demo 用的聊天輸入框是 fixed 貼底，選單開啟時會蓋住新貼底的 guide 列，先隱藏它 */
  body.mobile-menu-open .chat-dock { display: none; }
}

/* ── 2. 漢堡 → X ── */
@media (max-width: 780px) {
  .mobile-toggle span {
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .16s ease;
  }
  /* 三條線：上、下兩條各移動 8px（相鄰行高度+間距）到中線位置交叉成 X，中間那條淡出 */
  .mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ── 3. 清單骨架：flex column，讓 .mobile-foot 貼齊面板底部（內容不夠長時用 margin-top:auto 撐開，
   內容超過一屏時用 sticky 讓它捲動到底仍固定可見，與 Stripe 手機版的 sticky 底部 CTA 一致） ── */
.mobile-menu {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 66px);
  padding: 0;
  background: #fff;
}
.mobile-list { display: block; }

/* ── 4. 一級列：56px 觸控高、16px/600 ── */
.mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--figma-border-primary);
  background: transparent;
  color: var(--figma-text-primary);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
}
.mobile-row:hover { background: #F6F8FB; }
.mobile-row:focus-visible {
  outline: 2px solid var(--figma-text-accent);
  outline-offset: -2px;
  border-radius: 0;
}
.mobile-row-label { min-width: 0; }

/* 一級列右側箭頭：固定顯示（非 hover 淺入），表示「點下去會切到子畫面」，取代原本的 ＋／− accordion 符號 */
.mobile-row-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--figma-text-secondary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 5. drill-down 子畫面不再顯示分類名稱標題（header 的返回箭頭已足夠表示「在子畫面」，見 .brand--back），
   清單直接從第一個群組開始 ── */

/* 群組標題：不是按鈕，只是分段提示。12px/600，中文不加字距 */
.mobile-group-label {
  margin: 0;
  padding: 16px 20px 4px;
  color: var(--figma-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
.mobile-group:first-child .mobile-group-label { padding-top: 20px; }
/* 分隔線：每個群組区塊之間加一條線。用 ::before 絕對定位並左右內收 20px（不滿版），
   上下掐上 margin/padding 拉開距離，避免跟前後內容太擁擁 */
.mobile-group + .mobile-group {
  position: relative;
  margin-top: 20px;
  padding-top: 20px;
}
.mobile-group + .mobile-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--figma-border-primary);
}

/* ── 6. 子項：48px 觸控高、15px/400（內文），有說明時兩行（現在用於 drill-down 子畫面的 .mobile-list--drill 裡） ── */
.mobile-list--drill .item-button,
.mobile-list--drill .item-button.has-desc {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  color: var(--figma-text-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.mobile-list--drill .item-button:focus-visible {
  outline: 2px solid var(--figma-text-accent);
  outline-offset: -2px;
}
.mobile-list--drill .item-button .item-name { font-weight: 500; color: inherit; }
.mobile-list--drill .item-button:hover .item-name { color: var(--figma-text-accent); }
.mobile-list--drill .item-text { display: grid; gap: 1px; text-align: left; }
.mobile-list--drill .item-desc { color: var(--figma-text-secondary); font-size: 13px; font-weight: 400; line-height: 1.45; }
.mobile-list--drill .item-button:hover .item-desc { color: var(--figma-text-body); }

/* 「查看全部／比較…」：同樣規則——每個選單只留一個藍色重音（Guide me），其他連結都用中性色，hover 才轉藍。
   基本樣式不帶分隔線（群組自己的 extras，如「比較 ERP 產品」，就當成普通項目就好，不特別分離）。 */
.mobile-more {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 4px;
  min-height: 48px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  color: var(--figma-text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}
.mobile-more .link-chevron { opacity: 1; transform: none; }
.mobile-more:hover { color: var(--figma-text-accent); text-decoration: underline; text-underline-offset: 3px; }

/* 只有整個清單最後面、全域通用的 more 連結（如「瀏覽所有產品」）才算真正的區塊分界，才加分隔線；
   它是 .mobile-list--drill 的直子層（不在任何 .mobile-group 裡面），用直子選擇子區別；
   間距跟群組分隔線同一套數值（margin-top 20px ＋ padding-top 20px，線位於 top:0），與上方同類型區塊的分隔高度一致 */
.mobile-list--drill > .mobile-more {
  margin-top: 20px;
  padding-top: 20px;
}
.mobile-list--drill > .mobile-more::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--figma-border-primary);
}

/* ── 7. 底部：諮詢方案（實心按鈕，永遠顯示） ＋ 「還不確定從哪裡開始？」卡片（只在首次開啟顯示）
   貼齊面板底部：margin-top:auto 撐開短內容、position:sticky 讓長內容捲動時仍固定在底部 ── */
.mobile-foot {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding: 16px 20px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--figma-border-primary);
  background: #fff;
}
/* 諮詢方案：套用框架同一套 .a-cta 實心蓍底按鈕（與 header 同款），手機改成滿版寬 */
.mobile-cta-btn.a-cta { width: 100%; }

/* 「還不確定從哪裡開始？」：接在清單最後一列（資源）下方，不用卡片，文字+連結排成一排（baseline 對齊，與 menu-layout.css 的 .mega-bar-guide 同一規則） */
.mobile-guide {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 16px 20px 20px;
}
.mobile-guide-prompt {
  color: var(--figma-text-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.mobile-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--figma-text-accent);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.mobile-guide-link .link-chevron { opacity: 1; transform: none; }
.mobile-guide-link:hover { color: var(--figma-text-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── 8. 無障礙：尊重減少動態 ── */
@media (prefers-reduced-motion: reduce) {
  .mobile-toggle span { transition: none; }
}