/* ============================================================================
 * typography.css — 字体与排版精修层（2026-10-23）
 * ----------------------------------------------------------------------------
 * 加载位置：各页面「页面级 CSS 之后、mobile.css 之前」。
 * 目的：只校字形（字重 / 字号 / 字距 / 行高 / 对比度），不改布局与配色体系。
 *
 * 三条准则：
 *   1. 中文小字要比英文略粗一点（500→600）、略松一点（字距 +0.03em）才不显"糊"；
 *   2. 顶部分类胶囊统一「玻璃底白字 → 选中反白（白底绿字）」，比橙底白字对比度高得多；
 *   3. 正文行高 1.85~1.9，段末不出现孤字（text-wrap: pretty）。
 * ==========================================================================*/

/* ── 0. 全局中文排版基线 ─────────────────────────────────────────── */
body {
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { letter-spacing: .01em; }
p { text-wrap: pretty; }

/* ── 1. 顶部胶囊标签（服务分类 / 文档分区 / 社区分区）统一 ────────── */

/* 1a. 垂直居中：绿条本身做 flex 居中，内部容器只负责横向。
   之前靠 .page-nav-inner 的 height:100% 撑高（它的父容器是自适应高度），
   结果按钮实际偏上 8px（上 2 / 下 10）—— 由外层居中后与内容高度无关。 */
.page-nav {
    display: flex;
    align-items: center;
}
.page-nav > .container {
    flex: 1 1 auto;
    min-width: 0;
}
.page-nav-inner {
    align-items: center;
    height: auto !important;
    min-height: 0;
}
/* 三个页面的标签容器：间距/边距统一，避免各页自带 margin 造成上下不齐 */
.category-tabs,
.docs-tabs,
.community-tabs,
.tabs-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* 1b. 按钮统一尺寸：高 38 / 左右 20 / 字号 14 —— 三页完全一致 */
.category-tab,
.doc-tab,
.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-height: 38px;
    padding: 0 20px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;             /* 中文 14px 用 600 比 500 清晰 */
    letter-spacing: .04em;        /* 字距略松，避免挤成一团 */
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .20);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, box-shadow .2s ease, color .2s ease, transform .12s ease;
}

/* 旧的"扫光"动画在小字号上闪一下反而显廉价，去掉 */
.category-tab::before,
.tab-btn::before { display: none; }

.category-tab:hover,
.doc-tab:hover,
.tab-btn:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}

.category-tab:active,
.doc-tab:active,
.tab-btn:active { transform: scale(.97); }

