/* ===========================================================================
 * 政策页（page-templates/legal.php）
 * ---------------------------------------------------------------------------
 * 只在 Page Template = "Legal / Policy page" 的页面上加载（见 inc/assets.php）。
 *
 * 服务 5 篇长文：Shipping & Delivery / Returns & Refunds / Privacy Policy /
 * Terms of Service / Cookie Policy。文案见项目根 `茶叶外贸站-政策页文案.md`。
 *
 * 版面：面包屑 → 眉标 + H1 → [目录 260 | 正文 780] → 底部联系块
 *     桌面内容宽 1200（--container），正文行宽 780（--container-narrow，
 *     Token 里注释就写着「长文（政策页 / Journal 正文）」）。
 *
 * ★ 为什么正文行宽要卡 780 而不是铺满 1200
 *   15px 字体在 780px 上大约 88 个字符一行，接近长文阅读的舒适上限；
 *   铺到 1200px 会到 130+ 字符，眼睛回行容易串行。
 *
 * ★ Terms 有 18 个小节，目录由模板从正文 <h2> 自动生成（不手写）。
 *   本文件只负责目录的**样子**，不负责内容。
 * =========================================================================== */

/* ===========================================================================
 * 0. 页面外框
 * =========================================================================== */

.lu-legal {
  display: block;
  width: 100%;
  max-width: var(--bp-desktop);
  margin-inline: auto;
  padding-inline: var(--page-margin-mobile);
  padding-bottom: var(--sp-8);
}

@media (min-width: 768px) {
  .lu-legal {
    padding-inline: var(--page-margin-desktop);
  }
}

/* ===========================================================================
 * 1. 面包屑 + 页头
 * =========================================================================== */

.lu-legal__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-block: 28px 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--fg-muted);
}

.lu-legal__crumb {
  color: var(--fg-muted);
  text-decoration: none;
}

.lu-legal__crumb:hover {
  color: var(--fg-primary);
}

.lu-legal__crumb--current {
  color: var(--fg-faint);
}

.lu-legal__crumb-sep {
  color: var(--fg-faint);
}

.lu-legal__head {
  padding-block: var(--sp-5) var(--sp-6);
}

.lu-legal__eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lu-legal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
}

/* ===========================================================================
 * 2. 两栏：目录 + 正文
 * ---------------------------------------------------------------------------
 * 没有目录的页面（小节 < 4）走单栏，正文居中 —— 目录栏不存在时不该留空。
 * =========================================================================== */

.lu-legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--two-col-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  /* 260 + 56 + 780 = 1096，居中后左右各余 52，不铺满 1200 是有意的 */
  .lu-legal__grid--with-toc {
    grid-template-columns: 260px minmax(0, var(--container-narrow));
    gap: 56px;
    justify-content: center;
  }

  .lu-legal__grid:not(.lu-legal__grid--with-toc) > .lu-legal__prose {
    max-width: var(--container-narrow);
    margin-inline: auto;
  }
}

/* ===========================================================================
 * 3. 正文排版
 * ---------------------------------------------------------------------------
 * 正文是我们用脚本生成的语义 HTML（h2 / h3 / p / ul / ol / table），
 * 所以选择器都挂在 .lu-legal__prose 下，不会外溢到页头页脚。
 * =========================================================================== */

.lu-legal__prose {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-body);
  /* 长文里禁止浏览器自作聪明断词 */
  overflow-wrap: break-word;
}

.lu-legal__prose > :first-child {
  margin-top: 0;
}

.lu-legal__prose > :last-child {
  margin-bottom: 0;
}

/* —— 段落 —— */

.lu-legal__prose p {
  margin: 0 0 var(--sp-4);
}

/* —— 生效日期 / 最后更新：模板外的第一段小字 —— */

.lu-legal__prose .lu-legal__meta {
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: var(--bw-hairline) solid var(--border-default);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-muted);
}

.lu-legal__prose .lu-legal__meta strong {
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}

/* —— 小节标题 ——
 * h2 用 --fs-h3（24px）而不是 --fs-h2（32px）：这是 780px 宽的长文，
 * 32px 的衬线标题在小节密集的 Terms 里会喧宾夺主，把 H1 的权重稀释掉。
 * 每条 h2 上方一条 hairline，便于在 18 个小节里扫读定位。
 */

