/* ============================================================
 * 國立成功大學文學院 — 無障礙 AA 補丁
 * a11y.css  (必須在 main.css 之後載入)
 * WCAG 2.1 AA / 台灣政府無障礙規範
 * ============================================================ */


/* ============================================================
 * 1. 修正 main.css 的 outline:none 問題（最關鍵！）
 * ============================================================ */

/* 基本焦點框：深藍色，適用滑鼠與鍵盤 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 3px solid #1c5177 !important;
  outline-offset: 2px !important;
}

/* :focus-visible 只在鍵盤 Tab 時出現，滑鼠點擊不會有框 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.35) !important;
}

/* 蓋掉 flexslider 的 outline:none */
.flex-container a:focus,
.flexslider a:focus,
.flex-container a:focus-visible,
.flexslider a:focus-visible {
  outline: 3px solid #1c5177 !important;
  outline-offset: 2px !important;
}

/* 蓋掉 .btn:focus 的 outline:none */
.btn:focus,
.btn:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.35) !important;
}

/* 蓋掉 input_txt 的 outline:none */
.input_txt:focus {
  outline: 3px solid #1c5177 !important;
}


/* ============================================================
 * 2. ::: accesskey 定位連結 — 平時隱藏，聚焦時顯示
 * ============================================================ */
.acc{
	float: left;
	position: relative;
	display:inline-block;
	/*width: calc(100% - 20px);*/
	padding: 3px 10px;
	line-height: 1.5;
}
footer .acc{
	width: calc(100% - 20px);
}
.acc a, .acc a:hover, .acc a:focus{
	line-height: 1.5;
	font-size: 0.85em;
	text-decoration: none;
	color: rgba(33,33,33,0.7);
}
a.accesskey-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: #000;
  background: #fbbf24;
  text-decoration: none;
  font-size: 0.875em;
  font-weight: bold;
}

a.accesskey-link:focus {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding: 10px 20px !important;
  background: #fbbf24 !important;
  color: #000 !important;
  font-weight: bold !important;
  font-size: 0.875em !important;
  text-decoration: none !important;
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
  z-index: 99999 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* 定位點（header/nav/main/footer）被 accesskey 跳到後不顯示外框
   這些是純捲頁用的結構元素，不是互動元素，tabindex="-1" 只為了
   讓瀏覽器能把焦點移過去，不需要給使用者看到焦點框
   同時封 :focus-visible，否則 Firefox 會繞過 :focus 再畫一圈 */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* ============================================================
 * 3. Skip link（跳至主要內容）
 * ============================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: #000;
  background: #fbbf24;
  text-decoration: none;
  font-size: 0.875em;
  font-weight: bold;
  z-index: 10000;
}

.skip-link:focus {
  position: fixed !important;
  left: 16px !important;
  top: 56px !important;  /* 在 accesskey links 下面一點 */
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding: 10px 20px !important;
  background: #fbbf24 !important;
  color: #000 !important;
  font-weight: bold !important;
  font-size: 0.875em !important;
  text-decoration: none !important;
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
  z-index: 99999 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}


/* ============================================================
 * 4. accesskey landmark 被 Alt+鍵 跳到時的焦點樣式
 * ============================================================ */

[accesskey][tabindex="-1"]:focus {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 4px !important;
}

/* header/main/footer 被 accesskey 聚焦時 */
/*header[tabindex="-1"]:focus,
main[tabindex="-1"]:focus,
footer[tabindex="-1"]:focus,
nav[tabindex="-1"]:focus {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 4px !important;
}*/


/* ============================================================
 * 5. 主選單 / 頂部連結 焦點樣式
 * ============================================================ */

#slidemenu ul li a:focus,
#slidemenu ul li a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 0px !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
}

.topicon a:focus,
.topicon a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}

header a:focus,
header a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}

/* Footer 連結焦點 */
footer a:focus,
footer a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}


/* ============================================================
 * 6. Tab 元件（最新消息分類）
 * ============================================================ */

