/*
Theme Name: Twenty Twenty-Three
Theme URI: https://wordpress.org/themes/twentytwentythree
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Three is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentythree
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* ================ 全局基础优化 ================ */

/* 更现代的字体（可选 Google Fonts，这里用系统默认更稳） */
/* --- 全局設置：背景和文字顏色 --- */
body {
    background-color: #F5F5F5; /* 淺灰色背景 */
    color: #333333; /* 主要文字顏色 */
    font-family: sans-serif;
}

/* --- 主標題和鏈接顏色：工業藍 --- */
h1, h2, h3, h4, h5, h6, a {
    color: #003366; 
}

/* --- 按鈕樣式：安全黃/橙 --- */
.wp-block-button__link {
    background-color: #FF9900; /* 行動按鈕背景色 */
    color: #FFFFFF; /* 按鈕文字顏色 */
    border-radius: 5px; /* 圓角 */
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
}

.wp-block-button__link:hover {
    background-color: #e68900; /* 懸停效果 */
}

/* --- 頁眉和頁腳背景色：工業藍 --- */
/* 請注意：Twenty Twenty-Three 使用塊編輯器，可能需要調整選擇器以匹配您的具體塊名稱 */
.site-header, .site-footer, .wp-block-template-part.site-footer {
    background-color: #003366;
    color: #FFFFFF;
}

.site-header a, .site-footer a {
    color: #FFFFFF; /* 確保頁眉頁腳的鏈接文字是白色 */
}
/* 1. 核心佈局與響應式設置 (最大寬度1200px) */
.entry-content {
    max-width: 1200px;         /* 限制內容最大寬度 */
    margin-left: auto;         /* 內容居中 */
    margin-right: auto;        /* 內容居中 */
    padding: 0 25px;           /* 左右內邊距，防止內容貼邊 */
    line-height: 1.6;          /* 增加行高，提高閱讀舒適度 */
    font-size: 16px;           /* 設置基礎字體大小 */
    color: #333333;            /* 使用深灰色文字，專業且易讀 */
}

/* 2. 標題樣式 (專業藍色) */
.entry-content h1,
.entry-content h2,
.entry-content h3 {
    color: #003366;           /* 應用工業藍色 */
    margin-top: 1.5em;        /* 標題上方增加間距 */
    margin-bottom: 0.5em;     /* 標題下方減少間距 */
    border-bottom: 2px solid #FF9900; /* 添加底部橙色強調線 */
    padding-bottom: 5px;
}

/* 3. 段落樣式 */
.entry-content p {
    margin-bottom: 1em;       /* 段落之間保持一致的間距 */
    text-align: justify;      /* 文本兩端對齊，使版面更整齊 */
}

/* 4. 列表樣式 (更清晰的列表) */
.entry-content ul,
.entry-content ol {
    margin-bottom: 1em;
    padding-left: 20px;       /* 增加列表縮進 */
}

.entry-content li {
    margin-bottom: 0.5em;
}

/* 5. 圖片樣式 */
.entry-content img {
    max-width: 100%;          /* 確保圖片響應式，不超出內容區域 */
    height: auto;             /* 保持圖片比例 */
    margin: 1em 0;            /* 圖片上下留白 */
    border-radius: 5px;       /* 輕微圓角效果 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加陰影提升質感 */
}
/* --- 1. 確保內容容器為定位上下文，並設置最大寬度 --- */
/* 移除 display: flex，恢復正常內容流 */
.entry-content {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    position: relative; /* 確保子元素的絕對定位能正確參考這裡 */
}

/* --- 2. 定義左側 TOC 欄：固定在側邊並脫離內容流 --- */
.table-of-contents {
    width: 250px;           /* TOC 的固定寬度 */
    background-color: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    
    /* 核心解決方案：結合固定定位和絕對定位 */
    /*position: sticky;        讓它在滾動時固定 
    top: 20px;              /* 距離頂部 20px 停止 */
    height: fit-content;    /* 高度自適應內容 */
    float: left;            /* 使用浮動讓後面的內容環繞它 */
    margin-right: 30px;     /* TOC 和右側內容之間的間距 */
}

/* --- 3. 解決內容重疊：確保內容為 TOC 騰出空間 --- */
/* 我們使用 overflow 來強制內容不會被浮動的 TOC 覆蓋 */
.entry-content > *:not(.table-of-contents) {
    overflow: hidden; /* 強制創建一個新的 BFC，內容會自動避開左側浮動的 TOC */
    /*padding-top: 1em;  給右側內容頂部留一點空間，防止與標題太近 */
}


/* --- 4. 美化 TOC 列表樣式 --- */
.table-of-contents h4 {
    color: #003366; 
    margin-bottom: 10px;
}
.table-of-contents ul {
    list-style-type: none;
    padding-left: 0;
}
.table-of-contents li a {
    text-decoration: none;
    color: #003366; 
    display: block;
    padding: 3px 0;
}
.table-of-contents .toc-h3 {
    padding-left: 15px; /* 子標題縮進 */
    font-size: 0.9em;
}

/* 5. 響應式設計：在手機上恢復單欄佈局 */
@media (max-width: 768px) {
    .table-of-contents {
        position: static;     /* 取消固定定位 */
        width: 100%;
        float: none;          /* 取消浮動 */
        margin-right: 0;
        margin-bottom: 20px;
    }
    .entry-content {
        padding: 0 10px;
    }
    .entry-content > *:not(.table-of-contents) {
        overflow: visible; /* 恢復正常流動 */
    }
}
.entry-content table {
    /*max-width: 100%;       */
    width: 100%;           
    display: block;        
    /* 核心解決方案：添加 !important 提高優先級 */
    overflow-x: auto !important; 
    border-collapse: collapse; 
    margin-bottom: 1em;    
}

/* 美化表格單元格樣式 */
.entry-content th, 
.entry-content td {
    padding: 10px;                  
    border: 1px solid #ddd;         
    text-align: left;               
    vertical-align: top;            
}

/* 確保圖片在表格單元格內也是響應式的 */
.entry-content table img {
    max-width: 100%;
    height: auto;
}