/*
Theme Name: Herbs & Motion
Theme URI: https://www.herbsmotion.com.au
Author: Herbs & Motion migration
Description: 为 Herbs & Motion 定制的双语主题。设计骨架取自 Base44（间距尺度、圆角、字号阶梯、字距、缓动曲线、字体栈），配色替换为草本系。含 CPT 注册、Polylang 字段白名单同步、Cliniko 预约嵌入。
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: hm
Tags: bilingual, custom-post-types
*/

/* ══════════════════════════════════════════════════════════════
   设计 token —— 与 demo 保持一致的唯一真源
   改这里就等于改全站，不要在模板里写死色值。
   ══════════════════════════════════════════════════════════════ */
:root{
  /* —— 品牌色（草本替换）——
     Base44 原值：Lime Wash #ebffb1 / Lime Edge #ade900 / Ember #ff631f */
  --brand-wash:#e9f0e9;
  --brand:#2f6b4f;        /* 白字对比 6.29:1 — WCAG AA */
  --brand-deep:#1f4a37;
  --brand-tint:#f4f8f4;
  --accent:#a35735;       /* 白字对比 5.29:1 — WCAG AA */
  --accent-soft:#f5e7de;

  /* —— 中性色（Base44 原值）—— */
  --ink:#0f0f0f;
  --graphite:#232529;
  --muted:#6d6f73;
  /* Base44 原值 #a0a0a0 白底仅 2.61:1，小字标签不达标，压到 4.80:1 */
  --muted-ink:#70727a;
  --hairline:#d1d1d1;
  --border:#e6e6e6;
  --canvas:#faf9f7;
  --card:#ffffff;
  --cream:#fefcfb;

  /* —— 渐变（保留 Base44 的停靠点几何，换色）—— */
  --grad-sunset:linear-gradient(rgba(250,249,247,0) 2.46%, rgb(245,235,224) 23.04%, rgb(213,166,122) 54.09%, rgba(213,166,122,0) 93.84%);
  --grad-sky:radial-gradient(97.22% 78.13% at 50% -21%, rgb(107,150,123) 22.39%, rgba(158,190,168,.56) 58.43%, rgba(250,249,247,0) 85.73%);

  /* —— 间距（Base44 4px 基准）—— */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:28px; --s8:32px; --s10:40px; --s20:80px; --s30:120px;
  --maxw:1200px;

  /* —— 圆角 —— */
  --r-pill:9999px; --r-card:8px; --r-lg:30px;

  /* —— 阴影（Base44 全站唯一一条，仅 hero 卡片用）—— */
  --shadow:rgba(0,0,0,.07) 0 6px 20px 0;

  /* —— 缓动 —— */
  --ease:cubic-bezier(.22,1,.36,1);

  /* —— 字体 —— */
  --font-ui:"Wix Madefor Text","Inter",-apple-system,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:"DM Serif Display","Lora","Noto Serif SC","Songti SC",Georgia,serif;
}

/* 中文下切换衬线字体，并收掉拉丁排版的宽字距 */
html[lang^="zh"]{
  --font-display:"Noto Serif SC","Songti SC","DM Serif Display",serif;
}
html[lang^="zh"] .label,
html[lang^="zh"] .tlink,
html[lang^="zh"] .metric__label{letter-spacing:.06em}
html[lang^="zh"] .h,
html[lang^="zh"] .h-lg,
html[lang^="zh"] .display{letter-spacing:0}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--font-ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s6)}
.section{padding:var(--s20) 0}

/* 完整的组件样式在阶段 3 补齐，见迁移方案 §7.2。
   demo 里那套（herbsmotion-demo.html）就是目标形态，直接迁过来即可。 */

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ══════════════════════════════════════════════════════════════
   demo 里没有、但服务端渲染需要补的几条
   （demo 是 SPA，没有跳过导航链接，分页也是 JS 做的）
   ══════════════════════════════════════════════════════════════ */

/* 跳过导航：默认移出视口，键盘聚焦时才出现。
   不加这条的话它会以纯文本形式挂在页面最上方。 */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* 分页（the_posts_pagination 的默认标记） */
.pager{margin-top:var(--s10);display:flex;justify-content:center}
.pager .nav-links{display:flex;gap:var(--s2);align-items:center}
.pager .page-numbers{
  min-width:38px;height:38px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:#fff;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
}
.pager .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.pager .page-numbers:hover{border-color:var(--brand)}
.pager .screen-reader-text{position:absolute;left:-9999px}

