/**
 * husir-faq.css — 全站统一折叠/手风琴动画层
 *
 * 设计原则：
 *   - 承载「动画 + 结构 + a11y + 通用皮肤」，页面差异由 [data-faq-module] 上的 --hfq-* 变量提供
 *   - 动画方案：max-height 由 JS 精确测量，展开完成后置 none，避免内容高度变化被裁切
 *   - 状态类统一 .is-open；JS 只认 data-* 属性，与各页 class 解耦
 *   - 无障碍：button 元素 + aria-expanded/aria-controls + 键盘 Enter/Space（JS 侧）
 *
 * 各页接入只需：
 *   1) DOM 加 data-faq-module / data-faq-item / data-faq-trigger(button) / data-faq-panel / data-faq-panel-inner
 *   2) [data-faq-module] 上定义 --hfq-* 变量取值（背景/边框/文字/图标色）
 *   3) 删除该页旧的 max-height/hidden 动画与对应 JS
 *
 * 兼容：现代浏览器均可执行；旧浏览器无动画但仍可展开（功能不丢）
 */

/* ===== 变量默认值（各页可 override；走 var(var-name, fallback) 兜底）===== */
[data-faq-module] {
  --hfq-radius: 18px;
  --hfq-radius-icon: 999px;
  --hfq-gap: 16px;
  --hfq-question-icon-gap: 16px;
  --hfq-q-pad-y: 20px;
  --hfq-q-pad-x: 24px;
  --hfq-a-pad-x: 24px;
  --hfq-a-pad-top: 4px;
  --hfq-a-pad-y: 22px;
  --hfq-q-fs: 17px;
  --hfq-a-fs: 16px;
  --hfq-q-fw: 650;
  --hfq-ico-size: 32px;
  --hfq-ico-fs: 16px;
  /* 颜色（必须由各页提供，这里只给中性兜底防裸奔）*/
  --hfq-bg: var(--dm-bg-elevated, #fff);
  --hfq-bg-open: var(--dm-bg-elevated, #fff);
  --hfq-bg-answer: rgba(120, 120, 128, 0.06);
  --hfq-border: var(--dm-border, rgba(0,0,0,0.08));
  --hfq-border-open: rgba(197,165,90,0.30);
  --hfq-border-hover: rgba(197,165,90,0.22);
  --hfq-answer-border: var(--dm-divider, rgba(0,0,0,0.06));
  --hfq-text: var(--dm-text, #2C2420);
  --hfq-text-q: var(--dm-text, #2C2420);
  --hfq-text-a: var(--dm-text-secondary, #6B5E54);
  --hfq-accent: #C5A55A;
  --hfq-ico-bg: rgba(120,120,128,0.10);
  --hfq-ico-bg-open: linear-gradient(135deg, var(--hfq-accent), #C41E3A);
  --hfq-ico-color: var(--hfq-accent);
  --hfq-ico-color-open: #fff;
  --hfq-ico-open-transform: rotate(180deg);
  --hfq-shadow: 0 10px 30px rgba(44,36,32,0.05);
  --hfq-shadow-hover: 0 14px 34px rgba(44,36,32,0.08);
  --hfq-shadow-open: 0 18px 48px rgba(44,36,32,0.10);
  --hfq-duration: 0.4s;
  --hfq-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  html:not(.husir-light) [data-faq-module] {
    --hfq-bg-answer: rgba(255,255,255,0.06);
    --hfq-border-hover: rgba(255,255,255,0.16);
    --hfq-answer-border: rgba(255,255,255,0.08);
    --hfq-ico-bg: rgba(255,255,255,0.08);
    --hfq-shadow: 0 10px 30px rgba(0,0,0,0.18);
    --hfq-shadow-hover: 0 14px 36px rgba(0,0,0,0.24);
    --hfq-shadow-open: 0 18px 52px rgba(0,0,0,0.28);
  }
}

html.husir-dark [data-faq-module] {
  --hfq-bg-answer: rgba(255,255,255,0.06);
  --hfq-border-hover: rgba(255,255,255,0.16);
  --hfq-answer-border: rgba(255,255,255,0.08);
  --hfq-ico-bg: rgba(255,255,255,0.08);
  --hfq-shadow: 0 10px 30px rgba(0,0,0,0.18);
  --hfq-shadow-hover: 0 14px 36px rgba(0,0,0,0.24);
  --hfq-shadow-open: 0 18px 52px rgba(0,0,0,0.28);
}

/* ===== 单项容器 ===== */
[data-faq-item] {
  border: 1px solid var(--hfq-border);
  border-radius: var(--hfq-radius);
  margin-bottom: var(--hfq-gap);
  background: var(--hfq-bg);
  overflow: hidden;
  box-shadow: var(--hfq-shadow);
  transition: background var(--hfq-duration) var(--hfq-ease),
              border-color var(--hfq-duration) var(--hfq-ease),
              box-shadow var(--hfq-duration) var(--hfq-ease);
}
@media (hover: hover) and (pointer: fine) {
  [data-faq-item]:hover {
    border-color: var(--hfq-border-hover);
    box-shadow: var(--hfq-shadow-hover);
  }
}
[data-faq-item].is-open,
[data-faq-item].is-closing {
  background: var(--hfq-bg-open);
  border-color: var(--hfq-border-open);
  box-shadow: var(--hfq-shadow-open);
}
/* 末项去底距（适配直接子列表场景）*/
[data-faq-module] > [data-faq-item]:last-child,
[data-faq-list] > [data-faq-item]:last-child { margin-bottom: 0; }

/* ===== 问题按钮（强制 button 语义）===== */
[data-faq-trigger] {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--hfq-question-icon-gap);
  padding: var(--hfq-q-pad-y) var(--hfq-q-pad-x);
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--hfq-q-fs); font-weight: var(--hfq-q-fw);
  color: var(--hfq-text-q); text-align: left;
  transition: color 0.3s var(--hfq-ease);
}
[data-faq-trigger]:hover { color: var(--hfq-accent); }
[data-faq-trigger]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--hfq-accent);
  border-radius: var(--hfq-radius);
}

/* ===== 展开图标（+, 旋转 180° 变 × 或 ↓→↑）===== */
[data-faq-trigger] .hfq-ico,
[data-faq-trigger] > [class*="arrow"],
[data-faq-trigger] > [class*="q-icon"] {
  flex-shrink: 0;
  width: var(--hfq-ico-size); height: var(--hfq-ico-size);
  border-radius: var(--hfq-radius-icon);
  background: var(--hfq-ico-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--hfq-ico-fs);
  color: var(--hfq-ico-color);
  transition: transform var(--hfq-duration) var(--hfq-ease),
              background var(--hfq-duration) var(--hfq-ease),
              color var(--hfq-duration) var(--hfq-ease);
}
[data-faq-item].is-open [data-faq-trigger] .hfq-ico,
[data-faq-item].is-open [data-faq-trigger] > [class*="arrow"],
[data-faq-item].is-open [data-faq-trigger] > [class*="q-icon"],
[data-faq-item].is-closing [data-faq-trigger] .hfq-ico,
[data-faq-item].is-closing [data-faq-trigger] > [class*="arrow"],
[data-faq-item].is-closing [data-faq-trigger] > [class*="q-icon"] {
  transform: var(--hfq-ico-open-transform);
  background: var(--hfq-ico-bg-open);
  color: var(--hfq-ico-color-open);
}

/* ===== 答案面板：max-height + JS 精确测量（修 grid 方案的起步延迟 + 收起残留）===== */
/* max-height 全程由 JS 管理（inline style）：收起 0px → 展开精确高度 → 过渡完 none */
/* CSS 只提供 transition 声明，不写 .is-open 的 max-height（避免与 inline 冲突跳变）*/
[data-faq-module] [data-faq-panel] {
  max-height: 0;                  /* 收起默认（无 inline 时）*/
  overflow: hidden;
  background: var(--hfq-bg-answer);
  border-top: 0 solid transparent;
  transition: max-height var(--hfq-duration) var(--hfq-ease);
}
[data-faq-module] [data-faq-item].is-open [data-faq-panel],
[data-faq-module] [data-faq-item].is-closing [data-faq-panel] {
  border-top-width: 1px;
  border-top-color: var(--hfq-answer-border);
}
/* 内层包裹：收起态 padding 归零，避免撑出残留高度 */
[data-faq-module] [data-faq-panel-inner] {
  padding: 0 var(--hfq-a-pad-x);
  /* padding 是 JS 计算 max-height 的一部分，独立过渡会导致文字先显示、外框后补高度。 */
  transition: none;
  font-size: var(--hfq-a-fs);
  color: var(--hfq-text-a);
  line-height: 1.72;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
[data-faq-module] [data-faq-item].is-open [data-faq-panel-inner],
[data-faq-module] [data-faq-item].is-closing [data-faq-panel-inner] {
  padding-top: var(--hfq-a-pad-top);
  padding-bottom: var(--hfq-a-pad-y);
}
[data-faq-module] [data-faq-panel-inner] > * {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
[data-faq-panel-inner] p { margin: 0 0 12px; }
[data-faq-panel-inner] p:last-child { margin-bottom: 0; }

/* ===== 无障碍：屏阅隐藏的辅助文本 ===== */
[data-faq-trigger] .hfq-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== reduced-motion：尊重用户偏好，关动画保功能 ===== */
@media (prefers-reduced-motion: reduce) {
  [data-faq-item],
  [data-faq-trigger],
  [data-faq-trigger] .hfq-ico,
  [data-faq-trigger] > [class*="arrow"],
  [data-faq-trigger] > [class*="q-icon"],
  [data-faq-panel],
  [data-faq-panel-inner] {
    transition: none !important;
  }
}

/* 主方案即 max-height（JS 精确测量 scrollHeight），全浏览器兼容，无需降级段 */