/* ==========================================================================
   無障礙修正集中地（前台）
   --------------------------------------------------------------------------
   本檔放置「為了通過無障礙人工檢測，覆蓋 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;
}


/* ==== 內容頁標題區手機重排（35 板同款）====
   各板 contentTemp 沿用「資訊行 absolute 吊掛在標題容器外、容器只留 margin-bottom 2em」的老模式，
   手機上資訊行常超出預留空間、疊到下方社群分享列。
   手機改 flex 依桌機視覺順序重排：標題（回列表在右）→ 分隔線(::after) → 資訊行在線下自然撐高。
   桌機（≥1000）不動、維持各板原本吊掛設計。
   選擇器加 main 提高特異度：本檔在 head 載入、板檔在 body 較晚載，同特異度會被蓋回去。 */
@media only screen and (max-width: 999px) {
    main div.contentTempTitle_odd {
        margin-bottom : .5em;
        display       : flex;
        flex-direction: column;
        border-bottom : none;
    }

    /* 分隔線改畫在標題與資訊行之間（各板原線幾乎清一色 #CCC） */
    main div.contentTempTitle_odd::after {
        content      : '';
        order        : 2;
        border-bottom: 1px solid #CCC;
    }

    main div.contentTempTitle_odd h2 {
        order: 1;
    }

    main div.contentTempTitle_odd p.contentTempInfo_odd {
        order   : 3;
        position: static;
        float   : none;
    }

    /* 回列表錨回標題列右側（原本錨容器底、會跟到資訊行旁） */
    main div.contentTempTitle_odd a.contentTempBack_odd {
        top   : 0;
        bottom: auto;
    }
}

/* ==== 多媒體縮圖鎖格（QA #30，全板）====
   相簿/影片區塊縮圖原本跟原始圖檔天然尺寸跑（YT 預設縮圖等小圖會整格縮小、高度參差），
   格子一律鎖 4:3、圖用 object-fit:cover 裁滿，來源圖尺寸不再影響排面。
   選擇器加 main 提高特異度蓋過較晚載入的各板 imgList 桶。 */
main div.imgListContent_odd a,
main div.imgListContent_odd div.img {
    width: 100%;
}

main div.imgListContent_odd div.img img {
    width       : 100%;
    height      : auto;
    aspect-ratio: 4 / 3;
    object-fit  : cover;
}