/* ============================================================
   星垣云 CMS 主题适配层（内核所有皮肤共用，皮肤可用同名文件覆盖）
   源模板的 CSS 是从 React 应用装配过来的，以下补齐它在 CMS 场景缺失的部分：
   1) 源站二级菜单靠 React onMouseEnter 加 .is-open —— 静态站里根本打不开，这里补 :hover/:focus-within
   2) 正文排版（CMS 富文本 .rich）源 CSS 完全没有
   3) 页脚置底（规范 §5.6 sticky footer）
   改动后请同步 bump theme.json 的 version（线上有中间缓存层）。
   ============================================================ */

/* ---------- 1. 导航二级菜单：无 JS 可开、键盘可达 ---------- */
.nav-item.has-menu:hover > .nav-link,
.nav-item.has-menu:focus-within > .nav-link { color: var(--brand-600); }
.nav-item.has-menu:hover > .nav-link svg,
.nav-item.has-menu:focus-within > .nav-link svg { transform: rotate(180deg); }
.nav-item.has-menu:hover .dropdown,
.nav-item.has-menu:focus-within .dropdown,
.nav-item.has-menu.is-open .dropdown { opacity: 1; visibility: visible; transform: none; }
.nav-item.has-menu:hover .mega,
.nav-item.has-menu:focus-within .mega,
.nav-item.has-menu.is-open .mega { opacity: 1; visibility: visible; transform: none; }
/* 触屏：点击展开由 js/app.js 切 .is-open；这里保证展开态在窄容器下不溢出 */
.nav-item.has-menu .mega,
.nav-item.has-menu .dropdown { max-width: calc(100vw - 24px); }

/* 移动端抽屉：无 JS 时用锚点 :target 兜底（菜单按钮 aria-controls 指向同一 id） */
@media (max-width: 960px) {
  .drawer:target { max-height: 78vh; overflow-y: auto; box-shadow: var(--sh-3); }
}

/* ---------- 2. 正文排版（管理端 HTMLPurifier 白名单产出的 HTML） ---------- */
.rich { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); word-wrap: break-word; }
.rich > *:first-child { margin-top: 0; }
.rich h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); color: var(--ink-900); margin: 1.6em 0 .6em; }
.rich h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--ink-900); margin: 1.5em 0 .5em; }
.rich h4 { font-size: var(--fs-body); color: var(--ink-900); margin: 1.4em 0 .4em; }
.rich p { margin: 0 0 1em; }
.rich ul, .rich ol { margin: 0 0 1em; padding-left: 1.4em; }
.rich li { margin: .3em 0; }
.rich blockquote {
  margin: 1.2em 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--brand-300);
  color: var(--ink-500); font-style: normal;
}
.rich pre, .rich code { font-family: var(--font-mono); font-size: .92em; }
.rich pre { background: var(--paper-soft); border: 1px solid var(--paper-line); border-radius: var(--r-md); padding: 14px 16px; overflow-x: auto; margin: 0 0 1.2em; }
.rich code { background: var(--paper-soft); border-radius: 4px; padding: .1em .35em; }
.rich pre code { background: none; padding: 0; }
.rich img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: .4em 0; }
.rich hr { border: 0; border-top: 1px solid var(--paper-line); margin: 2em 0; }
.rich table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: var(--fs-sm); }
.rich th, .rich td { border: 1px solid var(--paper-line); padding: 9px 12px; text-align: left; vertical-align: top; }
.rich th { background: var(--paper-soft); color: var(--ink-900); font-weight: var(--fw-semi); }
.rich a { color: var(--brand-600); text-decoration: none; border-bottom: 1px solid transparent; }
.rich a:hover { border-bottom-color: currentColor; }

/* 文章/产品封面与列表缩略图空态：不给空 <img>，用占位块（规范 §5.4） */
.xy-cover-empty {
  display: grid; place-items: center; aspect-ratio: 16 / 10; color: var(--brand-600);
  background: var(--grad-card), var(--paper-soft); border: 1px solid var(--paper-line); border-radius: var(--r-md);
}

/* ---------- 3. 页脚置底 ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-shell { flex: 1 0 auto; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; min-height: 0; }

/* ---------- 4. 主题新增小件（Powered 行、二维码图片、分页当前项） ---------- */
.footer-powered { margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-on-dark-mute); }
.qr img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.pager button.is-active, .pager a.is-active { pointer-events: none; }

/* ---------- 5. 动效与图标基线 ---------- */
/* 源站图标靠 <svg width height> 属性定尺寸（Icon.jsx），没有 .icon 规则；
   flex 容器里 svg 会被压扁，这里补一条基线。 */
.icon { flex: none; display: inline-block; vertical-align: middle; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 6. 内核视图的结构钩子（源 CSS 只服务 React 假数据，CMS 结构在此补齐） ---------- */
/* 横幅右侧要点条 CMS 契约里没有数据，单栏时铺满，否则 1.4fr 轨道会把标题挤窄 */
.page-banner-inner:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.crumb { flex-wrap: wrap; row-gap: 6px; }
.crumb span[aria-current="page"] { color: var(--ink-on-dark); font-weight: var(--fw-semi); }

/* 分页用 <a> 而非 <button>（静态站可抓取、可右键新窗口），而源 CSS 只写了 .pager button */
.pager a { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding-inline: 10px;
  border: 1px solid var(--paper-line); border-radius: var(--r-sm); background: var(--paper); font-size: var(--fs-sm); color: var(--ink-500); }
.pager a:hover { border-color: var(--brand-300); color: var(--brand-600); }
.pager a.is-active { background: var(--brand-500); border-color: var(--brand-500); color: var(--on-brand); font-weight: var(--fw-semi); }
.pager .dots { border: 0; background: none; color: var(--ink-400); }

/* 封面容器：真图与 .xy-cover-empty 占位共用一条轨道（规范 §5.4 不给空 <img src>） */
.xy-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md); background: var(--paper-soft); }
.xy-cover img { width: 100%; height: 100%; object-fit: cover; }
.xy-cover .xy-cover-empty { height: 100%; aspect-ratio: auto; border: 0; }

.feature-card .link-arrow { display: inline-flex; margin-top: 14px; font-size: var(--fs-sm); }
.feature-card > .row.between { margin-top: 16px; }
.tag-row { margin-top: 22px; }
.hero-points { margin-top: 26px; }

/* 侧栏/购买栏标题按层级写 h2/h3（规范 §5.6 不跳级），字号照抄源 CSS 的 h4 规则 */
.buy-side-head h2 { font-size: 16px; }
.buy-side-head p { margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-on-dark-mute); }
.info-aside-card h3 { font-size: 16px; }