/* ============================================================
   靈科商行 Site Enhancements
   v1.0 — 字體升級、次輔色（酒紅/深綠）、動態微互動、留白優化
   ============================================================ */

/* --- Google Fonts fallback @import（HTML head 有 link 時這行會略過）--- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@500;700;900&display=swap');

/* ============================================================
   0. 全站 Muted 對比升級 — WCAG AAA
   —— 必須放在 enhancements.css（最後載入）才能覆蓋 dist/style.css
   —— 把 Tailwind .text-gray-400 (#9CA3AF, ~6.3:1) 調到 #B0B5C0 (~7.5:1)
   ============================================================ */
.text-gray-400 {
  color: #B0B5C0;
}
:root {
  --text-muted: #B0B5C0;
}

/* ============================================================
   1. 次輔色 tokens（酒紅 Bordeaux / 深綠 Cellar Green）
   ============================================================ */
:root {
  --accent-wine: #7a1f24;
  --accent-wine-dark: #5a1518;
  --accent-wine-light: #a03038;
  --accent-wine-glow: rgba(122, 31, 36, 0.22);
  --accent-wine-border: rgba(160, 48, 56, 0.35);
  --accent-wine-soft: rgba(122, 31, 36, 0.10);

  --accent-green: #264d3b;
  --accent-green-light: #3a6d58;
  --accent-green-border: rgba(58, 109, 88, 0.35);
  --accent-green-soft: rgba(58, 109, 88, 0.10);
}

/* ============================================================
   2. 排版：Noto Serif TC 作標題主字、Noto Sans TC 作內文
   ============================================================ */
html body {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang TC", "Hiragino Sans TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html h1, html h2, html h3, html h4,
html .section-title-line,
html .promise-title,
html .lk-core-card__title,
html #hero h1 {
  font-family: 'Noto Serif TC', 'PingFang TC', 'Hiragino Sans TC',
               'Microsoft JhengHei', serif;
  letter-spacing: 0.8px;
}

h1 { font-weight: 900; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

/* Hero 標題加強層級
   用 html[data-page] 提升 specificity 至 (0,1,1,2)，與 style.css 內
   per-page 的 html[data-page="xxx"] #hero h1 打平；本檔載入次序在最後，
   靠來源順序壓過該批 per-page 規則（部分殘留 font-weight:700）。 */
html[data-page] #hero h1 {
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 4px 24px rgba(0,0,0,.55);
}

/* Section 小標誌加字距 */
.lk-hero-eyebrow,
.section-subtitle {
  letter-spacing: 0.4px;
}

/* ============================================================
   3. 卡片留白（舒張）
   —— 用提升 specificity 取代 !important，避免層疊衝突。
   ============================================================ */
.lk-core-card .lk-core-card__content                       { padding: 1.6rem 1.7rem 1.7rem; }
.lk-core-card.lk-core-card--compact .lk-core-card__content { padding: 1.4rem 1.5rem 1.5rem; }
section .promise-card                                       { padding: 2rem 1.9rem; }
section .testimonial-card                                   { padding: 2.25rem 2rem; }
section .section-header                                     { margin-bottom: 3rem; }

@media (max-width: 768px) {
  .lk-core-card .lk-core-card__content                       { padding: 1.2rem; }
  .lk-core-card.lk-core-card--compact .lk-core-card__content { padding: 1.15rem; }
  section .promise-card                                       { padding: 1.5rem; }
  section .testimonial-card                                   { padding: 1.75rem; }
}

/* ============================================================
   4. Section 標題下劃線加入漸層（琥珀 → 酒紅）
   ============================================================ */
.section-title-line {
  position: relative;
  display: inline-block;
  padding-bottom: 0.65rem;
}
.section-title-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--primary-color) 0%,
    var(--primary-color-light) 45%,
    var(--accent-wine-light) 100%);
  border-radius: 3px;
}

/* ============================================================
   5. Pill / Badge 細節：奇偶交替加入酒紅邊框
   ============================================================ */
.lk-core-pill {
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.lk-core-pills .lk-core-pill:nth-child(2n),
.lk-core-pill:nth-child(2n) {
  border-color: var(--accent-wine-border);
}
.lk-core-pills .lk-core-pill:nth-child(2n) i,
.lk-core-pill:nth-child(2n) i {
  color: var(--accent-wine-light);
}
.lk-core-pill:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
}

