/*
Theme Name: wa-cn-theme
Theme URI: https://www.whatsapp-web-guide.example/
Author: wa-cn
Author URI: https://www.whatsapp-web-guide.example/
Description: WhatsApp网页版指南主题。由静态页 WhatsApp-cn.html 转化，内置必应 SEO（title/description/canonical/Open Graph/JSON-LD）、语义化标签与响应式布局（1024/900/640 断点）。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wa-cn-theme
Tags: blog, one-column, custom-menu, custom-logo, translation-ready
*/

/* ---------- 基础变量与重置 ---------- */
:root{
  --c1:#0a766d;            /* 主色 深青 */
  --c2:#37c3b3;            /* 强调 亮青 */
  --c3:#f0fdfa;            /* 页面背景 薄荷 */
  --c4:#134e4a;            /* 正文文字 深青 */
  --muted:#4e7a77;         /* 次要文字 */
  --card:#fff;
  --line:color-mix(in srgb,var(--c4) 14%,#fff);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  background:var(--c3);color:var(--c4);line-height:1.75;font-size:16px;
  overflow-x:hidden;word-break:break-word;
}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}

/* 无障碍跳转链接 */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;z-index:100;background:#fff;padding:8px 14px;border-radius:8px;color:var(--c1)}

/* ---------- 顶部导航 ---------- */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--c3) 86%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--c4) 10%,transparent)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:750}
.brand-en{font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.custom-logo{height:28px;width:auto}
.nav-links{display:flex;flex-wrap:wrap;gap:12px 16px;font-size:.9rem;opacity:.82}
.nav-links ul{display:flex;flex-wrap:wrap;gap:12px 16px;list-style:none}
.nav-links a:hover{color:var(--c1)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;
  border-radius:12px;font-weight:700;transition:transform .2s,box-shadow .2s;min-height:44px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--c2);color:#06281c;box-shadow:0 10px 28px color-mix(in srgb,var(--c2) 35%,transparent)}
.btn-secondary{border:1px solid color-mix(in srgb,var(--c4) 22%,transparent);background:transparent}

/* ---------- 左侧竖排 rail + 内容 ---------- */
.rail-layout{display:grid;grid-template-columns:72px 1fr}
.rail{background:var(--c1);color:#eaf8f0;padding:18px 8px;writing-mode:vertical-rl;
  text-orientation:mixed;letter-spacing:.2em;font-weight:800;
  display:flex;align-items:center;justify-content:center;position:sticky;top:0;height:100vh}

/* ---------- 英雄区 ---------- */
.hero{padding:48px 0 36px}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.25;color:var(--c1)}
.hero h1 .sub{display:block;font-size:.55em;font-weight:600;color:var(--muted);margin-top:8px}
.lead{margin:14px 0 20px;max-width:38em;color:var(--c4)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:.8rem;padding:6px 11px;border-radius:999px;color:var(--c4);
  border:1px solid color-mix(in srgb,var(--c4) 22%,transparent);
  background:color-mix(in srgb,var(--c2) 16%,#fff)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.pain-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.pain-row article{padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--c2) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--c2) 25%,#fff);font-weight:600}

/* ---------- 英雄区视觉：CSS 聊天模拟（无图片，纯样式） ---------- */
.visual{position:relative;min-height:260px;display:grid;place-items:center}
.screen{width:min(100%,340px);aspect-ratio:16/11;border-radius:18px;padding:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 90%,#000),var(--c1));
  border:1px solid color-mix(in srgb,var(--c2) 35%,transparent);
  box-shadow:0 24px 50px rgba(0,0,0,.22);position:relative;z-index:2}
.bar{display:flex;gap:6px;margin-bottom:12px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28)}
.line{height:16px;border-radius:6px;background:rgba(255,255,255,.1);margin-bottom:8px}
.line.me{margin-left:30%;background:color-mix(in srgb,var(--c2) 45%,transparent)}
.pulse{position:absolute;width:150px;height:150px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--c2) 45%,transparent);animation:pulse 2.8s ease-out infinite}
.pulse.d{animation-delay:1s;width:200px;height:200px}
@keyframes pulse{0%{transform:scale(.9);opacity:.55}70%{transform:scale(1.1);opacity:0}100%{opacity:0}}

/* ---------- 通用区块 ---------- */
main section{padding:70px 0;position:relative}
.sec-head{margin-bottom:28px;display:grid;gap:10px}
.sec-head h2{font-size:clamp(1.35rem,2.5vw,1.85rem);color:var(--c1);line-height:1.35}
.sec-head p{color:var(--muted);max-width:46em}
.sec-num{font-size:clamp(3rem,8vw,4.8rem);font-weight:800;line-height:.85;
  color:color-mix(in srgb,var(--c1) 14%,transparent);letter-spacing:-.04em}

