/*
 * 巴小波的療心時間 — 首頁樣式 v4
 * 網站：shalomremedy.com
 * 更新：2025-05-04（依據 homepage_spec_v2 調整）
 *
 * 主要變更（v3 → v4）：
 *   - 主色更正 #F9C000 → #F9C033
 *   - Hero 文字欄寬調整為 55%，標題 line-height: 1.4
 *   - 課程卡片陰影改為中性陰影
 *   - 課程日期欄位新增樣式（.course-date / .course-date--pending）
 *   - Line CTA 按鈕改用品牌綠 #00C300
 *   - 學員回饋卡片內距 20px → 24px
 *   - 講師簡介統計數字放大 48px / 900 weight
 *   - 導航列新增 .nav-cta 樣式（Site Editor 加 CSS 類別後套用）
 *
 * 色彩系統：
 *   #FFFDF0  主背景（body）
 *   #FFF9E5  次要背景（Hero、卡片、引言框）
 *   #F9C033  主色金黃（裝飾、icon底色、深底按鈕）← 已更正
 *   #D4A300  主色深（hover、邊框）
 *   #F0D060  邊框色（卡片、引言框）
 *   #1A1200  深墨色（主按鈕底色、標題文字、底部CTA背景）
 *   #5C4D00  中間色（副標題、說明文字）
 *   #7A5F00  輔助色（標籤文字、連結）
 *   #00C300  Line 品牌綠
 */

/* ─── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;900&family=Noto+Sans+TC:wght@400;500&display=swap');

/* ─── CSS 變數 ─────────────────────────────────────────────────────── */
:root {
    --c-primary:       #F9C033;      /* ← 主色已從 #F9C000 更正 */
    --c-primary-dark:  #D4A300;
    --c-primary-light: #FFF0A0;
    --c-border:        #F0D060;
    --c-ink:           #1A1200;
    --c-ink-mid:       #5C4D00;
    --c-ink-aux:       #7A5F00;
    --c-ink-stat:      #6B6B6E;      /* ← 統計標籤色（規格 #6B6B6E）*/
    --c-bg:            #FFFDF0;
    --c-bg-card:       #FFF9E5;
    --c-bg-muted:      #A89060;
    --c-line:          #00C300;      /* ← Line 品牌綠 */
    --radius-card:     12px;
    --radius-btn:      8px;
    --radius-chip:     20px;
    --shadow-card:     0 2px 12px rgba(0,0,0,0.06);   /* ← 改為中性陰影 */
    --shadow-hover:    0 4px 16px rgba(249,192,51,0.20);
    --container-max:   1100px;
    --section-py:      80px;
}

/* ─── 全站基礎 ─────────────────────────────────────────────────────── */
body {
    background-color: var(--c-bg);
    font-family: 'Noto Sans TC', sans-serif;
    color: var(--c-ink-mid);
    line-height: 1.8;
}

.shalom-homepage h1,
.shalom-homepage h2,
.shalom-homepage h3,
.shalom-homepage h4 {
    font-family: 'Noto Serif TC', serif;
    color: var(--c-ink);
    letter-spacing: 0.04em;
}

.shalom-homepage h1 { font-size: 2.5rem;  font-weight: 500; }
.shalom-homepage h2 { font-size: 1.75rem; font-weight: 500; letter-spacing: 0.03em; }
.shalom-homepage h3 { font-size: 1.25rem; font-weight: 500; }
.shalom-homepage p  { font-size: 1rem; line-height: 1.8; }
.shalom-homepage small,
.shalom-homepage .label { font-size: 0.875rem; }

/* ─── 容器 ─────────────────────────────────────────────────────────── */
.shalom-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ─── Section 共用間距 ─────────────────────────────────────────────── */
.shalom-section {
    padding-block: var(--section-py);
}

.shalom-section__title {
    text-align: center;
    margin-bottom: 2.5rem;
}

/* ─── 按鈕 ─────────────────────────────────────────────────────────── */
.shalom-btn {
    display: inline-block;
    border-radius: var(--radius-btn);
    padding: 12px 28px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    border: none;
}

