/*
Theme Name: Ocean Dream (大洋彼岸)
Description: 一款追求极致美学、支持动态背景和日夜模式的博客主题。
Version: 1.0
Author: Xiao Bai
*/

/* --- CSS Variables --- */
:root {
/* Light Mode (浅色模式) */
--color-bg-page: #f0f2f5; /* 页面最外层背景，截图偏灰白 */
--color-bg-content-area: rgba(255, 255, 255, 0.85); /* 内容区背景 - 半透明白 */
--color-text-main: #333333;
--color-text-secondary: #555555;
--color-text-meta: #777777;
--color-link: #007bff; /* 截图中的链接蓝色 */
--color-link-hover: #0056b3;
--color-border: #e0e0e0;
--color-header-nav-bg: transparent;
--color-header-nav-text: #333;
--color-header-nav-hover-bg: rgba(0, 0, 0, 0.05);
--color-icon: #555;
--color-icon-hover: #000;
--box-shadow-content: 0 4px 12px rgba(0, 0, 0, 0.08);

/* Dark Mode (深色模式) - 你可以调整为你喜欢的深色系 */
--dark-bg-page: #1a1a2e;
--dark-bg-content-area: rgba(28, 28, 46, 0.9); /* 深蓝紫色调，带透明度 */
--dark-text-main: #e0e0e0;
--dark-text-secondary: #b0b0b0;
--dark-text-meta: #909090;
--dark-link: #9d72ff; /* 亮紫色 */
--dark-link-hover: #7c5bbd;
--dark-border: #3a3a5e;
--dark-header-nav-text: #e0e0e0;
--dark-header-nav-hover-bg: rgba(255, 255, 255, 0.1);
--dark-icon: #b0b0b0;
--dark-icon-hover: #ffffff;
--dark-box-shadow-content: 0 4px 12px rgba(0, 0, 0, 0.25);

/* Typography */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: Georgia, "Times New Roman", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", SimSun, serif; /* 可选 */
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
--font-base-size: 16px;
--line-height-base: 1.75;
--line-height-heading: 1.4;

/* Layout */
--header-height: 60px;
--content-max-width: 720px;
--spacing-unit: 1.5rem; /* 24px @ 16px base */
--border-radius: 8px;
}

/* --- Initialize Dark Mode Variables --- */
body.dark-mode {
--color-bg-page: var(--dark-bg-page);
--color-bg-content-area: var(--dark-bg-content-area);
--color-text-main: var(--dark-text-main);
--color-text-secondary: var(--dark-text-secondary);
--color-text-meta: var(--dark-text-meta);
--color-link: var(--dark-link);
--color-link-hover: var(--dark-link-hover);
--color-border: var(--dark-border);
--color-header-nav-text: var(--dark-header-nav-text);
--color-header-nav-hover-bg: var(--dark-header-nav-hover-bg);
--color-icon: var(--dark-icon);
--color-icon-hover: var(--dark-icon-hover);
--box-shadow-content: var(--dark-box-shadow-content);
}


/* --- Base Styles --- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 仅针对WebKit浏览器隐藏滚动条 */
*::-webkit-scrollbar {
width: 0; /* 垂直滚动条宽度 */
}
html {
font-size: var(--font-base-size);
scroll-behavior: smooth;
}

body {
font-family: var(--font-sans);
background-color: var(--color-bg-page);
color: var(--color-text-main);
line-height: var(--line-height-base);
transition: background-color 0.3s ease, color 0.3s ease;
background-size: cover;
background-position: center center;
background-attachment: fixed; /* 固定背景，产生视差感 */
min-height: 100vh;

}

/* --- Dynamic Backgrounds (示例) --- */
body.page-type-home { background-image: url('images/home.jpg'); /* 截图所示背景 */ }
body.page-type-single { background-image: url('images/single.jpg'); }
body.page-type-category { background-image: url('images/category.jpg'); }
body.page-type-tag { background-image: url('images/tag.jpg'); }
body.page-type-archive { background-image: url('images/archive.jpg'); }
body.page-type-404 { background-image: url('images/404.jpg'); }
/* 默认背景 */
body:not([class*="page-type-"]) { background-image: url('images/default.jpg'); }


/* --- Layout Container --- */
.site-container {
width: 100%;
max-width: var(--content-max-width);
margin:0 auto;
padding: 1rem 0;
}

.content-area-wrapper {
width: 100%;
margin:1rem 0;
padding: calc(var(--spacing-unit) * 1.5);
background-color: var(--color-bg-content-area);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-content);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
flex-grow: 1;
}

