/*----------------------------------------*/
/* 科技資訊與程式設計教學部落格 - 主題 CSS */
/*----------------------------------------*/

/* 全局字體與基礎樣式 */
:root {
    --primary-color: #1E40AF; /* 科技深藍色 */
    --secondary-color: #3B82F6; /* 淺科技藍色 */
    --accent-color: #10B981; /* 螢光綠，程式碼高亮風格 */
    --text-color: #1F2937; /* 深灰色文字 */
    --background-color: #F9FAFB; /* 淺灰背景 */
    --code-bg: #2D3748; /* 稍淺的深灰背景，程式碼區塊用 */
    --code-text: #E5E7EB; /* 程式碼區塊淺色文字 */
}

/* 文章內文標題 */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-family: 'Inter', sans-serif; /* 現代無襯線字體，科技感強 */
    color: var(--primary-color); /* 科技深藍色 */
    line-height: 1.3;
    margin: 1.5em 0 0.5em;
    font-weight: 600;
}

/* 特定層級標題樣式 */
.entry-content h1 {
    font-size: 2.2em;
    border-left: 4px solid var(--accent-color); /* 螢光綠左邊框 */
    padding-left: 12px;
}

.entry-content h2 {
    font-size: 1.8em;
    border-bottom: 2px solid var(--secondary-color); /* 淺藍色底線 */
    padding-bottom: 8px;
}

.entry-content h3 {
    font-size: 1.5em;
    color: var(--secondary-color); /* 淺藍色次標題 */
}

.entry-content h4 {
    font-size: 1.3em;
    color: var(--text-color); /* 深灰色 */
}

.entry-content h5,
.entry-content h6 {
    font-size: 1.1em;
    color: var(--text-color);
    font-weight: 500;
}

/* 懸停效果 */
.entry-content h1:hover,
.entry-content h2:hover,
.entry-content h3:hover,
.entry-content h4:hover,
.entry-content h5:hover,
.entry-content h6:hover {
    color: var(--accent-color); /* 懸停時轉為螢光綠 */
    transition: color 0.3s ease;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .entry-content h1 { font-size: 1.8em; }
    .entry-content h2 { font-size: 1.5em; }
    .entry-content h3 { font-size: 1.3em; }
    .entry-content h4 { font-size: 1.1em; }
    .entry-content h5,
    .entry-content h6 { font-size: 1em; }
}

/*----------------------------------------*/
/* 自訂 HTML 區塊 */
.custom-html-block {
    background-color: var(--background-color); /* 淺灰背景 */
    border: 1px solid var(--secondary-color); /* 淺藍色邊框 */
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 輕微陰影 */
}

/* 自訂區塊內標題 */
.custom-html-block h1,
.custom-html-block h2,
.custom-html-block h3,
.custom-html-block h4,
.custom-html-block h5,
.custom-html-block h6 {
    font-family: 'Inter', sans-serif;
    margin: 0 0 10px;
}

.custom-html-block h2 {
    color: var(--primary-color); /* 科技深藍色 */
    font-size: 1.8em;
    border-bottom: 2px solid var(--secondary-color);
}

.custom-html-block h3 {
    color: var(--secondary-color); /* 淺藍色 */
    font-size: 1.4em;
}

/* 清單樣式 */
.custom-html-block ul {
    list-style: none;
    padding-left: 0;
}

.custom-html-block ul li {
    position: relative;
    padding-left: 20px;
    margin: 8px 0;
}

.custom-html-block ul li::before {
    content: '>';
    color: var(--accent-color); /* 螢光綠箭頭 */
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* 連結樣式 */
.custom-html-block a {
    color: var(--secondary-color); /* 淺藍色連結 */
    text-decoration: none;
    transition: color 0.3s ease;
}

.custom-html-block a:hover {
    color: var(--accent-color); /* 懸停時轉為螢光綠 */
    text-decoration: underline;
}

/* 段落樣式 */
.custom-html-block p {
    color: var(--text-color);
    margin: 10px 0;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .custom-html-block {
        padding: 15px;
        margin: 15px 0;
    }
    .custom-html-block h2 { font-size: 1.5em; }
    .custom-html-block h3 { font-size: 1.2em; }
}

/*----------------------------------------*/
/* 程式碼區塊樣式 */
pre, code {
    font-family: 'Fira Code', monospace; /* 程式碼專用字體 */
    background-color: var(--code-bg); /* 稍淺的深灰背景 */
    color: var(--code-text); /* 淺色文字 */
    border-radius: 6px;
    padding: 3px; /* 縮減內邊距 */
    margin: 3px 0; /* 縮減外邊距 */
    border: 1px solid #4B5563; /* 細灰色邊框，取代陰影 */
    font-size: 0.9em; /* 稍小的字體 */
    line-height: 1.5; /* 更緊湊的行高 */
    overflow-x: auto;
}

/* 程式碼高亮（與 Prism.js 或 Highlight.js 相容） */
code .keyword { color: #F472B6; } /* 粉紫色關鍵字 */
code .string { color: #34D399; } /* 綠色字串 */
code .comment { color: #6B7280; } /* 灰色註釋 */
code .function { color: #60A5FA; } /* 藍色函數 */

/*----------------------------------------*/

/* 圖片置中 */
.wp-block-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    border-radius: 8px; /* 圖片圓角 */
}

/* Google Maps iframe 置中樣式 */
.entry-content iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* 確保不超過容器寬度 */
    width: 600px; /* 預設寬度，適合大多數地圖 */
    border: 1px solid var(--secondary-color); /* 淺藍色邊框，與主題一致 */
    border-radius: 8px; /* 圓角，與其他元素協調 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 輕微陰影 */
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Instagram 貼文置中樣式 */
.entry-content .instagram-media {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px; /* Instagram 貼文標準寬度 */
    border: 1px solid var(--secondary-color); /* 淺藍色邊框 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 輕微陰影 */
    margin-top: 15px;
    margin-bottom: 15px;
}

/* 響應式設計 - iframe 和 Instagram 貼文 */
@media (max-width: 768px) {
    .entry-content iframe {
        width: 100%; /* 在行動裝置上全寬 */
    }
    .entry-content .instagram-media {
        width: 100%; /* 在行動裝置上全寬 */
        max-width: 100%;
    }
}

/*----------------------------------------*/

/* 文章目錄樣式 */
#toc-list {
    background-color: var(--background-color);
    border: 1px solid var(--secondary-color);
    padding: 15px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
}

#toc-list ul {
    list-style: none;
    padding-left: 0;
}

#toc-list .toc-h3 {
    margin-left: 20px;
}

#toc-list .toc-h4 {
    margin-left: 40px;
}

#toc-list a {
    color: var(--secondary-color);
    text-decoration: none;
}

#toc-list a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/*----------------------------------------*/