/**
 * WCAG 2.1 AA 無障礙樣式
 * 包含：焦點樣式、跳過連結、螢幕閱讀器專用類別、高對比度修正
 */

/* ============================================
   1. 焦點樣式 - 確保鍵盤導航可見
   ============================================ */

/* 所有可聚焦元素的焦點樣式 */
:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* 滑鼠點擊時隱藏焦點框，僅鍵盤導航時顯示 */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* 按鈕焦點樣式 */
.btn:focus,
.btn:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  box-shadow: 0 0 0 0.25rem rgba(0, 95, 204, 0.25);
}

/* 表單控制項焦點樣式 */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #005fcc;
  box-shadow: 0 0 0 0.25rem rgba(0, 95, 204, 0.25);
}

/* 連結焦點樣式 */
a:focus,
a:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  text-decoration: underline;
}

/* ============================================
   2. 跳過連結 (Skip Links)
   ============================================ */

/* 跳過連結 - 平時隱藏，焦點時顯示 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  padding: 12px 24px;
  background-color: #005fcc;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid #ffcc00;
  outline-offset: 2px;
}

/* ============================================
   3. 螢幕閱讀器專用類別
   ============================================ */

/* 視覺隱藏但螢幕閱讀器可讀 */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 焦點時可見（用於跳過連結） */
.visually-hidden-focusable:not(:focus):not(:focus-within),
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================
   4. 高對比度修正
   ============================================ */

/* 確保文字對比度符合 WCAG AA (4.5:1) */
.text-muted {
  color: #595959 !important;
  /* 原本 #6c757d 對比度不足 */
}

/* 確保連結可識別 */
a:not(.btn) {
  text-decoration: underline;
}

a:not(.btn):hover {
  text-decoration: none;
}

/* 確保 placeholder 對比度 */
::placeholder {
  color: #595959;
  opacity: 1;
}

/* 確保禁用狀態對比度 */
.btn.disabled,
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ============================================
   5. 動態內容通知區域樣式
   ============================================ */

/* ARIA live region 通知區域 - 確保可見性 */
[aria-live="polite"],
[aria-live="assertive"],
[role="status"],
[role="alert"] {
  /* 確保動態內容區域可被螢幕閱讀器識別 */
  position: relative;
}

/* 成功訊息 */
.alert-success[role="status"] {
  border-left: 4px solid #198754;
}

/* 錯誤訊息 */
.alert-danger[role="alert"] {
  border-left: 4px solid #dc3545;
}

/* 警告訊息 */
.alert-warning[role="alert"] {
  border-left: 4px solid #ffc107;
}

/* ============================================
   6. 表格無障礙樣式
   ============================================ */

/* 確保表格標題可見 */
table caption {
  caption-side: top;
  padding: 0.5rem;
  font-weight: bold;
  color: #212529;
}

/* 表格 hover 狀態 */
.table-hover tbody tr:hover {
  background-color: rgba(0, 95, 204, 0.075);
}

/* 表格焦點狀態 */
.table tbody tr:focus-within {
  outline: 2px solid #005fcc;
  outline-offset: -2px;
}

/* ============================================
   7. 表單驗證無障礙樣式
   ============================================ */

/* 錯誤狀態 */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #dc3545;
  border-width: 2px;
}

/* 錯誤訊息 */
.invalid-feedback {
  color: #b02a37;
  /* 更深的紅色確保對比度 */
  font-weight: 500;
}

/* 成功狀態 */
.form-control.is-valid,
.form-select.is-valid {
  border-color: #198754;
  border-width: 2px;
}

/* ============================================
   8. 互動元素指標樣式
   ============================================ */

/* 可點擊元素 cursor */
[role="button"],
button,
a[href],
input[type="submit"],
input[type="button"],
.btn {
  cursor: pointer;
}

/* 禁用元素 */
[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}

/* ============================================
   9. 減少動畫 (prefers-reduced-motion)
   ============================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .xoops-breathing-light::before {
    animation: none;
  }
}

/* ============================================
   10. 定位點樣式 (台灣政府無障礙標章)
   ============================================ */

/* 定位點連結 */
#U,
#C,
#L,
#S,
#M {
  position: absolute;
  left: -9999px;
}

/* 定位點說明 */
.accesskey-info {
  position: absolute;
  left: -9999px;
}