/* ===== 官网静态页适配层（site-adapter.css，随 site-styles 同步更新） =====
   来源：packages/site-styles 的 12 个 CSS 按各模块预览组件消费方式拼装为 site.css（路径 /images/ → /hkpimg/images/）；
   本文件补独立静态页所需、而后台预览由 Vue 运行时承担的差异项：
   1. 文档级兜底（预览中由外层面板环境提供）
   2. Tab/面板显隐（预览中由 v-if / is-active 类响应式切换；静态页全量渲染 DOM + JS 切换 is-active） */

/* 文档级兜底：旧站 body（css/normal.css L6-11）无 margin 重置，浏览器默认 8px 会破坏满宽区块——预览环境无此问题 */
body {
  margin: 0;
}

/* 容器声明（base.css .site-container：官网页面外层使用，容器查询的响应式锚点） */
body > .site-container {
  container-type: inline-size;
  width: 100%;
}

/* 品牌模块 Tab 面板：预览用 v-if 只渲染当前 Tab，静态页全量渲染 + is-active 切换 */
.hkp-brand-panel {
  display: none;
}
.hkp-brand-panel.is-active {
  display: block;
}

/* 知识方法大全分类面板：同上口径（预览 activeCategory 响应式，静态页 is-active） */
.hkp-methods-cat {
  display: none;
}
.hkp-methods-cat.is-active {
  display: block;
}

/* 菜单移动端头部占位（menu.css .hkp-mobile-header-spacer，旧站 h5 头部让位 2.2rem）：
   静态页为单 DOM 响应式（PC + 移动变体同页渲染），PC 容器下必须隐藏占位，
   仅移动容器内显示；预览侧由手机面板容器宽度（≤768px）天然触发，无需此规则 */
.hkp-mobile-header-spacer {
  display: none;
}
@container (max-width: 768px) {
  .hkp-mobile-header-spacer {
    display: block;
  }
}