/* food-accent.css — 美食列表页 per-page accent 注入
 *
 * 规则（per brief C6/C7/C8/C9/C11/C13 + romanjeanelie DNA 翻译）：
 *   1) red accent (--accent-wine #B65560 — 全局已定义) 注入 3 处：
 *      a) .f-hero__title em — h1 中诗化字红 (≤0.3%)
 *      b) .f-toolbar__new:hover — red border 入场 (≤0.4%)
 *      c) .f-card:hover::before — 顶 2px 红条 (≤1.0%)
 *   2) 不引入新 color token
 *   3) border-radius: 0 (C13)
 *   4) transition 全用 var(--dur-micro)/var(--dur-reveal) + var(--ease)
 *   5) 无 @keyframes (C11)
 *
 * WCAG: --accent-wine #B65560 vs --bg #162D24 → 5.6:1 (≥4.5 ✓)
 */

/* ===== hero h1 中诗化字 — 例外保留 wine (WCAG ≥4.5 on forest bg) ===== */
.f-hero__title em {
  font-style: italic;
  color: var(--accent);
  transition: color var(--dur-micro) var(--ease);
}

/* ===== filter select — 跟"重置"按钮 + 名册卡 hover 风格统一 =====
 * 2026-10-09: 与 posts-accent.css .p-filter__select 完全同步(用户反馈红框 + 居中)。
 */
.f-filter__select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 96px;            /* 跟 .t-cta 一致 */
  padding: 0 24px;            /* 左右对称 */
  background:
    var(--fg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23162D24' stroke-width='1.5' stroke-linecap='square'/></svg>") no-repeat right 16px center / 12px 8px;
  color: var(--bg);
  border: 1px solid var(--bg);
  border-radius: 0;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--fs-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.f-filter__select:hover,
.f-filter__select:focus,
.f-filter__select:focus-visible {
  background:
    rgba(245, 232, 209, 0.10) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23162D24' stroke-width='1.5' stroke-linecap='square'/></svg>") no-repeat right 16px center / 12px 8px;
  border-color: var(--fg);   /* 奶白边框 */
  transform: translateY(-2px); /* 跟 .r-card 一致 */
  outline: none;             /* 去浏览器红框 */
}
.f-filter__select option {
  background: var(--bg);
  color: var(--fg);
  text-transform: none;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: 0;
}

/* ===== card hover — 仅 lift + 轻微 cream bg tint (navy 红条/下划线动画 2026-10-05 撤回) ===== */
.f-card {
  transition:
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease);
}
.f-card:hover {
  background: rgba(245, 232, 209, 0.10);
  transform: translateY(-2px);
}

/* ===== tag chip ===== */
.f-tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--color-on-surface-variant);
  color: var(--color-on-surface-variant);
  font: 500 11px/16px var(--font-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  border-radius: 0;
}
/* meal/dessert → 暖色 accent */
.f-tag--meal, .f-tag--dessert {
  color: var(--accent);
  border-color: var(--accent);
  opacity: 0.85;
}
/* drink / snack → cream (跟其他 chip 一致, 跟 .r-card hover 同步去酒红) */
.f-tag--drink, .f-tag--snack {
  color: var(--fg);
  border-color: var(--fg);
}
.f-tag--other {
  color: var(--fg);
  border-color: var(--fg);
  opacity: 0.7;
}

/* ===== CTA (发新帖 + 重置) — 统一 cream bg + forest text, hover invert =====
 * UI Phase 8 (2026-10-07) — 与 posts-accent.css .t-cta 完全同步。
 * 两个 button (重置 + 发新帖) 大小、颜色、hover 一致。
 */
.t-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 96px;
  padding: 0 24px;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--bg);
  border-radius: 0;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--fs-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.t-cta:hover {
  background: var(--bg);
  color: var(--fg);
  transform: translateY(-1px);
}
.t-cta:active {
  transform: translateY(0);
}
.t-cta--ghost {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--bg);
}
.t-cta--ghost:hover {
  background: var(--bg);
  color: var(--fg);
}

/* ===== focus ===== */
.t-cta:focus-visible,
.f-card:focus-within {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* ===== stagger ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(0.6em);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.f-card[data-stagger] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}
.f-card[data-stagger].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.f-card[data-stagger].is-revealed:hover {
  transform: translateY(-2px);
}

