/*
Theme Name:   FBGroup Child (阿榜老師)
Theme URI:    https://fbgroup.com.tw
Description:  阿榜老師個人品牌站 — Astra child theme。基於 fbgroup_redesign_brief v3.0 規格實作，包含完整 design tokens、字體規範、共用元件樣式。後台支援 Astra Customizer 自訂。
Author:       阿榜 + Claude Code
Author URI:   https://fbgroup.com.tw
Template:     astra
Version:      1.0.0
Text Domain:  fbgroup-child
Tags:         personal-brand, blog, ai, marketing, courses
*/

/* ==========================================================================
   1. DESIGN TOKENS（CSS Variables）
   依 brief 第 3 節定義；改色只需動這裡
   ========================================================================== */
:root {
  /* ---- 主色 ---- */
  --color-primary:            #042C53;   /* Hero 漸層起始、主要文字 */
  --color-primary-light:      #185FA5;   /* Hero 漸層結束、連結色 */

  /* ---- 金色家族 ---- */
  --color-accent-gold:        #FAC775;   /* Hero 主按鈕、強調邊框 */
  --color-accent-gold-deep:   #EF9F27;   /* 大頭像漸層終點 */
  --color-accent-gold-text:   #412402;   /* 金色按鈕內文字 */
  --color-accent-gold-mid:    #BA7517;   /* 行銷實戰標籤色 */
  --color-accent-gold-light:  #854F0B;   /* 標籤輔助色 */

  /* ---- 橘色 CTA ---- */
  --color-accent-orange:      #D85A30;

  /* ---- 米白底色 ---- */
  --color-bg-cream:           #F7F5EE;   /* 服務列、Archive Hero */
  --color-bg-cream-light:     #FAFAF8;   /* 麵包屑、引用塊 */

  /* ---- 卡片底色 ---- */
  --color-tool-card-bg:       #F8FCFF;
  --color-tool-card-border:   #B5D4F4;
  --color-case-card-border:   #D3D1C7;

  /* ---- 標籤色（分類） ---- */
  --color-tag-hot:            #97C459;   /* 熱門 */
  --color-tag-ai-tool:        #0F6E56;   /* AI 工具 */
  --color-tag-automation:     #534AB7;   /* 自動化 */
  --color-tag-error:          #993556;   /* 404 */

  /* ---- 文字色 ---- */
  --color-text-primary:       #1A1A1A;
  --color-text-secondary:     #5F5E5A;
  --color-text-muted:         #777777;

  /* ---- 邊線 ---- */
  --color-border:             #E5E7EB;
  --color-border-cream:       #D3D1C7;

  /* ---- 背景 ---- */
  --color-bg-white:           #FFFFFF;

  /* ==========================================================================
     字體系統
     ========================================================================== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  --font-serif: "Noto Serif TC", "PingFang TC", serif;
  --font-mono: "Monaco", "Menlo", "Consolas", monospace;

  /* ==========================================================================
     字級（桌面版；行動版於 media query 覆蓋）
     ========================================================================== */
  --fs-h1-hero:        32px;   /* 首頁 Hero */
  --fs-h1-post:        28px;   /* 文章標題 */
  --fs-h1-page:        26px;   /* 一般頁面標題 */
  --fs-h2-section:     22px;   /* 區塊標題 */
  --fs-h2-content:     18px;   /* 內文小標 */
  --fs-h3:             17px;   /* 卡片 / 段標 */
  --fs-h4:             14px;
  --fs-body:           16px;
  --fs-caption:        13px;
  --fs-eyebrow:        11px;
  --fs-code:           13px;

  /* ---- line-height ---- */
  --lh-tight:          1.3;
  --lh-snug:           1.4;
  --lh-normal:         1.5;
  --lh-relaxed:        1.6;
  --lh-loose:          1.7;
  --lh-content:        1.85;

  /* ==========================================================================
     間距系統
     ========================================================================== */
  --space-section:    60px;    /* 大區塊間距 */
  --space-block:      22px;    /* 區塊內間距 */
  --space-card:       12px;    /* 卡片內距 */
  --space-xs:         4px;
  --space-sm:         6px;
  --space-md:         10px;
  --space-lg:         14px;
  --space-xl:         18px;

  /* ==========================================================================
     圓角
     ========================================================================== */
  --radius-card:      10px;
  --radius-card-lg:   12px;
  --radius-button:    6px;
  --radius-pill:      18px;
  --radius-pill-sm:   14px;
  --radius-tag:       8px;

  /* ==========================================================================
     容器寬度
     ========================================================================== */
  --container-max:        1140px;
  --container-padding:    24px;
  --content-max:          680px;   /* 文章內文最大寬度 */

  /* ==========================================================================
     陰影
     ========================================================================== */
  --shadow-card-hover:    0 4px 12px rgba(4, 44, 83, 0.08);
  --shadow-card-strong:   0 8px 24px rgba(4, 44, 83, 0.12);

  /* ==========================================================================
     動畫
     ========================================================================== */
  --transition-base:      all 0.2s ease;
  --transition-slow:      all 0.4s ease;
}

