/* ==========================================================================
   LUYUN 麓云茶号 · 全局覆盖层
   --------------------------------------------------------------------------
   这一层只做三件事：
     1. 把 Blocksy 的默认视觉（下划线链接、蓝色焦点环、圆角按钮、投影卡片）
        改成设计稿的克制版本
     2. 提供设计稿反复用到的排版工具类（.lu-eyebrow / .lu-container / …）
     3. 兜住 WordPress 核心块（Gutenberg）在内容页里的默认样式

   ★ 凡是能用 --theme-* 变量解决的，写在 02 blocksy-map.css 里，不要写在这里。
     这一层只处理「Blocksy 没有变量可调、必须改选择器」的部分。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页面基底
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-page);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* 中英混排时给英文一点呼吸 */
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   2. 链接：默认无下划线，hover 才出 —— 设计稿的克制感主要来自这条
   -------------------------------------------------------------------------- */
a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-primary); }

/* 正文段落内的链接保留一条极细下划线，否则长文里认不出可点 */
.lu-prose a,
.entry-content p a,
.wp-block-post-content p a,
.lu-policy a {
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
.lu-prose a:hover,
.lu-policy a:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   3. 焦点可见性
   —— Blocksy / WP 默认的蓝色焦点环与纸色底冲突，统一成琥珀。
      这条直接影响键盘导航与 WCAG AA 合规，别删。
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}
/* 鼠标点击时不显焦点环（只在键盘导航时显），减少视觉噪音 */
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   4. 容器与栅格
   -------------------------------------------------------------------------- */
.lu-container {
  width: 100%;
  max-width: var(--bp-desktop);
  margin-inline: auto;
  padding-inline: var(--page-margin-mobile);
}
@media (min-width: 768px) {
  .lu-container { padding-inline: var(--page-margin-desktop); }
}
.lu-container--narrow { max-width: var(--container-narrow); }

/* 两栏（主列 + 侧列）：购物车 / 结账 / 商品详情共用 */
.lu-two-col {
  display: grid;
  gap: var(--two-col-gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .lu-two-col { grid-template-columns: minmax(0, 1fr) var(--sidebar-col); }
  .lu-two-col--sidebar-left { grid-template-columns: var(--sidebar-col) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   5. 排版工具类
   —— .lu-eyebrow / .lu-body / .lu-price-lg 等基础类定义在 01 tokens.css 里，
      这里只补「设计稿反复出现的组合」，避免页面里堆 inline style。
   -------------------------------------------------------------------------- */
.lu-section {
  padding-block: var(--section-rhythm-min);
}
@media (min-width: 768px) {
  .lu-section { padding-block: var(--section-rhythm-max); }
}

/* 分区标题：眉标 + 主标（设计稿每个 section 都是这个组合） */
.lu-section-head { margin-bottom: var(--sp-6); }
.lu-section-head .lu-eyebrow { display: block; margin-bottom: var(--sp-2); }

/* 编辑性引用线 —— 3px 竖线，只用于长文引言，绝不用于 UI 边框 */
.lu-rule {
  border-left: var(--bw-rule) solid var(--c-amber);
  padding-left: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-primary);
}

/* 长文正文（政策页 / Journal） */
.lu-prose {
  max-width: var(--container-narrow);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-body);
}
.lu-prose h2 {
  margin-block: var(--sp-7) var(--sp-4);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.lu-prose h3 {
  margin-block: var(--sp-6) var(--sp-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
.lu-prose p { margin-block: 0 var(--sp-4); }
.lu-prose ul, .lu-prose ol { margin-block: 0 var(--sp-4); padding-left: var(--sp-5); }
.lu-prose li { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   6. 空态（购物车空 / 无筛选结果 / 404 三处共用）
   -------------------------------------------------------------------------- */
.lu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-8);
  text-align: center;
}
.lu-empty__icon {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: var(--r-full);
  background: var(--c-card-warm);
  color: var(--fg-accent);
}
.lu-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-primary);
}
.lu-empty__text {
  max-width: 42ch;
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   7. 护城河：Gutenberg 内容块的默认样式收敛
   —— 政策页与 Journal 用区块编辑器写，核心块的默认间距/字号偏大。
   -------------------------------------------------------------------------- */
.entry-content > * + * { margin-block-start: var(--sp-5); }
.entry-content img { border-radius: var(--r-md); }
.entry-content blockquote {
  border-left: var(--bw-rule) solid var(--c-amber);
  padding-left: var(--sp-5);
  font-family: var(--font-display);
  color: var(--fg-primary);
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}
.entry-content th,
.entry-content td {
  padding: var(--sp-3);
  border-bottom: var(--bw-hairline) solid var(--border-soft);
  text-align: left;
}
.entry-content th { font-weight: var(--fw-semibold); color: var(--fg-primary); }

/* --------------------------------------------------------------------------
   8. 无障碍
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}