/* Trust badge 互動 */
.trust-badges span:not(.dot) {
  transition: color .3s ease, transform .3s ease;
}
.trust-badges span:not(.dot):hover {
  color: var(--primary-color-light);
  transform: translateY(-1px);
}

/* ============================================================
   6. 動態：淡入、卡片 hover lift
   ============================================================ */
@keyframes lk-fade-in-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lk-whatsapp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* 首頁核心卡片級聯淡入 */
@media (prefers-reduced-motion: no-preference) {
  .lk-core-grid > .lk-core-card { animation: lk-fade-in-up .6s ease-out both; }
  .lk-core-grid > .lk-core-card:nth-child(1) { animation-delay: .05s; }
  .lk-core-grid > .lk-core-card:nth-child(2) { animation-delay: .12s; }
  .lk-core-grid > .lk-core-card:nth-child(3) { animation-delay: .18s; }
  .lk-core-grid > .lk-core-card:nth-child(4) { animation-delay: .24s; }
  .lk-core-grid > .lk-core-card:nth-child(5) { animation-delay: .30s; }
  .lk-core-grid > .lk-core-card:nth-child(6) { animation-delay: .36s; }
  .lk-core-grid > .lk-core-card:nth-child(7) { animation-delay: .42s; }
  .lk-core-grid > .lk-core-card:nth-child(8) { animation-delay: .48s; }

  .commitments-grid > .promise-card        { animation: lk-fade-in-up .6s ease-out both; }
  .commitments-grid > .promise-card:nth-child(1) { animation-delay: .05s; }
  .commitments-grid > .promise-card:nth-child(2) { animation-delay: .15s; }
  .commitments-grid > .promise-card:nth-child(3) { animation-delay: .25s; }
  .commitments-grid > .promise-card:nth-child(4) { animation-delay: .35s; }

  .testimonial-card                        { animation: lk-fade-in-up .6s ease-out both; }
  .testimonial-card:nth-child(1)           { animation-delay: .05s; }
  .testimonial-card:nth-child(2)           { animation-delay: .18s; }
  .testimonial-card:nth-child(3)           { animation-delay: .30s; }

  #hero .hero-cta-button.cta-primary {
    animation: lk-whatsapp-pulse 2.6s infinite;
  }
}

/* 卡片 hover 提升 */
section .promise-card,
section .testimonial-card {
  transition: transform .4s cubic-bezier(.4,0,.2,1),
              box-shadow .4s ease,
              border-color .4s ease;
}
section .promise-card:hover,
section .testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  border-color: rgba(217,119,6,.35);
}

