/*!
 * a11y.css — 前台無障礙化補充樣式
 *
 * 用途：只放「為了無障礙而加」的樣式，與設計端交付的 main.css 分開，
 * 之後要比對或回退都容易。載入順序在 main.css 之後（見
 * resources/views/frontEnd/includes/head.blade.php）。
 *
 * 改完這個檔案一定要跑：
 *   php tools/a11y/update-mix-manifest.php
 * 重新計算 public/mix-manifest.json 內的 ?id=（正式站 nginx 對 /assets/
 * 設 30 天快取，沒有換 query string 使用者不會拿到新檔）。
 */

/*
 * .sr-only：只給螢幕報讀軟體看的文字。
 *
 * Bootstrap 3（plugins.css）已經有一份定義，這裡再寫一次是保險——
 * 萬一之後 plugins.css 被抽換，補在樣板上的 sr-only 文字不會突然變成可見文字。
 * 內容與 Bootstrap 3 相同，重複定義不會有副作用。
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*
 * .sr-only-focusable：鍵盤 focus 時才顯示（例如「跳至主要內容」連結）。
 * 目前樣板還沒用到，先備妥定義。
 */
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/*
 * 非連結的橫幅外框（a11y patch 02）。
 *
 * 沒有 url 的首頁橫幅原本輸出 `<a href="javascript:void(0)" target="_blank">`，
 * 那是一個沒有目的地的連結（Freego HM1240401C，也會干擾鍵盤操作），
 * 已改成 `<span>` 包同樣的 `.img`。main.css 有一條
 * `a, a:before, a:after, a *, … { transition: all .1s ease-in-out }`，
 * 換掉 `<a>` 之後 `.h_lecture .item:hover .img` 的陰影會變成瞬間出現，
 * 這裡把同樣的 transition 補回去，讓視覺與原本一致。
 */
.slider .item > span,
.slider .item > span *,
.h_lecture .item > span,
.h_lecture .item > span *,
.h_dm span.item,
.h_dm span.item * {
    transition: all 0.1s ease-in-out;
}

/* =========================================================================
 * a11y patch 03：骨架與互動
 * ========================================================================= */

/*
 * <main> 地標。model.css 的 reset 沒有列到 main（HTML5 新元素），
 * 舊瀏覽器會當成 inline，明確指定 display:block。
 * 跳至主要內容之後焦點會落在 #main（tabindex="-1"），那時不畫外框——
 * 整頁被框起來反而干擾；捲動位置本身就是回饋。
 */
main {
    display: block;
}

/*
 * a11y patch 04：<main> 與頁尾成為定位元素，中央 / 下方定位點才貼在自己區塊的
 * 左上角（原本是 absolute 但沒有定位祖先，會跑到整份文件的左上角）。
 * 已用 Playwright 逐頁比對加上 position: relative 前後所有子元素的
 * getBoundingClientRect()，11 種頁型 × 桌機 1280 / 手機 375 共 0 筆位移
 * （main.css 沒有任何依賴 main / footer 為 static 的絕對定位子元素）。
 * `#nav` 本身已經是 position: fixed，不用再動。
 */
main {
    position: relative;
}

footer.footer {
    position: relative;
}

#main:focus,
#main:focus-visible {
    outline: none !important;
}

/*
 * 跳至主要內容（2.4.1）。平時完全在畫面外，鍵盤 focus 時才出現在左上角。
 * 顏色：#1a1a1a on #ffffff = 16.1:1，外框 #005fcc on #ffffff = 5.6:1。
 * 這個連結**維持 Tab 才出現**（業主確認現況正常），只有下面的
 * `.a11y_anchor` 在 patch 04 改成常駐可見。
 * main.css 有一條 `a, a:before, a * … { transition: all .1s ease-in-out }`，
 * 會讓它從畫面外「滑」進來，明確關掉。
 */
.skip_link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: #1a1a1a;
    transition: none;
}

