/* food-new-accent.css — 发美食帖页 per-page accent 注入
 *
 * 规则（per brief C6/C7/C8/C9/C11/C13 + romanjeanelie DNA 翻译）：
 *   1) red accent (--accent-wine #B65560) 注入 3 处：
 *      a) .fn-hero__title em — h1 首字红 (≤0.3%)
 *      b) .fn-form__input/textarea/select:focus — 红色边框 (focus-only)
 *      c) .fn-form__submit:hover / .fn-form__req — submit 红边 + 必填星号 (≤0.5%)
 *   2) 不引入新 color token
 *   3) border-radius: 0 (C13)
 *   4) transition 全用 var(--dur-micro) + 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) ===== */
.fn-hero__title em {
  font-style: italic;
  color: var(--accent-wine);
  transition: color var(--dur-micro) var(--ease);
}

/* ===== CTA (submit + cancel) ===== */
.t-cta {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--bg);
  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:
    border-color var(--dur-micro) var(--ease),
    background-color var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease),
    transform var(--dur-micro) var(--ease);
}
.t-cta:hover:not(:disabled) {
  border-color: var(--accent-wine);
  transform: translateY(-1px);
}
.t-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.t-cta--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
.t-cta--ghost:hover:not(:disabled) {
  color: var(--accent-wine);
  border-color: var(--accent-wine);
}

/* ===== focus ===== */
.t-cta:focus-visible,
.fn-form__input:focus-visible,
.fn-form__textarea:focus-visible,
.fn-form__select:focus-visible,
.fn-form__file:focus-visible {
  outline: 2px solid var(--accent-wine);
  outline-offset: 2px;
}

/* ===== file input (single-image upload, optional) =====
 * 2026-10-11 polish: native file picker button text was rendering huge (16px body
 * font). Custom ::file-selector-button to match .t-cta look (cream bg + forest text,
 * utility-size uppercase). Hint right-aligned via margin-left: auto since
 * .fn-form__meta uses space-between (with only the hint visible, single child
 * defaults to start/left).
 */
.fn-form__file {
  width: 100%;
  padding: 8px 12px;
  font: 14px/1.4 var(--font-body);
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--color-on-surface-variant);
  border-radius: 0;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease);
}
.fn-form__file:hover,
.fn-form__file:focus,
.fn-form__file:focus-visible {
  border-color: var(--accent-wine);
  outline: none;
}
.fn-form__file::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--fs-utility);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  border: 1px solid var(--bg);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease),
              color var(--dur-micro) var(--ease);
}
.fn-form__file::file-selector-button:hover {
  background: var(--bg);
  color: var(--fg);
}
.fn-form__hint {
  font-family: var(--font-utility);
  font-size: var(--fs-utility);
  color: var(--color-on-surface-variant);
  letter-spacing: 0.04em;
  margin-left: auto;     /* force right edge in space-between parent */
  text-align: right;
}
.fn-image-preview {
  margin-top: 12px;
  border: 1px solid var(--color-on-surface-variant);
}
.fn-image-preview[hidden] { display: none; }
.fn-image-preview__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  border-radius: 0;
}

/* ===== N2 — hero sinks -4px when form input focused =====
 * :focus-within on .fn-main fires when any descendant input/select/textarea
 * is focused. Pure CSS — no JS observer needed. C11 honoured: transition
 * only, no @keyframes. C13 honoured: no border-radius introduced.
 * Mirror of post-new.html (same form page archetype).
 */
.fn-hero {
  transition: transform var(--dur-micro) var(--ease);
}
.fn-main:focus-within .fn-hero {
  transform: translateY(-4px);
}

/* ===== C2 — theme-food body + navy overlay on place-name input =====
 * theme-food.css (foundation) redefines --wine-overlay-04/12/20/60 under
 * body.theme-food (now wine rgba (defaults from tokens.css)). We apply --wine-overlay-04
 * to the place-name input as a soft background wash — signals "this is
 * the defining field of a food post" without changing focus/hover.
 *
 * C6: 0.3% surface (single input field, focus/empty state). Well under 5%.
 * C13: border-radius: 0 preserved.
 * C7: 3-color discipline maintained — wine stays wine's hue swap, not a new color.
 */
#fn-placeName {
  background-color: var(--wine-overlay-04);
}

/* ===== C.2.3 — Card title navy underline draw-on-hover =====
 * No cards on this page; rules included for selector parity with the
 * other per-page accent CSS files (CSS just won't match anything here).
 * 1px navy line draws from left under card title on hover.
 * transform-origin: left; scaleX 0→1; CSS transition does the lift.
 * C11 honoured: no @keyframes, CSS transition only.
 * C13 honoured: no border-radius.
 */
.p-card__title, .f-card__title, .pd-comment__author, .fd-comment__author {
  position: relative;
  display: inline-block;
}
.p-card__title::after, .f-card__title::after, .pd-comment__author::after, .fd-comment__author::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: var(--accent-wine);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease);
}
.p-card:hover .p-card__title::after,
.f-card:hover .f-card__title::after,
.pd-comment:hover .pd-comment__author::after,
.fd-comment:hover .fd-comment__author::after {
  transform: scaleX(1);
}