/* CTA 按鈕進階 */
a.hero-cta-button,
button.hero-cta-button,
.hero-cta-button {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.hero-cta-button:hover {
  transform: translateY(-2px) scale(1.015);
}
.hero-cta-button.cta-primary:hover {
  box-shadow: 0 12px 28px rgba(37, 211, 102, .35);
}
.hero-cta-button.cta-secondary:hover {
  box-shadow: 0 12px 28px rgba(217, 119, 6, .35);
}
a.lk-solid-cta,
button.lk-solid-cta,
.lk-solid-cta {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.lk-solid-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(217,119,6,.38);
}
.lk-outline-cta {
  transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.lk-outline-cta:hover {
  transform: translateY(-2px);
}

/* ============================================================
   7. Testimonial 字母頭像（取代 stock photo）
   ============================================================ */
.lk-avatar-letter {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif TC', serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  border: 2px solid rgba(255,255,255,.14);
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  letter-spacing: 0;
}
.lk-avatar-letter--amber {
  background: linear-gradient(135deg, var(--primary-color-light) 0%, var(--primary-color-dark) 100%);
}
.lk-avatar-letter--wine {
  background: linear-gradient(135deg, var(--accent-wine-light) 0%, var(--accent-wine-dark) 100%);
}
.lk-avatar-letter--green {
  background: linear-gradient(135deg, var(--accent-green-light) 0%, var(--accent-green) 100%);
}

.lk-testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lk-testimonial-meta .lk-name {
  font-weight: 700;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.3px;
}
.lk-testimonial-tags {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .2rem;
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}
.lk-testimonial-tags .tag-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.lk-testimonial-tags .tag-role {
  color: var(--primary-color-light);
  font-weight: 600;
}

/* ============================================================
   8. Commitments 承諾卡：酒紅邊細節
   —— 提高 specificity，避免使用 !important
   ============================================================ */
.commitments-grid .promise-card:nth-child(2) .promise-badge {
  border-color: var(--accent-wine-border);
  color: #f3c1c5;
}
.commitments-grid .promise-card:nth-child(3) .promise-badge {
  border-color: var(--accent-green-border);
  color: #b5e0cc;
}

/* ============================================================
   9. 圖片稍微圓角統一 & 輕微 lift
   ============================================================ */
.lk-core-card__media img {
  transition: transform .6s cubic-bezier(.4,0,.2,1), filter .4s ease;
}
.lk-core-card:hover .lk-core-card__media img {
  filter: brightness(1.05) saturate(1.05);
}

/* 文末小註腳 box */
.lk-core-footnote__box {
  transition: border-color .3s ease, background .3s ease;
}
.lk-core-footnote__box:hover {
  border-color: rgba(217,119,6,.28);
  background: rgba(255,255,255,.06);
}

/* ============================================================
   10. 次要強調色：深勃艮第 / Claret
   —— 用於酒類品類卡片（紅酒 / 威士忌 / 茅台 / 洋酒），
       與主色琥珀金做視覺區隔，避免整站只有黑金單調感。
   ============================================================ */
.lk-core-card.lk-core-card--claret .lk-core-card__badge {
  background: linear-gradient(135deg, var(--accent-claret), var(--accent-claret-dark));
  border-color: var(--accent-claret-border);
  color: var(--accent-claret-text);
}
.lk-core-card.lk-core-card--claret .lk-core-card__badge i {
  color: var(--accent-claret-text);
}

/* ============================================================
   11. 博客詳情頁 — 統一字體、CTA 間距、Hero meta、Reading bar
   —— 高 specificity 覆蓋舊 per-page CSS 嘅不一致 h2/h3
   ============================================================ */

/* 11.1 Reading progress bar — 頂部進度條 */
.lk-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  z-index: 9999;
  transition: width 0.1s ease-out;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

/* 11.2 統一 prose-custom h2／h3／h4 樣式（覆蓋 per-page CSS） */
html[data-page^="blog-"] .lk-blog-article .prose-custom h2,
html[data-page^="blog-"] article.lk-blog-article .prose-custom h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 700;
  color: #ffffff;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 4px solid #f59e0b;
  scroll-margin-top: 110px;
}
@media (min-width: 768px) {
  html[data-page^="blog-"] .lk-blog-article .prose-custom h2,
  html[data-page^="blog-"] article.lk-blog-article .prose-custom h2 {
    font-size: 1.875rem;
  }
}

html[data-page^="blog-"] .lk-blog-article .prose-custom h3,
html[data-page^="blog-"] article.lk-blog-article .prose-custom h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: #fbbf24;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 110px;
}
@media (min-width: 768px) {
  html[data-page^="blog-"] .lk-blog-article .prose-custom h3,
  html[data-page^="blog-"] article.lk-blog-article .prose-custom h3 {
    font-size: 1.375rem;
  }
}

html[data-page^="blog-"] .lk-blog-article .prose-custom h4 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

html[data-page^="blog-"] .lk-blog-article .prose-custom p {
  line-height: 1.85;
  margin-bottom: 1rem;
}

/* Callout 內部 h2 不適用 border-left（callout 自帶 border） */
html[data-page^="blog-"] .lk-blog-callout h2,
html[data-page^="blog-"] .lk-blog-callout h3 {
  border-left: none !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
}

/* 11.3 Hero meta：手機 wrap 時更乾淨 */
html[data-page^="blog-"] #hero .hero-content > div.flex.flex-wrap {
  gap: 0.5rem 0.75rem;
  row-gap: 0.5rem;
}
@media (max-width: 640px) {
  html[data-page^="blog-"] #hero .hero-content > div.flex.flex-wrap {
    justify-content: flex-start;
    text-align: left;
    font-size: 0.8rem;
  }
  html[data-page^="blog-"] #hero .hero-content > div.flex.flex-wrap > .dot {
    display: none;
  }
  html[data-page^="blog-"] #hero .hero-content > div.flex.flex-wrap > span:not(.dot) {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(251, 191, 36, 0.18);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
  }
}

