/* ==========================================================================
   温度健康 · 全站主题 v2 ——「暖橘红国风」
   --------------------------------------------------------------------------
   设计基准：中老年用户、手机优先
   色彩来源：品牌 logo（#E8761F 橘橙 → #C24A0E 橘红）+ 米白纸感底 #FBF6EE
   对比度：正文 13.8:1、次级 8.7:1、说明 5.4:1、主色按钮 4.9:1（均达 WCAG AA）
   本文件必须放在各页 <style> 之后，作为最后一层覆盖。
   ========================================================================== */

/* ---------- 1. 设计令牌（同时兼容老变量名，老页无需改结构） ---------- */
:root{
  /* 主色：橘红 */
  --brand:#C24A0E;
  --brand-deep:#A03A08;
  --brand-light:#E8761F;          /* 仅用于大号数字/装饰，正文不用 */
  --brand-bg:#FDF0E4;
  --brand-soft:#FDF0E4;
  --brand-line:#F2DAC4;

  /* 强调：沿用老变量名，统一为品牌橘 */
  --orange:#D2620F;
  --orange-light:#FDF0E4;

  /* 文字 */
  --ink:#2B2119;
  --ink2:#54432F;
  --ink3:#75624F;
  --text:#2B2119;
  --text-secondary:#54432F;
  --text-tertiary:#75624F;

  /* 底与卡 */
  --paper:#FBF6EE;
  --bg:#FBF6EE;
  --paper-2:#F6EDE0;
  --card:#FFFFFF;
  --card-bg:#FFFFFF;
  --line:#EBDFCE;
  --border:#EBDFCE;
  --line-2:#F4ECE1;

  /* 辅助：墨绿（用于「边界 / 安心」语义，替代原蓝色提示卡） */
  --green:#3F5B43;
  --green-bg:#EEF3EE;
  --green-line:#D6E1D6;
  --blue:#3F5B43;
  --blue-light:#EEF3EE;
  --blue-bg:#D6E1D6;

  /* 状态 */
  --danger:#B3261E;
  --ok:#2E7D48;
  --warn:#B4740E;

  /* 形状与阴影 */
  --radius:14px;
  --radius-lg:18px;
  --shadow:0 2px 12px rgba(120,72,32,.07);
  --shadow-lg:0 10px 28px rgba(120,72,32,.12);

  /* 中老年可读性基准 */
  --fs-body:16.5px;      /* 正文 */
  --lh-body:1.9;         /* 中文行高 */
  --fs-min:14px;         /* 页面上最小的文字 */
  --tap:48px;            /* 最小可点区域 */
}

/* ---------- 2. 全局排版：字号、行高、字距 ---------- */
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper) !important;
  color:var(--ink) !important;
  font-family:"Source Han Sans CN","思源柔黑体","PingFang SC","Microsoft YaHei",
              -apple-system,BlinkMacSystemFont,sans-serif !important;
  font-size:var(--fs-body);
  line-height:var(--lh-body) !important;
  -webkit-font-smoothing:antialiased;
}
/* 中文正文不要用过紧的行高 */
p,li,td,dd,blockquote{ line-height:var(--lh-body); }
/* 中文不要斜体（浏览器合成的伪斜体很难看） */
em,i{ font-style:normal; }

