/*
=== 教学注释：style.css 的头部注释是 WordPress 识别主题的唯一凭证 ===
Theme Name: MiniBlog 学习主题
Theme URI: https://example.com/miniblog
Author: 学习者
Author URI: https://example.com
Description: 一个为学习 WordPress 主题开发而生的迷你博客主题：响应式布局 + 自定义器主题选项。每个文件都带教学注释，讲解它在模板层级中的角色。
Version: 1.0.0
Requires at least: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: miniblog
Tags: blog, two-columns, custom-menu, featured-images
*/

/* =========================================================
   1. 全局基础样式
   ========================================================= */
:root {
    /* 教学注释：这个变量在自定义器里选"强调色"时会被 PHP 动态改写，
       见 functions.php 中 miniblog_css_variables() 函数 */
    --mb-accent: #e63946;
    --mb-text: #2b2d42;
    --muted: #6c757d;
    --bg: #f8f9fa;
    --card: #ffffff;
    --border: #e9ecef;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--mb-text);
    background: var(--bg);
    line-height: 1.7;
}

a { color: var(--mb-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================================
   2. 头部导航（响应式核心：桌面横排，手机汉堡菜单）
   ========================================================= */
.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-branding {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
}

.site-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}
.site-title a { color: var(--mb-text); }

/* 汉堡按钮：桌面隐藏，手机显示 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--mb-text);
    padding: 4px 10px;
}

.main-navigation ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0 0 10px;
    flex-wrap: wrap;
}

.main-navigation a {
    display: block;
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--mb-text);
    font-size: .95rem;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    background: var(--mb-accent);
    color: #fff;
    text-decoration: none;
}

/* =========================================================
   3. 主体布局：双栏（内容 + 侧栏）
   教学注释：用 CSS Grid 实现两栏；手机上自动变单栏
   ========================================================= */
.site-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    padding: 32px 0;
}

/* 当自定义器里关掉侧栏时，functions.php 会给 body 加 .mb-no-sidebar，
   这一行让它退化为单栏 —— 这就是"主题选项"影响布局的原理 */
body.mb-no-sidebar .site-main-layout {
    grid-template-columns: minmax(0, 1fr);
}

/* =========================================================
   4. 文章卡片列表（首页/归档页共用）
   ========================================================= */
.post-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 24px;
}

.post-card .entry-title {
    margin: 0 0 8px;
    font-size: 1.4rem;
}

.entry-meta {
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 12px;
}

.entry-content { margin: 0; }

.more-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
}

/* =========================================================
   5. 侧栏小工具
   ========================================================= */
.sidebar .widget {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.sidebar .widget-title {
    margin: 0 0 14px;
    font-size: 1.05rem;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--mb-accent);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }

/* =========================================================
   6. 单篇文章 / 页面
   ========================================================= */
.single-post .entry-title,
.page .entry-title {
    font-size: 1.9rem;
    margin-bottom: 8px;
}

/* 特色图像（缩略图）圆角 */
.wp-post-image { border-radius: var(--radius); }

/* =========================================================
   7. 评论
   ========================================================= */
.comments-area { margin-top: 40px; }
.comment-list {
    list-style: none;
    padding: 0;
}
.comment-list .comment {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    padding: 16px 20px;
    margin-bottom: 14px;
}
.comment-reply-link { font-size: .85rem; }

/* =========================================================
   8. 页脚
   ========================================================= */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--card);
    padding: 24px 0;
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
}

/* =========================================================
   9. 响应式断点：768px 以下进入手机布局
   ========================================================= */
@media (max-width: 768px) {
    .menu-toggle { display: block; }

    /* 手机上导航默认收起，加 .is-open 后展开 */
    .main-navigation { display: none; }
    .main-navigation.is-open { display: block; }
    .main-navigation ul { flex-direction: column; padding-bottom: 14px; }
    .main-navigation a { padding: 10px 14px; }

    /* 双栏变单栏，侧栏掉到内容下方 */
    .site-main-layout { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   10. WordPress 自带的对齐/图库类，主题必须支持否则编辑器内容会乱
   ========================================================= */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.wp-caption-text { color: var(--muted); font-size: .85rem; text-align: center; }
.sticky { border-left: 4px solid var(--mb-accent); }