/* ==========================================================================
   無障礙修正集中地（前台）
   --------------------------------------------------------------------------
   本檔放置「為了通過無障礙人工檢測，覆蓋 school theme 既有 CSS」的全網站規則。
   會在所有 school theme 的 CSS 之後載入（見 frontstage/frame/head.html），
   所以裡面用 `!important` 是為了確保蓋掉個別 school 的舊規則。

   每條規則前面務必加上「WCAG 條目 + 原始問題 + 改法理由」三段註解，方便日後
   重新審查時對得回去；新增條目就接在最後。
   ========================================================================== */


/* --------------------------------------------------------------------------
   WCAG 1.4.3 對比值（最小）：回到頂端按鈕

   原狀：
     各 school 的 footer.css 大多寫 `.totop > a { background-color:#EEE; opacity:.8 }`，
     疊在白底頁面上 effective 約 #F1F1F1，對白底對比僅 1.1:1，遠低於 3:1 標準。
   改法：
     用半透明黑色背景 rgba(0,0,0,.46)，effective 約 #8A8A8A，對白底約 3.5:1。
     icon 維持原本白色（school 的 arrow_top.png 本身是白），白 vs #8A 也約 3.5:1，
     保留約半級安全餘裕，避免不同瀏覽器、檢測工具捨入誤差導致 fail。
   注意：
     原本有 3 個 school（david / odd / tku）用 solid black 背景。被本規則覆蓋
     後會變成 ~#8A 半透明灰，視覺輕了，但仍過 3:1。若某 school 想保留純黑可
     另外針對該 school 加更高權重的 override。
   -------------------------------------------------------------------------- */
div.totop > a {
    background-color: rgba(0, 0, 0, 0.46) !important;
    opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   WCAG 1.4.1 資訊不應只透過顏色／視覺呈現：漢堡選單收合時不應仍可被聚焦

   原狀：
     當畫面寬度 < 1000px（漢堡模式），#menu_odd 的收合是用 position:absolute + left
     位移把選單推到畫面外，但 DOM 仍存在、`visibility: visible`。
     使用者按 Tab 鍵時仍可聚焦到選單內約 54 個連結，看不到視覺焦點在哪，
     螢幕報讀器也會讀出這些連結。
   改法：
     在漢堡 breakpoint（< 1000px，跟 JS 的 `$(window).width() < 1000` 對齊）下，
     預設 #menu_odd `visibility: hidden`；當 JS 加 `.menuActive` 展開時才 visible。
     `transition: visibility 0s linear 250ms`：收合時延遲 250ms 等滑出動畫結束才
     hidden（250ms 是各 school 的 menu transition 慣用值）；展開時立即 visible。
   不影響範圍：
     - 桌面寬螢幕（>= 1000px）：常駐展開不受 media query 影響
     - mcvs theme：用 `display: none/block` 切換，display 比 visibility 優先級高
       本規則對它無作用
   -------------------------------------------------------------------------- */
@media (max-width: 999.98px) {
    #menu_odd {
        visibility: hidden;
        transition: visibility 0s linear 250ms;
    }
    #menu_odd.menuActive {
        visibility: visible;
        transition-delay: 0s;
    }
}


/* --------------------------------------------------------------------------
   WCAG 1.4.10 Reflow：主選單與頂端導覽列字級放大／視窗縮窄時應換行而非裁切

   原狀：
     head.html 內 `<style data-do-4-every-page-and-cssimportant>` 全網站套用
     `#menu_odd ul { white-space: nowrap; }`。視窗變窄或字級放大時，第一層選單
     項目（認識東中、行政單位…）撐爆容器但被 `nowrap` 卡住不換行，靠右側項目
     被裁切，使用者看不到也無法操作；頂端導覽列也有同樣情況。
   改法：
     (a) 用 em 媒體查詢 max-width:80em（≈1280px）覆蓋 nowrap → 視窗變窄、
         瀏覽器原生 Ctrl++ 縮放 都會觸發換行
     (b) A+ 按鈕（accessbilityFontZoom.js 改 html.style.fontSize）並不會讓 em
         媒體查詢觸發（spec 規定 MQ 內 em 以 UA 預設字級為基準，html style 改
         不算數），所以由 doc.ready.front.js 偵測 overflow 後掛 `.odd-menu-wrap`
         class，這裡定義對應的 wrap 規則
   不影響範圍：
     桌面寬螢幕 + 正常字級下，內容自然不撐爆容器，wrap 規則用不到
   -------------------------------------------------------------------------- */
@media (max-width: 80em) {
    #menu_odd ul,
    ul.navigation_odd {
        white-space: normal !important;
    }
}

#menu_odd ul.odd-menu-wrap,
ul.navigation_odd.odd-menu-wrap {
    white-space: normal !important;
    flex-wrap: wrap;
}