/* a11y overrides — WCAG 2.1 AA 對比與 focus 可視性
   套用於：SweetAlert v1 modal、全站連結焦點、跳轉提示
*/

/* ========== SweetAlert v1 按鈕對比 (3-1, 3-2, 3-3, 3-4) ========== */
/* 預設 #7cd1f9 + #fff = ~2.4:1，danger #e64942 + #fff ~3.89:1，皆未達 4.5:1。
   SweetAlert v1 在執行期把自己的 <style> 注入 <head> 末端，source order 比本檔晚，
   故必須拉高 specificity（用 .swal-modal 後代選擇器 + 雙 class）才能贏過內建樣式。 */
.swal-modal .swal-button,
.swal-modal .swal-button.swal-button--confirm {
  background-color: #424d99; /* 深藍 對 #fff = ~6.4:1 */
  color: #ffffff;
}

.swal-modal .swal-button:not([disabled]):hover,
.swal-modal .swal-button.swal-button--confirm:not([disabled]):hover {
  background-color: #424d99;
  color: #ffffff;
}

.swal-modal .swal-button.swal-button--danger {
  background-color: #c62828; /* 對 #fff ~ 5.6:1，達 AA */
  color: #ffffff;
}

.swal-modal .swal-button.swal-button--danger:not([disabled]):hover {
  background-color: #b71c1c;
  color: #ffffff;
}

.swal-modal .swal-button.swal-button--cancel {
  background-color: #e0e0e0;
  color: #212121; /* 對 #e0e0e0 ~12:1 */
}

.swal-modal .swal-button.swal-button--cancel:not([disabled]):hover {
  background-color: #c8c8c8;
  color: #212121;
}

/* ========== SweetAlert v1 右上角 close 按鈕（a11y-modal.js 注入）==========
   SweetAlert 內建 .swal-modal button (0,1,1) 贏過單 class，必須用 .swal-modal .swal-close-btn
   (0,2,0) 才能蓋過內建 button 樣式（color/background/font-size）。 */
.swal-modal {
  position: relative; /* close 按鈕 absolute 定位錨點，SweetAlert 預設已 relative，保險再宣告 */
}

.swal-modal .swal-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 0; /* SweetAlert button 有 min-width，需重置 */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #424d99;
  font-family: Arial, "Helvetica Neue", "Microsoft JhengHei", sans-serif;
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-transform: none;
  text-indent: 0;
  cursor: pointer;
  border-radius: 50%;
  overflow: visible;
}

.swal-modal .swal-close-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: #424d99;
}

.swal-modal .swal-close-btn:focus,
.swal-modal .swal-close-btn:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
  box-shadow: none; /* 蓋掉前面 .swal-button focus 的 box-shadow 規則溢散 */
}

/* ========== Modal 按鈕焦點可視 (11-1 ~ 11-4) ========== */
.swal-modal .swal-button:focus,
.swal-modal .swal-button:focus-visible,
.swal-modal .swal-button.swal-button--confirm:focus,
.swal-modal .swal-button.swal-button--confirm:focus-visible,
.swal-modal .swal-button.swal-button--danger:focus,
.swal-modal .swal-button.swal-button--danger:focus-visible,
.swal-modal .swal-button.swal-button--cancel:focus,
.swal-modal .swal-button.swal-button--cancel:focus-visible {
  outline: none;
  box-shadow: 0 0px 0px 3px #ff3e4d inset;
}

/* danger 按鈕（紅）紫柔光視覺衝突，改用黑柔光 */
.swal-modal .swal-button.swal-button--danger:focus,
.swal-modal .swal-button.swal-button--danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #380004;
}

/* ========== Skip link (Alt+C / 跳到主內容) 可視性 ========== */
.goCenter:focus {
  outline: none;
  box-shadow: 0 0px 0px 3px #ff3e4d inset;
}

/* skip-link：預設藏在畫面外，focus 時顯示於左上角 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 10000;
  padding: 8px 16px;
  background: #424d99;
  color: #ffffff;
  text-decoration: underline;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
  outline: none;
  box-shadow: 0 0px 0px 3px #ff3e4d inset;
  color: #ffffff;
}

/* main 取得 focus 時不顯示預設 outline 變形 */
main[tabindex="-1"]:focus {
  outline: none;
}

/* ========== 全域連結 focus-visible 補強 (2.4.7) ========== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
  outline: none;
  box-shadow: 0 0px 0px 3px #ff3e4d inset;
}

/* ========== 連結不可僅靠顏色區別 (1.4.1) ========== */
/* Login 頁「加入會員」等內文連結加底線，不能只靠顏色 */
.member-add a,
.contentpage a:not(.btn):not(.scrollToTop):not(.accesskey):not(.goCenter),
.contentpage2 a:not(.btn):not(.scrollToTop):not(.accesskey):not(.goCenter) {
  text-decoration: underline;
}