.nav-tabs a:focus,
.nav-tabs a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
  background-color: #007c8f !important;
}

.nav-tabs > li > a[aria-selected="true"] {
  font-weight: bold;
}


/* ============================================================
 * 7. 手機選單按鈕（button element）
 * ============================================================ */

button.mm-toggle {
  border: none;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
}

button.mm-toggle:focus,
button.mm-toggle:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 3px !important;
}


/* ============================================================
 * 8. 分頁按鈕焦點
 * ============================================================ */

.pagination li a:focus,
.pagination li a:focus-visible {
  outline: 3px solid #1c5177 !important;
  outline-offset: 2px !important;
}


/* ============================================================
 * 9. 返回頂部按鈕
 * ============================================================ */

.backToTop:focus,
.backToTop:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 4px !important;
}


/* ============================================================
 * 10. 視覺隱藏 class（給螢幕閱讀器看，視覺看不到）
 * ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ============================================================
 * 11. 字級 — 支援 200% 放大不破版
 * ============================================================ */

html {
  font-size: 100%;   /* 基準 16px，讓 rem 正確運作 */
}

/* 主要內文確保至少 1rem (16px) */
.inews dd {
  font-size: 1rem;
}

.newslist2 a:link dl,
.newslist2 a:visited dl {
  font-size: 0.9375rem; /* 15px */
}


/* ============================================================
 * 12. 對比度補強
 *     原色 #76b74c (日期綠) 對白底對比約 3.3:1，不達 AA 4.5:1
 *     改深一點：#4a7c27 → 對比約 5.2:1
 * ============================================================ */

.inews dt {
  color: #4a7c27;
}

.newslist2 dt {
  color: #4a7c27;
}

.newslist3 dt {
  color: #4a7c27;
}

/* 頂部小連結：#436e72 對 topbg 淺色背景需加深 */
.topicon li a {
  color: #2c4c50 !important;
}


/* ============================================================
 * 13. 圖片無法載入時顯示 alt 文字
 * ============================================================ */

img {
  font-size: 0.875rem;
  color: #555;
}


/* ============================================================
 * 14. 新聞卡片連結焦點（整個卡片可 Tab）
 * ============================================================ */

.inews a:focus dl,
.inews a:focus-visible dl {
  outline: 3px solid #1c5177;
  outline-offset: 2px;
}

.item.overlay-effect a:focus,
.item.overlay-effect a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 4px !important;
}


/* ============================================================
 * 15. Logo h1 連結焦點（logo 圖片背景方塊）
 * ============================================================ */

header h1 a:focus,
header h1 a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 0px !important;
}


/* ============================================================
 * 16. 主選單子項目鍵盤可見
 *
 * 核心原理：
 *   jqueryslidemenu.js 用 jQuery .css({display:'none'}) 隱藏子選單，
 *   這不加 !important，所以本規則的 !important 可以覆蓋。
 *   當 li 內任何元素獲得 focus（:focus-within），子選單自動顯示。
 * ============================================================ */

/* 第一層子選單：focus-within 時顯示 */
#slidemenu > ul > li:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  left: 0 !important;   /* 固定對齊，防止未定位就跑掉 */
}

/* 子選單連結的焦點樣式（深色背景上用白/黃框） */
#slidemenu ul li ul li a:focus,
#slidemenu ul li ul li a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: -2px !important;
  background-color: #3E9EAC !important;
  color: #fff !important;
}

/* 有子選單的父層連結 aria-expanded=true 時加底線提示 */
#slidemenu ul > li > a[aria-expanded="true"] {
  color: #3E9EAC;
  border-bottom: 4px solid #3E9EAC;
}


/* ============================================================
 * 17. 橫幅輪播暫停按鈕（WCAG 2.2.2）
 * ============================================================ */

/* 按鈕列：絕對定位在輪播右下角 */
.slider-controls-bar {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 按鈕本體：44×44px 觸控目標（WCAG 2.5.5） */
.slider-pause-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 30px;
  min-height: 30px;
  padding: 0 7px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75em;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
  /* 確保在輪播箭頭之上 */
  position: relative;
  z-index: 50;
}