/* 主要按鈕：深墨底 + 金黃字 */
.shalom-btn--primary {
    background: var(--c-ink);
    color: var(--c-primary);
}
.shalom-btn--primary:hover {
    background: #2D2000;
    color: var(--c-primary);
}

/* 次要按鈕：深墨外框線 */
.shalom-btn--secondary {
    background: transparent;
    color: var(--c-ink);
    border: 1.5px solid var(--c-ink);
}
.shalom-btn--secondary:hover {
    background: var(--c-primary-light);
    border-color: var(--c-primary-dark);
    color: var(--c-ink);
}

/* CTA 按鈕（深底背景上）：金黃填色 */
.shalom-btn--cta {
    background: var(--c-primary);
    color: var(--c-ink);
}
.shalom-btn--cta:hover {
    background: var(--c-primary-dark);
    color: var(--c-ink);
}

/* CTA 次要按鈕（深底背景上）：金黃外框 */
.shalom-btn--cta-outline {
    background: transparent;
    color: var(--c-primary);
    border: 1.5px solid var(--c-primary);
}
.shalom-btn--cta-outline:hover {
    background: rgba(249,192,51,0.12);
    color: var(--c-primary);
}

/* Line 按鈕：品牌綠底 + 白字 */
.shalom-btn--line {
    background: var(--c-line);
    color: #fff;
    border: none;
}
.shalom-btn--line:hover {
    background: #00A800;
    color: #fff;
}

/* ─── 區塊 1：Hero ─────────────────────────────────────────────────── */
.shalom-hero {
    background: var(--c-bg-card);
    padding: 100px 24px;
}

.shalom-hero__inner {
    display: flex;
    gap: 40px;
    align-items: center;
}

/* 文字欄：佔 55%，圖片欄：佔 45%（修復跑版問題）*/
.shalom-hero__text {
    flex: 1 1 55%;
    min-width: 0;
}

/* 標題 line-height 修正，避免中文堆疊過窄 */
.shalom-hero__title {
    margin-bottom: 1rem;
    line-height: 1.4;
    font-size: clamp(1.75rem, 3vw, 2.5rem);  /* 桌機 40px，縮放時不低於 28px */
}

.shalom-hero__subtitle {
    color: var(--c-ink-mid);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.shalom-hero__btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.shalom-hero__photo {
    flex: 0 1 42%;
    max-width: 400px;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 2px solid var(--c-primary);
}

.shalom-hero__photo img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4/5;
    object-fit: cover;
}

/* ─── 區塊 2：共鳴 ─────────────────────────────────────────────────── */
.shalom-resonance { background: var(--c-bg); }

.shalom-resonance__inner {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.shalom-resonance__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    text-align: left;
}

/* 引言框：金黃左邊線 + 淺黃底 */
.shalom-quote-block {
    border-left: 3px solid var(--c-primary);
    background: var(--c-bg-card);
    padding: 12px 16px;
    margin: 8px 0;
    color: var(--c-ink);
    font-size: 1rem;
}

.shalom-resonance__closing {
    color: var(--c-ink-mid);
    margin-bottom: .5rem;
}

.shalom-resonance__emphasis {
    color: var(--c-primary);
    font-size: 1.1rem;
}

.shalom-resonance__emphasis strong {
    font-weight: 500;
}

/* ─── 區塊 3：課程特色 ─────────────────────────────────────────────── */
.shalom-features { background: var(--c-bg-card); }

.shalom-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.shalom-feature-card {
    background: var(--c-bg);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s, border-color .2s;
    text-align: center;
}

.shalom-feature-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--c-primary-dark);
}