/* 11.4 文末「相關文章」(JS 注入) — mobile 也要見到 */
.lk-mobile-related {
  margin-top: 3rem;
  padding: 1.5rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 1rem;
}
.lk-mobile-related > h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  border-left: 4px solid #f59e0b;
  padding-left: 0.75rem;
}
.lk-mobile-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .lk-mobile-related__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.lk-mobile-related__grid a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 0.75rem;
  color: #d1d5db;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.lk-mobile-related__grid a:hover {
  border-color: rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  transform: translateY(-1px);
}
.lk-mobile-related__grid a i {
  color: #f59e0b;
}
@media (min-width: 1024px) {
  .lk-mobile-related {
    display: none; /* 桌面有側欄延伸閱讀 */
  }
}

/* 11.5 Prev / Next 文章導航 */
.lk-prev-next-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(75, 85, 99, 0.5);
}
@media (min-width: 768px) {
  .lk-prev-next-nav {
    grid-template-columns: 1fr 1fr;
  }
}
.lk-prev-next-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 0.875rem;
  color: #d1d5db;
  text-decoration: none;
  transition: all 0.2s ease;
}
.lk-prev-next-nav a:hover {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(30, 41, 59, 0.75);
}
.lk-prev-next-nav a > .lk-prev-next-nav__label {
  font-size: 0.75rem;
  color: #fbbf24;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.lk-prev-next-nav a > .lk-prev-next-nav__title {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
}
.lk-prev-next-nav a.lk-prev-next-nav--next {
  text-align: right;
}
.lk-prev-next-nav a.lk-prev-next-nav--next .lk-prev-next-nav__label {
  justify-content: flex-end;
}
.lk-core-card.lk-core-card--claret {
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.lk-core-card.lk-core-card--claret:hover {
  border-color: var(--accent-claret-light);
  box-shadow: 0 18px 40px var(--accent-claret-glow);
}
.lk-core-card.lk-core-card--claret .lk-core-card__mini li i.fa-star,
.lk-core-card.lk-core-card--claret .lk-core-card__mini li i.fa-circle-check {
  color: var(--accent-claret-light);
}

/* ============================================================
   11. Mega Menu 響應式優化
   —— 解決小桌面 (1024-1180px) 右邊溢出 + 平板可讀性
   —— 在窄桌面切換為單欄佈局，內容更舒展不擁擠
   ============================================================ */
/* 把定位錨點從小按鈕改成整條 navbar，讓子菜單右邊對齊 navbar 右邊（關於我們），
   而不是只對齊「回收項目」按鈕——避免子菜單看起來大幅偏左 */
#main-header > nav {
  position: relative;
}
#desktop-dropdown-container {
  position: static !important;
}
#desktop-dropdown-menu.mega-menu {
  /* 以 nav 為定位上下文，右邊對齊 nav 內容右邊（px-6 = 1.5rem 內距） */
  top: calc(100% - 0.5rem) !important;
  left: auto !important;
  right: 1.5rem !important;
  /* 安全限制，避免極小視窗時溢出 */
  max-width: calc(100vw - 3rem);
}

/* 1024-1180px：小型筆電 / iPad Pro 橫向，保留兩欄但縮窄 */
@media (min-width: 1024px) and (max-width: 1180px) {
  #desktop-dropdown-menu.mega-menu {
    width: min(600px, calc(100vw - 2rem)) !important;
    padding: 0.75rem !important;
  }
  #desktop-dropdown-menu.mega-menu .mega-grid {
    gap: 0.65rem;
  }
  #desktop-dropdown-menu.mega-menu .mega-group {
    padding: 0.5rem;
  }
  #desktop-dropdown-menu.mega-menu .mega-bottom {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
}

/* 1024-1100px：再往下時切換為單欄、字級稍降，避免 6 個項目擠在一起 */
@media (min-width: 1024px) and (max-width: 1100px) {
  #desktop-dropdown-menu.mega-menu .mega-grid {
    grid-template-columns: 1fr;
  }
  #desktop-dropdown-menu.mega-menu .mega-item-title {
    font-size: 0.88rem;
  }
}

/* ============================================================
   12. 鍵盤聚焦狀態 — 提升無障礙
   —— 為主要互動元素提供清楚的 focus-visible ring
   ============================================================ */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.mega-item:focus-visible,
