/* 基礎排版。只設全域基調，版面細節等 codify 階段依 specs 逐區寫。 */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-text);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

h1, h2, h3, h4, h5, h6,
.site-title, .entry-title {
  font-family: var(--font-heading);
  color: var(--text);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-display);   /* 2026-10-03：標題家族只載 600，全站標題一律 600 */
}

/* 🔴 把瀏覽器與 Astra 的預設字重壓回尺度內。這一段不能刪。
   ────────────────────────────────────────────────
   字型只載了 200／300／500。要求 600 或 700 時瀏覽器不會退回 500，
   它會**自己合成偽粗體**：整個字面加粗、內白填掉，中文會糊成一團。
   2026-09-18 實測（把同一句話畫進 canvas 數不透明像素）：
     Noto Sans TC「本商品提供七天鑑賞期」 500 → 7641 墨　700 → 8603 墨
   多出來的那 12% 就是合成出來的。

   兩個來源，都不在我們的檔案裡，所以看 CSS 是看不出來的：
     700 ← 瀏覽器對 <strong>／<b> 的預設
     600 ← Astra 給 h1–h6 的規則（.entry-content :where(h1..h6)，特異性 0,1,0）
   後者要用 :is() 寫成 (0,1,1) 才蓋得過——用 :where() 會變成 0，沒有用。 */
strong, b, th, dt { font-weight: var(--fw-em); }   /* 黑體 700；標題家族的元素要另外明寫 --fw-display */

.entry-content :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--fw-display); }
/* 標題裡的 strong／b 跟著標題字重（宋體沒有 700）。 */
:is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }

a { color: var(--accent); }
a:hover, a:focus { color: var(--text); }

/* 數字與英文用 Cormorant，讓 20.8g／NT$196 有份量。
   🔴 必須開等高數字（lining figures）。Cormorant Garamond 預設是舊式數字，
   「1」會被寫成沒有襯線的豎線、看起來像大寫 I，「100%」像「IOO%」。
   價格有 NT$ 與多位數當脈絡還讀得出來，但「1 年」「1:1」這種孤立數字會直接誤讀。 */
.figure, .price, .woocommerce-Price-amount, .kicker {
  font-family: var(--font-figure); font-weight: var(--fw-fig);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* 鍵盤焦點必須看得見（驗收 #5） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 觸控目標最小 44×44（驗收 #5） */
@media (max-width: 921px) {
  .main-navigation a,
  .ast-header-break-point .main-header-menu a,
  .woocommerce a.button,
  .woocommerce button.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* 螢幕閱讀器專用（補標題層級用） */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 🔴 A 案的「平滑捲到頁尾」。
   導覽的「聯絡我們」是同頁錨點 #contact（頁尾），沒有這一行就是硬跳。
   scroll-padding-top 是給 sticky 標頭留的位置——否則錨點目標會躲在標頭底下。
   prefers-reduced-motion 的區塊會把它改回 auto（見下面）。 */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* 尊重使用者的動態偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    /* 🔴 delay 也要清掉。只壓時長不清延遲的話，帶 animation-delay 的元素
       仍然會先停在起始狀態那麼久——對 reduce 使用者就是「畫面卡住」。 */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}