.skip_link:focus {
    position: fixed;
    left: 8px;
    top: 8px;
    z-index: 10000;
    width: auto;
    height: auto;
    padding: 8px 16px;
    overflow: visible;
    background-color: #ffffff;
    color: #1a1a1a;
    border: 3px solid #005fcc;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: underline;
}

/*
 * 定位點 / 導盲磚「:::」（2.4.1、CNS 15024 的定位點慣例）。
 *
 * patch 03 的版本平時在畫面外、focus 時 `position: fixed` 到畫面左上角，
 * 造成兩個問題（業主 2026-09-04 回報）：看不到定位點在哪裡，而且
 * Tab 到第二、三個定位點時它們也跳到左上角，像是回到頁面開頭。
 * patch 04 改成**三組都常駐可見**，貼在各自區塊（頁首 / 中央 / 頁尾）的左上角，
 * focus 時留在原地，只多一圈外框。
 *
 * 顏色：#4d4d4d on #ffffff = 8.45:1（AA 需 4.5:1）。底色用 85% 白，
 * 壓在輪播圖上時仍然讀得到。定位是相對於各自的區塊：
 * `#AU` 在 `.dsk_menu`（relative）內、`#AC` 在 `main`、`#AZ` 在 `footer.footer`。
 * z-index 只要蓋過同區塊內的內容即可，用 5（頁首整塊已經是 1030）。
 */
.a11y_anchor {
    position: absolute;
    left: 6px;
    top: 4px;
    z-index: 5;
    padding: 2px 4px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #4d4d4d;
    border-radius: 2px;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 1px;
    text-decoration: none;
    transition: none;
}

/*
 * `.navbar-header`（手機版的 logo 那一列）在 main.css 是 relative + z-index 1031，
 * 會蓋住 z-index 5 的定位點（實測 elementFromPoint 回傳 a.brand）。
 * `.dsk_menu` 本身是 z-index 1030 的堆疊環境，所以這個 1032 只在頁首內部有效，
 * 不會蓋到頁面其他東西。
 */
#AU {
    z-index: 1032;
}

/*
 * focus 時**不搬家**：位置完全不變，只加外框。
 * 上面的 `a:focus-visible` 已經涵蓋鍵盤操作，這裡再寫一次 `:focus`，
 * 讓滑鼠點下去也看得到（定位點是很小的目標，點到了要有回饋）。
 */
.a11y_anchor:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    background-color: #ffffff;
    color: #4d4d4d;
}

/*
 * 頁首是 position: fixed、桌機高 108px，
 * accesskey / `#AC` 之類的 hash 捲動要留出這個高度，
 * 不然被跳到的定位點會藏在頁首底下。
 */
#AU,
#AC,
#AZ,
#main {
    scroll-margin-top: 120px;
}

/* 手機版空間比較窄，縮一號但不隱藏 */
@media (max-width: 767px) {
    .a11y_anchor {
        font-size: 1.1rem;
        padding: 1px 3px;
    }
}

/*
 * 焦點可見（2.4.7）。main.css / model.css / plugins.css 有一堆
 * `outline: none` / `outline: 0`（a、.btn、input、select、textarea…），
 * 這裡用 :focus-visible + !important 一次蓋掉：滑鼠點擊不會出現外框，
 * 只有鍵盤操作才畫，所以視覺上與原本沒有差別。
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/*
 * 輪播 / 燈箱的按鈕都是絕對定位在圖片上，外框會被上層元素蓋掉，
 * 另外加一層陰影當備援（管院踩過的坑）。
 */
.owl-nav button:focus-visible,
.owl-dots button:focus-visible,
.owl-pause:focus-visible,
.viewbox-button-default:focus-visible {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #005fcc !important;
}

/*
 * 主選單子選單（2.1.1）：原本只有 :hover 會展開，Tab 進去看不到。
 * 補一條 :focus-within，選擇器與 main.css 的 :hover 版本成對，
 * 也放在同一組 media query 內（桌機版才有下拉）。
 */