/* icon 金黃底色方塊包裝 */
.shalom-feature-card__icon-wrap {
    width: 56px;
    height: 56px;
    background: var(--c-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.shalom-feature-card__icon-placeholder {
    width: 32px;
    height: 32px;
}

.shalom-feature-card h3 {
    margin-bottom: .5rem;
}

/* ─── 區塊 4：課程介紹 ─────────────────────────────────────────────── */
.shalom-courses { background: var(--c-bg); }

.shalom-courses__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.shalom-course-card {
    background: var(--c-bg);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shalom-course-card:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--c-primary-dark);
}

/* 標籤 chip */
.shalom-course-tag {
    display: inline-block;
    background: var(--c-primary-light);
    color: var(--c-ink-aux);
    border-radius: var(--radius-chip);
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 500;
    align-self: flex-start;
}

.shalom-course-card h3 {
    margin: 0;
    font-weight: 700;
}

.shalom-course-card__audience .label {
    font-weight: 500;
    color: var(--c-ink-aux);
    margin-right: .4em;
    font-size: .85rem;
}

/* 課程日期 */
.course-date {
    font-size: .9rem;
    color: var(--c-ink);
    margin: 0;
}

/* 籌備中狀態（灰色提示 + Line 連結）*/
.course-date--pending {
    color: #6B6B6E;
}

.course-date--pending a {
    color: var(--c-line);
    text-decoration: underline;
    font-weight: 500;
}

.course-date--pending a:hover {
    color: #00A800;
}

.shalom-course-card .shalom-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Line CTA 區域 */
.shalom-divider {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: 2.5rem 0 1.5rem;
}

.shalom-line-cta {
    text-align: center;
}

.shalom-line-cta p {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: var(--c-ink);
}

/* ─── 區塊 5：學員回饋 ─────────────────────────────────────────────── */
.shalom-testimonials { background: var(--c-bg-card); }

.shalom-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.shalom-testimonial-card {
    background: var(--c-bg);
    border: 0.5px solid var(--c-border);
    border-radius: var(--radius-card);
    padding: 24px;            /* ← 內距 20px → 24px */
    position: relative;
    margin: 0;
    box-shadow: var(--shadow-card);
}

/* 大型金黃引號裝飾 */
.shalom-testimonial-card::before {
    content: '"';
    font-size: 3rem;
    color: var(--c-primary);
    opacity: .4;
    position: absolute;
    top: 12px;
    left: 16px;
    line-height: 1;
    font-family: Georgia, serif;
}

.shalom-testimonial-card p {
    padding-top: 1.5rem;
    font-size: 1rem;
    color: var(--c-ink);
}

.shalom-testimonial-card__author {
    display: block;
    font-style: normal;
    font-size: 14px;
    color: var(--c-ink-stat);
    border-top: 0.5px solid var(--c-border);
    margin-top: 12px;
    padding-top: 10px;
}

.shalom-testimonials__more {
    text-align: right;
    margin-top: 1.5rem;
}

.shalom-link-more {
    color: var(--c-ink-aux);
    font-weight: 500;
    text-decoration: underline;
    font-size: .95rem;
}

.shalom-link-more:hover {
    color: var(--c-primary-dark);
}

/* ─── 區塊 6：講師簡介 ─────────────────────────────────────────────── */
.shalom-bio { background: var(--c-bg); }

.shalom-bio__inner {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 1rem;
}

.shalom-bio__photo {
    display: flex;
    justify-content: center;
}

.shalom-bio__photo img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--c-primary);
}

/* 簡介文字：行距 1.9，灰色 */
.shalom-bio__text {
    margin-bottom: 1.5rem;
    color: #6B6B6E;           /* ← 規格指定 #6B6B6E */
    line-height: 1.9;         /* ← 規格指定 1.9 */
}

/* 統計三欄 */
.shalom-bio__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 1.5rem;
}

