@charset "utf-8";
/**
 * 無障礙輔助樣式（臺東區農業改良場 英文版）
 *
 * WCAG 2.2.2 暫停、停止、隱藏 / CS1220202E：
 * 首頁兩組會自動開始、且持續超過 5 秒的輪播（橫幅 camera slider、Our Gallery），
 * 各提供一顆暫停／播放控制鍵，控制鍵在 DOM 順序上位於該動態內容之前。
 */

/* ---------- 控制鍵共用外觀 ---------- */

.motion-control {
    line-height: 0;
}

.motion-toggle {
    display: inline-block;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid #46565f;
    border-radius: 3px;
    background-color: #fff;
    color: #1c3d4d;
    font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

/* 滑鼠移入／聚焦時反白，確保在深淺不一的橫幅圖片上都看得出是可按的按鈕 */
.motion-toggle:hover,
.motion-toggle:focus {
    background-color: #1c3d4d;
    border-color: #1c3d4d;
    color: #fff;
}

/* 焦點框需明顯可見（鍵盤使用者） */
.motion-toggle:focus {
    outline: 3px solid #197ac3;
    outline-offset: 2px;
}

/* 以 CSS 繪製圖示，不另外依賴圖檔：播放中顯示「暫停」雙棒 */
.motion-toggle-ico {
    display: inline-block;
    vertical-align: middle;
    box-sizing: content-box;
    width: 3px;
    height: 11px;
    margin-right: 6px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

/* 已暫停時改顯示「播放」三角形 */
.motion-toggle.is-paused .motion-toggle-ico {
    width: 0;
    height: 0;
    border-left: 10px solid currentColor;
    border-right: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.motion-toggle-txt {
    vertical-align: middle;
}

/* ---------- 橫幅輪播（#slidercontainer） ---------- */

#slidercontainer {
    position: relative;
}

/* 疊在輪播左上角：不推擠既有版面，視覺上仍在動態內容之前 */
#slidercontainer > .motion-control {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 60;
}

/*
 * 疊在圖片上，底色給滿並加陰影，避免與背景圖糊在一起。
 * hover／focus 規則必須寫在同一組 ID 選擇器下 —— 否則
 * 「#slidercontainer > .motion-control .motion-toggle」的特異性會壓過
 * 前面的「.motion-toggle:hover」，造成滑鼠移過去完全沒有視覺回饋。
 */
#slidercontainer > .motion-control .motion-toggle {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

#slidercontainer > .motion-control .motion-toggle:hover,
#slidercontainer > .motion-control .motion-toggle:focus {
    background-color: #1c3d4d;
    border-color: #1c3d4d;
    color: #fff;
}

/*
 * camera slider 內建的 play/stop 命令列改由上方控制鍵驅動：
 * 這裡只把它移出視覺（保留在 DOM，插件的 show/hide 邏輯照常運作），
 * 不可用 display:none —— 會與插件自己的顯示切換打架。
 */
#slider .camera_commands {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

/* ---------- Our Gallery（#slider_box） ---------- */

#slider_box > .slider_head > .motion-control {
    margin-left: auto;
    padding-left: 10px;
    align-self: center;
}

/*
 * Our Gallery 在側欄、寬度有限，控制鍵只保留符號不放文字：
 * 名稱改由 aria-label／title 提供（有 aria-label 時，螢幕報讀軟體本來就以它為準，
 * 不會讀按鈕內的文字，所以視覺隱藏文字不會少掉任何資訊）。
 * 尺寸做滿 24×24，符合 WCAG 2.5.8 目標尺寸下限。
 */
#slider_box > .slider_head > .motion-control .motion-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
}

#slider_box > .slider_head > .motion-control .motion-toggle-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

#slider_box > .slider_head > .motion-control .motion-toggle-ico {
    width: 2px;
    height: 9px;
    margin-right: 0;
    border-left-width: 2px;
    border-right-width: 2px;
}

/* 三角形在圓形內視覺上偏左，往右推一點才會置中 */
#slider_box > .slider_head > .motion-control .motion-toggle.is-paused .motion-toggle-ico {
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left-width: 8px;
    border-top-width: 5px;
    border-bottom-width: 5px;
}

@media only screen and (max-width: 912px) {
    #slidercontainer > .motion-control {
        top: 4px;
        left: 4px;
    }
}

/* ---------- 單位選單的前往按鈕（WCAG 3.2.2 於輸入時） ----------
 * 原本 select 一 change 就跳頁，鍵盤使用者用方向鍵瀏覽選項會被迫離開頁面。
 * 改為選好後按這顆才前往。
 */
.select-aside-go {
    margin-left: 6px;
    padding: 5px 14px;
    border: 1px solid #46565f;
    border-radius: 3px;
    background-color: #fff;
    color: #1c3d4d;
    font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
    vertical-align: middle;
    cursor: pointer;
}

.select-aside-go:hover,
.select-aside-go:focus {
    background-color: #1c3d4d;
    border-color: #1c3d4d;
    color: #fff;
}

.select-aside-go:focus {
    outline: 3px solid #197ac3;
    outline-offset: 2px;
}

/* ---------- Our Gallery 的頁碼切換鍵 ----------
 * 原本是 <a href="javascript:;">，螢幕報讀軟體會報成「連結」，
 * 但它的行為是切換輪播頁而非前往網址，語意應為按鈕（改由 OUR_GALLERY.js 產生 <button>）。
 * 這裡沿用原本 .link_dot a 的圓點外觀，另補上按鈕需要重置的預設樣式。
 */
#slider_box > .slider_head > .link_dot button {
    display: inline-block;
    width: 7px;
    height: 7px;
    overflow: hidden;
    padding: 0;
    border: 0;
    line-height: 200%;
    border-radius: 50%;
    color: black;
    background: white;
    margin-top: 5px;
    cursor: pointer;
}

#slider_box > .slider_head > .link_dot button + button {
    margin-left: 5px;
}

#slider_box > .slider_head > .link_dot button.active {
    background-color: #28bae3;
}

#slider_box > .slider_head > .link_dot button:focus {
    outline: 2px solid #197ac3;
    outline-offset: 2px;
}

/* ---------- 頁籤（role="tab"）焦點可見 ---------- */
.tabcontainer ul.tabs li a:focus {
    outline: 3px solid #197ac3;
    outline-offset: -3px;
}