/* ============================================================
   服务端渲染补丁样式
   在 styles.css 之后加载，只做两件事：
     1. 让原本依赖 JavaScript 才可见的内容，在无 JS 时也完整可见
     2. 补上 SSR 版本新增的组件（分页链接、表单提示、错误页等）
   原有的 styles.css 一行未改，方便随时对照。
   ============================================================ */

/* ============================================================
   字体：自托管 Manrope + 系统中文字体
   ------------------------------------------------------------
   原来 <head> 外链 Google Fonts，但 fonts.googleapis.com /
   fonts.gstatic.com 在国内不可达，每次首屏都要白等一次连接超时，
   而且 <link rel=stylesheet> 是阻塞渲染的。

   现在：
     - 拉丁字形用可变字体自托管，latin + latin-ext 两个文件共 40KB，
       font-weight: 400 800 一个文件覆盖原来 5 个字重
     - 中文不再下载 Noto Sans SC（完整 CJK 字体几 MB，得不偿失），
       直接用系统字体：苹方(苹果) / 微软雅黑(Windows) / 思源黑体(Linux)，
       观感与 Noto Sans SC 同属无衬线黑体，差别很小

   字体文件来源：Google Fonts 的 Manrope v20，SIL Open Font License 1.1，
   可自由再分发。更新字体时替换 assets/fonts/ 下的 woff2 即可。
   ============================================================ */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;   /* 可变字体：一个文件覆盖全部字重 */
  font-display: swap;     /* 字体没到之前先用系统字体渲染，不留白 */
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* styles.css 里是 "Manrope","Noto Sans SC",sans-serif。
   Noto Sans SC 不再下载，这里把中文回落写明确 ——
   否则 Windows 上 sans-serif 有可能落到宋体，正文会变成衬线体。 */
body {
  font-family: "Manrope", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
               "微软雅黑", "Hiragino Sans GB", "Source Han Sans SC",
               "Noto Sans CJK SC", "Heiti SC", sans-serif;
}

/* ---------- 无障碍 ---------- */

/* 视觉隐藏但保留给读屏软件和搜索引擎 */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

/* 跳过导航：平时藏起来，键盘 Tab 到时出现 */
.skip-link {
  position: absolute;
  z-index: 999;
  top: -60px;
  left: 12px;
  padding: 10px 18px;
  border-radius: 0 0 12px 12px;
  color: #fff;
  background: #4b32c3;
  font-size: 13px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* 键盘焦点必须看得见 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #7d63e8;
  outline-offset: 2px;
}

/* ---------- 入场动画 ---------- */

/*
  styles.css 里 .reveal 默认 opacity:0，靠 JS 加 .visible 才显示。
  服务端渲染必须保证没有 JS 时内容照样可见，所以这里翻转默认值：
  只有在 <html class="js"> 时才启用动画。
*/
.reveal { opacity: 1; transform: none; }

html.js .reveal:not(.visible) { opacity: 0; transform: translateY(24px); }
html.js .reveal.visible { animation: fadeUp .65s ease forwards; }