.shalom-stat-card {
    background: var(--c-bg-card);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 統計數字：放大強調 */
.shalom-stat-card__number {
    font-size: 3rem;          /* ← 48px，規格要求 48–56px */
    font-weight: 900;         /* ← 900，規格要求 */
    color: #1C1C1E;           /* ← 規格指定 #1C1C1E */
    font-family: 'Noto Serif TC', serif;
    line-height: 1.1;
}

/* 統計標籤：縮小對比 */
.shalom-stat-card__label {
    font-size: .8rem;         /* 12–13px */
    color: #6B6B6E;           /* ← 規格指定 #6B6B6E */
}

/* ─── 區塊 7：底部 CTA ─────────────────────────────────────────────── */
.shalom-cta-section {
    background: var(--c-ink);
    padding: 80px 24px;
}

.shalom-cta-section__inner {
    text-align: center;
}

.shalom-cta-section h2 {
    color: var(--c-primary);
    margin-bottom: .75rem;
}

.shalom-cta-section p {
    color: var(--c-bg-muted);
    margin-bottom: 2rem;
    font-size: 1rem;
}

.shalom-cta-section__btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ─── 導覽列（Twenty Twenty-Four 覆寫） ────────────────────────────── */
.wp-block-navigation {
    background: var(--c-ink) !important;
    padding: 14px 24px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
    color: #FFF9E5 !important;
    font-size: .875rem;       /* ← 規格 14px */
}

.wp-block-navigation a:hover {
    color: var(--c-primary) !important;
}

.wp-block-site-title a {
    color: var(--c-primary) !important;
    font-family: 'Noto Serif TC', serif;
}

/*
 * 導覽列 CTA 按鈕樣式
 * 使用方法：在 WordPress Site Editor「導覽」區塊中，
 * 找到「報名課程」連結項目 → 進階 → CSS 類別 → 填入 nav-cta
 */
.wp-block-navigation .nav-cta .wp-block-navigation-item__content,
.wp-block-navigation .nav-cta > a {
    background: var(--c-primary) !important;
    color: var(--c-ink) !important;
    border-radius: 4px !important;
    padding: 8px 18px !important;
    font-weight: 500 !important;
    transition: background .2s !important;
}

.wp-block-navigation .nav-cta .wp-block-navigation-item__content:hover,
.wp-block-navigation .nav-cta > a:hover {
    background: var(--c-primary-dark) !important;
    color: var(--c-ink) !important;
}

/* ─── RWD：平板版（768px – 1024px） ───────────────────────────────── */
@media (max-width: 1024px) {
    .shalom-hero__inner {
        gap: 28px;
    }

    .shalom-hero__photo {
        flex: 0 1 44%;
        max-width: 340px;
    }

    /* 特色三欄 → 兩欄 */
    .shalom-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shalom-bio__inner {
        grid-template-columns: 180px 1fr;
        gap: 32px;
    }
}

/* ─── RWD：手機版（< 768px） ──────────────────────────────────────── */
@media (max-width: 767px) {
    :root {
        --section-py: 48px;
    }

    /* Hero */
    .shalom-hero {
        padding: 60px 20px;
    }

    .shalom-hero__inner {
        flex-direction: column;
    }

    .shalom-hero__photo {
        order: -1;
        flex: none;
        width: 100%;
        max-width: 320px;
    }

    .shalom-hero__title {
        font-size: 1.75rem;
        line-height: 1.4;
    }

    .shalom-hero__btns {
        flex-direction: column;
    }

    .shalom-hero__btns .shalom-btn {
        text-align: center;
    }

    /* 所有格線 → 單欄 */
    .shalom-features__grid,
    .shalom-courses__grid,
    .shalom-testimonials__grid,
    .shalom-bio__stats {
        grid-template-columns: 1fr;
    }

    /* 講師簡介 → 上下排 */
    .shalom-bio__inner {
        grid-template-columns: 1fr;
    }

    .shalom-bio__photo {
        justify-content: center;
    }

    /* 統計數字手機版縮小一些 */
    .shalom-stat-card__number {
        font-size: 2.5rem;
    }

    /* 底部 CTA 按鈕 */
    .shalom-cta-section__btns {
        flex-direction: column;
        align-items: center;
    }

    .shalom-cta-section__btns .shalom-btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    /* 學員回饋更多連結置中 */
    .shalom-testimonials__more {
        text-align: center;
    }
}