/* breadcrumb 內連結保持底線 */
.breadcrumb a {
  text-decoration: underline;
}

/* ========== Header 子元素重排（DOM 順序維持 h1 → nav 以利螢幕閱讀器） ========== */
/* hyui.js 原本用 prependTo 把 nav 搬到 h1 之前以配合 .header h1 的負 margin 排版。
   為符合無障礙閱讀順序，DOM 改為 h1 → nav，這裡用 flex 還原 logo 在左、nav 在右、menu 換行的視覺。 */
@media screen and (min-width: 768px) {
  .header > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
  }
  .header > .container > .accesskey {
    order: 0;
    flex: 0 0 auto;
  }
  .header > .container > h1 {
    order: 1;
    flex: 0 0 460px;
    margin-top: 0; /* 取消原 -80px，改由 flex 排版 */
  }
  .header > .container > .navigation {
    order: 2;
    flex: 1 1 auto;
  }
  .header > .container > noscript {
    order: 3;
    flex: 0 0 100%;
  }
  .header > .container > .menu {
    order: 4;
    flex: 1 1 100%;
  }
  /* sidebarCtrl/searchCtrl 為 absolute 定位，order 不影響 */
}

.main-content{
  position: relative;
}

/* ========== notice_success / warning / error 對比 (1.4.3) ==========
   hyui 預設 #4f8a10/#dff2bf ≈ 3.53:1，未達 AA。深化文字色至 #1b5e20 ≈ 6.5:1。
*/
.notice_success,
*[class*="notice_success"] {
    color: #1b5e20;
}

/* 登入成功浮動提示：懸浮於 banner 上方水平置中
   hyui *[class^="notice"] 內建 display:block; width:100%，因此 toast 用 width:auto +
   max-width + padding-right 留 close button 空間，close 走 position:absolute 釘右邊。 */
.login-success-toast {
    position: absolute;
    z-index: 2;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding-right: 3em;
}

.login-success-toast-close {
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.5em;
    line-height: 1;
    padding: 2px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.login-success-toast-close:hover {
    background-color: rgba(27, 94, 32, 0.12);
}

.login-success-toast-close:focus,
.login-success-toast-close:focus-visible {
    outline: 2px solid #1b5e20;
    outline-offset: 2px;
}

/* ExamInformation：768-991px 卡片式表格時，名稱欄位文字置中且保留欄名空間。 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .exam-information-list td {
    padding-left: 7.5em !important;
  }

  .exam-information-list td:before {
    width: 6em;
  }

  .exam-information-list td[data-title="名稱"] {
    text-align: center;
  }

  .exam-information-list td[data-title="名稱"] a {
    display: block;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ========== sr-only utility ========== */
.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;
}

.a11y-field-error.field-validation-valid {
  display: none;
}

.a11y-field-error.field-validation-error {
  display: block;
  margin-top: 0.35em;
}

.password-rule-heading.help {
  color: #34385a;
  display: block;
  font-size: 0.88em;
  line-height: 1.4;
  margin: 0.45em 0 0.35em;
}

.password-rule-list {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(158, 162, 202, 0.65);
  border-radius: 4px;
  display: grid;
  gap: 0.3em 0.9em;
  grid-template-columns: repeat(auto-fit, minmax(10.75em, 1fr));
  list-style: none;
  margin: 0;
  max-width: 100%;
  padding: 0.5em 0.65em;
}

.password-rule {
  align-items: center;
  color: #45495f;
  display: flex;
  font-size: 0.88em;
  gap: 0.4em;
  line-height: 1.35;
  min-width: 0;
}

.password-rule-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 1em;
  height: 1em;
  justify-content: center;
  line-height: 1;
  width: 1em;
}

.password-rule-svg {
  display: none;
  fill: currentColor;
  height: 1em;
  width: 1em;
}

.password-rule-text {
  overflow-wrap: anywhere;
}

.password-rule[data-password-rule="symbol"] {
  grid-column: span 2;
}

.password-rule.is-invalid .password-rule-icon {
  color: #b3261e;
}

.password-rule.is-invalid .password-rule-svg-cross,
.password-rule.is-valid .password-rule-svg-check {
  display: block;
}

.password-rule.is-valid {
  color: #176b2c;
  font-weight: 500;
}

.password-rule.is-valid .password-rule-icon {
  color: #176b2c;
}

@media screen and (max-width: 420px) {
  .password-rule[data-password-rule="symbol"] {
    grid-column: auto;
  }
}

.cp{
  min-height: 200px;
}