/* --- Links --- */
a {
color: var(--color-link);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover, a:focus {
color: var(--color-link-hover);
text-decoration: underline;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-main);
margin-top: var(--spacing-unit);
margin-bottom: calc(var(--spacing-unit) / 2);
line-height: var(--line-height-heading);
font-weight: 600;
}
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.35rem; }

p { margin-bottom: var(--spacing-unit); }
p:last-child { margin-bottom: 0; }

ul, ol { margin-bottom: var(--spacing-unit); padding-left: 1.5em; }
li { margin-bottom: 0.3em; }

blockquote {
border-left: 3px solid var(--color-link);
padding-left: var(--spacing-unit);
margin: var(--spacing-unit) 0;
font-style: italic;
color: var(--color-text-secondary);
}

pre {
background-color: rgba(0,0,0,0.05); /* 通用背景，深色模式下也适用 */
padding: var(--spacing-unit);
border: 1px solid var(--color-border);
border-radius: calc(var(--border-radius) / 2);
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.9em;
line-height: 1.6;
margin: var(--spacing-unit) 0;
color: var(--color-text-secondary);
}
body.dark-mode pre {
background-color: rgba(255,255,255,0.05);
}
code { font-family: var(--font-mono); background-color: rgba(0,0,0,0.05); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; }
pre code { background: none; padding: 0; }

table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--spacing-unit);
font-size: 0.9rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
table th, table td {
border: 1px solid var(--color-border);
padding: 0.6em 0.8em;
text-align: left;
}
table th {
background-color: rgba(0,0,0,0.03);
font-weight: 600;
color: var(--color-text-secondary);
}
body.dark-mode table th {
background-color: rgba(255,255,255,0.03);
}


hr {
border: 0;
height: 1px;
background-color: var(--color-border);
margin: calc(var(--spacing-unit) * 2) 0;
}

img {
max-width: 100%;
height: auto;
border-radius: calc(var(--border-radius) / 2);
}

/* --- Header --- */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
background-color: var(--color-bg-content-area); /* 页眉也使用内容区背景，以融入720px的盒子 */
box-shadow: var(--box-shadow-content);
border-radius: var(--border-radius);
position: relative; /* 为图标定位 */
}

.site-branding .site-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
.site-branding .site-title a {
color: var(--color-text-main);
text-decoration: none;
}
.site-branding .site-description {
font-size: 0.9rem;
color: var(--color-text-secondary);
margin-top: 0.2rem;
}


.header-actions a,
.header-actions button {
background: none;
border: none;
cursor: pointer;
color: var(--color-icon);
padding: 5px;

}
.header-actions a:hover,
.header-actions button:hover {
color: var(--color-icon-hover);
}
.header-actions svg {
width: 20px;
height: 20px;
fill: currentColor;
}

.main-navigation {
/* 导航栏可以放在 site-branding 下方 */
margin-top: calc(var(--spacing-unit) * 0.5);
}
.main-navigation ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
}
.main-navigation a {
color: var(--color-text-secondary);
font-size: 0.95rem;
font-weight: 500;
padding: 0.3em 0.5em;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.main-navigation a:hover {
background-color: var(--color-header-nav-hover-bg);
color: var(--color-text-main);
text-decoration: none;
}

/* --- Main Content Area --- */
.archive-header {
text-align: center;
margin-bottom: var(--spacing-unit);
padding-bottom: calc(var(--spacing-unit) / 2);
border-bottom: 1px solid var(--color-border);
}
.archive-title {
font-size: 1.1rem;
color: var(--color-text-secondary);
font-weight: normal;
}

.post-item {
margin-bottom: calc(var(--spacing-unit) * 2);
padding-bottom: calc(var(--spacing-unit) * 2);
border-bottom: 1px solid var(--color-border);
}
.post-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.post-header { margin-bottom: calc(var(--spacing-unit) * 0.5); }
.post-title { font-size: 1.8rem; margin-bottom: 0.3rem; }
.post-title a { color: var(--color-text-main); text-decoration: none; }
.post-title a:hover { color: var(--color-link); }
.post-meta {
font-size: 0.85rem;
color: var(--color-text-meta);
margin-bottom: var(--spacing-unit);
}
.post-meta span { margin-right: 1em; }
.post-meta a { color: var(--color-text-meta); }
.post-meta a:hover { color: var(--color-link); }

.entry-content {
word-wrap: break-word;  /* 允许长单词或URL换行 */
  overflow-wrap: break-word; /* 更现代的属性，效果类似 */
  white-space: normal; /* 默认值，允许换行 */
}
.entry-content figure { margin: var(--spacing-unit) 0; }
.entry-contentfigcaption { font-size: 0.85em; text-align: center; color: var(--color-text-meta); margin-top: 0.3em; }

/* --- Single Post --- */
.single-post .post-title { font-size: 2.2rem; }

/* --- Comments --- */
.comments-area {
margin-top: calc(var(--spacing-unit) * 2);
padding-top: calc(var(--spacing-unit) * 1.5);
border-top: 1px solid var(--color-border);
}
.comments-title, .comment-reply-title {
font-size: 1.4rem;
margin-bottom: var(--spacing-unit);
font-weight: 600;
}
.comment-list { list-style: none; }
.comment {
padding: var(--spacing-unit) 0;
border-bottom: 1px dotted var(--color-border);
}
.comment:last-child { border-bottom: none; }
.comment-meta { margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--color-text-meta); }
.comment-author { font-weight: 600; color: var(--color-text-secondary); }
.comment-metadata a { color: var(--color-text-meta); }
.comment-content { font-size: 0.95rem; }
.comment-form p { margin-bottom: var(--spacing-unit); }
.comment-form label { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; display: block; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
width: 100%;
padding: 0.6em 0.9em;
border: 1px solid var(--color-border);
border-radius: 4px;
font-size: 0.95rem;
background-color: var(--color-bg-page); /* 与页面背景一致，或稍浅/深 */
color: var(--color-text-main);
}
.comment-form input:focus, .comment-form textarea:focus {
outline: none;
border-color: var(--color-link);
box-shadow: 0 0 0 2px rgba(0,123,255,0.2); /* 浅蓝色光晕 */
}
body.dark-mode .comment-form input:focus, body.dark-mode .comment-form textarea:focus {
box-shadow: 0 0 0 2px rgba(157,114,255,0.25); /* 深色模式下的光晕 */
}