/* ==========================================================================
   2. 重置與全站基礎
   ========================================================================== */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-content);
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: var(--transition-base);
}
a:hover { text-decoration: underline; }

/* ==========================================================================
   3. 標題字級（覆蓋 Astra 預設）
   ========================================================================== */
.entry-content h1,
.entry-title,
h1 {
  font-size: var(--fs-h1-post);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-primary);
  margin-bottom: 0.6em;
}

.entry-content h2,
h2 {
  font-size: var(--fs-h2-content);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--color-primary);
  margin-top: var(--space-block);
  margin-bottom: var(--space-md);
}

.entry-content h3,
h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--color-primary);
  margin-top: var(--space-xl);
  margin-bottom: 8px;
}

.entry-content h4,
h4 {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--color-primary);
}

.entry-content p {
  font-size: var(--fs-body);
  line-height: var(--lh-content);
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

/* eyebrow 小標籤 */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

/* ==========================================================================
   4. 共用按鈕樣式
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-button);
  border: 0;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

/* 主 CTA — 金色 */
.btn-primary {
  background: var(--color-accent-gold);
  color: var(--color-accent-gold-text);
}
.btn-primary:hover {
  background: var(--color-accent-gold-deep);
  color: var(--color-accent-gold-text);
}

/* 次 CTA — 深藍 */
.btn-secondary {
  background: var(--color-primary);
  color: #fff;
}
.btn-secondary:hover {
  background: var(--color-primary-light);
  color: #fff;
}

/* 橘色 CTA（預約諮詢） */
.btn-orange {
  background: var(--color-accent-orange);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 7px 18px;
}
.btn-orange:hover { background: #B84823; color: #fff; }

/* 透明 + 白邊（Hero 用） */
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 0.5px solid rgba(255, 255, 255, 0.4);
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 線框深藍 */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 0.5px solid var(--color-primary);
}
.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   5. 共用卡片基礎
   ========================================================================== */
.card {
  background: #fff;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  transition: var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* 工具卡（淡藍底） */
.card-tool {
  background: var(--color-tool-card-bg);
  border-color: var(--color-tool-card-border);
}

/* 案例卡（米白邊） */
.card-case {
  background: #fff;
  border-color: var(--color-case-card-border);
}

/* ==========================================================================
   6. 分類標籤 pills（依 brief §3.2）
   ========================================================================== */
.tag-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  border-radius: var(--radius-tag);
  line-height: 1.6;
}
.tag-social    { background: #E6F1FB; color: #185FA5; }
.tag-marketing { background: #FAEEDA; color: #BA7517; }
.tag-ai-tool   { background: #E1F5EE; color: #0F6E56; }
.tag-auto      { background: #EEEDFE; color: #534AB7; }
.tag-hot       { background: #97C459; color: #fff; }
.tag-soon      { background: #FAC775; color: #412402; }
.tag-python    { background: #FAECE7; color: #993C1D; }
.tag-cf        { background: #FBEAF0; color: #993556; }
.tag-claude    { background: #FAEEDA; color: #854F0B; }
.tag-n8n       { background: #E6F1FB; color: #185FA5; }
.tag-wp        { background: #E1F5EE; color: #0F6E56; }
.tag-playwright{ background: #FAECE7; color: #993C1D; }
.tag-gsheet    { background: #E1F5EE; color: #0F6E56; }
.tag-d1        { background: #FBEAF0; color: #993556; }

/* ==========================================================================
   7. 容器
   ========================================================================== */
.container,
.fb-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* 文章內文寬度限制 */
.entry-content,
.fb-content-narrow {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   8. 行動版字級覆蓋（依 brief §3.4）
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-h1-hero:    24px;
    --fs-h1-post:    22px;
    --fs-h1-page:    22px;
    --fs-h2-section: 18px;
    --fs-h2-content: 16px;
    --fs-h3:         15px;
    --fs-h4:         13px;
    --fs-body:       15px;
    --fs-caption:    12px;
    --fs-eyebrow:    10px;
    --fs-code:       12px;
    --container-padding: 18px;
  }
}

/* ==========================================================================
   9. 禁用 Astra 預設標題色，全交給 child
   ========================================================================== */
.ast-container .entry-title,
.ast-container .ast-archive-title {
  color: var(--color-primary);
}

/* 連結（Astra 預設色覆蓋） */
.ast-container a:not(.btn):not(.tag-pill) {
  color: var(--color-primary-light);
}

/* ==========================================================================
   10. utility classes
   ========================================================================== */
.text-primary       { color: var(--color-primary); }
.text-secondary     { color: var(--color-text-secondary); }
.text-muted         { color: var(--color-text-muted); }
.text-gold          { color: var(--color-accent-gold-mid); }
.bg-cream           { background: var(--color-bg-cream); }
.bg-cream-light     { background: var(--color-bg-cream-light); }
.bg-primary         { background: var(--color-primary); color: #fff; }
.bg-hero-gradient   { background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: #fff; }
.text-center        { text-align: center; }
.font-medium        { font-weight: 500; }