/* ==========================================================================
   無障礙修復（第二批：視覺變更）— WCAG 2.2 AA ＋ 台灣在地規範 110.07
   審計日期 2026-09-08

   本檔由 views/layout/header.php 在各頁的 CSS bundle（index.css / news.css /
   newscontent.css）之後載入，因此所有覆寫都靠載入順序生效，不使用 !important。
   括號內數字為實測（Chrome computed style）的對比度。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.4.3 主導覽連結
   Bootstrap 4 的 .navbar-dark .navbar-nav .nav-link 為 rgba(255,255,255,.5)，
   疊在 .bg-dark #343a40 上合成 #9a9da0 = 4.22:1（21.6px 正常字需 4.5:1）。
   改用 Bootstrap 自己 hover 狀態的 .75，hover/focus 再提到純白。
   -------------------------------------------------------------------------- */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.75); /* 7.28:1 */
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff; /* 10.42:1 */
}

/* --------------------------------------------------------------------------
   1.4.3 news / story / 內容頁的發布日期（#b2b2b2 = 2.12:1）
   改用專案既有的 #6b6b6b（.intro-detail、.support-detail 已在使用）。
   -------------------------------------------------------------------------- */
.date {
  color: #6b6b6b; /* 5.33:1 */
}

/* --------------------------------------------------------------------------
   1.4.3 ＋ 3.3.2 搜尋框 placeholder（#c3c3c3 = 1.76:1）
   改用 Bootstrap 的 #6c757d —— 聯絡表單的 placeholder 已經是這個顏色。
   -------------------------------------------------------------------------- */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #6c757d; /* 4.69:1 */
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #6c757d;
}
input::placeholder,
textarea::placeholder {
  color: #6c757d;
}

/* --------------------------------------------------------------------------
   1.4.3 ＋ 1.4.1 內文連結
   index.css:57 的 a{text-decoration:none} 未定義 color，因此沿用 Bootstrap 的
   #007bff（白底 3.98:1，淺色區塊最低到 2.59:1），且段落中僅以顏色與內文區別。
   改用專案既有的 #15467b（.support-detail>ul>li>a 已在使用）並恢復底線。
   只作用於 main 內沒有 class 的連結 —— 按鈕、導覽、定位點、頁尾連結不受影響。
   -------------------------------------------------------------------------- */
