/* =========================================================
   4/5 · 页面层 pages/page.css —— 单页（关于我们 / 服务条款…）
   ---------------------------------------------------------
   本文件只被单页加载。类名前缀：.page-*

   ⚠️ 注意与公共组件 .inner-hero 区分：
      .inner-hero 是**所有内页**共用的顶部通栏（列表 / 详情 / 单页 / 询价…），
      属组件层；.page-* 才是**单页专属**。
      早先那个组件叫 .page-hero，跟这里的前缀撞在一起，
      看起来像「单页专用」，实际全站都在用 —— 已改名避免误读。

   单页的构成：内页通栏 + 一条窄正文 + 结尾行动号召（.cta，组件层）。
   唯一需要单页自己定的是**正文的阅读宽度**：
   单页多是成段文字，铺满 1200px 版心一行太长，眼睛回行容易串行。
   ========================================================= */

.page-body { max-width: 860px; }

/* 全宽版式（1.23，配合 page-full.htm 这个示例模板）
   ---------------------------------------------------------
   放开的不是「版心宽度」而是「正文的最大阅读宽度」：.wrap 仍然是全站一致的
   1200px 版心，只是不再额外收窄到 860px。所以宽表格 / 参数对照表不会溢出版心。

   ⚠️ 用 max-width: none 而不是写死一个大数字：版心一旦调整（响应式断点、
      客户改了 --wrap），这里不用跟着改。
   判据：本文件对**所有单页模板**都加载（引擎按语义页面名 'page' 取样式，
   不按模板文件名），所以这里加规则不需要在 theme.json 里再登记一次。 */
.page-body-full { max-width: none; }

/* ---------------------------------------------------------
   常见问题（1.9.18）

   用原生 details/summary 而不是自研折叠脚本：
   它天然可访问 —— 键盘 Tab 能聚焦、回车能展开，屏幕阅读器会
   读出「折叠/展开」状态，也不需要 JS 就能工作（JS 挂了问答照样能看）。
   搜索引擎与 AI 抓取时，折叠的内容依然在 DOM 里，不影响收录。
   --------------------------------------------------------- */
.faq-item {
    border-bottom: 1px solid var(--line, #e6e9f0);
}

/* 🔴 这里没有 .faq-list 容器：{cms:faq} 是块标签，自己就是循环，
   内层 HTML 每项重复一次 —— 套容器会变成 N 个容器各装 1 项，边框翻倍。
   所以分隔线画在每项自己身上，用「第一个 details」补上顶部那条线。
   ⚠️ 用 :first-of-type（按元素类型）而不是 :first-child：
      .page-body 的第一个子元素是 .article-body，:first-child 永远不命中。 */
.faq-item:first-of-type {
    margin-top: 30px;
    border-top: 1px solid var(--line, #e6e9f0);
}

.faq-item > summary {
    position: relative;
    padding: 16px 40px 16px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    list-style: none;          /* 去掉默认三角，用下面的自定义箭头 */
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
    content: '+';
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    color: var(--navy, #14213d);
    transition: transform .2s;
}

.faq-item[open] > summary::after {
    content: '−';
}

/* 焦点可见：键盘用户必须看得出焦点在哪 */
.faq-item > summary:focus-visible {
    outline: 2px solid var(--navy, #14213d);
    outline-offset: 3px;
    border-radius: 4px;
}

.faq-a {
    padding: 0 40px 18px 0;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--text-2, #4a5568);
}