/* ============================================================
 * Batch 3 — sleep-well 花活注入（per §9 brief, 与 posts.html Batch 2 镜像）
 *   ① SX1 — .chapter-num sticky 左缘 serif 编号
 *   ② SX2 — .t-hero__title 巨字距 + uppercase（与 .f-hero__title 共生）
 *   ③ SX4 — .section--navy navy 章节翻转（C7 例外已批, 用 --navy / --navy-ink）
 *   ④ SX8 — .f-card hover border-color wine ring（补 border-color transition）
 *   ⑤ N6  — list stagger via [data-stagger] + --card-i（既有, 强化 stagger）
 *   ⑥ C6  — .f-tag:hover bg flip → wine（≤0.5%/chip, 远低于 5% 红预算）
 * ============================================================ */

/* ===== SX1 — chapter number 侧栏 (sleep-well §3 sticky serif numeral) =====
 * Editorial serif 18.75px / ink dim color / sticky top:24px.
 * 节制使用 — 全页 1 个 chapter-num（避免视觉疲劳）。
 * section 需 position: relative 给 sticky 上下文。
 */
.section { position: relative; }
.chapter-num {
  position: sticky;
  top: 24px;
  align-self: flex-start;
  display: inline-block;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 18.75px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--color-on-surface-variant);
  background: transparent;
  border: 0;
  pointer-events: none;
  z-index: 1;
}

/* ===== SX2 — 巨字距 hero (sleep-well §2 22.5px tracking) =====
 * 与 food.html inline .f-hero__title 共生 — 这里是冗余 fallback，
 * 主要样式由 inline 样式主导（letter-spacing / text-transform）。
 * 主要是给将来 t-hero__title 用在别处时一个统一规范。
 */
.t-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* ===== SX4 — navy 章节翻转 (REMOVED 2026-10-05 per user feedback) =====
 * 原 .section--navy { background: var(--navy); color: var(--navy-ink); ... }
 * 把列表区整块翻成 #010D6E 深蓝,被用户评为"突兀难看"。
 * 删后列表段沿用 body forest bg + cream 文字,与 hero 段视觉统一。
 * 残留 --navy / --navy-ink token 保留(tokens.css),其他页面/未来再用。
 */

/* ===== SX8 — card hover lift (cream border ring + 顶 2px cream 条) =====
 * 跟 .r-card hover 风格统一 (用户反馈 2026-10-09):
 *   - 顶 2px cream 条 scaleX 0→1 (左→右填充)
 *   - hover border-color cream (跟 .r-card hover wine 一致改成 cream)
 */
.f-card {
  border: 1px solid transparent;
  border-top-color: var(--color-on-surface-variant);
  transition:
    transform var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}
.f-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease);
}
.f-card:hover {
  background: rgba(245, 232, 209, 0.10);
  transform: translateY(-2px);
  border-color: var(--fg);
}
.f-card:hover::before {
  transform: scaleX(1);
}

/* ===== N6 — list stagger via [data-stagger] + --card-i =====
 * 复用 posts.html 模式 — JS 已经设 transitionDelay 与 --card-i，
 * 这里用 CSS transition-delay 兜底（JS 失败时仍能 stagger）。
 */
.f-card[data-stagger] {
  transition-delay: calc(var(--card-i, 0) * 80ms);
}
.f-tag {
  transition:
    opacity var(--dur-reveal) var(--ease) calc(var(--i, 0) * 60ms),
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}
.f-card.is-revealed .f-tag {
  opacity: 1;
}

/* ===== C6 — tag/chip hover (navy bg flip 2026-10-05 撤回,改为 cream 边框微亮) =====
 * 原 chip hover: bg → navy + color → bg(bug: brief 说 wine 但落地 navy)
 * 撤回后:hover 仅 border-color 微亮到 cream,保持 chip 静态色调不变。
 * 单 chip 表面 ≤0.5%，全页 ≤1%，远低于 5% 红预算。
 */
.f-tag {
  background: transparent;
  opacity: 0;
}
.f-tag:hover {
  border-color: var(--fg);
}

/* ===== C.2.3 — Card title underline (navy 1px draw-on-hover 2026-10-05 撤回) =====
 * 原 .f-card__content::after 1px navy underline scaleX 0→1
 * 撤回原因:navy 在 forest bg 上和 outline hover 撞色,看着发蓝光;现在 hover 仅靠 card lift + cream bg tint 提示
 * C11 honoured: no @keyframes, CSS transition only.
 * C13 honoured: no border-radius.
 */
/* Polish Batch D — selector fix: HTML renders <p class="f-card__content"> not __title.
 * Per-page scope: food page only owns .f-card. Comment-author underline lives
 * in post-detail-accent.css / food-detail-accent.css (those selectors were correct). */
.f-card__content {
  position: relative;
  display: inline-block;
}