/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   銀髮健康飲食指南 — 全站視覺升級 v2.0
   設計系統：竹林雅誌
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* 主色：深竹墨綠 — 比原本更沉穩典雅 */
  --forest:       #1C4E3A;
  --forest-light: #2A6B52;
  --forest-pale:  #E2EEE7;
  --forest-mid:   #3A7055;

  /* 暖色：薑黃銅 — 比原本的橘色更內斂有質感 */
  --amber:        #A85E15;
  --amber-pale:   #FAF0E4;
  --amber-mid:    #C87822;
  --amber-light:  #DFA04A;

  /* 背景：竹紙色 — 溫潤如手漉和紙 */
  --cream:        #F3EDE2;
  --warm-white:   #FDFAF4;
  --paper-dark:   #EBE2D4;

  /* 文字：墨色 — 更深、更清晰 */
  --text-dark:    #120F0D;
  --text-body:    #322C26;
  --text-muted:   #66594F;

  /* 邊框：細膩暖灰 */
  --border:       #DDD3C3;
  --border-light: #EAE3D8;

  /* 陰影系統 */
  --shadow-xs: 0 1px 4px rgba(18,12,8,.05);
  --shadow-sm: 0 2px 12px rgba(18,12,8,.07);
  --shadow-md: 0 6px 28px rgba(18,12,8,.09);
  --shadow-lg: 0 14px 52px rgba(18,12,8,.12);
  --shadow-xl: 0 24px 72px rgba(18,12,8,.15);

  /* 圓角 */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ── 2. BASE ──────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--cream);
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.88;
  letter-spacing: 0.01em;
}

::selection {
  background: rgba(28, 78, 58, 0.18);
  color: var(--text-dark);
}

/* ── 3. SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── 4. TOPBAR ────────────────────────────────────────────── */
.topbar {
  background: #14362A !important;
  letter-spacing: 0.05em;
  font-size: 11.5px;
}

/* ── 5. HEADER — 霧玻璃效果 ──────────────────────────────── */
header {
  background: rgba(253, 250, 244, 0.90) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(221, 211, 195, 0.55) !important;
  box-shadow: 0 1px 0 rgba(18,12,8,.03), 0 4px 24px rgba(18,12,8,.05) !important;
}

nav a {
  font-size: 13.5px !important;
  letter-spacing: 0.015em;
}

.logo {
  letter-spacing: 0.03em;
}

/* ── 6. HERO — 深竹林漸層 + 紙質紋理 ────────────────────── */
.hero {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse at 70% 35%, rgba(42, 107, 82, 0.65), transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(168, 94, 21, 0.10), transparent 45%),
    linear-gradient(150deg, #163D30 0%, #1C4E3A 50%, #14343C 100%) !important;
  padding: 80px 24px 100px !important;
}

.hero h1 {
  font-size: clamp(28px, 4.5vw, 50px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em !important;
}

.hero-badge {
  background: rgba(168, 94, 21, 0.16) !important;
  border: 1px solid rgba(168, 94, 21, 0.30) !important;
  color: #DDA05A !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
}

.hero h1 span, .hero h1 em {
  color: #6DD4A2 !important;
}

.hero-stat .num {
  font-size: 30px !important;
  color: #72D4A4 !important;
}

.hero-sub {
  font-size: 16px !important;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.85 !important;
}

@media (max-width: 768px) {
  .hero {
    padding: 56px 20px 72px !important;
  }
}

/* ── 7. HERO (文章頁) ─────────────────────────────────────── */
/* 文章頁有不同的 hero gradient，保持原本的 teal 調性但加深 */
.hero-tag {
  background: rgba(27,122,138,.22) !important;
  border: 1px solid rgba(27,122,138,.45) !important;
  letter-spacing: 0.12em;
}

/* ── 8. BUTTONS ───────────────────────────────────────────── */
.btn-hero-primary {
  background: var(--amber) !important;
  box-shadow: 0 2px 14px rgba(168, 94, 21, 0.38) !important;
  letter-spacing: 0.02em;
}

.btn-hero-primary:hover {
  background: #8E4D0F !important;
  box-shadow: 0 4px 22px rgba(168, 94, 21, 0.48) !important;
}

/* ── 9. TRACK CARDS ───────────────────────────────────────── */
.track-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

.track-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-xl) !important;
}