.mobile-nav-link:focus-visible,
.dropdown-link:focus-visible {
  outline: 2px solid var(--primary-color-light);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   13. 統一按鈕設計系統 — Design Tokens
   —— 三層按鈕（primary / secondary / outline）共用一套尺寸與互動
   —— 既有 .hero-cta-button / .lk-solid-cta / .lk-outline-cta 收斂同步
   ============================================================ */
:root {
  /* 按鈕共用尺寸 */
  --btn-padding-y: 0.85rem;
  --btn-padding-x: 1.6rem;
  --btn-radius: 12px;
  --btn-font-weight: 700;
  --btn-min-height: 48px; /* 達 WCAG 2.5.5 的最小觸控目標 */
  --btn-transition: transform .25s ease, box-shadow .25s ease,
                    background-color .25s ease, border-color .25s ease,
                    color .25s ease;

  /* 主按鈕（琥珀金）— 對齊原 .lk-solid-cta：金底深字，貴金屬感 */
  --btn-primary-bg: #f59e0b;          /* amber-500（原 lk-solid 用 bg-amber-500） */
  --btn-primary-bg-hover: #b45309;    /* amber-700 */
  --btn-primary-fg: #111827;          /* gray-900 — 對齊原視覺 */
  --btn-primary-shadow: 0 10px 24px rgba(217, 119, 6, .35);

  /* 次按鈕（WhatsApp 綠 — 引導行動聯絡） */
  --btn-secondary-bg: var(--whatsapp-color);
  --btn-secondary-bg-hover: var(--whatsapp-color-dark);
  --btn-secondary-fg: #ffffff;
  --btn-secondary-shadow: 0 10px 24px rgba(37, 211, 102, .35);

  /* 邊框按鈕 — 對齊原 .lk-outline-cta：灰邊白字，hover 變琥珀 */
  --btn-outline-border: #4b5563;      /* gray-600（原 border-gray-600） */
  --btn-outline-border-hover: var(--primary-color-light);
  --btn-outline-fg: #ffffff;          /* 預設白字 */
  --btn-outline-fg-hover: #fcd34d;    /* hover 變淺琥珀（原 hover:text-amber-300） */
  --btn-outline-bg-hover: rgba(217, 119, 6, .08);
}

/* 共用基礎 */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1.25rem;            /* 對齊原 px-5 py-3 */
  min-height: var(--btn-min-height);
  border-radius: 9999px;                /* 對齊原 rounded-full */
  font-weight: 600;                     /* 對齊原 font-semibold */
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;        /* 對齊原 border 1px */
  cursor: pointer;
  transition: var(--btn-transition);
  user-select: none;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-primary-shadow);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
}
.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--btn-secondary-shadow);
}

.btn-outline {
  background: transparent;
  color: var(--btn-outline-fg);
  border-color: var(--btn-outline-border);
}
.btn-outline:hover {
  background: var(--btn-outline-bg-hover);
  border-color: var(--btn-outline-border-hover);
  color: var(--btn-outline-fg-hover);
  transform: translateY(-2px);
}

/* Disabled 狀態 */
.btn[disabled],
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-outline[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* 將舊類名收斂到新規範（不破壞現有 HTML） */
.hero-cta-button,
.lk-solid-cta {
  min-height: var(--btn-min-height);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.3px;
}

.lk-outline-cta {
  min-height: var(--btn-min-height);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.3px;
}
.lk-outline-cta:hover {
  transform: translateY(-2px);
  border-color: var(--btn-outline-border-hover);
  background: var(--btn-outline-bg-hover);
}

/* 行動裝置：手機優先觸控目標 */
@media (max-width: 480px) {
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline {
    width: 100%;
    padding: var(--btn-padding-y) 1.25rem;
  }
}


/* ============================================================
   11. 博客詳情頁 — 統一字體、CTA 間距、Hero meta、Reading bar
   —— 高 specificity 覆蓋舊 per-page CSS 嘅不一致 h2/h3
   ============================================================ */

/* 11.1 Reading progress bar — 頂部進度條 */
.lk-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  z-index: 9999;
  transition: width 0.1s ease-out;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

/* 11.2 統一 prose-custom h2／h3／h4 樣式（覆蓋 per-page CSS） */
html[data-page^="blog-"] .lk-blog-article .prose-custom h2,
html[data-page^="blog-"] article.lk-blog-article .prose-custom h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 700;
  color: #ffffff;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 4px solid #f59e0b;
  scroll-margin-top: 110px;
}
@media (min-width: 768px) {
  html[data-page^="blog-"] .lk-blog-article .prose-custom h2,
  html[data-page^="blog-"] article.lk-blog-article .prose-custom h2 {
    font-size: 1.875rem;
  }
}

