/*!
 * 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 但沒有定位祖先，會跑到整份文件的左上角）。
 * patch 05 之後 #AC 改用 .a11y_anchor_row 當定位基準，main 的 relative 已經
 * 用不到，但留著不動（已驗證 0 位移，拿掉反而要再驗一次）；#AZ 仍然靠
 * footer.footer 的 relative 做水平置中。
 * 已用 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 時留在原地，只多一圈外框。
 * patch 05 再依業主指定把三個位置搬到頁面上「該在的地方」：
 * 頁首語系列「中文」的左邊、橫幅圖下方的正中間、頁尾上方的正中間。
 * 樣式（大小、顏色、focus 外框、scroll-margin-top）都沒有變，只動位置。
 *
 * 顏色：#4d4d4d on #ffffff = 8.45:1（AA 需 4.5:1）。底色用 85% 白，
 * 壓在輪播圖上時仍然讀得到。
 * z-index 只要蓋過同區塊內的內容即可，用 5（頁首整塊已經是 1030）。
 * 下面的 left / top 是「共同的預設值」（= 區塊左上角），
 * 三個定位點各自的實際位置寫在後面各自的段落。
 */
.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;
}

/*
 * 上方定位點 #AU。
 *
 * `.navbar-header`（手機版的 logo 那一列）在 main.css 是 relative + z-index 1031，
 * 會蓋住 z-index 5 的定位點（實測 elementFromPoint 回傳 a.brand）。
 * `.dsk_menu` 本身是 z-index 1030 的堆疊環境，所以這個 1032 只在頁首內部有效，
 * 不會蓋到頁面其他東西。`.nl_d_wrapper`（語系列）在 main.css 也是 1032，
 * 兩者平手時由 DOM 順序決定；定位點在前，所以語系連結仍然壓在上面，
 * 它原本的點擊範圍一格都沒有被搶走（定位點與語系連結的可點區域不重疊）。
 *
 * 桌機（>= 768px）：業主指定放在語系列「中文」的左邊、同一列垂直置中。
 * 語系列是 `.nl_d_wrapper { position: absolute; left: 15px }`，
 * 定位基準是 `.dsk_menu_inner`（max-width 1230、margin auto），所以定位點也
 * 掛在同一個容器上算 left，視窗多寬間距都一樣：
 *   .dsk_menu_inner 內距 15px + li 內距 15px → 「中文」的字從容器左緣 +30px 開始，
 *   定位點 left: 2px、寬 20px → 右緣在 +22px，離字 8px。
 *   垂直：語系連結 y = 22～36（中心 29），定位點高 16px → top: 21px（中心 29）。
 * 手機（< 768px）：語系列是 display: none，沒有可以對齊的東西，
 * 維持 patch 04 的左上角（.dsk_menu_inner 在手機從 0,0 起算，位置完全沒變）。
 */
#AU {
    z-index: 1032;
}

@media (min-width: 768px) {
    #AU {
        left: 2px;
        top: 21px;
    }
}

/*
 * 中央定位點 #AC。
 *
 * 業主指定放在「橫幅 / 輪播圖下方的正中間」。位置要跟著橫幅走，CSS 又算不出
 * 橫幅有多高，所以在版型裡插一個**零高度**的容器 `.a11y_anchor_row`
 * （內頁：麵包屑之後、內容之前；首頁：輪播區之後），定位點再相對它置中。
 *
 * 容器裡唯一的子元素是 absolute 的定位點，所以容器沒有行框、height: 0、
 * 沒有 margin / padding / border——它的上下 margin 會互相貼合（self-collapsing），
 * 前後兩個區塊的 margin 照樣直接相鄰摺疊，版面一個像素都不會動。
 *
 * 內頁：這個位置落在 `.section_main` 的 padding-top（桌機 30px / 手機 20px）內，
 * 是橫幅與內容之間唯一保證空白的一條帶子。
 * 首頁：輪播區底下沒有這條帶子（下一個 .home_section 的內容緊接著開始），
 * 改用 --slider 把定位點往上移到輪播區自己的 padding-bottom
 * （桌機 40px / 手機 15px）裡，也就是輪播圖正下方的空白。
 */
.a11y_anchor_row {
    position: relative;
    height: 0;
}

#AC {
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
}

.a11y_anchor_row--slider #AC {
    top: -28px;
}

@media (max-width: 767px) {
    .a11y_anchor_row--slider #AC {
        top: -14px;
    }
}

/*
 * main.css 有一條 `.home_section + .home_section { padding-top: 0 }`。
 * 首頁的定位點容器插在兩個 .home_section 中間，會讓相鄰選擇器對不上，
 * 下一個區塊就多出 40px 的 padding-top（實測會整頁往下位移）。
 * 這裡把它補回來——這是唯一一條會被新容器打斷的相鄰選擇器
 * （main.css 內其他 + / ~ 選擇器都不在 <main> 的直接子元素上）。
 */
.home_section + .a11y_anchor_row + .home_section {
    padding-top: 0;
}

/*
 * 下方定位點 #AZ。業主指定放在頁尾的中上方（頁尾頂端往下 4px、水平置中）。
 * `footer.footer` 已經是 relative、寬度滿版，所以 left: 50% + translateX(-50%)
 * 就是視窗正中央。桌機的聯絡資訊列（.f_info_ul）與手機的 logo 都是從頁尾頂端
 * 往下 22px 才開始，定位點的下緣在 20px（手機 17px），不會蓋到任何內容，
 * 頁尾也不需要多加 padding。
 */
#AZ {
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
}

/*
 * 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;
}