/* ============================================
   手機版懸浮底部導覽列（對應 Figma Navigation 元件）
   ============================================ */

/* 導覽列離視窗底部的距離，抽成變數方便微調。
   ⚠️ 手機／平板刻意留比較多空間：正式站透過 GTM 掛了一個「請問您是如何知道…」的
   UX 問卷視窗，固定貼在視窗底部、實機截圖推算高度約 76～83px，
   原本 20px 的距離會被它整片蓋住導覽列。96px = 問卷高度 + 一點呼吸間距。
   若之後問卷改高度或整個移除，只要改這一個值即可。
   （問卷由第三方注入，本機預覽與我這端都看不到它——測試站有 Cloudflare Access
   保護、正式站連不上，所以這個數值是估值，實機看過若不夠再調。） */
:root {
  --nav-bottom: 20px;
}
@media (max-width: 900px) {
  /* 2026-09-11 依實機視覺微調定案：96 → 76 → 46 → 49px。
     ⚠️ 上面那段說的 GTM 問卷視窗估算高 76～83px，49px 已經低於它，
     問卷出現時導覽列會被壓到。這是看過實機後決定的位置；
     若哪天發現被蓋住，把這個值加回 76～96px 之間即可（只有這一個數字要改）。 */
  :root { --nav-bottom: 49px; }
}

/* 全站統一：懸浮膠囊導覽列，桌機／平板／手機都用同一種呈現方式 */
.mobile-nav {
  display: flex;
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-bottom) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100;
  align-items: center;
  gap: 2px;
  padding: 7px;
  background: #fff;
  border: 1px solid rgba(38, 49, 31, 0.1);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-nav);
}

.mobile-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
  white-space: nowrap;
}

.mobile-nav a.active {
  background: var(--color-cat-d);
  color: #fff;
}

/* 避免懸浮列蓋住頁尾內容 */
/* 導覽列高 60px + 上下距離；跟著 --nav-bottom 一起算，
   導覽列上移時頁尾留白會自動加大，不會被蓋住。 */
body { padding-bottom: calc(var(--nav-bottom) + 64px); }

@media (max-width: 480px) {
  .mobile-nav a { padding: 10px 14px; font-size: 15px; }
}

/* 首頁桌機版：KV 上的兩顆 CTA 按鈕本身就是導覽，所以導覽列預設藏起來，
   等使用者往下滾、KV 按鈕離開畫面後才淡入上浮接手（加上 .nav-revealed，由 js/nav-reveal.js 控制）。
   用 opacity/visibility 而不是 display:none，才能做出淡入淡出；visibility 同時確保藏起來時
   不會被鍵盤 Tab 選到。translateX(-50%) 要保留，否則會失去水平居中。 */
@media (min-width: 901px) {
  .mobile-nav.home-only-mobile {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(16px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  }
  .mobile-nav.home-only-mobile.nav-revealed {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav.home-only-mobile {
    transition: opacity 0.28s ease, visibility 0.28s;
    transform: translateX(-50%);
  }
  .mobile-nav.home-only-mobile.nav-revealed { transform: translateX(-50%); }
}