/*
* ============================================================
* 檔案名稱：accessibility-fix.css
* 適用範圍：ttlexport/ap_export/ 和 ttlexport/index.html
* 建立日期：2026-03-24
* 說 明：針對 WCAG 2.1 AA 無障礙退件報告進行最小幅度修正。
* 本檔案使用 !important 強制覆蓋原有樣式，
* 不修改任何現有 CSS 檔案，方便日後維護與回溯。
* 引入方式：
* 1. ttlexport/index.html → 在 最末行加入：
*
* 2. ttlexport/ap_export/ 各頁面 Master → 同上
* ============================================================
*/
/* ============================================================
修復碼：GN2140300E（對比值不足）
問題 1：「進入內容區塊」跳至主內容連結 - 文字色為透明
影響頁面：ttlexport/index.html 第83行
原本寫法：進入內容區塊
問題說明：透明文字對比值為 1:1，完全無法辨識。
修復方式：平時移到螢幕外，鍵盤焦點時滑入頂端。
body 背景色為 #447349（深綠），白字對比值 5.06:1 ✅
============================================================ */
.into a {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
color: #FFFFFF !important;
background-color: #2D5233 !important; /* 比 #447349 稍深，讓外框更明顯 */
}
.into a:focus {
position: fixed !important;
left: 0 !important;
top: 0 !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
padding: 12px 24px !important;
font-size: 1rem !important;
font-weight: bold !important;
/* 白字 vs 深綠背景，對比值 6.28:1 ✅ */
color: #FFFFFF !important;
background-color: #2D5233 !important;
border: 2px solid #FFFFFF !important;
text-decoration: none !important;
z-index: 99999 !important;
/* 加上陰影讓連結更突出 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
/* ============================================================
修復碼：GN2140300E（對比值不足）
問題 2：頁尾深綠背景 (#447349) 上的文字對比嚴重不足
影響頁面：ttlexport/index.html 底部 footer 區塊
原始碼位置：ttlexport/css/style.css
第1818行：.bottom-middle p { color: #BFBFBF; } 對比值 3.01 ❌
第1823行：.bottom-grid p a { color: #9C9C9C; } 對比值 2.02 ❌
修復說明：改為白色 #FFFFFF，對比值 5.06:1 ✅
不動原 CSS 檔案，只在此覆蓋。
============================================================ */
/* 頁尾段落文字：#BFBFBF on #447349 → 白色 */
.bottom-middle-top p,
.bottom-middle-top .bottom-middle p {
color: #FFFFFF !important; /* 對比值 5.06:1 vs #447349 ✅ */
}
/* 頁尾連結文字：#9C9C9C on #447349 → 白色加底線 */
.bottom-grid p a,
.bottom-middle-top .bottom-grid p a {
color: #FFFFFF !important; /* 對比值 5.06:1 ✅ */
text-decoration: underline !important; /* 底線增強連結可辨識度 */
}
/* 連結懸停/焦點狀態 */
.bottom-grid p a:hover,
.bottom-grid p a:focus,
.bottom-middle-top .bottom-grid p a:hover,
.bottom-middle-top .bottom-grid p a:focus {
color: #FFE566 !important; /* 黃色，對比值 8.59:1 vs #447349 ✅ */
text-decoration: underline !important;
}
/* ============================================================
修復碼：GN2140300E（對比值不足）
問題 3：外銷首頁上方四個選項文字
說 明：原始碼中 .nav-tabs>li>a 實際色為 #555（對比值 7.4，符合）。
但退件報告指出 #929292，可能為其他 CSS 覆蓋或快取版本差異。
此處加入保護規則，確保文字色不低於 4.5:1 標準。
============================================================ */
/* 確保 nav-tabs 連結文字顏色不低於標準 */
.nav-tabs > li > a {
color: #555555 !important; /* 對比值 7.4:1（vs #f8f8f8 背景）✅ */
}
/* 確保上方四個網站導覽連結（body 背景 #447349）也符合標準 */
body > div > .content .nav-tabs > li > a {
/* 此區背景為 body #447349（深綠），文字需高對比 */
color: #FFFFFF !important; /* 對比值 5.06:1 ✅ */
background-color: rgba(0, 0, 0, 0.3) !important; /* 半透明深色背景加強可讀性 */
border-radius: 4px !important;
}
body > div > .content .nav-tabs > li > a:hover,
body > div > .content .nav-tabs > li > a:focus {
color: #FFFFFF !important;
background-color: rgba(0, 0, 0, 0.5) !important;
}
/* ============================================================
修復碼：CS2240700E（焦點可視度不足）
問題：全站互動元件焦點不明顯
影響頁面：使用 Master Page 的所有外銷業務頁面
============================================================ */
/* 一般白色背景區域的焦點 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid #0E6E80 !important;
outline-offset: 2px !important;
}
/* 深色背景區域的焦點（改用黃色高對比外框） */
.bottom-middle-top a:focus,
header a:focus,
nav a:focus,
nav button:focus {
outline: 2px solid #FFD700 !important;
outline-offset: 2px !important;
}
/* toTop 回到頂端按鈕焦點 */
#toTop:focus {
outline: 3px solid #FFD700 !important;
outline-offset: 3px !important;
}
/* ============================================================
修復碼：HM1240404E（另開新視窗連結未提示）
問題：隱私權宣告等連結開新視窗但未告知使用者
影響頁面：ttlexport/index.html 底部區塊
修復說明：用 CSS 偽元素自動加上箭頭圖示提示。
（title 屬性的文字修改在 HTML 部分另行處理）
============================================================ */
.bottom-middle-top a[target="_blank"]::after,
.bottom-grid a[target="_blank"]::after {
content: " ↗";
font-size: 0.75em;
vertical-align: super;
/* 僅為視覺提示，不影響螢幕閱讀器（螢幕閱讀器靠 title 屬性） */
aria-hidden: "true";
}
/* ============================================================
sr-only 輔助樣式
說明：讓文字只對螢幕閱讀器可見，視覺上隱藏
============================================================ */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}