/* 选中态反白：白底 + 品牌绿字（对比度 ≈ 4.8:1，远高于橙底白字）；橙色留给主 CTA */
.category-tab.active,
.doc-tab.active,
.tab-btn.active {
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

/* ── 2. 第二栏页面标题 ───────────────────────────────────────────── */
.page-title {
    letter-spacing: .06em;
    font-weight: 700;
}

/* ── 3. 区块标题与导语 ───────────────────────────────────────────── */
.category-header h2,
.section-header h2 {
    letter-spacing: .02em;
    font-weight: 700;
}

.category-desc,
.section-header p {
    color: #5B6672;
    line-height: 1.9;
}

/* ── 4. 服务卡片文字 ─────────────────────────────────────────────── */
.card-main h3 {
    letter-spacing: .01em;
    font-weight: 700;
}

.card-highlight {
    color: #5B6672;
    letter-spacing: .01em;
}

.card-meta .price {
    font-variant-numeric: tabular-nums;   /* 价格数字等宽，多卡并排不抖 */
    letter-spacing: -.01em;               /* 数字+中文混排收紧一点更利落 */
}

.card-meta .tags {
    color: #7A8794;
    letter-spacing: .02em;
}

/* ── 5. 按钮文字 ─────────────────────────────────────────────────── */
.btn,
.btn-detail {
    letter-spacing: .03em;
    font-weight: 600;
}

/* ── 6. 文档页正文 ───────────────────────────────────────────────── */
.doc-panel h2,
.doc-block h3 { letter-spacing: .01em; }

.doc-block p,
.check-list li {
    color: #44505C;
    line-height: 1.85;
}

.step-info h4,
.tool-item strong { letter-spacing: .02em; }

/* ── 7. 社区页 ───────────────────────────────────────────────────── */
.q-text { letter-spacing: .01em; }
.answer-content p { color: #44505C; line-height: 1.9; }
.article-tag, .news-tag { letter-spacing: .04em; }
.tag-label { letter-spacing: .04em; }

/* ── 8. 页脚与品牌区 ─────────────────────────────────────────────── */
.footer-brand h3 { letter-spacing: .05em; }
.footer-column h4 { letter-spacing: .06em; color: #fff; }
.footer-column a, .footer-column p { letter-spacing: .01em; }


/* 首页服务卡价格（服务端渲染后由这里着色；与服务页 .card-meta .price 同一口径） */
.service-item .service-price { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; }

/* ── 顶部绿色分类条：比例收紧（2026-10-29）──
   原来 70px（16px 上下内边距 + 38px 胶囊 + 20px 标题），在大屏上显得"头重"；
   收成 52px：9px 内边距 + 34px 胶囊 + 18px 标题 —— 与手机端 52px 一致，跨页统一。 */
.page-nav-inner { padding: 9px 0 !important; }
.page-nav .page-title { font-size: 18px; line-height: 1.3; }
.category-tab, .doc-tab, .tab-btn { height: 34px; min-height: 34px; padding: 0 16px; font-size: 13.5px; }

/* 关于页 / 预约页的绿色介绍条同步收紧（原来是 16px 内边距 + 28px 字） */
.page-header .tagline { font-size: 20px; line-height: 30px; padding: 11px 0; }  /* 52px，与分类条一致 */
@media (max-width: 768px) {
  .page-header .tagline { font-size: 13.5px; padding: 0; }
}

/* ── 9. 活动价划线（2026-11-01 三线价格体系；2026-11-11 v2 促销态极致化）──────
   促销统一暖色语言：角标橙→红渐变白字、活动主价深橙红加粗、原价灰划线、
   「省 ¥XX」红底小标签（仅整价档）。无活动时不输出任何促销节点，页面与旧版一致。 */
/* 活动徽章（列表行/详情页内联位）：默认档活动名（新年活动/国庆活动…） */
.promo-badge {
    display: inline-block;
    background: linear-gradient(135deg, #F5A623, #E15B64);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: 2px;
    white-space: nowrap;
    letter-spacing: .02em;
}

/* 卡片左上角标（service-card 专属，绝对定位角标式） */
.service-card { position: relative; }
.service-card.on-promo { border-color: #F5A623; }
.promo-corner {
    position: absolute;
    top: 12px;
    left: -6px;
    z-index: 2;
    background: linear-gradient(135deg, #F5A623, #E15B64);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 12px 6px 14px;
    border-radius: 4px 999px 999px 4px;
    box-shadow: 0 3px 10px rgba(225, 91, 100, .35);
    letter-spacing: .03em;
    white-space: nowrap;
}

/* 活动主价：促销态的价格锚点，与划线原价拉开字号/颜色/字重三重对比 */
.price-now, .svc-price .price-now, .card-meta .price .price-now {
    color: #D9573B;
    font-weight: 800;
    font-size: 1.18em;
}

s.price-was {
    opacity: .55;
    font-size: .82em;
    font-weight: 400;
    margin-right: 2px;
}

/* 「省 ¥XX」：整价档专属，把折扣率翻译成到手的金额感知 */
.price-save {
    display: inline-block;
    background: var(--red-light, #FCEBED);
    color: #D9573B;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: 2px;
    white-space: nowrap;
}

/* 详情页价目表：活动行整行淡红底 + 「活动价」小标，一眼锁定优惠档 */
tr.tier-promo td { background: var(--red-light, #FCEBED); }
tr.tier-promo td:first-child { border-radius: 6px 0 0 6px; }
tr.tier-promo td:last-child { border-radius: 0 6px 6px 0; }
.price-now-tag {
    display: inline-block;
    background: linear-gradient(135deg, #F5A623, #E15B64);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: 2px;
    white-space: nowrap;
}

/* ── 导航切换不再"闪"（2026-10-29 根因修复）──────────────────────────
   官网是多页文档（SSR），每次点导航都是整页替换；而各板块原来带
   fadeInUp/fadeIn 入场动画（部分还带 0.1-0.3s 延迟 + fill-mode:both），
   导致每次切页内容都"先隐身再淡入"，观感就是闪一下。
   这里只关掉「页面加载时被动播放」的入场动画；
   交互触发的（tab 切换、详情展开）保留。 */
.trust-item,
.services-grid .service-card,
.advantage-item,
.community-card,
.category-section,
.cta-content,
.appointment-form-wrapper,
.form-group,
.trust-card,
.process-steps,
.section-header {
    animation: none !important;
}

/* 跨文档视图过渡：浏览器在新旧页面之间做短促交叉淡入，替代白屏闪烁。
   支持的浏览器（Chrome 126+/Edge/Safari 18）自动生效，其余浏览器忽略。 */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .16s; }

/* ══════════════════════════════════════════════════════════════════
   2026-10-31 细节精修层（只动字形与微交互，不动布局与配色体系）
   ══════════════════════════════════════════════════════════════════ */

/* ── A. 中文标题禁用负字距 ─────────────────────────────────────────
   layout.css 给 .hero h1 / .cta-section h2 设了 -0.02em（西文习惯）。
   中文全字等宽，负距会让笔画贴邻字、密不透气 —— 统一回正字距。 */
.hero h1,
.cta-section h2 { letter-spacing: .02em; }
.hero h1 { font-weight: 700; }

/* ── B. 数字一律等宽 + 微收字距 ────────────────────────────────────
   价格、统计大数、电话号码：多卡并排/多处出现时数字宽度一致不抖，
   负 0.01em 让多位数字更利落。 */
.trust-number,
.hero-stat .stat-num,
.team-stat .stat-number,
.value-num,
.header-contact .phone,
.footer-column p,
.hero-badge,
.card-tag,
.article-tag,
.news-tag,
.search-tag {
    font-variant-numeric: tabular-nums;
}

.header-contact .phone,
.trust-number,
.hero-stat .stat-num,
.team-stat .stat-number {
    letter-spacing: -.01em;
}

/* ── C. Windows 中文渲染基线 ───────────────────────────────────────
   原栈缺显式雅黑，Windows 下中文落到了后备 generic 族；补上后
   Win/WinServer 渲染与 macOS PingFang 的灰度接近。 */
body {
    font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans",
                 "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
}

/* ── D. 键盘焦点环（quality floor）────────────────────────────────
   鼠标点击不出现（:focus-visible），Tab 导航时才显示；绿色条内的
   白字胶囊用白环。不支持 :focus-visible 的老浏览器两条都不生效，
   保留 UA 默认焦点样式，不会变裸。 */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
/* 文本输入有自带的 border+ring 焦点态，不叠双圈 */
:is(input, textarea, select):focus-visible { outline: none; }
.page-nav :focus-visible,
.page-header :focus-visible,
.why-us :focus-visible,
.team-section :focus-visible,
.hero :focus-visible,
.cta-section :focus-visible,
.site-footer :focus-visible {
    outline-color: #fff;
}

/* ── E. 选中文字的品牌色 ─────────────────────────────────────────── */
::selection {
    background: rgba(0, 136, 0, .16);
    color: inherit;
}

/* ── F. 动效降级（quality floor）────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}