.track-card-column {
  background: linear-gradient(135deg, #FBF0E3 0%, #FFF7ED 100%) !important;
  border: 1.5px solid #DFBA7A !important;
}

.track-card-library {
  background: linear-gradient(135deg, var(--forest-pale) 0%, #EDF5F0 100%) !important;
  border: 1.5px solid rgba(28, 78, 58, 0.22) !important;
}

/* ── 10. ARTICLE CARDS ────────────────────────────────────── */
.article-card {
  border-radius: var(--radius-md) !important;
  border-color: var(--border-light) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--warm-white) !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}

.article-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(42, 107, 82, 0.22) !important;
}

.article-card:hover .article-arrow {
  transform: translateX(5px) !important;
  color: var(--forest) !important;
}

/* ── 11. COLUMN CARDS ─────────────────────────────────────── */
.col-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--warm-white) !important;
}

.col-card:hover {
  box-shadow: var(--shadow-md) !important;
}

/* ── 12. TOOL CARDS ───────────────────────────────────────── */
.tool-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--warm-white) !important;
}

.tool-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.tools-section {
  background: var(--forest-pale) !important;
  border-radius: var(--radius-lg) !important;
}

/* ── 13. SIDEBAR ──────────────────────────────────────────── */
.sidebar-card {
  border-radius: var(--radius-md) !important;
  border-color: var(--border-light) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--warm-white) !important;
}

/* ── 14. FEATURED CARD ────────────────────────────────────── */
.featured-card {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E") repeat,
    linear-gradient(150deg, #163D30 0%, #1C4E3A 100%) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ── 15. DAY CARDS (週菜單) ───────────────────────────────── */
.day-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  border-color: var(--border-light) !important;
}

.day-card-header {
  background: var(--forest) !important;
}

/* ── 16. FOOTER ───────────────────────────────────────────── */
footer {
  background: linear-gradient(150deg, #163D30 0%, #0E2820 100%) !important;
}

/* ── 17. STAT CARDS (文章頁統計方塊) ─────────────────────── */
.stat-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--warm-white) !important;
}

.stat-card:hover {
  box-shadow: var(--shadow-sm) !important;
}

/* ── 18. TABLES ───────────────────────────────────────────── */
.table-wrap {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  border-color: var(--border-light) !important;
}

thead tr {
  background: var(--forest) !important;
}

tbody tr:hover {
  background: var(--forest-pale) !important;
}

/* ── 19. TOC ──────────────────────────────────────────────── */
.toc {
  border-radius: var(--radius-md) !important;
}

/* ── 20. HIGHLIGHT / INFO BOXES ───────────────────────────── */
.hl-box, .info-box, .warning-box, .caution-box,
.nutrition-tip, .caregiver-box, .hero-summary,
.week-indicator, .next-week {
  border-radius: var(--radius-md) !important;
}

/* ── 21. FAQ ──────────────────────────────────────────────── */
.faq-item {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

/* ── 22. RESULT CARDS (搜尋頁) ────────────────────────────── */
.result-card {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--warm-white) !important;
}

.result-card:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(28, 78, 58, 0.22) !important;
}

/* ── 23. HEALTH ASSESSMENT ────────────────────────────────── */
.choice-card, .check-option, .quiz-opt {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ── 24. CATEGORY NAVIGATION ──────────────────────────────── */
.cat-tab {
  font-size: 13.5px !important;
}

/* ── 25. SECTION TYPOGRAPHY ───────────────────────────────── */
.section-tag {
  letter-spacing: 0.16em !important;
  font-size: 10.5px !important;
}

article h2 {
  margin-top: 52px !important;
}

article p {
  line-height: 1.92 !important;
  color: var(--text-body) !important;
}

/* ── 26. PRINT FAB ────────────────────────────────────────── */
.print-fab {
  border-radius: 50px !important;
  box-shadow: var(--shadow-md) !important;
}

/* ── 27. SKIP LINK ────────────────────────────────────────── */
.skip-link {
  background: var(--forest) !important;
}

/* ── 28. SEASONAL BANNER ──────────────────────────────────── */
.seasonal-banner {
  background: linear-gradient(90deg, #4A3010, #6B4A18) !important;
}

/* ── 29. WEEK INDICATOR ───────────────────────────────────── */
.week-indicator {
  border-color: var(--amber) !important;
  background: var(--amber-pale) !important;
}

/* ── 30. ARTICLE FEATURED IMAGE ───────────────────────────── */
.article-featured-img {
  margin: 0 0 36px;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
  line-height: 0;
}
.article-featured-img img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}
@media (max-width: 768px) {
  .article-featured-img img { height: 220px; }
}