/* opt.css — 優化覆寫層（最後載入；隔離所有全站安全加法，易回退） */

/* P4：補上 width/height 後，確保圖片仍依容器等比縮放、不變形（CLS 修正的前置） */
img { height: auto; }

/* P5 a11y：鍵盤焦點可見（Webflow 全站 outline:0 → 鍵盤使用者看不到焦點，WCAG 2.4.7 失敗）。
   只作用於鍵盤聚焦（:focus-visible），滑鼠點擊不顯示外框，故對既有滑鼠互動零影響。 */
*:focus-visible {
  outline: 3px solid #0b66c3 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* P5 a11y：螢幕閱讀器專用文字工具類（供 skip-link／新視窗提示等使用） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* P5 a11y：跳至主要內容（鍵盤 Tab 第一站；平時隱藏，聚焦時出現） */
.skip-link {
  position: absolute; left: 8px; top: -64px;
  z-index: 10000;
  background: #0b66c3; color: #fff;
  padding: 10px 16px; border-radius: 6px;
  font-size: 16px; text-decoration: none;
  transition: top .15s ease-in-out;
}
.skip-link:focus { top: 8px; }

/* 手機/平板導覽選單：不做任何覆寫，沿用 Webflow 原生 over-right 滑入選單。
   2026-06-29 回退：先前 P7 誤把「.nav-link 內 <br> 的兩行標籤（關於/我們）+ 右側滑入的半透明灰窄面板
   （webflow.css ≤991px：.nav-menu{ background:#c8c8c8a3; margin-right:-95px }）」當成擠壓 bug，
   改用全寬／不透明覆寫去「修」，反而把原本好的選單改壞（owner 三次回報壞掉，並指定部署 f93d82cc 原版為基準）。
   原版根本沒有 opt.css，選單是純 Webflow 原生行為。故此處移除全部 nav 覆寫，回到原生。
   ※ 切勿再對 .nav-menu / .w-nav-overlay 加任何 max-width:991 覆寫。 */

/* GPT/Bing 手機體驗：防首頁/全站手機水平溢出。
   GPT 從 CSS 的 width:100vw 推測會溢出；實測 320/360/375 渲染後 document 並無溢出
   （撐寬者為評論 widget 橫向輪播，已由其容器裁切）。但 100vw 在「有可見捲軸」的
   瀏覽器/裝置仍可能溢出捲軸寬，故加此零風險防護。
   用 overflow-x: clip（非 hidden）：不建立捲動容器、不破壞 position:sticky 與子層橫向捲動；
   不支援 clip 的舊瀏覽器會忽略此宣告 → 退回現狀，無回歸。 */
@media screen and (max-width: 991px) {
  html, body { overflow-x: clip; }
}

/* GPT(Bing 中優先)根因修：.card-stack 的 width:100vw（webflow.css ≤991/≤479）在「有可見捲軸」
   時會溢出捲軸寬。改 100% + max-width，與上方 overflow-x:clip 雙保險。
   ⚠ 必須限縮在 ≤991px：桌面原生是 .card-stack{ width:1000px; margin:auto }（置中版面），
   先前此條未包 media query，width:100%!important 把桌面卡片格撐成全螢幕寬（owner 回報修壞，
   2026-06-29 已限縮回退）。≤991px 原本即 100vw 全寬，改 100% 版面不變、只消捲軸溢出。 */
@media screen and (max-width: 991px) {
  .card-stack { width: 100% !important; max-width: 100% !important; }
}

/* P7 a11y：尊重使用者的「減少動態效果」偏好（WCAG 2.3.3/2.2.2）。
   覆寫 CSS 動畫/轉場/平滑捲動；僅對開啟此偏好的使用者生效。
   註：JS 驅動的 Lottie autoplay 無法用 CSS 暫停，需另以 JS 處理（待續）。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}