/*!
 * a11y.css — 全站可存取性（WCAG）基本樣式加固
 *
 * 配合 /static/js/a11y.js 使用。
 *
 * 原則：
 *  - 預設 :focus 無明顯 outline（現代瀏覽器滑鼠點擊不顯示）
 *  - 鍵盤使用者（按 Tab）→ 明顯的對比 outline
 *  - Skip-link：讓螢幕閱讀器/鍵盤使用者可直接跳到 <main>
 */

/* Skip to main content（若頁面有 id="main"） */
.sr-skip-link {
  position: absolute;
  top: -60px;
  left: 0;
  background: #6B4226;
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 8px 0;
  z-index: 10000;
  font-size: .9rem;
  text-decoration: none;
  transition: top .15s ease;
}
.sr-skip-link:focus,
.sr-skip-link:focus-visible {
  top: 0;
  outline: 3px solid #C4783A;
  outline-offset: 2px;
}

/* 鍵盤使用者的統一 focus 樣式（由 a11y.js 加 body.kbd-nav） */
body.kbd-nav *:focus {
  outline: 3px solid #C4783A !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* 現代瀏覽器優先使用 :focus-visible（不吃滑鼠 click 的 focus） */
@supports selector(:focus-visible) {
  body *:focus:not(:focus-visible) {
    outline: none;
  }
  body *:focus-visible {
    outline: 3px solid #C4783A;
    outline-offset: 2px;
    border-radius: 2px;
  }
}

/* Screen reader only（隱藏但可讀） */
.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;
}

/* 觸控目標最小 44x44（商店常被 Google Lighthouse 抓）*/
@media (pointer: coarse) {
  button, a.btn, [role="button"],
  .pd-dot, .vp-opt, .ql-header {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Reduce motion 使用者 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}