/* ==========================================================================
   MorphCMS - 终极博客母版皮肤 (Blog Blueprint Skin)
   
   [🤖 AI 换肤专属说明书 - STRICT RULES FOR FUTURE AI]
   1. 🎨 【视觉换肤】: 无论你要生成什么行业的皮肤，请**优先且仅修改 `:root` 变量区**（颜色、圆角、背景）。
   2. ⚠️ 【结构禁区】: 带有 `[结构层]` 注释的代码块（包含 flex, grid, margin, padding, position），**严禁任何修改或删除**！
   3. 📖 【博客特性】: 这是单列直排（Single-Column）的自媒体博客模板，严禁将其排版改为多列卡片网格。请维护良好的阅读留白。
   ========================================================================== */

/* ==========================================
   1. 🎨 全局超级变量池 (AI 换肤核心操作区)
   ========================================== */
:root {
    /* --- 主题核心色彩 (AI 可随意修改此区域适配新行业/风格) --- */
    --primary-color: #2c3e50;       /* 博客主标题/Logo色调 */
    --primary-hover: #1a252f;       /* 主标题/Logo悬停加深色调 (整合自 home.php) */
    --accent-color: #3498db;        /* 高亮强调色 (链接、按钮、悬停) */
    --accent-hover: #2980b9;        /* 强调色悬停态 */
    
    /* --- 背景与容器色彩 --- */
    --bg-body: #f4f6f8;             /* 网页最底层大背景色 (护眼浅灰) */
    --bg-white: #ffffff;            /* 内容卡片底色 */
    
    /* --- 文本色彩 --- */
    --text-color: #333333;          /* 正文主色 */
    --text-light: #7f8c8d;          /* 弱化辅助说明文字 (日期、摘要、面包屑) */
    
    /* --- 边框、阴影与圆角特征 --- */
    --border-color: #e1e4e8;        /* 极简分割线颜色 */
    --shadow: 0 4px 6px rgba(0,0,0,0.05);          /* 基础卡片微阴影 */
    --shadow-hover: 0 10px 15px rgba(0,0,0,0.08);  /* 悬停时的浮雕阴影 */
    --radius: 8px;                  /* 全局统一圆角 */
    
    /* --- ⚠️ 结构参数 (AI 严禁修改) --- */
    --max-width: 900px;             /* 博客经典最佳阅读宽度，严禁改宽 */
    --container-width: 900px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
}

/* ==========================================
   2. ⚠️ 基础重置 (Reset) [结构层 - 严禁修改]
   ========================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-body); color: var(--text-color); line-height: 1.8; font-size: 16px; display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--accent-color); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; border-radius: 4px; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--spacing-md); }
.btn { display: inline-block; padding: 10px 24px; border-radius: var(--radius); font-weight: 500; transition: all 0.3s; cursor: pointer; }
.btn-primary { background-color: var(--accent-color); color: #fff; }
.btn-primary:hover { background-color: var(--accent-hover); color: #fff; }

/* ==========================================
   3. 页头、导航与搜索框 (Header & Nav)
   ========================================== */
/* 🎨 [视觉层] */
.site-header { background: var(--bg-white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 1000; }
.site-logo a { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); letter-spacing: 0.5px; white-space: nowrap; }

/* ⚠️ [结构层] 顶部防挤压排版 */
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 70px; gap: 20px; }
.main-nav > ul { display: flex; gap: 25px; list-style: none; align-items: center; }
.main-nav a { color: var(--text-color); font-weight: 500; padding: 5px 0; position: relative; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--accent-color); }
.main-nav a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--accent-color); }

/* ⚠️ [结构层] 下拉菜单特效 */
.main-nav .dropdown { position: relative; }
.main-nav .caret { font-size: 0.75em; margin-left: 6px; color: var(--text-light); transition: transform 0.3s ease; display: inline-block; }
.main-nav .dropdown:hover .caret { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background-color: var(--bg-white); min-width: 160px; box-shadow: var(--shadow-hover); border-radius: var(--radius); padding: 10px 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; z-index: 1001; list-style: none; border: 1px solid var(--border-color); }
.main-nav .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-menu li a { display: block; padding: 10px 20px; font-weight: normal; font-size: 0.95rem; white-space: nowrap; }
.dropdown-menu li a::after { display: none; }
.dropdown-menu li a:hover { background-color: var(--bg-body); color: var(--accent-color); }

