/* ===========================================================================
 * FAQ 页（page-templates/faq.php）
 * ---------------------------------------------------------------------------
 * 只在 Page Template = "FAQ" 的页面上加载（见 inc/assets.php 6g）。
 *
 * ★ 这个文件**不含**面包屑 / 页头 / 底部联系块 —— 那三块与政策页是同一个
 *   设计，直接复用 legal.css 的 `.lu-legal__*`（FAQ 页也加载 legal.css）。
 *   这里只写它独有的两样：左侧分组导航 + 问答折叠列表。
 *
 * ★ 折叠用原生 <details>/<summary>，不写 JS
 *   1. 键盘、读屏、Ctrl+F 全部原生可用（折叠起来的答案也能被浏览器查找命中）；
 *   2. 没有 JS 也能展开 —— 结账页之外，FAQ 是最容易被广告拦截插件
 *      搞坏脚本的一页，这里不给自己找麻烦；
 *   3. `open` 是浏览器自己维护的状态，不需要 aria-expanded 同步。
 *   代价：`<summary>` 的三角标记在 Safari 上不认 `list-style:none`，
 *   还要 `::-webkit-details-marker`，两行一起写才干净。
 * =========================================================================== */

/* ===========================================================================
 * 1. 页头导语
 * =========================================================================== */

.lu-faq__lead {
  margin: var(--sp-4) 0 0;
  max-width: var(--container-narrow);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-body);
}

/* ===========================================================================
 * 2. 两栏：左分组导航 | 右问答
 * =========================================================================== */

.lu-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  /* 不要另加 margin-top：页头（.lu-legal__head）自带 padding-bottom: 32，
     再叠一层就把导语和第一条问答拉开 80px，看着像内容没加载完。
     实测数值见 P2-进度表 批次 5。 */
}

@media (min-width: 1024px) {
  /* 220 + 56 + 720 = 996，比政策页窄一档：FAQ 每条答案都不长，
     720 已经能把最长的运费说明放进 3 行。 */
  .lu-faq__layout {
    grid-template-columns: 220px minmax(0, 720px);
    gap: 56px;
    justify-content: center;
  }

  .lu-faq__aside {
    position: sticky;
    top: calc(var(--sp-6) + 80px);   /* 让开 sticky header */
  }
}

.lu-faq__nav {
  display: block;
}

/* ===========================================================================
 * 3. 分组标题
 * =========================================================================== */

.lu-faq__body > h2 {
  margin: var(--sp-8) 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
  /* 锚点跳转时不要被 sticky header 压住 */
  scroll-margin-top: calc(var(--sp-6) + 80px);
}

/* 第一个分组不要顶出那么大的空白：上面已经有两栏的 gap */
.lu-faq__body > h2:first-child {
  margin-top: 0;
}

/* ===========================================================================
 * 4. 问答折叠项
 * =========================================================================== */

.lu-faq__body details {
  border-bottom: var(--bw-hairline) solid var(--border-default);
}

/* 摘要：整行可点，左右两端分别是问题与标记 */
.lu-faq__body summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-card-title);
  line-height: 1.4;
  color: var(--fg-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Safari / 旧 WebKit 的三角标记不走 list-style */
.lu-faq__body summary::-webkit-details-marker {
  display: none;
}

.lu-faq__body summary:hover {
  color: var(--fg-accent);
}

/* 键盘聚焦要看得见 —— 只在键盘导航时出环，鼠标点击不出 */
.lu-faq__body summary:focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* 加号标记：展开时旋转 45° 变成叉。用伪元素而不是图片，
   颜色跟着 currentColor 走，hover 时自然一起变琥珀。 */
.lu-faq__body summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 20px;
  line-height: 1;
  color: var(--fg-muted);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.lu-faq__body details[open] > summary::after {
  transform: rotate(45deg);
  color: var(--fg-accent);
}

.lu-faq__body details[open] > summary {
  color: var(--fg-primary);
}

/* 答案：与问题左对齐，右侧留出标记的呼吸位 */
.lu-faq__body details > p {
  margin: 0 0 var(--sp-5);
  max-width: 64ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-body);
}

/* 答案里的链接沿用正文链接样式，但要能一眼看出是链接 */
.lu-faq__body details > p a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 答案里的小列表（例如退款条件） */
.lu-faq__body details > ul {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  max-width: 64ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-body);
}

.lu-faq__body details > ul li {
  margin-bottom: var(--sp-1);
}

/* ===========================================================================
 * 5. 移动端
 * =========================================================================== */

@media (max-width: 767px) {
  .lu-faq__aside {
    /* 手机上左侧导航占地方又不好点，直接不出（模板里仍有完整列表靠锚点可达） */
    display: none;
  }

  .lu-faq__body > h2 {
    margin-top: var(--sp-7);
  }

  .lu-faq__body summary {
    padding: var(--sp-4) 0;
    font-size: var(--fs-body-lg);
  }
}