.comment-form textarea { min-height: 100px; }
.form-submit input[type="submit"] {
background-color: var(--color-link);
color: #fff;
border: none;
padding: 0.6em 1.2em;
border-radius: 4px;
cursor: pointer;
font-size: 0.95rem;
transition: background-color 0.2s ease;
}
.form-submit input[type="submit"]:hover { background-color: var(--color-link-hover); }

/* --- Pagination --- */
.pagination {
margin: calc(var(--spacing-unit) * 2) 0;
text-align: center;
}
.pagination a, .pagination span {
display: inline-block;
padding: 0.5em 0.8em;
margin: 0 0.2em;
border: 1px solid var(--color-border);
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination a:hover {
background-color: var(--color-link);
color: #fff;
border-color: var(--color-link);
text-decoration: none;
}
.pagination .current-page, .pagination span.current {
background-color: var(--color-text-main);
color: var(--color-bg-page);
border-color: var(--color-text-main);
font-weight: 600;
}
body.dark-mode .pagination .current-page, body.dark-mode .pagination span.current {
background-color: var(--color-text-main);
color: var(--color-bg-page);
}


/* --- Footer --- */
.site-footer {
text-align: center;
padding: var(--spacing-unit) 0;
font-size: 0.85rem;
color: var(--color-text-meta);
box-shadow: var(--box-shadow-content);
background-color: var(--color-bg-content-area); /* 页脚也使用内容区背景 */


border-radius: var(--border-radius);
}
.site-footer a { color: var(--color-text-meta); }
.site-footer a:hover { color: var(--color-link); }

/* --- 404 Page --- */
.error-404-content { text-align: center; }
.error-404-content h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }

/* Responsive Adjustments */
@media (max-width: 768px) {
:root {
--header-height: 50px;
--spacing-unit: 1.2rem;
}
html { font-size: 15px; }
h1 { font-size: 1.8rem; }
.post-title { font-size: 1.6rem; }
.single-post .post-title { font-size: 2rem; }
.content-area-wrapper { margin: var(--spacing-unit) auto; padding: var(--spacing-unit); }
.site-header { padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit); }
.header-actions { right: var(--spacing-unit); }
}

@media (max-width: 480px) {
html { font-size: 14px; }
:root { --spacing-unit: 1rem; }
.site-branding .site-title { font-size: 1.3rem; }
h1 { font-size: 1.6rem; }
.post-title { font-size: 1.4rem; }
.single-post .post-title { font-size: 1.8rem; }
.content-area-wrapper { margin: calc(var(--spacing-unit)/2) auto; border-radius: 0; box-shadow: none; }
.site-header { border-radius: 0; }
.site-footer { border-radius: 0; margin-bottom: 0; }
.header-actions { gap: calc(var(--spacing-unit) * 0.5); }
.header-actions svg { width: 18px; height: 18px; }
}