.lu-legal__prose h2 {
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-5);
  border-top: var(--bw-hairline) solid var(--border-soft);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
  /* 从目录跳转过来时，标题不要紧贴视口顶端（会被 sticky header 盖住） */
  scroll-margin-top: 96px;
}

/* 第一个 h2 紧跟在 meta 行后面，那条 hairline 已经有 meta 的 border 了 */
.lu-legal__prose .lu-legal__meta + h2,
.lu-legal__prose > h2:first-child {
  margin-top: var(--sp-6);
  padding-top: 0;
  border-top: 0;
}

.lu-legal__prose h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
  scroll-margin-top: 96px;
}

/* —— 列表 —— */

.lu-legal__prose ul,
.lu-legal__prose ol {
  margin: 0 0 var(--sp-4);
  padding-inline-start: var(--sp-5);
}

.lu-legal__prose li {
  margin-block: var(--sp-2);
}

.lu-legal__prose li > ul,
.lu-legal__prose li > ol {
  margin-block: var(--sp-2) 0;
}

.lu-legal__prose ul {
  list-style: disc outside;
}

.lu-legal__prose ol {
  list-style: decimal outside;
}

/* —— 表格（配送方式 / 数据类别 / 处理者清单）—— */

.lu-legal__prose table {
  width: 100%;
  margin: 0 0 var(--sp-5);
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}

.lu-legal__prose th,
.lu-legal__prose td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--bw-hairline) solid var(--border-soft);
}

.lu-legal__prose th {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom-color: var(--border-default);
}

.lu-legal__prose td {
  color: var(--fg-body);
}

.lu-legal__prose tbody tr:last-child td {
  border-bottom: 0;
}

/* —— 行内元素 —— */

.lu-legal__prose a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.lu-legal__prose a:hover {
  color: var(--fg-primary);
}

.lu-legal__prose strong {
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

.lu-legal__prose em {
  font-style: italic;
}

.lu-legal__prose code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--bg-surface-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--fg-primary);
}

.lu-legal__prose blockquote {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: var(--bw-rule) solid var(--border-default);
  color: var(--fg-muted);
}

.lu-legal__prose hr {
  margin: var(--sp-6) 0;
  border: 0;
  border-top: var(--bw-hairline) solid var(--border-soft);
}

.lu-legal__prose img {
  max-width: 100%;
  height: auto;
}

/* ===========================================================================
 * 4. 目录
 * =========================================================================== */

.lu-legal__toc {
  position: sticky;
  top: var(--sp-8);
  /* 18 个小节在矮屏上会超出视口，自己滚 */
  max-height: calc(100vh - var(--sp-8) * 2);
  overflow-y: auto;
  padding-right: var(--sp-3);
}

.lu-legal__toc-label {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.lu-legal__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: lu-toc;
}

.lu-legal__toc-list li {
  margin-block: var(--sp-1);
  counter-increment: lu-toc;
}

.lu-legal__toc-list a {
  display: block;
  padding-block: var(--sp-1);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.lu-legal__toc-list a:hover,
.lu-legal__toc-list a:focus-visible {
  color: var(--fg-primary);
}

/* ===========================================================================
 * 5. 底部联系块
 * =========================================================================== */

.lu-legal__help {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--bw-hairline) solid var(--border-default);
}

.lu-legal__help-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-primary);
}

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

.lu-legal__help-text a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lu-legal__help-text a:hover {
  color: var(--fg-primary);
}

/* ===========================================================================
 * 6. 移动端
 * =========================================================================== */

@media (max-width: 767px) {
  .lu-legal__crumbs {
    padding-block: var(--sp-4) 0;
  }

  .lu-legal__head {
    padding-block: var(--sp-4) var(--sp-5);
  }

  /* 目录不再吸附，退化成正文前面的一小段导航 */
  .lu-legal__toc {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    padding-bottom: var(--sp-4);
    border-bottom: var(--bw-hairline) solid var(--border-soft);
  }

  /* 3 文字号在 335px 上放不下 15px 的三列表，降到 11px 仍可读且不用横滚 */
  .lu-legal__prose table {
    font-size: var(--fs-caption);
    line-height: 1.5;
  }

  .lu-legal__prose th,
  .lu-legal__prose td {
    padding: var(--sp-2);
  }

  .lu-legal__prose h2 {
    scroll-margin-top: 72px;
  }
}