/* ---------- 卡片/条/贴士/步骤 通用底 ---------- */
.card,.strip,.note,.tip,.step,.mini{background:var(--card);
  border:1px solid color-mix(in srgb,var(--c4) 10%,#fff);border-radius:16px;padding:18px 20px}
.card h3,.strip h3,.note h3,.tip h3,.step h3,.mini h3,dt{font-size:1.05rem;margin-bottom:6px;color:var(--c1)}
.muted{color:var(--muted)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* ---------- 特性条 ---------- */
.strip{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
.strip .n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c2) 16%,#fff);color:var(--c1);font-weight:800}

/* ---------- 步骤 ---------- */
.steps{display:grid;gap:12px;counter-reset:st}
.step{position:relative;padding-left:72px}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;left:16px;top:16px;width:40px;height:40px;border-radius:12px;
  background:var(--c1);color:#eefbf4;display:grid;place-items:center;font-weight:750}
.hint{margin-top:8px;font-size:.92rem;color:var(--muted)}

/* ---------- 勾选清单 ---------- */
.checklist{display:grid;gap:10px}
.check{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;
  padding:14px 16px;border-radius:14px;background:var(--card);
  border:1px solid color-mix(in srgb,var(--c4) 10%,#fff)}
.check i{width:22px;height:22px;border-radius:6px;border:2px solid var(--c1);
  display:grid;place-items:center;font-style:normal;color:var(--c1);font-weight:800}

/* ---------- 术语表 ---------- */
dl.spec{display:grid;gap:12px}
dl.spec>div{display:grid;grid-template-columns:180px 1fr;gap:14px;
  padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--c4) 10%,#fff)}

/* ---------- 手风琴 FAQ ---------- */
details{background:var(--card);border:1px solid color-mix(in srgb,var(--c4) 10%,#fff);
  border-radius:14px;padding:14px 16px}
summary{cursor:pointer;font-weight:700;color:var(--c1);list-style:none}
summary::-webkit-details-marker{display:none}
details[open] summary{margin-bottom:8px}

/* ---------- 资讯列表 ---------- */
.digest-list{list-style:none;border-top:1px solid color-mix(in srgb,var(--c4) 10%,#fff)}
.digest-list li{border-bottom:1px solid color-mix(in srgb,var(--c4) 10%,#fff)}
.digest-list a{display:block;padding:14px 4px;transition:padding-left .2s,color .2s}
.digest-list a:hover{padding-left:8px;color:var(--c1)}

/* ---------- 终极 CTA ---------- */
.cta-final{border-radius:24px;padding:46px 28px;text-align:center;color:#eefbf4;
  background:linear-gradient(135deg,var(--c1),color-mix(in srgb,var(--c1) 70%,var(--c2)))}
.cta-final .cta-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;margin-bottom:10px}

/* ---------- 页脚与链接区块 ---------- */
footer{padding:28px 0 44px;color:var(--muted);
  border-top:1px solid color-mix(in srgb,var(--c4) 10%,#fff);margin-top:12px}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.link-block{padding:30px 20px;border-top:1px solid color-mix(in srgb,var(--c4) 8%,#fff)}
.link-block h3{font-size:15px;color:var(--muted);margin-bottom:16px;font-weight:600;text-align:center}
.link-flex{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{display:inline-block;padding:7px 16px;background:#fff;
  border:1px solid color-mix(in srgb,var(--c4) 12%,#fff);border-radius:8px;
  color:var(--c1);text-decoration:none;font-size:13px;transition:all .2s}
.chip:hover{background:#eff6ff;border-color:var(--c2);transform:translateY(-1px)}

/* ---------- 每日资讯 ---------- */
.daily{padding:28px 20px;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
  border-top:1px solid #bae6fd;margin-top:32px}
.daily h2{font-size:17px;font-weight:700;color:#0369a1;margin-bottom:16px}
.news-list{list-style:none;display:grid;gap:8px;max-width:900px;margin:0 auto}
.news-list li{display:flex;align-items:baseline;gap:10px;padding:10px 14px;background:#fff;
  border-radius:8px;border:1px solid #e0f2fe;font-size:14px;color:#1e40af;line-height:1.5}
.news-list time{flex-shrink:0;font-size:12px;color:#0ea5e9;font-weight:600;white-space:nowrap}

/* ---------- 响应式：覆盖 1024 以下、768、375 ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .visual{order:-1}
}
@media (max-width:900px){
  .grid-2,.grid-3,.hero-grid{grid-template-columns:1fr !important}
  .nav-links{display:none}
  .pain-row{grid-template-columns:1fr}
  .step{padding-left:18px;padding-top:66px}
  dl.spec>div{grid-template-columns:1fr}
  .rail-layout{grid-template-columns:1fr}
  .rail{display:none}
  .cat-layout{grid-template-columns:1fr}
  .post-card{grid-template-columns:1fr !important}
  .post-cover img{aspect-ratio:16/9}
  .related-grid{grid-template-columns:1fr 1fr !important}
}
@media (max-width:640px){
  body{font-size:15px}
  h1{font-size:clamp(1.9rem,8vw,2.5rem) !important;line-height:1.2}
  h2{font-size:clamp(1.35rem,6vw,1.8rem) !important;line-height:1.3}
  p,li{font-size:.98rem;line-height:1.75}
  .related-grid{grid-template-columns:1fr !important}
}

/* ---------- 面包屑 ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.85rem;color:var(--muted);margin-bottom:14px}
.breadcrumb a{color:var(--c1);transition:color .2s}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{opacity:.5}
.breadcrumb [aria-current]{font-weight:600;color:var(--c4)}

/* ---------- 资讯布局：主栏 + 侧边栏 ---------- */
.cat-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.cat-main{min-width:0}

/* ---------- 文章列表卡片 ---------- */
.post-list{display:grid;gap:16px}
.post-card{display:grid;grid-template-columns:220px 1fr;gap:0;overflow:hidden;padding:0;
  transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-3px);
  box-shadow:0 14px 34px color-mix(in srgb,var(--c1) 14%,transparent)}
.post-cover{display:block;height:100%}
.post-cover img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;display:block}
.post-card-body{padding:18px 20px;display:grid;gap:8px;align-content:start}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.meta-cat{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:600;
  color:var(--c1);background:color-mix(in srgb,var(--c2) 18%,#fff);
  border:1px solid color-mix(in srgb,var(--c2) 40%,#fff);transition:background .2s}
.meta-cat:hover{background:color-mix(in srgb,var(--c2) 32%,#fff)}
.meta-sep{opacity:.5}
.post-card-title{font-size:1.1rem;line-height:1.45;margin:0}
.post-card-title a{color:var(--c4);transition:color .2s}
.post-card-title a:hover{color:var(--c1)}
.post-card-excerpt{color:var(--muted);font-size:.92rem;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-more{font-size:.85rem;font-weight:600;color:var(--c1);justify-self:start}
.post-more:hover{text-decoration:underline}

/* ---------- 分页 ---------- */
.cat-pagination{margin-top:24px}
.cat-pagination .nav-links{display:flex;justify-content:center;gap:8px;opacity:1;font-size:.9rem}
.cat-pagination .page-numbers{display:inline-block;padding:8px 14px;border-radius:10px;
  background:var(--card);border:1px solid color-mix(in srgb,var(--c4) 12%,#fff);color:var(--c4)}
.cat-pagination .page-numbers.current{background:var(--c1);color:#eefbf4;border-color:var(--c1);font-weight:700}
.cat-pagination a.page-numbers:hover{border-color:var(--c2);color:var(--c1)}

/* ---------- 详情页正文 ---------- */
.entry{font-size:1rem}
.entry p{margin:0 0 14px;line-height:1.85}
.entry h2,.entry h3{color:var(--c1);margin:22px 0 10px;line-height:1.4}
.entry ul,.entry ol{margin:0 0 14px;padding-left:1.4em;display:grid;gap:6px}
.entry li{line-height:1.8}
.entry a{color:var(--c1);font-weight:600;
  text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c2) 60%,transparent);
  text-underline-offset:3px;transition:color .2s}
.entry a:hover{color:var(--c2)}
.entry img{border-radius:12px}
.entry blockquote{margin:14px 0;padding:12px 18px;border-left:4px solid var(--c2);
  background:color-mix(in srgb,var(--c2) 10%,#fff);border-radius:0 12px 12px 0;color:var(--muted)}

/* ---------- 相关文章推荐 ---------- */
.related{margin-top:18px}
.related h3{margin-bottom:14px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.related-item{display:grid;gap:8px;align-content:start;padding:12px;border-radius:14px;
  background:color-mix(in srgb,var(--c2) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--c2) 22%,#fff);transition:transform .2s,box-shadow .2s}
.related-item:hover{transform:translateY(-2px);
  box-shadow:0 10px 24px color-mix(in srgb,var(--c1) 12%,transparent)}
.related-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
.related-title{font-size:.9rem;font-weight:600;color:var(--c4);line-height:1.5}
.related-item time{font-size:.75rem;color:var(--muted)}
.related .hint{margin-top:14px}

/* ---------- 侧边栏 ---------- */
.cat-side{display:grid;gap:16px;position:sticky;top:80px}
.side-box{padding:16px 18px}
.side-box h3{font-size:.95rem;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid color-mix(in srgb,var(--c4) 10%,#fff)}
.side-list{list-style:none;display:grid;gap:12px}
.side-list li{display:grid;gap:2px}
.side-list a{font-size:.88rem;line-height:1.55;color:var(--c4);transition:color .2s}
.side-list a:hover{color:var(--c1)}
.side-list time{font-size:.75rem;color:var(--muted)}
.side-box ul:not(.side-list){list-style:none;display:grid;gap:10px}
.side-box ul:not(.side-list) li{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.side-box ul:not(.side-list) a{font-size:.88rem;color:var(--c4);transition:color .2s}
.side-box ul:not(.side-list) a:hover{color:var(--c1)}
.side-box ul:not(.side-list) .count{font-size:.75rem;color:var(--muted);
  background:color-mix(in srgb,var(--c2) 14%,#fff);border-radius:999px;padding:1px 9px;white-space:nowrap}
.side-links a{font-size:.88rem}

/* ---------- 首页最新资讯 ---------- */
.latest-list a{display:flex;align-items:baseline;gap:14px}
.latest-list time{flex-shrink:0;font-size:.82rem;color:var(--muted);font-weight:600;white-space:nowrap}
.latest-list span{flex:1}