/* ============================================================
 * 明力奇中医门诊官网 —— 无障碍增强样式
 * ------------------------------------------------------------
 * 面向老年访客与读屏软件用户，对应 WCAG 2.1 AA：
 *   ① 键盘可达（跳转链接 + 明显焦点框）
 *   ② 看得清（字号三档、高对比、宽松行距、链接下划线）
 *   ③ 点得中（点击区不小于 44×44）
 *   ④ 不晃眼（尊重系统"减少动态效果"，也可手动关）
 * 所有能力由 assets/js/a11y.js 驱动，设置记在 localStorage，换页不丢。
 * ============================================================ */

/* ---------- ① 跳转到主内容（键盘用户按 Tab 第一个就能看到） ---------- */
.mlq-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: #2F6B4F;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.mlq-skip:focus {
  left: 0;
  outline: 3px solid #F4C430;
  outline-offset: 2px;
}

/* ---------- ② 焦点可见：键盘操作时必须有明显框 ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #B45309 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* 老浏览器没有 :focus-visible，退化为 :focus（鼠标点也有框，宁可啰嗦也别让人找不着） */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
    outline: 3px solid #B45309 !important;
    outline-offset: 2px !important;
  }
}
/* 深色底（页头顶栏、Banner）上的焦点框换成亮色，否则看不见 */
.topbar a:focus-visible,
.float-bar a:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible {
  outline-color: #FFD54A !important;
}

/* ---------- ③ 点击区不小于 44×44（手指抖、鼠标不稳也能点中） ---------- */
.nav a,
.drawer-panel a,
.footer a,
.quick a,
.float-bar a,
.tabs button,
.card,
.btn {
  min-height: 44px;
}
/* 注意：抽屉菜单的链接必须是 display:flex（块级）——
 * 用 inline-flex 会覆盖 site.css 里的 display:block，整列菜单会横着挤成几行 */
.nav a,
.float-bar a,
.tabs button {
  display: inline-flex;
  align-items: center;
}
.drawer-panel a {
  display: flex;
  align-items: center;
}
.footer li a {
  display: inline-block;
  padding: 6px 0;
}
.search input,
input[type="text"],
input[type="tel"],
input[type="date"],
select,
textarea {
  min-height: 44px;
}