/* 🔍 搜索框组件 (桌面端 - 极简无框魔术滑出) */
.nav-search-item { display: flex; align-items: center; margin-left: 15px; }
.nav-search-form { display: flex; align-items: center; position: relative; }
.nav-search-input { border: none; border-bottom: 1px solid transparent; background: transparent; outline: none; font-size: 0.95rem; color: var(--text-color); width: 0; padding: 0; opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-search-form:hover .nav-search-input, .nav-search-input:focus { width: 150px; opacity: 1; padding: 4px 8px; margin-right: 5px; border-bottom-color: var(--border-color); }
.nav-search-input:focus { border-bottom-color: var(--accent-color); }
.nav-search-btn { border: none; background: transparent; color: var(--text-color); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; padding: 5px; transition: color 0.3s ease; }
.nav-search-btn i { font-size: 0.95rem; }
.nav-search-btn:hover, .nav-search-form:focus-within .nav-search-btn { color: var(--accent-color); }

/* ==========================================
   4. 页面主体与博客文章流 (Blog Post Stream)
   ========================================== */
/* ⚠️ [结构层] 主体间距 */
.site-main { flex: 1; padding: var(--spacing-lg) 0; }
.hero-section { text-align: center; margin-bottom: var(--spacing-lg); padding: 40px 20px; background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-section h1 { font-size: 2.2rem; color: var(--primary-color); margin-bottom: 15px; }
.hero-section p { font-size: 1.1rem; color: var(--text-light); max-width: 600px; margin: 0 auto; }

/* 列表页特殊修饰 (整合自 list.php) */
.hero-section.list-hero { padding: 30px 20px; margin-bottom: 30px; }
.hero-section.list-hero h1 { font-size: 1.8rem; margin-bottom: 5px; }

/* 404页面特殊修饰 (整合自 404.php) */
.hero-section.hero-404 { padding: 100px 20px; }
.hero-section.hero-404 h1 { font-size: 5rem; color: var(--primary-color); margin-bottom: 20px; }
.hero-section.hero-404 p { font-size: 1.2rem; color: var(--text-light); margin-bottom: 30px; }

/* ⚠️ [结构层 - AI 提示: 此处为博客单列直排逻辑，严禁修改为 grid] */
.post-grid { display: flex; flex-direction: column; gap: 40px; margin-bottom: 60px; padding-top: 20px; }
.post-card { background: var(--bg-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

/* 空文章状态提示 (整合自 home.php / list.php) */
.empty-post-msg { text-align: center; width: 100%; color: #999; padding: 50px 0; }

/* 🎨 [视觉层] 大图封面与图文混排 */
.post-cover-link { display: block; overflow: hidden; }
.post-cover { width: 100%; height: 280px; object-fit: cover; display: block; border-bottom: 1px solid var(--border-color); transition: transform 0.5s ease; }
.post-card:hover .post-cover { transform: scale(1.03); }
.post-cover.empty-cover { display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; color: #999; font-size: 0.95rem; }
.post-content { padding: 30px; flex: 1; display: flex; flex-direction: column; }
.post-meta { font-size: 0.85rem; color: var(--text-light); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; }
.post-meta a { color: var(--primary-hover); font-weight: 600; margin-right: 10px; }
.post-title { font-size: 1.6rem; color: var(--primary-color); margin-bottom: 15px; line-height: 1.4; }
.post-title a { color: inherit; }
.post-title a:hover { color: var(--accent-color); }
.post-desc { color: #555; font-size: 1.05rem; line-height: 1.6; margin-bottom: 20px; flex: 1; }
.read-more { font-size: 0.95rem; font-weight: 600; align-self: flex-start; display: inline-block; }

/* === 分页组件 === */
.pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 40px; }
.page-btn { padding: 8px 18px; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-color); font-weight: 500; }
.page-btn:hover { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.page-current { font-size: 0.95rem; color: var(--text-light); }

/* ==========================================
   5. 文章详情与 Markdown 沉浸阅读区
   ========================================== */
.single-post { background: var(--bg-white); padding: 50px; border-radius: var(--radius); box-shadow: var(--shadow); }
.breadcrumb { font-size: 0.9rem; color: var(--text-light); margin-bottom: 25px; }
.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--accent-color); }
.breadcrumb span { margin: 0 8px; }
.post-header { margin-bottom: 40px; text-align: center; border-bottom: 1px solid var(--border-color); padding-bottom: 25px; }
.post-header h1 { font-size: 2.2rem; color: var(--primary-color); margin-bottom: 15px; line-height: 1.3; }

/* 📝 Markdown 核心渲染样式 (优化留白与质感) */
.markdown-body { font-size: 1.1rem; line-height: 1.8; color: #2c3e50; }
.markdown-body h2 { font-size: 1.6rem; margin: 40px 0 20px; padding-bottom: 10px; color: var(--primary-color); }
.markdown-body h3 { font-size: 1.3rem; margin: 30px 0 15px; color: var(--primary-color); }
.markdown-body p { margin-bottom: 20px; }
.markdown-body img { display: block; max-width: 100%; border-radius: 6px; margin: 30px auto; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
.markdown-body blockquote { border-left: 4px solid var(--accent-color); background: #f9f9f9; padding: 15px 20px; margin: 25px 0; color: #555; border-radius: 0 4px 4px 0; font-style: italic; }
.markdown-body pre { background: #2d3436; color: #dfe6e9; padding: 20px; border-radius: 8px; overflow-x: auto; margin-bottom: 25px; font-size: 0.95rem; line-height: 1.5; }
.markdown-body code { font-family: Consolas, Monaco, monospace; }
.markdown-body :not(pre) > code { background: #f1f2f6; color: #c0392b; padding: 3px 6px; border-radius: 4px; font-size: 0.9em; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 25px 0; }
.markdown-body th, .markdown-body td { padding: 12px 15px; border: 1px solid var(--border-color); text-align: left; }
.markdown-body th { background-color: var(--bg-body); font-weight: 600; }

/* 上下篇上下文 */
.post-navigation { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--border-color); gap: 20px; }
.nav-item { flex: 1; display: flex; flex-direction: column; }
.nav-next { text-align: right; align-items: flex-end; }
.nav-label { font-size: 0.85rem; color: var(--text-light); margin-bottom: 8px; }
.nav-title { font-weight: 500; font-size: 1.05rem; color: var(--primary-color); line-height: 1.4; }
.nav-title:hover { color: var(--accent-color); }

/* ==========================================
   6. 页脚与友情链接 (Footer)
   ========================================== */
.site-footer { background: var(--bg-white); border-top: 1px solid var(--border-color); padding: 40px 0 20px; text-align: center; }
.footer-links { margin-bottom: 15px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--text-light); font-size: 0.95rem; }
.footer-links a:hover { color: var(--accent-color); }
.copyright { color: #999; font-size: 0.9rem; }

/* 🤝 友情链接专属视觉 */
.friend-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px dashed var(--border-color); }
.friend-links .links-title { color: var(--text-color); font-weight: 600; font-size: 0.95rem; }
.friend-links a { color: var(--text-light); font-size: 0.95rem; transition: color 0.3s ease; }
.friend-links a:hover { color: var(--accent-color); }

/* ==========================================
   7. 移动端菜单与搜索弹层 (Mobile Overlay)
   ========================================== */
/* ⚠️ [结构层] */
.mobile-menu-btn { display: none; font-size: 1.8rem; cursor: pointer; color: var(--primary-color); }
.mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.98); z-index: 2000; overflow-y: auto; backdrop-filter: blur(5px); }
.close-menu-btn { position: absolute; top: 20px; right: 25px; font-size: 2.5rem; color: var(--primary-color); cursor: pointer; line-height: 1; }
.mobile-nav-list { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; list-style: none; padding: 0; }
.mobile-nav-list > li { margin: 15px 0; text-align: center; width: 100%; }
.mobile-nav-list > li > a { font-size: 1.5rem; font-weight: 600; color: var(--primary-color); }
.mobile-nav-list .dropdown-title { font-size: 1.5rem; font-weight: 600; color: var(--text-light); margin-bottom: 10px; display: block; }
.mobile-dropdown-menu { list-style: none; padding: 0; }
.mobile-dropdown-menu li a { font-size: 1.1rem; color: var(--accent-color); display: block; padding: 8px 0; }

/* 🔍 移动端内置搜索框 (极简下划线版) */
.mobile-search-item { margin-top: 30px !important; width: 85%; max-width: 350px; }
.mobile-search-form { display: flex; align-items: center; border-bottom: 2px solid var(--border-color); padding: 8px 5px; width: 100%; transition: border-color 0.3s ease; }
.mobile-search-form:focus-within { border-bottom-color: var(--accent-color); }
.mobile-search-input { border: none; background: transparent; outline: none; font-size: 1.1rem; color: var(--text-color); flex-grow: 1; padding: 0; }
.mobile-search-btn { border: none; background: transparent; color: var(--text-light); cursor: pointer; display: flex; align-items: center; padding: 5px; transition: color 0.3s ease; }
.mobile-search-btn:hover, .mobile-search-form:focus-within .mobile-search-btn { color: var(--accent-color); }

/* ==========================================
   8. 响应式规则 (Media Queries)
   [🤖 AI 提示: 严禁破坏自适应断点，以保障移动端体验]
   ========================================== */
@media (max-width: 768px) {
    .header-inner { height: 65px; }
    .main-nav, .nav-search-item { display: none; }
    .mobile-menu-btn { display: block; }
    .single-post { padding: 25px 20px; }
    .post-header h1 { font-size: 1.6rem; }
    .hero-section { padding: 30px 15px; }
    .post-navigation { flex-direction: column; gap: 20px; }
    .nav-next { text-align: left; align-items: flex-start; }
    .friend-links { gap: 10px; margin-bottom: 20px; padding-bottom: 15px; }
    .friend-links .links-title, .friend-links a { font-size: 0.9rem; }
    .post-cover { height: 200px; }
}