/* css/style.css */

:root {
    /* --- 佈局變量 --- */
    --width: 42rem; /* 調整為更適合閱讀經文的寬度 (約 672px) */
    --font-serif: "Georgia", "Times New Roman", "Songti TC", "SimSun", serif; /* 經文用襯線體 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* UI用無襯線 */
    --font-scale: 1.05em; /* 稍微放大字體 */

    /* --- 色彩變量 --- */
    --background-color: #fdfdfd;
    --card-bg: #ffffff;
    --heading-color: #222;
    --text-color: #111;
    --link-color: #3273dc;
    --visited-color: #8b6fcb;
    
    /* --- 經課專用色彩 --- */
    --rubric-color: #B50838; /* 禮儀紅：用於引用和說明 */
    --accent-color: #6b3fa0; /* 默認強調色 (紫色)，會被 PHP 動態覆蓋 */
    --code-background-color: #f2f2f2;
    --code-color: #222;

    /* [新增/確保有這兩行] 統一控制所有經文類內容的大小與行高 */
    --bible-font-size: 1.1rem;   /* 您可以調整這裡來一次改變所有經文大小 */
    --bible-line-height: 1.8;    /* 統一的行高 */
}

/* --- 深色模式 (Dark Mode) 適配 --- */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #121212; /* 更柔和的深黑 */
        --card-bg: #1e1e1e;
        --heading-color: #eee;
        --text-color: #d0d0d0; /* 略微降低對比度，保護眼睛 */
        --link-color: #8cc2dd;
        --rubric-color: #ff6b6b; /* 深色模式下的紅色需要調亮 */
        --code-background-color: #2c2c2c;
        --code-color: #ddd;
    }
}

/* --- 全局設定 --- */
body {
    font-family: var(--font-serif);
    font-size: var(--font-scale);
    margin: auto;
    padding: 0; /* 移除 body padding，交給 container */
    padding-bottom: 60px;
    max-width: 100%; /* 讓導航欄能全寬 */
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.6; /* 增加行高，提升閱讀體驗 */
    color: var(--text-color);
}

/* 主內容容器 (限制寬度) */
.container {
    max-width: var(--width);
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* --- 排版元素 --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans); /* 標題使用無襯線體，形成對比 */
    color: var(--heading-color);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 1.8rem;
    font-weight: normal;
    text-align: center;
    color: var(--accent-color);
    margin-top: 0;
}

a { color: var(--link-color); cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; }

hr {
    border: 0;
    height: 1px;
    background: #eee; /* 改為實線，更現代 */
    margin: 3rem auto;
    width: 60%;
}