/* ---------- ④ 高对比度模式（白底黑字，深色底一律纯黑） ---------- */
html.mlq-hc {
  --brown: #2A1E12;
  --brown-d: #120C07;
  --green: #0E4B37;
  --green-l: #12795B;
  --cream: #FFFFFF;
  --gold: #7A5B12;
  --text: #0F0F0F;
  --muted: #3D3D3D;
  --line: #555555;
  --white: #ffffff;
  --shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
html.mlq-hc body {
  background: #fff;
  color: #0F0F0F;
}
html.mlq-hc .topbar {
  background: #000;
  color: #fff;
}
html.mlq-hc .topbar a,
html.mlq-hc .topbar b {
  color: #FFE9A8;
}
html.mlq-hc .header {
  background: #fff;
  border-bottom: 2px solid #000;
}
html.mlq-hc .nav a {
  color: #0F0F0F;
  font-weight: 600;
}
html.mlq-hc .nav a.active {
  background: #000;
  color: #fff;
}
html.mlq-hc a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
html.mlq-hc .btn {
  border: 2px solid #000;
  font-weight: 700;
}
html.mlq-hc .btn-primary {
  background: #0E4B37;
  color: #fff;
}
html.mlq-hc .btn-outline {
  background: #fff;
  color: #0E4B37;
  border-color: #0E4B37;
}
/* Banner 上的白字压在图片上最容易看不清：加一层深色底 */
html.mlq-hc .hero-body {
  background: rgba(0, 0, 0, .78);
  padding: 18px 22px;
  border-radius: 12px;
}
html.mlq-hc .hero-media img {
  filter: brightness(.85);
}
html.mlq-hc .quick a,
html.mlq-hc .card,
html.mlq-hc .expert-card {
  border: 2px solid #333;
  background: #fff;
}
html.mlq-hc .meta span,
html.mlq-hc .job,
html.mlq-hc .good,
html.mlq-hc small {
  color: #333 !important;
}
html.mlq-hc .footer {
  background: #000;
  color: #fff;
}
html.mlq-hc .footer a,
html.mlq-hc .footer h4 {
  color: #FFE9A8;
}
html.mlq-hc .section.alt {
  background: #F2F2F2;
}

/* ---------- ⑤ 字号三档（用 rem 覆盖，避免嵌套放大失控） ---------- */
/* 标准：正文 15px；大：18px；特大：21px */
html.mlq-f1 body,
html.mlq-f1 p, html.mlq-f1 li, html.mlq-f1 a, html.mlq-f1 span,
html.mlq-f1 div, html.mlq-f1 td, html.mlq-f1 th, html.mlq-f1 label,
html.mlq-f1 small, html.mlq-f1 button, html.mlq-f1 input,
html.mlq-f1 select, html.mlq-f1 textarea, html.mlq-f1 figcaption {
  font-size: 1.125rem !important;   /* 18px */
}
html.mlq-f1 h1 { font-size: 2.6rem !important; }
html.mlq-f1 h2 { font-size: 1.9rem !important; }
html.mlq-f1 h3 { font-size: 1.4rem !important; }
html.mlq-f1 h4 { font-size: 1.25rem !important; }

html.mlq-f2 body,
html.mlq-f2 p, html.mlq-f2 li, html.mlq-f2 a, html.mlq-f2 span,
html.mlq-f2 div, html.mlq-f2 td, html.mlq-f2 th, html.mlq-f2 label,
html.mlq-f2 small, html.mlq-f2 button, html.mlq-f2 input,
html.mlq-f2 select, html.mlq-f2 textarea, html.mlq-f2 figcaption {
  font-size: 1.3125rem !important;  /* 21px */
}
html.mlq-f2 h1 { font-size: 3rem !important; }
html.mlq-f2 h2 { font-size: 2.2rem !important; }
html.mlq-f2 h3 { font-size: 1.6rem !important; }
html.mlq-f2 h4 { font-size: 1.4rem !important; }
html.mlq-f2 .container { max-width: 1000px; }   /* 字大了就窄一点，一行别太长 */
html.mlq-f2 body { line-height: 2; }

/* 大字号下 Banner 文字要有底，白色压图看不清 */
html.mlq-f1 .hero-body,
html.mlq-f2 .hero-body {
  background: rgba(0, 0, 0, .6);
  padding: 16px 20px;
  border-radius: 12px;
}
/* 工具条自身不跟着放大，否则按钮会撑爆屏幕 */
.mlq-a11y-bar, .mlq-a11y-bar * { font-size: 14px !important; }

/* ---------- ⑥ 宽松行距 / 字距 ---------- */
html.mlq-lh body { line-height: 2.1 !important; }
html.mlq-lh p, html.mlq-lh li { line-height: 2.2 !important; letter-spacing: .5px; }

/* ---------- ⑦ 链接全部加下划线（色弱用户不靠颜色也能认出链接） ---------- */
html.mlq-ul main a,
html.mlq-ul .footer a,
html.mlq-ul .nav a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- ⑧ 减少动态效果（系统已开启时自动生效，这里再给个手动开关） ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
html.mlq-motion *, html.mlq-motion *::before, html.mlq-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ---------- ⑨ 无障碍工具条 ---------- */
.mlq-a11y-fab {
  position: fixed;
  left: 16px;
  bottom: 84px;
  z-index: 9998;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2F6B4F;
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.mlq-a11y-fab:hover { background: #3E8A65; }
.mlq-a11y-bar {
  position: fixed;
  left: 16px;
  bottom: 146px;
  z-index: 9999;
  width: 268px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 2px solid #2F6B4F;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  padding: 14px;
  display: none;
}
.mlq-a11y-bar.on { display: block; }
.mlq-a11y-bar h2 {
  font-size: 16px !important;
  margin: 0 0 10px;
  color: #2F6B4F;
  border-bottom: 1px solid #E8DFD2;
  padding-bottom: 8px;
}
.mlq-a11y-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mlq-a11y-row button {
  flex: 1;
  min-width: 62px;
  min-height: 44px;
  border: 1px solid #C9BCA9;
  background: #FAF7F0;
  color: #3A3128;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.mlq-a11y-row button:hover { background: #F1E9DB; }
.mlq-a11y-row button[aria-pressed="true"] {
  background: #2F6B4F;
  color: #fff;
  border-color: #2F6B4F;
}
.mlq-a11y-row button.big { font-size: 20px; }
.mlq-a11y-row button.bigger { font-size: 24px; }
.mlq-a11y-tip {
  font-size: 12px;
  color: #7A6E62;
  line-height: 1.6;
  margin-top: 8px;
  border-top: 1px dashed #E8DFD2;
  padding-top: 8px;
}
.mlq-a11y-link {
  display: block;
  text-align: center;
  margin-top: 8px;
  color: #2F6B4F;
  text-decoration: underline;
  font-size: 13px;
  min-height: 32px;
  line-height: 32px;
}
/* 顶栏里的无障碍入口（比悬浮球更好找，老年人一眼能看到） */
.mlq-a11y-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 18px;
  padding: 0 12px;
  color: #fff;
  cursor: pointer;
  /* 顶栏容器加高到 52px：按钮 40px 居中，上下各留 6px 空隙——
   * 原来 44px 容器只剩 2px，视觉上按钮和顶栏边缘贴死（老板 2026-10-13 再次反馈），
   * 按钮本体仍保持 40px 无障碍点击区不变 */
  min-height: 40px;
  font-size: 13px;
  line-height: 1.2;
  /* 顶栏是单行 flex：按钮绝不许自己换行/被压缩，否则把热线挤到第二行 */
  white-space: nowrap;
  flex: none;
}
.mlq-a11y-top:hover { background: rgba(255, 255, 255, .3); }
/* 手机端顶栏空间只有电脑的三分之一：按钮略收，仍保持 38px 点击区 */
@media (max-width: 767px) {
  .mlq-a11y-top {
    min-height: 38px;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 17px;
  }
}

/* 朗读时高亮当前段落 */
.mlq-reading {
  background: #FFF3C4 !important;
  outline: 2px solid #C8A76A;
  border-radius: 6px;
}

/* ---------- ⑩ 读屏专用文本（视觉上隐藏，读屏能读） ---------- */
.mlq-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- ⑪ 表单错误提示更醒目 ---------- */
.mlq-err {
  font-size: 14px !important;
  font-weight: 600;
  color: #A11 !important;
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border: 2px solid #A11 !important;
  background: #FFF6F6;
}

/* ---------- ⑫ 验证码：老年人最卡的一道关，做大做清楚 ---------- */
.mlq-cap-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mlq-cap-img {
  width: 132px;
  height: 56px;
  border: 2px solid #C9BCA9;
  border-radius: 10px;
  background: #F6F1E9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #3A3128;
  cursor: pointer;
  user-select: none;
}
.mlq-cap-img:focus-visible { outline: 3px solid #B45309 !important; }
.mlq-cap-img img { width: 100%; height: 100%; object-fit: contain; }
.mlq-cap-btns { display: flex; flex-direction: column; gap: 6px; }
.mlq-cap-btns button {
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid #C9BCA9;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  white-space: nowrap;
}
.mlq-cap-btns button:hover { background: #F1E9DB; }
/* 轮播暂停按钮：跟着圆点排在一起，鼠标键盘都能点 */
.dots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-pause {
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 16px;
  padding: 6px 14px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 8px;
}
.hero-pause:hover { background: rgba(0, 0, 0, .78); }
.hero-pause[aria-pressed="true"] { background: #B45309; border-color: #fff; }

.mlq-cap-input {
  width: 140px;
  min-height: 56px !important;
  font-size: 22px !important;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  border: 2px solid #C9BCA9;
  border-radius: 10px;
  padding: 6px 10px;
}
/* 文章里的宽表格：窄屏不再强制 640px 宽，改成可横向滑动的块
 * （原来的 min-width:640px 会让整页出现横向滚动条，放大看时很难受） */
@media (max-width: 720px) {
  .article-body table, .table-wrap table { min-width: 0 !important; font-size: 14px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 页脚无障碍入口：单独一行，字号略大，别跟版权信息挤在一起 */
.footer-a11y { margin-top: 6px; }
.footer-a11y a { color: #FFE9A8; text-decoration: underline; }
html.mlq-f1 .footer-a11y a, html.mlq-f2 .footer-a11y a { font-size: 1.05rem !important; }

/* 搜索框旁边的按钮（原来只能回车，鼠标用户点不到）
 * 注意：这里绝不能写 .search{display:flex}——a11y.css 在 site.css 之后加载，
 * 会把 site.css「窄屏隐藏搜索框」的规则覆盖掉，手机上搜索框就会把汉堡按钮挤出屏幕。
 * 所以 flex 只在桌面（site.css 显示搜索框的宽度区间）生效： */
@media (min-width: 1340px) {
  .search { display: flex; align-items: center; gap: 6px; }
}
.search-btn {
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid #C9BCA9;
  background: #fff;
  color: #3A3128;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
.search-btn:hover { background: #F1E9DB; }
@media (max-width: 900px) { .search-btn { display: none; } }  /* 窄屏位置不够，回车照样能搜 */

/* 后台：左侧是菜单，悬浮球挪到右下角，别挡菜单 */
body.is-admin .mlq-a11y-fab { left: auto; right: 16px; bottom: 16px; }
body.is-admin .mlq-a11y-bar { left: auto; right: 16px; bottom: 76px; }

@media (max-width: 480px) {
  .mlq-a11y-fab { bottom: 76px; left: 10px; }
  .mlq-a11y-bar { left: 10px; right: 10px; width: auto; bottom: 134px; }
}