@media (min-width: 768px) {
    .navbar-nav .dropdown:focus-within > .dropdown-menu,
    .navbar-nav .dropdown-submenu:focus-within > .dropdown-menu {
        display: block;
    }
}

/*
 * 分頁（2.4.4）：停用的上下頁與「目前這一頁」改成 <span>，
 * 這裡把 main.css `.pagination li a` 的外觀原封不動搬給 span。
 * 沒有 hover 變化（它們本來就不能點）。
 */
.pagination li > span {
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 15px !important;
    min-width: 29px;
    display: inline-block;
    border: none;
    margin: 0 2px;
    background-color: transparent;
    color: #4d4d4d;
}

.pagination li > span:hover,
.pagination li > span:focus {
    background-color: transparent;
    color: #4d4d4d;
    border: none;
}

.pagination li.active > span,
.pagination li.active > span:hover,
.pagination li.active > span:focus {
    background-color: #6f930d;
    color: #fff;
    border: none;
}

/*
 * 表格表頭（1.3.1）：td → th 之後瀏覽器預設會變成粗體置中，
 * 這裡改回 td 的樣子，視覺與原本完全一致。
 * （model.css 的 reset 沒有列到 th / td，所以是瀏覽器預設值在作用。）
 */
.form_table thead th {
    font-weight: inherit;
    text-align: inherit;
}

/*
 * 「有格子、沒有高度」的表頭（首頁最新消息用）。
 * th 留在表格流程內，table-layout: fixed 才算得出原本的欄寬；
 * 文字在 th 內的 .sr-only span 裡，所以這一列的高度是 0，版面完全不變。
 */
.form_table thead.a11y_head th {
    height: 0;
    padding: 0;
    border: 0;
    line-height: 0;
}

/*
 * 附件連結的「（PDF，1.2 MB）」。只縮字級，顏色沿用連結本身，
 * 不引入新的對比問題（顏色統一在 patch 04 處理）。
 */
.file_meta {
    font-size: 0.85em;
    white-space: nowrap;
}

/* 聯絡表單的必填說明 */
.form_required_note {
    margin: 0 0 8px;
    font-size: 0.9em;
    color: #4d4d4d;
}

/*
 * 輪播暫停鈕（2.2.2）。放在輪播右下角，白字 + 半透明黑底
 * （#ffffff on #262626 ≈ 15.3:1，遠高於 4.5:1）。
 * 只有 a11y.js 判定「真的會自動播放」的輪播才會有這顆鈕。
 */
/*
 * 只有真的掛了暫停鈕的輪播才變成定位元素（class 由 a11y.js 加）。
 * plugins.css 給 .owl-carousel 設了 z-index: 1，那在 position: static 時沒有作用；
 * 這裡明確寫 z-index: auto，避免因為改成 relative 而多出一個堆疊層。
 */
.owl-carousel.has_owl_pause {
    position: relative;
    z-index: auto;
}

.owl-pause {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 20;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    background-color: #262626;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.owl-pause:hover,
.owl-pause:focus {
    background-color: #000000;
    color: #ffffff;
}

/* 首頁 DM 的輪播比較小，鈕放左下角才不會壓到左右箭頭 */
.crsl_hdm .owl-pause {
    right: auto;
    left: 8px;
}

/*
 * 燈箱（2.1.1 / 2.4.7）。jquery.viewbox 的關閉 / 上一張 / 下一張是三個 <div>，
 * a11y.js 會補上 role="button" 與 tabindex，這裡讓它們在鍵盤 focus 時看得見。
 */
.viewbox-container:focus {
    outline: none;
}

/* 網站導覽頁的巢狀清單（.editor 內的 ol 已有樣式，這裡只補縮排） */
.sitemap_list,
.sitemap_list ol {
    list-style: decimal;
    padding-left: 2em;
    margin: 0;
}

.sitemap_list li {
    line-height: 1.8em;
}