main a:not([class]) {
  color: #15467b; /* 9.57:1（白底）*/
  text-decoration: underline;
}
main a:not([class]):hover,
main a:not([class]):focus {
  color: #0b253f; /* 12.63:1 */
}
/* 標題內的連結不屬於 1.4.1 的「文字區塊中的連結」，不加底線 */
main h1 a:not([class]),
main h2 a:not([class]),
main h3 a:not([class]),
main h4 a:not([class]),
main h5 a:not([class]),
main h6 a:not([class]) {
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   1.4.10 重新排列
   smt.php 有一條 652px 不折行的裸網址連結，320px 下文件寬度被撐到 667px。
   -------------------------------------------------------------------------- */
main a {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   2.4.7 可見焦點
   專案原本：_input.css / news.css 的 input:focus{outline:none}、
   framework.extras-min.css 的 button.close{outline:none}、
   index.css 的 #myBtn:focus{outline:1}（缺單位，宣告無效）。
   一律改以 :focus-visible 給 3px 外框，滑鼠點擊不受影響。
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sc-input:focus-visible,
.sc-submit:focus-visible {
  outline: 3px solid #15467b;
  outline-offset: 2px;
}

/* 台灣定位點：index.css:1003-1012 三態皆 color:transparent 且無 :focus 規則，
   取得焦點時「:::」仍完全看不見。 */
.accesskey:focus {
  color: #15467b;
}
.accesskey:focus-visible {
  color: #15467b;
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2.5.8 目標大小（最低）
   實測：定位點 11.7×27（320px 下 8.4×19.4）、flash 關閉鈕 14.9×21、
   320px 下輪播控制 16px 寬、.btn-collapse 19.4px 高。
   -------------------------------------------------------------------------- */
/* newscontent.css 沒有 .accesskeyBlock / .accesskey 規則，news-content 與 story-content
   的「:::」因此以 Bootstrap 的 #007bff 顯示在版面中（其餘 11 頁是透明且絕對定位）。
   在此補上基礎規則，13 頁行為一致；這兩頁畫面上的藍色「:::」會消失。 */
.accesskeyBlock {
  position: relative;
}
.accesskey {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  color: transparent;
  display: inline-block; /* 讓 min-width 對非絕對定位的情況也生效 */
  min-width: 24px;
  min-height: 24px;
}
body > p.flash-message button.close {
  min-width: 24px;
  min-height: 24px;
}
.carousel-control-prev,
.carousel-control-next {
  min-width: 24px;
}
button.btn-collapse {
  min-height: 24px;
}

/* --------------------------------------------------------------------------
   2.4.1 略過區塊 ＋ TW-03 網站導覽 3 次 Tab 內到達
   實測修復前：可跳到主內容的 C 定位點是第 8 個停點、Sitemap 是第 7 個。
   header.php 於 <body> 起始處加入兩個平時隱形、取得焦點才顯示的連結。
   -------------------------------------------------------------------------- */
.skip-link:focus,
.skip-link:focus-visible {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
  white-space: nowrap;
  padding: 10px 16px;
  background-color: #ffffff;
  color: #15467b; /* 9.57:1 */
  font-size: 1rem;
  text-decoration: underline;
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2.4.11 焦點未被遮蔽
   ShareThis 的分享列是 position:fixed（right:65px / bottom:42px，192×40，z-index 2），
   在 320px 下實測會蓋住頁尾聯絡信箱的焦點框。以 scroll-margin-bottom 讓瀏覽器
   把取得焦點的元素捲到分享列上方，屬純捲動行為，畫面不變。
   -------------------------------------------------------------------------- */
a,
button,
input,
select,
textarea,
[tabindex] {
  scroll-margin-bottom: 96px;
}

/* --------------------------------------------------------------------------
   1.4.3 網站導覽頁的分類標籤（#ff865d 白底 = 2.38:1）
   改用專案既有的 #5c5757（.subtitle-dash 已在使用）。
   -------------------------------------------------------------------------- */
.container--sitemap .sitemap .sitemap__group .mmMenu span.mmMenu__item {
  color: #5c5757; /* 7.10:1 */
}

/* --------------------------------------------------------------------------
   1.4.3 incentive.php 的 SBIR 區塊
   半透明是主因：.subname 的 opacity:.8 在 Phase 1 底色上只有 2.77:1、
   .toggle 的 hsla(0,0%,100%,.7) 為 3.37:1。移除半透明後：
   Phase 2 → 5.86:1、Phase 3 更高、.toggle → 5.20:1，皆通過。
   Phase 1 的 #719192 底色最淺，純白 18px 仍只有 3.48:1，
   依「底色不動、字色加深」的決定，Phase 1 的名稱區改用深色字。
   -------------------------------------------------------------------------- */
.name-area .subname {
  opacity: 1;
}
.SBIR-control .toggle {
  color: #ffffff; /* 5.20:1（疊在 rgba(0,0,0,.2) over #719192 = #5a7475 上）*/
}
.SBIRtable-section .SBIR-block-phase1 .name-area .name,
.SBIRtable-section .SBIR-block-phase1 .name-area .subname {
  color: #16211f; /* 4.80:1 */
}

/* --------------------------------------------------------------------------
   1.4.3 ＋ 1.4.11 表單回饋訊息（framework.extras-min.css:14-21）
   success #8da85e 配白字 = 2.66:1；關閉鈕白色 opacity:.2 = 1.25:1，
   且 :focus 只把 opacity 提到 .5、outline:none。
   依「底色不動、字色加深」：success / warning / info 改深色字，
   error（#c30）保留白字（移除半透明後為 5.09:1）。
   -------------------------------------------------------------------------- */
body > p.flash-message.success,
body > p.flash-message.warning,
body > p.flash-message.info {
  color: #1c2b06; /* success 5.73:1 · warning 7.82:1 · info 6.90:1 */
  text-shadow: none;
}
body > p.flash-message.success button.close,
body > p.flash-message.warning button.close,
body > p.flash-message.info button.close {
  color: #1c2b06;
  opacity: 1;
}
body > p.flash-message.error button.close {
  color: #ffffff; /* 5.09:1 */
  opacity: 1;
}
body > p.flash-message button.close:focus,
body > p.flash-message button.close:focus-visible {
  opacity: 1;
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   1.4.11 非文字對比
   .sc-input 只有柔和陰影當邊界（白底上無法辨識）；
   .navbar-toggler 的邊框在 #343a40 上只有 1.36:1。
   -------------------------------------------------------------------------- */
.sc-input {
  border: 1px solid #6c757d; /* 4.69:1；box-sizing 為 border-box，外框尺寸不變 */
}
.navbar-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.75); /* 7.28:1 */
}

/* --------------------------------------------------------------------------
   1.4.3 主視覺大字 —— 已改為加深遮罩解決，本檔不再處理
   .SIbanner-text 是白字直接疊在照片上（.banner-text 那幾頁有 55% 白底面板，
   不受影響）。原本遮罩 rgba(0,0,0,.3) 時最亮 2% 底色處 cc 2.37:1、
   index 3.52:1（但最亮單點只有 2.16:1），大字需 3:1。

   遮罩寫在頁面的 inline style 上（.overlay.overlay-dark），CSS 無法在不用
   !important 的前提下覆寫，因此直接改頁面：cc.php:14、index.php:49、
   innovation.php:15 的遮罩由 .3 加深為 .5。
   加深後最亮 2% 底色處：innovation 6.27:1、index 6.14:1、cc 4.34:1；
   最亮單點分別為 5.63:1 / 4.07:1 / 4.11:1，全部通過大字 3:1。
   以上為 1440x900；≤426px 斷點（字級 81%、背景改 center、標題會折行）另量
   一次，最亮單點 5.06:1 / 4.06:1 / 4.09:1，同樣通過。

   原先「遮罩不動」時放在這裡的 text-shadow 已移除 —— 文字陰影不計入 WCAG
   的對比度計算，遮罩本身通過後就沒有保留的理由，設計也回到原樣。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1.4.4 調整文字大小
   index.css:1222 的 @media (max-width:425px) 內，.title5 為 0.35rem、
   .title6 為 0.05rem；配合 html{font-size:81%} 實測只有 4.54px 與 0.65px。
   改為與相鄰斷點（index.css:1206-1212）相同的 1.3rem / 1rem。
   -------------------------------------------------------------------------- */
@media (max-width: 425px) {
  .title5 {
    font-size: 1.3rem; /* 實測 4.54px → 16.85px */
  }
  .title6 {
    font-size: 1rem; /* 實測 0.65px → 12.96px */
  }
}

/* --------------------------------------------------------------------------
   G201 另開新視窗的視覺提示
   .newtab:after 原本指向 /en/public/images/icon-newtab_b.svg（404，圖示完全
   不顯示）。圖檔已放進專案，index.css / news.css 的路徑改為
   ../../img/icon-newtab_b.svg。此處補兩個該路徑修好後才顯現的問題：

   1. newscontent.css 裡沒有任何 .newtab 規則，因此 news-content.php 與
      story-content.php 這兩頁的導覽列外部連結連偽元素都不存在 ——
      在這裡定義一份基底規則，讓所有頁面的 bundle 都有圖示。
   2. 圖檔是純黑色。下拉選單是白底沒問題，但主導覽的
      .nav-link.newtab 疊在 .bg-dark(#343a40) 上只有 1.83:1，
      需反相成白色（與該處導覽文字同色）才看得見。
   -------------------------------------------------------------------------- */
.newtab:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  width: 20px;
  height: 20px;
  background-image: url("../../img/icon-newtab_b.svg");
  background-size: 20px;
  background-repeat: no-repeat;
}
.navbar-dark .nav-link.newtab:after {
  filter: invert(1);
}