.slider-pause-btn:hover {
  background: rgba(0, 0, 0, 0.80);
  border-color: #fff;
}

.slider-pause-btn:focus,
.slider-pause-btn:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.35) !important;
}

/* 播放中：顯示暫停圖示 */
.slider-pause-btn .icon-pause { display: inline-block; }
.slider-pause-btn .icon-play  { display: none; }

/* 已暫停：切換為播放圖示 */
.slider-pause-btn.is-paused .icon-pause { display: none; }
.slider-pause-btn.is-paused .icon-play  { display: inline-block; }


/* prefers-reduced-motion：按鈕文字「已自動暫停」微調 */
@media (prefers-reduced-motion: reduce) {
  .slider-pause-btn { opacity: 0.85; }
}


/* ============================================================
 * 18. owlCarousel（.ilinkbg 廣告輪播）無障礙焦點
 *
 * 問題一：<a> 連結外框被 .owl-wrapper-outer overflow:hidden 裁掉
 *   → 改用 box-shadow:inset（向內，不受 overflow:hidden 限制）
 *
 * 問題二：.owl-prev/.owl-next 是 width:100% 的 div，
 *         outline 套在 div 上會偏掉；視覺圖示是裡面的 <i>
 *   → 改把焦點框加在 <i> 上（:focus-within 或 :focus + i）
 * ============================================================ */

/* ── 輪播內 <a> 連結焦點（inset shadow 不被 overflow:hidden 裁切）── */
.owl-carousel .owl-item a:focus,
.owl-carousel .owl-item a:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 3px #fbbf24 !important;
}

/* ── 左右按鈕：焦點框套在視覺圖示 <i> 上 ── */
.our-team .owl-prev:focus i,
.our-team .owl-next:focus i,
.our-team .owl-prev:focus-visible i,
.our-team .owl-next:focus-visible i {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 3px !important;
  /* 同時套用 hover 背景色，讓視覺更清楚 */
  color: #ffffff !important;
  background-color: #3E9EAC !important;
  border-color: #3E9EAC !important;
}

/* 去掉 div 本身的 outline（框已移到 <i>，div 不要再畫一條） */
.our-team .owl-prev:focus,
.our-team .owl-next:focus,
.our-team .owl-prev:focus-visible,
.our-team .owl-next:focus-visible {
  outline: none !important;
}

/* ── .our-team 卡片連結焦點（特殊處理）──
 *
 * 問題：.item 結構中，<a> 包裹兩個 float:left 的 .col-lg-6，
 *       <a> 本身不是 BFC，高度折疊為 0。
 *       直接套在 <a> 的 box-shadow:inset 套在零高度元素上，完全不可見。
 *
 * 修正：改用 :focus-within 把焦點框畫在外層 .item 上，
 *       .item 是 float:left（建立 BFC），有正確的可見高度。
 * ── */
.our-team .item.overlay-effect:focus-within {
  box-shadow: inset 0 0 0 4px #fbbf24 !important;
}

/* 清掉 <a> 上的 inset shadow（改由 .item:focus-within 處理）*/
.our-team .owl-item a:focus,
.our-team .owl-item a:focus-visible {
  box-shadow: none !important;
}


/* ============================================================
 * 20. 左側導覽 .navexb — 無障礙 AA 修正
 *
 * 問題：ul.navex li a.current 背景色 #49B1BC 配白字
 *       對比約 2.5:1，不達 AA 4.5:1
 * 修正：改為 #436E72（白字對比 5.7:1）✓
 *
 * 注意：
 *   - ul.navex ul li a { outline: 0 } 被 Section 1 的
 *     a:focus { outline: ... !important } 覆蓋，不需額外加
 *   - role="navigation" / aria-expanded / aria-current
 *     由 a11y.js fixNavExb() 動態注入
 * ============================================================ */