/* 病症详情：正文 + 侧栏 */
.cond-detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:var(--s10);align-items:start}
.cond-detail__img{margin:0 0 var(--s8);border-radius:var(--r-card);overflow:hidden}
.cond-detail__aside .card{position:sticky;top:96px}
.cond-detail__aside .btn{width:100%;margin-top:var(--s6)}
.factors{display:grid;gap:var(--s3);margin-top:var(--s4)}
.factors__up,.factors__down{padding:var(--s4);border-radius:var(--r-card);font-size:14px}
.factors__up{background:var(--brand-tint);color:var(--brand-deep)}
.factors__down{background:var(--accent-soft);color:var(--accent)}
@media(max-width:900px){.cond-detail{grid-template-columns:1fr}.cond-detail__aside .card{position:static}}

/* 服务详情大图 */
.svc__hero{margin:0 0 var(--s10);border-radius:var(--r-card);overflow:hidden}
.svc__list{margin:var(--s4) 0;padding-left:1.1rem;color:var(--muted);font-size:15px}
.svc__list li{margin:.3rem 0}

/* 区块头与"查看更多" */
.sec__hd{margin-bottom:var(--s10)}
.sec__more{margin-top:var(--s10);display:flex;justify-content:center}
.section--tint{background:var(--brand-tint)}
.cta--band{text-align:center;padding:var(--s20) var(--s6);background:var(--brand-tint);border-radius:var(--r-lg)}

/* 医师卡片里有真实头像时，撑满占位框 */
.pcard__ph img,.pdetail__ph img{width:100%;height:100%;object-fit:cover;display:block}

/* 页脚 */
.ftr__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s10);padding-block:var(--s20) var(--s10)}
.ftr__col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s4)}
.ftr__col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);font-size:14px}
.ftr__col a:hover{color:var(--brand)}
.ftr__base{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  border-top:1px solid var(--border);padding-block:var(--s6);font-size:13px;color:var(--muted)}
.ftr__note{max-width:52ch}
@media(max-width:820px){.ftr__grid{grid-template-columns:1fr 1fr}}

/* ══════════════════════════════════════════════════════════════
   对齐现网的结构元素
   现网 herbsmotion.com.au 左下角有常驻的语言/预约按钮，hero 下方有
   保险机构标识。这两样迁移前就有，患者第一眼就在找 —— 不能丢。
   ══════════════════════════════════════════════════════════════ */

/* ── 左下角常驻操作条 ────────────────────────────────────── */
.hm-float{
  position:fixed; left:16px; bottom:16px; z-index:70;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.hm-float__lang{
  width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--brand-wash); color:var(--brand-deep);
  border:1px solid rgba(47,107,79,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  transition:transform .28s var(--ease), background .28s var(--ease);
}
.hm-float__lang:hover{ transform:translateY(-2px); background:#fff }
.hm-float__book{
  display:flex; align-items:center; gap:9px;
  padding:10px 16px 10px 12px; border-radius:var(--r-pill);
  background:var(--brand); color:#fff; font-size:14px; font-weight:500;
  box-shadow:0 6px 18px rgba(47,107,79,.28);
  transition:transform .28s var(--ease), background .28s var(--ease);
}
.hm-float__book:hover{ transform:translateY(-2px); background:var(--brand-deep) }
.hm-float__book-icon{ display:flex; align-items:center }

/* 窄屏收成一排图标，别挡住正文 */
@media(max-width:640px){
  .hm-float{ left:12px; bottom:12px; flex-direction:row; align-items:center }
  .hm-float__book-text{ display:none }
  .hm-float__book{ width:44px; height:44px; padding:0; justify-content:center }
}
@media print{ .hm-float{ display:none } }

/* ── 保险机构标识 ────────────────────────────────────────── */
.hm-insurance{ background:var(--brand-tint); padding:var(--s10) 0 }
.hm-insurance__lede{
  text-align:center; color:var(--brand-deep); font-size:15px; margin:0 0 var(--s6);
}
.hm-insurance__logos{
  display:flex; flex-wrap:wrap; gap:var(--s10) var(--s20);
  align-items:center; justify-content:center;
}
/* logo 必须垫白卡：nib / medibank 的原始 PNG 是白底（实测中心像素
   rgba(254,254,254)），直接放在浅绿背景上等于隐形。现网也是白卡做法。 */
.hm-insurance__logos figure{
  margin:0; text-align:center;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--s4) var(--s6); min-width:170px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.hm-insurance__logos img{
  height:46px; width:auto; object-fit:contain; margin:0 auto var(--s3); display:block;
}
.hm-insurance__logos figcaption{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
@media(max-width:640px){
  .hm-insurance__logos{ gap:var(--s6) var(--s10) }
  .hm-insurance__logos img{ height:40px }
}