html[data-page^="blog-"] .lk-blog-article .prose-custom h3,
html[data-page^="blog-"] article.lk-blog-article .prose-custom h3 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 600;
  color: #fbbf24;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 110px;
}
@media (min-width: 768px) {
  html[data-page^="blog-"] .lk-blog-article .prose-custom h3,
  html[data-page^="blog-"] article.lk-blog-article .prose-custom h3 {
    font-size: 1.375rem;
  }
}

html[data-page^="blog-"] .lk-blog-article .prose-custom h4 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

html[data-page^="blog-"] .lk-blog-article .prose-custom p {
  line-height: 1.85;
  margin-bottom: 1rem;
}

/* Callout 內部 h2 不適用 border-left（callout 自帶 border） */
html[data-page^="blog-"] .lk-blog-callout h2,
html[data-page^="blog-"] .lk-blog-callout h3 {
  border-left: none !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
}

/* 11.3 Hero meta：手機 wrap 時更乾淨 */
html[data-page^="blog-"] #hero .hero-content > div.flex.flex-wrap {
  gap: 0.5rem 0.75rem;
  row-gap: 0.5rem;
}
@media (max-width: 640px) {
  html[data-page^="blog-"] #hero .hero-content > div.flex.flex-wrap {
    justify-content: flex-start;
    text-align: left;
    font-size: 0.8rem;
  }
  html[data-page^="blog-"] #hero .hero-content > div.flex.flex-wrap > .dot {
    display: none;
  }
  html[data-page^="blog-"] #hero .hero-content > div.flex.flex-wrap > span:not(.dot) {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(251, 191, 36, 0.18);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
  }
}

/* 11.4 文末「相關文章」(JS 注入) — mobile 也要見到 */
.lk-mobile-related {
  margin-top: 3rem;
  padding: 1.5rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 1rem;
}
.lk-mobile-related > h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  border-left: 4px solid #f59e0b;
  padding-left: 0.75rem;
}
.lk-mobile-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .lk-mobile-related__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.lk-mobile-related__grid a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: rgba(17, 24, 39, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 0.75rem;
  color: #d1d5db;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s ease;
}
.lk-mobile-related__grid a:hover {
  border-color: rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  transform: translateY(-1px);
}
.lk-mobile-related__grid a i {
  color: #f59e0b;
}
@media (min-width: 1024px) {
  .lk-mobile-related {
    display: none; /* 桌面有側欄延伸閱讀 */
  }
}

/* 11.5 Prev / Next 文章導航 */
.lk-prev-next-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(75, 85, 99, 0.5);
}
@media (min-width: 768px) {
  .lk-prev-next-nav {
    grid-template-columns: 1fr 1fr;
  }
}
.lk-prev-next-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 0.875rem;
  color: #d1d5db;
  text-decoration: none;
  transition: all 0.2s ease;
}
.lk-prev-next-nav a:hover {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(30, 41, 59, 0.75);
}
.lk-prev-next-nav a > .lk-prev-next-nav__label {
  font-size: 0.75rem;
  color: #fbbf24;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.lk-prev-next-nav a > .lk-prev-next-nav__title {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
}
.lk-prev-next-nav a.lk-prev-next-nav--next {
  text-align: right;
}
.lk-prev-next-nav a.lk-prev-next-nav--next .lk-prev-next-nav__label {
  justify-content: flex-end;
}

/* ==========================================================================
   移動端體驗硬化（mobile UX hardening）
   ========================================================================== */

/* 1. 全域防止橫向溢出（手機常見 bug：寬元素導致整頁可橫滑）
      雙宣告：舊瀏覽器吃 hidden，現代瀏覽器吃 clip（不會破壞子元素 position: sticky）。 */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

/* 2. 全域圖片響應式保險：避免任何 <img> 撐破容器 */
img {
  max-width: 100%;
  height: auto;
}

/* 3. 觸摸目標 ≥ 44px（WCAG / Apple HIG 建議） */
@media (max-width: 1023px) {
  #mobile-menu-button,
  .mobile-nav-link,
  .mobile-accordion-link {
    min-height: 44px;
  }
}

