/* =========================================================================
   a11y.css · 万事无忧·衡元智库 · 顶级网站无障碍增强
   2026-09-06 W3 D7 · 优优在手（顶级网站开发程序员）
   --------------------------------------------------------------------------
   WCAG 2.1 AA+ 对标：
   · :focus-visible 键盘焦点环（GitHub / Vercel 同款）
   · skip-link 跳转主内容（Vercel / Stripe 同款）
   · sr-only 屏幕阅读器专用（业界标准）
   · prefers-reduced-motion 减少动画（苹果系统级偏好）
   · prefers-color-scheme 暗色模式（Bootstrap / Tailwind 同款）
   · 高对比度模式（Windows 系统级偏好）
   ========================================================================= */

/* ============================ Skip Link ============================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  background: #5b4a3f;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 3px solid #d4a84b;
  outline-offset: 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;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  padding: 8px 16px;
  background: #5b4a3f;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
}

/* ============================ Focus Visible (键盘焦点环) ============================ */
*:focus {
  outline: none; /* 重置浏览器默认，避免双重 outline */
}
*:focus-visible {
  outline: 3px solid #5b4a3f;
  outline-offset: 2px;
  border-radius: 2px;
}

/* 链接焦点（更醒目） */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #d4a84b;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(212, 168, 75, 0.2);
}

/* 表单焦点（柔和版） */
.form-grid input:focus-visible,
.form-grid select:focus-visible,
.form-grid textarea:focus-visible {
  outline: 3px solid #d4a84b;
  outline-offset: 1px;
  border-color: #d4a84b;
}

/* 卡片焦点（键盘 Tab 时） */
[role="link"]:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid #d4a84b;
  outline-offset: 3px;
}

/* ============================ 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;
  }
  /* skip-link 即刻显示 */
  .skip-link {
    transition: none;
  }
}

/* ============================ Dark Mode（暗色模式）======================== */
@media (prefers-color-scheme: dark) {
  :root {
    --txt: #f0ece4;
    --txt-soft: #b8b0a4;
    --txt-faint: #8a8478;
    --brand-bg: #1a1814;
    --border: #3a3530;
    --white: #2a2622;
    --brand-soft: #3a3548;
  }
  body {
    background: var(--brand-bg);
    color: var(--txt);
  }
  .info-card,
  .fortune-card,
  .decision-card {
    background: #2a2622;
    border-color: #3a3530;
  }
  .site-nav {
    background: #1a1814;
    border-bottom-color: #3a3530;
  }
  blockquote {
    background: #2a2622;
    color: var(--txt-soft);
  }
}

/* ============================ High Contrast ============================ */
@media (prefers-contrast: more) {
  *:focus-visible {
    outline-width: 4px;
  }
  a {
    text-decoration: underline;
  }
}

/* ============================ Font Loading States（避免 FOIT）============================ */
.fonts-loading h1,
.fonts-loading h2,
.fonts-loading h3,
.fonts-loading .serif {
  /* 字体加载前不阻塞文字显示（避免 FOIT：空白文字）*/
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
.fonts-ready h1,
.fonts-ready h2,
.fonts-ready h3,
.fonts-ready .serif {
  /* 字体加载完成后切换回 Noto Serif SC */
  font-family: 'Noto Serif SC', 'Songti SC', serif !important;
}

/* ============================ Touch Target (WCAG 2.5.5 AAA) ============================ */
@media (pointer: coarse) {
  button,
  a[role="button"],
  .form-grid button,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}