ul.navex li a.current {
  background-color: #436E72 !important;   /* 原 #49B1BC 對比 2.5:1 → 5.7:1 ✓ */
	color: #ffffff !important;
}


/* ============================================================
 * 19. FAQ 問與答 — button.accordion-toggle 外觀重設
 *     原本 <a>，改為語意正確的 <button> 後，
 *     需重設瀏覽器預設 button 外觀讓視覺維持不變
 * ============================================================ */

/* 重設 <button> 預設外觀，讓它看起來和原本的 <a> 一樣 */
.pageqa .panel-heading button.accordion-toggle {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  line-height: inherit;
}

/* 焦點樣式（覆蓋一般 button:focus，確保在深色/淺色背景都清楚）*/
.pageqa .panel-heading button.accordion-toggle:focus,
.pageqa .panel-heading button.accordion-toggle:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}


/* ============================================================
 * 20. 橫幅輪播 dots — 鍵盤焦點外框
 *     FlexSlider 的 .flex-control-paging li a 預設無 href，
 *     a11y.js 補了 tabindex="0"，這裡補對應焦點樣式
 * ============================================================ */

/* cursor 提示可點擊 */
.flex-control-paging li a {
  cursor: pointer;
}

/* Tab 到 dot 時的焦點框 */
.flex-control-paging li a:focus,
.flex-control-paging li a:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 3px !important;
  border-radius: 50% !important;
}


/* ============================================================
 * 21. 行動選單 — 關閉按鈕（a11y.js 動態插入）
 * ============================================================ */

.mm-close-btn {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  padding: 0.625em 1em;
  background: #436E72;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1em;
  font-family: inherit;
  text-align: left;
  line-height: 1.4;
}

.mm-close-btn span[aria-hidden] {
  font-size: 1.25em;
  line-height: 1;
}

.mm-close-btn:hover {
  background: #355558;
}

.mm-close-btn:focus,
.mm-close-btn:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}


/* ============================================================
 * 22. 行動選單 — 子選單展開按鈕 span.expand（jQuery 外掛插入）
 *     a11y.js fixMobileMenuSubnav() 補 tabindex/role/aria-*
 * ============================================================ */

/* Tab 焦點框 */
#mobile-menu span.expand:focus,
#mobile-menu span.expand:focus-visible {
  outline: 3px solid #fbbf24 !important;
  outline-offset: 2px !important;
}

/* 佔位連結（href="#" aria-disabled）— 視覺灰化 + 禁用游標 */
#mobile-menu a[aria-disabled="true"] {
  color: #888 !important;
  cursor: default !important;
  text-decoration: none !important;
  pointer-events: none;   /* 防止滑鼠意外點擊（JS 也有 preventDefault） */
}


/* ============================================================
 * 23. 畫廊圖片 Fancybox 連結焦點（.doctor_boxpic 內的 <a>）
 *
 * 問題一：.doctor_boxpicimg 是 position:absolute，
 *         外層 <a> 高度歸零，outline 畫在零高度上完全不可見。
 * 問題二：.doctor_boxpic { overflow:hidden } 會裁掉外框。
 *
 * 修正：
 *   1. <a> 設 position:absolute; inset:0 → 填滿整個卡片，
 *      Tab 時有正確的可點擊範圍
 *   2. :focus-within 在 .doctor_boxpic 畫 inset box-shadow，
 *      inset 向內繪製，不受 overflow:hidden 裁切
 * ============================================================ */

/* 讓連結填滿整個圖片卡片 */
.doctor_boxpic a[data-fancybox] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  z-index: 1;
}

/* 去掉 <a> 本身的 outline（框改由外層容器顯示）*/
.doctor_boxpic a[data-fancybox]:focus,
.doctor_boxpic a[data-fancybox]:focus-visible {
  outline: none !important;
}

/* 焦點框：inset shadow 繪製在 .doctor_boxpic 上 */
.doctor_boxpic:focus-within {
  box-shadow: inset 0 0 0 3px #fbbf24 !important;
  border-color: #fbbf24 !important;
}