/* ---------- 3. 顶部导航（组件级完整定义：新页直接用，老页被此覆盖） ---------- */
.topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap;
  gap:8px;
  background:linear-gradient(135deg,var(--brand-deep) 0%,var(--brand) 100%) !important;
  color:#fff;
  box-shadow:0 2px 10px rgba(120,58,14,.22) !important;
  padding:10px 14px !important;
  position:sticky; top:0; z-index:100;
}
.topbar-brand{
  display:flex; align-items:center; gap:8px;
  font-size:16px; font-weight:700; line-height:1.3; color:#fff;
  min-width:max-content; flex-shrink:0;
}
.topbar-brand span{ white-space:nowrap; }
/* 关键：logo 必须锁死尺寸，否则会按原图 819px 渲染并撑爆整页 */
.topbar-logo{
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.nav-links{
  display:flex; align-items:center; gap:4px;
  min-width:max-content;
}
.nav-links a{
  color:rgba(255,255,255,.86) !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  font-size:14px !important;
  font-weight:500;
  min-height:var(--tap);
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px !important;
  border-radius:22px;
  background:transparent;
  transition:background .18s,color .18s;
}
.nav-links a:hover, .nav-links a:focus-visible{ color:#fff !important; background:rgba(255,255,255,.16); }
.nav-links a.active, .nav-links a[aria-current]{
  color:#fff !important; font-weight:700;
  background:rgba(255,255,255,.20);
}
@media (max-width:560px){
  .topbar{
    flex-wrap:wrap !important;
    justify-content:center !important;
    padding:8px 10px 6px !important;
  }
  .topbar-brand{ width:100%; justify-content:center; font-size:16px !important; }
  .nav-links{
    width:100%; min-width:0;
    justify-content:space-between !important;
    gap:2px !important;
    border-top:1px solid rgba(255,255,255,.18);
    margin-top:6px; padding-top:4px;
  }
  .nav-links a{
    flex:1 1 0; justify-content:center;
    font-size:14px !important; padding:0 2px !important;
  }
}

/* ---------- 4. 可点区域：中老年手指点得中 ---------- */
.btn, button, .btn-sm, .bottom-bar button, [role="button"]{
  min-height:var(--tap);
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1.4;
}
a.btn-sm, .btn-sm{ padding-left:16px !important; padding-right:16px !important; }

/* ---------- 5. 焦点可见：键盘与读屏可用 ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:3px solid var(--brand-light);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- 6. 尊重系统「减少动效」偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto !important; }
}

/* ---------- 7. 底部返回顶部（中老年长页面必备） ---------- */
.to-top{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:var(--tap); height:var(--tap); border-radius:50%;
  border:1px solid var(--brand-line);
  background:#fff; color:var(--brand);
  font-size:20px; line-height:1;
  box-shadow:0 6px 18px rgba(120,72,32,.22);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; z-index:200;
}
.to-top.show{ display:flex; }

/* ---------- 8. 图片与二维码：任何情况下都不得被裁切 ---------- */
img{ max-width:100%; height:auto; }
.qr-safe,
.qr-safe img{
  object-fit:contain !important;
  background:#fff;
}

/* ---------- 9. 无障碍辅助类 ---------- */
.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;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:#fff; color:var(--brand); padding:10px 16px;
  border-radius:0 0 10px 0; font-weight:700;
}
.skip-link:focus{ left:0; }

/* ---------- 10. 页脚：企业微信入口 + 备案信息（全站统一） ---------- */
.f-wx{
  display:block; width:100%; max-width:320px !important;
  margin:12px auto 4px !important;
  padding:14px 22px !important;
  background:#27ae60 !important; color:#fff !important;
  text-align:center !important; text-decoration:none !important;
  border:none; border-radius:10px;
  font-size:16.5px !important; font-weight:700 !important; line-height:1.35 !important;
  box-shadow:0 2px 8px rgba(39,174,96,.28);
  min-height:var(--tap);
}
.f-wx:hover, .f-wx:focus{ background:#219653 !important; }
.f-icp{
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--line);
  font-size:13.5px; line-height:2; color:var(--ink3);
}
.f-icp a{
  color:var(--ink3) !important;
  text-decoration:none !important;
}
.f-icp a:hover{ color:var(--brand) !important; text-decoration:underline !important; }
.f-icp img{ height:14px !important; width:auto !important; vertical-align:-2px; margin-right:4px; }
.f-contact{ font-size:16px; color:var(--ink2); line-height:1.8; }

/* 老页 .page-footer 底衬适配（若该页页脚为浅底，文字自动跟随） */
.page-footer .f-wx{ margin:12px auto 6px !important; }


/* ============================================================
   组件：产品卡「了解 →」链接 / 「一起晨读」入口 / 十不做插画
   全站共享，写在最后一层保证覆盖页内同名样式
   ============================================================ */
/* 面包屑：用于「书房 / 陪学」这类挂在品牌页下的子页 */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:14.5px;line-height:1.6;color:var(--ink3);
}
.crumb a{ color:var(--brand-deep);text-decoration:none;font-weight:600; }
.crumb a:hover{ text-decoration:underline; }
.crumb .sep{ color:var(--brand);font-weight:700; }

.cardlink{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;padding:0 22px;margin-top:14px;border-radius:24px;
  font-size:16px;font-weight:700;text-decoration:none;
  background:#fff;color:var(--brand-deep);border:1.5px solid var(--brand);
  transition:background .15s,color .15s;
}
.cardlink:hover,.cardlink:focus-visible{ background:var(--brand-bg); }
.cardlink:active{ transform:scale(.98); }

.join{
  margin-top:22px;padding:22px 20px;border-radius:16px;
  background:var(--brand-bg);border:1px solid var(--brand-line);
}
.join h3{ font-size:19px;font-weight:800;color:var(--brand-deep);margin-bottom:8px; }
.join p{ font-size:16.5px;line-height:1.9;color:var(--ink2);margin:0; }
.join .more{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;margin-top:16px;padding:0 26px;border-radius:26px;
  text-decoration:none;font-size:16.5px;font-weight:700;
  background:var(--brand);color:#fff;
}
.join .more:hover,.join .more:focus-visible{ background:var(--brand-deep); }
.join .more:active{ transform:scale(.98); }

.tenimg{
  display:block;width:100%;height:auto;margin:16px 0 6px;
  border-radius:12px;border:1px solid var(--brand-line);background:#fff;
}

@media(max-width:420px){
  .cardlink{ width:100%; }
  .join .more{ width:100%; }
}

/* 中宽图片容器：给源图分辨率有限的照片用，避免被放大到失真，也不裁切画面 */
.fig.mid{ max-width:620px; margin-left:auto; margin-right:auto; }
.fig.mid img{
  width:100%; height:auto; aspect-ratio:auto !important;
  object-fit:contain !important; background:#fff;
}