/* ==========================================================================
   Obsidian Publish 升級版：現代化三欄式文件 UI 主題 (2K/4K 撐寬與思源黑體優化版)
   ========================================================================== */

/* 0. 🌲 載入 Google Fonts 思源黑體 (繁體中文優化版) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

/* --------------------------------------------------------------------------
   1. 全域現代化外觀調整 (字體與變數優化)
   -------------------------------------------------------------------------- */
:root {
    --nav-width: 280px;
    --toc-width: 240px;
    
    /* 💡 【大螢幕撐寬修改】從 820px 大幅放寬至 1350px，徹底解決 2K/4K 螢幕兩邊留白過多的空洞感 */
    --content-max-width: 1350px;
    
    --font-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* 💡 【字體更換】改為載入的 Google 思源黑體 */
    --font-text: "Noto Sans TC", var(--font-interface);
}

body {
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   2. 左側邊欄美化 (Sidebar / File Tree)
   -------------------------------------------------------------------------- */
.site-body-left-column {
    width: var(--nav-width) !important;
    min-width: var(--nav-width) !important;
    background-color: var(--background-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
    padding-top: 20px;
}

/* 導航列標題與資料夾樣式優化 */
.nav-view-outer {
    padding: 0 12px;
}

.nav-folder-title, .nav-file-title {
    font-family: var(--font-interface);
    font-size: 0.92rem !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    margin: 2px 0 !important;
    transition: all 0.15s ease !important;
    color: var(--text-muted);
}

/* 滑鼠懸停效果 */
.nav-folder-title:hover, .nav-file-title:hover {
    background-color: var(--background-modifier-hover) !important;
    color: var(--text-normal) !important;
}

/* 當前閱讀中（Active）的檔案高亮 */
.nav-file-title.is-active {
    background-color: var(--background-primary-alt) !important;
    color: var(--interactive-accent) !important;
    font-weight: 600 !important;
    border-left: 2px solid var(--interactive-accent);
    border-radius: 0 6px 6px 0 !important;
}

/* --------------------------------------------------------------------------
   3. 中間主要內容區優化 (Content Area)
   -------------------------------------------------------------------------- */
.site-body-main-column {
    max-width: var(--content-max-width) !important;
    margin: 0 auto !important;
    /* 💡 配合 1350px 寬版比例，將左右內距從 32px 提升至 60px，讓大螢幕兩側具備高級呼吸感 */
    padding: 40px 60px !important; 
}

/* 修改中間主要內容區的字體大小 */
.markdown-preview-view {
    font-family: var(--font-text) !important;
    font-size: 22px !important; /* 你的理想 22px 大字體 */
    line-height: 1.8;           /* 舒適的大字行高 */
    letter-spacing: 0.035em;    /* 💡 2K/4K 專用：微調拉開字距，在大螢幕上極具印刷質感 */
    color: var(--text-normal);
}

/* 標題與段落間距優化 (配合 22px 內文，標題級距同步等比例放大) */
.markdown-preview-view h1 { font-size: 2.3rem; font-weight: 700; margin-top: 0; margin-bottom: 1.6rem; }
.markdown-preview-view h2 { font-size: 1.8rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.4rem; }
.markdown-preview-view h3 { font-size: 1.4rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.7rem; }
.markdown-preview-view p { margin-bottom: 1.5rem; } /* 拉大段落間距，大螢幕閱讀不吃力 */

/* 內文連結美化 */
.markdown-preview-view .internal-link {
    color: var(--interactive-accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--interactive-accent);
    transition: border-bottom 0.15s ease;
}
.markdown-preview-view .internal-link:hover {
    border-bottom: 1px solid var(--interactive-accent);
}

/* --------------------------------------------------------------------------
   4. 右側大綱目錄美化 (Table of Contents)
   -------------------------------------------------------------------------- */
.site-body-right-column {
    width: var(--toc-width) !important;
    min-width: var(--toc-width) !important;
    background-color: transparent !important;
    border-left: 1px solid var(--border-color) !important;
    padding-top: 40px;
}

/* TOC 容器調整為固定釘在右側 (Sticky) */
.site-body-right-column-inner {
    position: sticky;
    top: 40px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 0 16px;
}

/* "Outline" 頂部小標題 */
.outline-heading {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--text-faint);
    margin-bottom: 12px;
    padding-left: 4px;
}

/* TOC 項目階層樣式 */
.outline-item {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    padding: 4px 0 4px 12px !important;
    border-left: 1px solid var(--border-color);
    color: var(--text-muted) !important;
    transition: all 0.15s ease;
}

.outline-item:hover {
    color: var(--text-normal) !important;
    border-left-color: var(--text-muted);
}

/* 當前捲動到的標題高亮 */
.outline-item.is-active {
    color: var(--interactive-accent) !important;
    border-left-color: var(--interactive-accent) !important;
    font-weight: 500;
}

/* 根據 H1, H2, H3 自動縮排 */
.outline-item.header-h1 { padding-left: 12px !important; }
.outline-item.header-h2 { padding-left: 24px !important; }
.outline-item.header-h3 { padding-left: 36px !important; }

/* --------------------------------------------------------------------------
   5. 響應式微調 (RWD：手機版自動隱藏右側 TOC、縮小大字體防爆)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .site-body-right-column {
        display: none !important; /* 螢幕不夠寬時隱藏 TOC，確保閱讀體驗 */
    }
}

@media (max-width: 768px) {
    .site-body-left-column {
        width: 100% !important;
    }
    .site-body-main-column {
        padding: 24px 16px !important; /* 手機版縮小內距，留給內容更多空間 */
    }
    
    /* 💡 【RWD 關鍵優化】手機版自動將 22px 大字縮小回 18px，行高微調至 1.6。
       這能確保文章在小螢幕上不會因為字太大而频繁換行、閱讀零碎 */
    .markdown-preview-view {
        font-size: 18px !important;
        line-height: 1.6;
        letter-spacing: 0.02em;
    }
    
    /* 💡 防止圖片與影片在手機版超出寬度 */
    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* 隱藏官方 Publish 的不必要小元素，讓介面更乾淨 */
.site-footer {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    font-size: 0.85rem;
    color: var(--text-faint);
}