/* 4. 小屏避免被右下浮動 CTA 遮擋頁尾內容 */
@media (max-width: 640px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  footer {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
  .floating-cta-container {
    bottom: 1rem !important;
    right: 1rem !important;
    gap: 0.5rem !important;
  }
}

/* 5. iOS 慣性滾動 */
.mega-menu,
#mobile-menu,
#mobile-accordion-menu {
  -webkit-overflow-scrolling: touch;
}

/* 6. 表單欄位字級 ≥ 16px，避免 iOS 自動 zoom */
@media (max-width: 767px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* 7. 防止文字在窄屏被截斷或被超長英文/URL 撐爆容器 */
@media (max-width: 480px) {
  h1, h2, h3, h4, .hero-subtitle, .lk-hero-subtitle-highlight {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 8. 平板過渡（768–1023）：主導航已切漢堡，header logo 與按鈕間距收緊 */
@media (min-width: 768px) and (max-width: 1023px) {
  #main-header nav.container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* 9. 觸摸高亮顏色統一（避免黑色閃爍） */
a, button {
  -webkit-tap-highlight-color: rgba(251, 191, 36, 0.15);
}

/* ============================================================
   10. 手機長內容摺疊（lk-mobile-collapse）
   —— 由 index.html 尾段 JS 注入 .lk-collapse-host / .lk-collapse-extra / 展開掣
   —— 設計原則：無 JS 時全部內容照在（SEO 可爬、可及性 OK）；
      有 JS 且 ≤767px 先把超出數量嘅項目預設收起，按掣展開。
   —— 桌面（≥768px）：永遠顯示全部，唔顯示展開掣。
   ============================================================ */
.lk-collapse-toggle { display: none; }   /* 預設隱藏；只在手機 build 後由下方 media query 顯示 */

@media (max-width: 767px) {
  .lk-collapse-host:not(.is-open) .lk-collapse-extra { display: none !important; }
  /* 估價表變體（.lk-table-price/-recog/-cases/-stack）的 row 用 display:grid !important，
     需更高 specificity 才壓得過，否則收起的行仍會顯示。 */
  html[data-page] .lk-collapse-host:not(.is-open) table.lk-rwd-table tbody tr.lk-collapse-extra {
    display: none !important;
  }
  html[data-page] .lk-collapse-host:not(.is-open) table.lk-rwd-table:not(.lk-table-price):not(.lk-table-recog):not(.lk-table-cases):not(.lk-table-stack) tbody tr.lk-collapse-extra {
    display: none !important;
  }
  html[data-page] .lk-collapse-host:not(.is-open) table.lk-rwd-table.lk-mobile-pair-table tbody tr.lk-collapse-extra,
  html[data-page] .lk-collapse-host:not(.is-open) table.lk-rwd-table.lk-mobile-diff-table tbody tr.lk-collapse-extra,
  html[data-page] .lk-collapse-host:not(.is-open) table.lk-rwd-table.lk-mobile-spec-table tbody tr.lk-collapse-extra {
    display: none !important;
  }

  .lk-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1rem;
    padding: .85rem 1.25rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--primary-color-light);
    background: var(--white-bg-light);
    border: 1px solid var(--primary-border-light);
    border-radius: 9999px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
  }
  .lk-collapse-toggle:hover,
  .lk-collapse-toggle:focus-visible { background: var(--white-bg-hover); }
  .lk-collapse-toggle i { font-size: .82em; }
  .lk-card-collapse-toggle {
    margin-top: .85rem;
    padding: .75rem 1rem;
    font-size: .9rem;
  }
}

/* ============================================================
   11. 手機 #scope：compact 卡轉 2 欄 + 卡圖收高（大幅縮短滾動長度）
   —— 桌面（≥640px）維持原排版與 16/10，完全唔受影響。
   —— 單欄手機（≤639px）：
        · 2 張大卡（紅酒 / 威士忌）維持全寬，圖 16/9
        · 其餘 7 張 compact 卡改 2 欄並排，圖用 4/3（配合窄卡更耐睇）
   ============================================================ */
@media (max-width: 639px) {
  #scope .lk-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
  }
  /* 大卡（非 compact）跨兩欄 = 全寬 */
  #scope .lk-core-grid > .lk-core-card:not(.lk-core-card--compact) {
    grid-column: 1 / -1;
  }
  #scope .lk-core-card__media img { aspect-ratio: 16 / 9; }
  #scope .lk-core-card--compact .lk-core-card__media img { aspect-ratio: 4 / 3; }
}