@media (prefers-color-scheme: dark) {
    hr { background: #333; }
}

/* --- 導航欄 (Sticky Navbar) --- */
.navbar {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    border-bottom: 1px solid #eee;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

@media (prefers-color-scheme: dark) {
    .navbar {
        background: rgba(18, 18, 18, 0.95);
        border-bottom: 1px solid #333;
    }
}

.nav-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: var(--heading-color);
}

/* 切換按鈕組 */
.toggle-group {
    display: flex;
    background: #eee;
    padding: 3px;
    border-radius: 6px;
}

@media (prefers-color-scheme: dark) {
    .toggle-group { background: #333; }
}

.t-btn {
    border: none;
    background: transparent;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-family: var(--font-sans);
    cursor: pointer;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s ease;
}

@media (prefers-color-scheme: dark) {
    .t-btn { color: #aaa; }
}

.t-btn.active {
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: bold;
    color: var(--rubric-color);
}

/* --- 頁面頭部 --- */
header {
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 1rem;
}

.date {
    font-family: var(--font-sans);
    color: #888;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

/* --- 祝文 (Collect) 區塊 --- */
.collect-box {
    margin-bottom: 3rem;
}

.collect-content {
    font-size: var(--bible-font-size);
    line-height: var(--bible-line-height);
    text-align: justify;
    margin-top: 2rem;
}

/* [新增] 祝文出處署名 */
.collect-source {
    display: block;
    text-align: right;      /* 右對齊 */
    font-family: var(--font-sans);
    font-size: 0.85em;      /* 字體稍小 */
    color: var(--rubric-color); /* 使用禮儀紅 */
    margin-top: 0.5em;      /* 與內文保持一點距離 */
    font-weight: bold;
}

/* --- 經課排版系統 --- */

/* 1. 章節標籤 (Section Label / Lesson Heading) */
.section-label, .lessonHeading {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin: 3rem 0 1.5rem 0;
    font-weight: normal;
    background: none; /* 移除原本的背景 */
    border: none;
    width: 100%;
    padding: 0;
}

/* 2. 經文頭部 (標題與引用) */
/* 1. 章節標籤 (Section Label - 如 "舊約經課") */
.section-label, .lessonHeading {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: bold;
    color: #000;
    margin: 3rem 0 0 0; /* 底部間距設為 0，緊接下方的標題 */
    width: 100%;
}
@media (prefers-color-scheme: dark) { .section-label { color: #eee; } }

/* 2. 經文頭部 (標題) */
/* 對應詩篇的 <p> 樣式 */
.lesson-header {
    text-align: center;
    font-size: 1.1em;       /* 詩篇字體大小 */
    font-weight: bold;      /* 詩篇字體加粗 */
    margin: 32px 0;         /* 詩篇上下間距 */
    color: #B50838;         /* 詩篇紅色 */
    font-family: var(--font-serif); 
    line-height: 1.4;
}

/* 3. 引用章節 (第二行) */
/* 對應詩篇的 <span> 樣式 */
.citation {
    font-family: var(--font-sans); 
    color: #B50838;         /* 詩篇紅色 */
    font-size: 0.8em;       /* 詩篇第二行字體大小 */
    font-weight: normal;    /* 第二行不加粗 */
    display: inline-block;
    margin-top: 4px;        /* 稍微與第一行拉開一點距離 */
}

/* 移除舊的 rubric 樣式，避免衝突 */
.rubric { display: none; }

/* [新增或確認] 經文正文 (詩歌體 - 如路加福音中的尊主頌等) */
.bible-poetry {
    font-size: var(--bible-font-size);     /* 確保與散文體一致 */
    line-height: var(--bible-line-height); /* 確保與散文體一致 */
    margin-bottom: 1.5rem;
    /* [修改] 改為整塊縮進，視覺上更整齊 */
    margin-left: 2em;      /* 整塊內容向右縮進 2 個字元 */
    padding-left: 0;       /* 移除原本的 padding */
    text-indent: 0;        /* 移除原本的負縮進，讓第一行跟著整塊一起縮進 */
}

/* 3. 經文正文 */
.bible-para {
    text-align: justify;
    font-size: var(--bible-font-size);
    margin-bottom: 1.2em;
    line-height: var(--bible-line-height);
    color: var(--text-color);
}

/* 4. 經文內標題 (如：大衛的詩) */
.bible-heading {
    text-align: center;
    font-family: var(--font-sans);
    color: #666;
    margin: 2rem 0 0.8rem;
    font-size: 1rem;
    font-weight: 600;
}

/* 5. 節數 (Superscript) */
.v-num {
    font-family: var(--font-sans);
    font-size: 0.65em;
    color: #bbb;
    vertical-align: top;
    margin-right: 4px;
    user-select: none; /* 防止複製經文時選中節數 */
}

/* --- 版本切換顯示邏輯 (核心功能) --- */
/* 默認隱藏現代版 */
.ver-mod, .c-mod { display: none; }

/* 當 Body 有 show-modern class 時 */
body.show-modern .ver-trad, 
body.show-modern .c-trad { display: none; }

body.show-modern .ver-mod, 
body.show-modern .c-mod { display: block; }


/* --- 實用工具類 (保留您原有的，並做微調) --- */
.center { text-align: center; }
.right { text-align: right; }
.redcolor { color: var(--rubric-color); }
.notecolor { color: rgb(255, 76, 65); }
.zhw { text-indent: 2em; } /* 中文首行縮進 */

.note {
    margin: 1em 2em;
    font-size: 0.9em;
    color: #666;
}

/* 代碼塊 (保留原樣) */
code {
    font-family: monospace;
    padding: 2px 4px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
}

/* 響應式調整 */
@media (max-width: 600px) {
    .container { padding: 1.5rem 1rem; }
    h1 { font-size: 1.6rem; }
    .bible-para { font-size: 1.1rem; text-align: left; } /* 手機上取消左右對齊，避免文字間距過大 */
    .navbar { padding: 0.8rem; }
}


/* css/style.css - 新增內容 */

/* 全局平滑滾動 */
html {
    scroll-behavior: smooth;
}

/* 頂部經課導航條 */
.lesson-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 0.5rem 1.2rem; /* 行距與間距 */
    margin-bottom: 2.5rem; /* 與下方祝文的距離 */
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--text-color);
}

.lesson-nav a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid transparent; /* 預留底線位置 */
    transition: all 0.2s ease;
    opacity: 0.8;
}

.lesson-nav a:hover {
    color: var(--accent-color); /* 懸停時變色 */
    border-bottom-color: var(--accent-color);
    opacity: 1;
}

/* 分隔點 (•) */
.nav-separator {
    color: #ccc;
    font-size: 0.8em;
    align-self: center;
}

/* 針對深色模式的微調 */
@media (prefers-color-scheme: dark) {
    .lesson-nav a { color: #ccc; }
    .lesson-nav a:hover { color: var(--accent-color); }
}


/* css/style.css - 新增內容 */

/* --- 詩篇專用排版 (Psalm Styling) --- */

.psalm-content {
    margin-bottom: 2rem;
    color: var(--text-color);
}

/* 詩篇標題 (保留原文件樣式，但確保置中) */
.psalm-content p {
    text-align: center;
    margin: 1rem 0;
    /* 原文件已有 inline style 定義顏色，這裡只需微調 */
}

/* 詩篇列表 */
.psalm-content ol {
    list-style-position: outside; /* 數字在縮進外 */
    padding-left: 2.5rem;         /* 給數字留空間 */
    margin: 0;
    font-size: var(--bible-font-size);
    line-height: var(--bible-line-height);
}

.psalm-content li {
    padding-left: 0.5rem;
    margin-bottom: 0.5rem; /* 節與節之間的距離 */
}

/* 星號處理 */
.asterisk {
    color: #999; /* 淡化星號顏色 */
    margin: 0 0.3em;
}

/* 讓星號後面的內容換行並縮進 */
/* 注意：因為您的原始內容是 "文字<br>＊文字"，<br>已經造成換行了 */
/* 我們可以讓星號稍微突出或者變小 */

/* 如果遇到多個詩篇片段 (例如 1-5, 8-9)，中間增加間距 */
.psalm-content + .psalm-content {
    margin-top: -1rem; /* 減少片段間的過大間隙 */
}

/* 二選一分隔符 (OR Separator) */
.or-separator {
    text-align: center;
    font-family: var(--font-sans);
    font-weight: bold;
    color: #999;
    margin: 2rem 0;
    position: relative;
    font-size: 0.9rem;
}

/* 裝飾線條 */
.or-separator::before,
.or-separator::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 1px;
    background: #e0e0e0;
    vertical-align: middle;
    margin: 0 10px;
}









/* css/style.css - 追加內容 */

/* --- 年曆佈局 (Calendar Layout) --- */
.calendar-header {
    text-align: center;
    margin-bottom: 3rem;
}

.calendar-year-label {
    font-family: var(--font-sans);
    color: #666;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 月份卡片 */
.month-card {
    background: var(--card-bg);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}

@media (prefers-color-scheme: dark) {
    .month-card {
        border-color: #333;
        background: #1e1e1e;
    }
}

.month-title {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-color);
    border-bottom: 2px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* 日期列表 */
.feast-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feast-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f5f5f5;
    font-family: var(--font-sans);
}

@media (prefers-color-scheme: dark) {
    .feast-item { border-bottom-color: #333; }
}

.feast-date {
    font-weight: bold;
    color: #888;
    width: 2.5rem;
    flex-shrink: 0;
}

.feast-link {
    flex-grow: 1;
    text-align: left;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s;
}

.feast-link:hover {
    color: var(--link-color);
    text-decoration: underline;
}

/* 節期色彩標記 (小圓點) */
.lit-color {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background-color: #ccc; /* 默認 */
}

.lc-white { background-color: #e0c097; } /* 金/白 */
.lc-green { background-color: #4a7c59; } /* 綠 */
.lc-purple { background-color: #6b3fa0; } /* 紫 */
.lc-red { background-color: #B50838; }   /* 紅 */
.lc-blue { background-color: #007bff; }   /* 藍 (將臨期可選) */

/* 主要節日強調 */
.major-feast .feast-link {
    font-weight: bold;
    color: var(--heading-color);
}


.link-row {
    display: flex;       /* 啟用彈性佈局，讓子元素變成橫排 */
    gap: 15px;           /* 設定連結之間的間距 */
    flex-wrap: wrap;     /* 如果螢幕太窄，允許自動換行到下一行 */
    align-items: center; /* 垂直置中對齊 */
}










/* 導航欄的分組標題 */
.nav-group-title {
    font-weight: bold;
    color: var(--accent-color);
    padding: 8px 12px 4px;
    border-bottom: 1px solid #eee;
    margin-top: 8px;
    font-size: 0.9em;
}

/* 導航連結中的標籤 (如：舊約) */
.nav-tag {
    font-size: 0.8em;
    background-color: #f0f0f0;
    padding: 2px 5px;
    border-radius: 4px;
    margin-right: 5px;
    color: #555;
}

/* 頁面內容中的分組大標題 */
.group-header {
    text-align: center;
    margin: 40px 0 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-left: 5px solid var(--accent-color);
    border-right: 5px solid var(--accent-color);
}

.group-header h2 {
    margin: 0;
    color: #333;
}

.group-intro {
    font-style: italic;
    color: #666;
    margin-top: 10px;
}