/* 用户在系统里关了动效就别动 */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal:not(.visible) { opacity: 1; transform: none; }
  html.js .reveal.visible { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- 选项卡 ---------- */

/*
  无 JS：三块内容全部平铺展示（爬虫也读到完整信息），隐藏选项卡按钮。
  有 JS：恢复成选项卡交互。
*/
html:not(.js) .tab-list { display: none; }
html:not(.js) .tab-panel { display: block; margin-bottom: 26px; }

/* ---------- 常见问题（原生 details/summary） ---------- */

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  cursor: pointer;
  list-style: none;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.faq-item > summary.faq-question::-webkit-details-marker { display: none; }
.faq-item > summary.faq-question::marker { content: ""; }
.faq-item > summary.faq-question svg { flex: none; width: 17px; transition: transform .25s ease; }
.faq-item[open] > summary.faq-question svg { transform: rotate(45deg); }

/* details 自己负责收起/展开，取消原来靠 max-height 做的裁剪 */
.faq-item .faq-answer {
  max-height: none;
  padding-bottom: 17px;
  color: #7f879c;
  font-size: 12px;
  line-height: 1.8;
}

/* ---------- 标题层级修正 ---------- */

/*
  原 SPA 在这些位置用了 h4，但按 h1 > h2 > h3 的正确层级应该是 h3。
  这里把 h3 补上与 h4 相同的外观，标记结构和视觉两不误。
*/
.process-item h3 { margin: 0 0 5px; font-size: 12px; }
.timeline-item h3 { margin: 0 0 5px; font-size: 13px; }
.footer-col h3 { margin-bottom: 17px; color: #fff; font-size: 13px; font-weight: 700; }

/* ---------- 头部 ---------- */

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: #4a5164;
  font-size: 25px;
  font-weight: 700;
  white-space: nowrap;
}
.header-phone svg { width: 16px; color: #7d63e8; }
.header-phone:hover { color: #4b32c3; }

/* 汉堡菜单纯靠 JS 展开，没 JS 就别显示这个按钮 */
html:not(.js) .menu-btn { display: none; }

/* JS 打开移动端导航 */
@media (max-width: 900px) {
  .main-nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line);
    background: #fff;
    gap: 4px;
    box-shadow: 0 18px 30px rgba(30, 22, 60, .1);
  }
  .header-phone { display: none; }
}

/* ---------- 列表工具条 ---------- */

/* .listing-toolbar 现在是 <form>，补一个提交按钮的样式 */
.toolbar-submit {
  height: 42px;
  padding: 0 20px;
  white-space: nowrap;
}
html.js .toolbar-submit { display: none; } /* 有 JS 时改为选择/输入即自动提交 */

/* 筛选 chip 现在是 <a>，保持与 <button> 一致的排版 */
.filter-chips a.chip { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- 分页 ---------- */

.pagination a.page-btn,
.pagination span.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.page-btn.is-disabled { opacity: .35; pointer-events: none; }
.page-ellipsis { padding: 0 4px; color: #9aa1b4; font-size: 12px; }

/* ---------- 表单 ---------- */

.form-alert {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.7;
}
.form-alert ul { margin: 6px 0 0; padding-left: 18px; }
.form-alert svg { width: 16px; vertical-align: -3px; }

.form-alert-success { border: 1px solid #b7e7cd; color: #1c7a4a; background: #eefaf3; }
.form-alert-error { border: 1px solid #f3c4c4; color: #b3322f; background: #fdf0ef; }

.field .required { color: #d9534f; }
.field-error { display: block; margin-top: 5px; color: #b3322f; font-size: 11px; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #e5a3a1; background: #fffafa; }

.form-privacy {
  margin: 14px 0 0;
  color: #99a0b2;
  font-size: 11px;
}
.form-privacy svg { width: 14px; vertical-align: -2px; }

/* ---------- 预约弹窗 ---------- */

/*
 * styles.css 给 .modal-backdrop 写了 display: grid，选择器权重高于浏览器默认的
 * [hidden] { display: none }，所以必须在这里显式补一条 ——
 * 少了它弹窗会一直盖在页面上，整站点不动。
 */
.modal-backdrop[hidden] { display: none; }

/* 弹窗完全靠脚本打开；没有 JS 时预约按钮退化成指向 /contact 的普通链接 */
html:not(.js) .booking-modal { display: none; }

/* 弹窗比联系页窄，字段一列排布（.field 的间距沿用 styles.css） */
.booking-modal .form-alert { margin-bottom: 16px; }
.booking-modal .field:last-of-type { margin-bottom: 6px; }
.booking-modal textarea { min-height: 78px; }

/* 提交中：按钮置灰并禁止再点 */
.booking-modal button[disabled] { opacity: .6; cursor: not-allowed; }

/*
 * 去掉弹窗右侧的滚动条。
 *
 * styles.css 的 .modal 是 max-height: calc(100vh - 40px) + overflow: auto，
 * 窗口矮一点就会冒出一条滚动条压在圆角里，很难看。
 * 这里只隐藏滚动条的外观，不改 overflow —— 窗口特别矮时仍然能滚，
 * 不会把「提交预约」按钮永久挡在视口外面。
 * 同时把内间距收紧一点，常见窗口高度下根本不会溢出。
 */
.booking-modal .modal {
  padding: 26px 26px 22px;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* 旧版 Edge / IE */
}
.booking-modal .modal::-webkit-scrollbar { width: 0; height: 0; }
.booking-modal h2 { font-size: 22px; }
.booking-modal .modal-subtitle { margin-bottom: 18px; }
.booking-modal .field { margin-bottom: 12px; }
.booking-modal .form-privacy { margin-top: 10px; }

/* ---------- 电话 / 微信 弹出卡片 ---------- */

/* 卡片纯靠脚本打开；没有 JS 时按钮就是 tel: 和跳联系页的普通链接 */
html:not(.js) .pop-card { display: none; }

/*
 * 卡片内容不长，不需要滚动条。
 * .wechat-modal 自带 overflow: hidden（styles.css），头部的白底和分割线
 * 靠它裁进 22px 圆角里，所以这里不要再改 overflow —— 一改上半部分就变直角。
 */
.pop-card-body { padding: 20px 22px; }

/* 电话卡片：把微信卡片的绿色换成蓝色，其余样式沿用 styles.css */
.phone-pop { width: min(340px, calc(100vw - 116px)); }
.phone-pop .wechat-modal-icon { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.phone-pop .wechat-copy-btn { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.pop-phone-number {
  margin-bottom: 12px;
  padding: 13px 4px;
  font-size: 19px;
  letter-spacing: .5px;
}

/* 提交成功卡片：绿色对勾 + 一句提示 + 知道了 */

/*
 * 电话/微信卡片是从悬浮条弹出来的，所以 styles.css 里 .wechat-modal
 * 写了 justify-self: end + margin-right: 86px 贴着按钮。
 * 成功提示和悬浮条无关，改回屏幕正中。
 */
.success-pop {
  width: min(360px, calc(100vw - 40px));
  margin-right: 0;
  justify-self: center;
}
.success-pop .wechat-modal-icon { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }
.success-pop .wechat-copy-btn { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }
.success-pop-text {
  margin: 0 0 10px;
  color: #43495c;
  font-size: 13px;
  line-height: 1.8;
}
.success-pop-tip {
  margin: 0 0 16px;
  color: #99a0b2;
  font-size: 11px;
}
.success-pop-tip a { color: #10b981; font-weight: 700; }

/* 只有一个微信号，撤掉 styles.css 里的两列布局 */
.wechat-accounts-single { grid-template-columns: 1fr; justify-items: center; }
.wechat-accounts-single .wechat-qrcode-box { max-width: 210px; }
.wechat-accounts-single .wechat-account { width: min(240px, 100%); }

@media (max-width: 720px) {
  /* 悬浮条在手机上移到底部，卡片就不必再给它让位 */
  .phone-pop,
  .pop-card .wechat-modal { margin-right: 0; justify-self: center; }
}

/* ---------- 资讯详情 ---------- */

/*
 * 正文净化（2026-10-10 加）
 *
 * fa_article.content 是编辑在后台粘进来的，有相当一部分是从别的网站**复制渲染后的 DOM**
 * 得到的 —— 浏览器开发者工具里拷出来的那种，每个标签都挂着一长串计算样式。
 * /article/836762 实测：34 个 <p> 每一个都带
 *     width: 790px; float: left; font-family: "Noto Sans SC"; text-indent: 2em;
 *
 * 两条是有害的，必须在这里中和掉（改样式而不是改正文：库是只读的，
 * 而且同样的脏数据在 8 万行的共用大表里不止这一篇）：
 *
 * 1. float: left —— .article-body 没有独立格式化上下文，浮动会**溢出到后面的兄弟元素**。
 *    受害的是 .article-share（flex）和 .recommend-news-grid（grid）：这两种盒子会主动
 *    避开浮动被压窄，实测从 819px 压到 28px / 89px，文字变成一字一行的竖条。
 *    而普通块级的 .detail-recommend-section 不受影响 —— 一窄一宽同时出现，
 *    正是「有浮动溢出」的指纹。
 *
 * 2. width: 790px —— 死宽度。412px 的手机上这一条就能把页面撑到能左右拖，
 *    和 9 月修的 .news-* 横向溢出是同一类问题。
 *
 * 用 !important 是必须的：这些是**内联样式**，普通声明压不过它，
 * 只有作者样式表里的 !important 才排在内联声明之前。
 *
 * display: flow-root 是第二道保险：就算将来正文里出现别的浮动（比如编辑给图片加了
 * float 做图文环绕），也只在正文内部生效，不会再漏出去挤兄弟元素。
 */
.article-body { display: flow-root; }
.article-body p { float: none !important; width: auto !important; max-width: 100% !important; }

.article-body h2 { margin: 30px 0 12px; font-size: 18px; }
.article-body p { margin: 0 0 14px; color: #555c70; font-size: 13px; line-height: 1.95; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; color: #555c70; font-size: 13px; line-height: 1.95; }
.article-body li { margin-bottom: 6px; }
.article-body img { max-width: 100%; height: auto; border-radius: 14px; }

/* 上一篇 / 下一篇 */
.article-nav {
  display: grid;
  margin: 26px 0 10px;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.article-nav-item {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  gap: 12px;
  font-size: 12px;
  transition: border-color .2s ease, transform .2s ease;
}
.article-nav-item:hover { border-color: #c9bcf5; transform: translateY(-2px); }
.article-nav-item.next { justify-content: flex-end; text-align: right; }
.article-nav-item.is-empty { border: 0; background: transparent; }
.article-nav-item svg { flex: none; width: 18px; color: #7d63e8; }
.article-nav-item small { display: block; margin-bottom: 3px; color: #9aa1b4; font-size: 10px; }
.article-nav-item strong {
  display: -webkit-box;
  overflow: hidden;
  color: #2c2450;
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 720px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav-item.is-empty { display: none; }
}

/* ---------- 医生评价 ---------- */

.review-row { padding: 15px 0; border-bottom: 1px solid var(--line); }
.review-row:last-child { border-bottom: 0; }
.review-row p { margin: 7px 0 0; }
.review-author { margin-left: 8px; color: #8d94a7; }

/* ---------- 首页提示 ---------- */

.home-notice {
  display: flex;
  align-items: center;
  margin: 8px 0 0;
  padding: 14px 18px;
  border: 1px dashed #d8d2f4;
  border-radius: 14px;
  color: #6f7488;
  background: #faf9ff;
  gap: 8px;
  font-size: 12px;
}
.home-notice svg { flex: none; width: 16px; color: #7d63e8; }

/* ---------- 错误页 ---------- */

.error-panel {
  padding: 48px 24px 56px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.error-code {
  background: var(--gradient);
  background-clip: text;
  font-size: 76px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.error-panel h2 { margin: 18px 0 8px; font-size: 20px; }
.error-panel p { margin: 0 auto 26px; max-width: 460px; color: #7f879c; font-size: 13px; line-height: 1.8; }
.error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.error-detail {
  overflow: auto;
  margin: 0 auto 24px;
  max-width: 640px;
  padding: 14px;
  border-radius: 12px;
  background: #f6f6fb;
  text-align: left;
  font-size: 11px;
}

/* ---------- 悬浮工具条 ---------- */

/* 这些原本是 <button>，SSR 版改成了 <a>，去掉下划线并对齐图标 */
a.float-btn { text-decoration: none; }

/* ---------- 打印 ---------- */

@media print {
  .site-header, .mobile-quick-nav, .float-tools,
  .site-footer, .pagination, .listing-toolbar, .filter-bar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}