/*
Theme Name: Minimal Read
Theme URI: https://minuo.org/
Author: Minuo
Description: 一款极简、克制、专注于文字阅读的 WordPress 主题。
Version: 1.0
*/

/* 基础重置与排版 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.8;
    color: #333;
    max-width: 680px;
    margin: 40px auto;
    padding: 0 20px;
    background-color: #fff;
}

/* 头部导航 */
header {
    margin-bottom: 60px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

header h1 a {
    color: #111;
    text-decoration: none;
    font-size: 24px;
}
/* 头部布局 */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.site-title { margin: 0; font-size: 24px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.site-nav a { text-decoration: none; color: #555; }
.site-nav a:hover { color: #111; }

/* 隐藏触发器 */
.menu-toggle-cb, .menu-toggle-btn { display: none; }

/* 移动端自适应 (屏幕小于 600px) */
@media (max-width: 600px) {
    .menu-toggle-btn { 
        display: block; 
        font-size: 24px; 
        cursor: pointer; 
        user-select: none;
    }
    .site-nav {
        display: none;
        width: 100%;
        margin-top: 20px;
        background: #f9f9f9;
        padding: 10px;
        border-radius: 4px;
    }
    .site-nav ul { flex-direction: column; gap: 10px; }
    /* 核心：用 CSS 伪类控制菜单展开 */
    .menu-toggle-cb:checked ~ .site-nav { display: block; }
}


/* 文章列表与内容 */
article {
    margin-bottom: 40px;
}
article h2 a, article h1 {
    color: #111;
    text-decoration: none;
    font-size: 22px;
}
/* ==========================================================================
   📖 极简后花园：正文与摘要排版高级调校
   ========================================================================== */

/* 1. 针对主页文章摘要、文章详情页正文的排版优化 */
.entry-content, 
.post-excerpt, 
article p {
    font-size: 15px;                  /* 略微丰满的字号，适合安静阅读 */
    line-height: 1.85;                /* 灵动的黄金行高，给眼睛留出滑动的空间 */
    letter-spacing: 0.03em;           /* 极微小的字间距拉伸，赋予中文呼吸感 */
    color: #3f3f3f;                   /* 柔和的深灰，比纯黑更温润、不刺眼 */
    
    /* 🛡️ 杂志级两端对齐：消灭右侧参差不齐的碎边，让边缘变成一条直线 */
    text-align: justify;
    text-justify: inter-word;
    
    /* 处理中英文混排时的断行，防止英文单词过长导致提前换行产生大片空白 */
    word-break: break-word;
}

/* 2. 段落之间的“呼吸”间距 */
.entry-content p, 
.post-excerpt p {
    margin-bottom: 1.5em;             /* 用行高的倍数作为段落间距，比固定 px 更自然 */
    margin-top: 0;
}

/* 3. 增强代码块、引用块的字间距和规整感 */
blockquote {
    border-left: 3px solid #0066cc;   /* 呼应你钟爱的极简蓝色 */
    background: #f9f9f9;
    padding: 15px 20px;
    margin: 20px 0;
    color: #666;
}
blockquote p {
    line-height: 1.75;
    margin-bottom: 0 !important;      /* 引用块内部不留过多空白 */
}

/* ==========================================================================
   📱 移动端排版视觉降噪
   ========================================================================== */
@media (max-width: 768px) {
    .entry-content, 
    .post-excerpt, 
    article p {
        font-size: 14.5px;            /* 手机端字号微调 */
        line-height: 1.75;            /* 手机屏幕窄，行高稍微收紧一点点，防止视线跨度太大 */
        letter-spacing: 0.02em;       /* 稍微收窄字距，适应窄屏 */
    }
}
.post-meta {
    font-size: 13px;
    color: #888;
    margin-top: -10px;
    margin-bottom: 15px;
}
.post-content img {
    max-width: 100%;
    height: auto;
}


/* 🌟 确保分页区域及内部元素绝对居中 */
#homepage-pagination {
    margin: 60px auto 40px auto;
    display: flex;
    justify-content: center; /* 横向居中 */
    align-items: center;     /* 纵向居中 */
    width: 100%;
}

/* 统一按钮的基础样式 */
#homepage-pagination a {
    display: inline-block;
    padding: 10px 24px;
    color: #555;
    text-decoration: none;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
    font-size: 13px;
}

#homepage-pagination a:hover {
    color: #0066cc;
    border-color: #0066cc;
}

/* 没有更多文章时的极简结语样式 */
/* 结语的居中与空气感 */
.no-more-posts {
    display: block;
    color: #bbb;
    font-size: 13.5px;
    letter-spacing: 0.08em;
    padding: 20px 0;
    text-align: center;
}
/* 分页 */
.pagination {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* ==========================================================================
   文章上下页导航
   ========================================================================== */
.post-navigation,
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* 与正文分割的浅色线条 */
    font-size: 14px;
}

/* 统一链接样式 */
.post-navigation a,
.pagination a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-navigation a:hover,
.pagination a:hover{
    color: #111;
}

/* 限定宽度，防止长标题把布局挤变形 */
.nav-previous, .nav-next {
    max-width: 48%;
}

.nav-next {
    text-align: right;
    margin-left: auto; /* 只有单篇（没有上一篇）时，下一篇依然靠右对齐 */
}

/* 📱 移动端自适应优化 */
@media (max-width: 640px) {
    .post-navigation,
    .pagination {
        flex-direction: column; /* 手机端上下堆叠 */
        gap: 15px;
    }
    .nav-previous, .nav-next {
        max-width: 100%;
    }
    .nav-next {
        text-align: left; /* 手机端左对齐，更符合阅读习惯 */
        margin-left: 0;
    }
}

/* ==========================================================================
   📌 极简评论区重塑与层级优化
   ========================================================================== */

/* 1. 评论区整体容器 */
.comments-template {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.comment-list, .comment-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 2. 单条评论外层包裹 */
.comment-body {
    padding: 20px 0;
    border-bottom: 1px dashed #f0f0f0;
    position: relative;
}

/* 3. 评论者元数据（头像、名字、时间、地点） */
.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #999; /* 淡化非核心信息 */
    margin-bottom: 10px;
}

/* 头像微调 */
.comment-meta .avatar {
    border-radius: 4px;
    vertical-align: middle;
}
/* 评论者区域整体 */
.comment-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* 1. 默认状态：不管有没有链接，名字都统一为干净的深色，并去掉下划线 */
.comment-author .fn,
.comment-author .fn a {
    color: #222;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
}

/* 🚀 为有链接的评论作者名字右侧添加极简外链图标 */
.comment-author .fn a.url {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* 名字和图标之间的微小间距 */
    text-decoration: none;
}

.comment-author .fn a.url::after {
    content: "↗";
    font-size: 10px;          /* 图标稍微缩小一点，甘当配角 */
    color: #bbb;              /* 默认是低调的浅灰色，不抢戏 */
    font-weight: normal;
    transition: color 0.2s ease;
    display: inline-block;
}

/* 悬停状态：当鼠标移上去时，名字变蓝，小箭头也跟着变蓝 */
.comment-author .fn a.url:hover {
    color: #0066cc;
}
.comment-author .fn a.url:hover::after {
    color: #0066cc;
}

.comment-author .says {
    font-size:0px;
}

/* 🚀 博主（作者）专属：Flex 布局 + 双向拉平对齐 */
.bypostauthor > .comment-body .comment-author {
    display: inline-flex;
    align-items: center;      /* 确保全局的纵向轴居中 */
    justify-content: center;
    gap: 6px;                 /* 名字和徽标之间的标准间距 */
    line-height: 1;           /* 关键 1：将名字容器的行高拉平，防止外部继承的巨大行高干扰对齐 */
}

/* 针对名字本身的微调 */
.bypostauthor > .comment-body .comment-author .fn {
    display: inline-flex;
    align-items: center;      /* 关键 2：让名字内部也以 Flex 轴对齐 */
    font-style: normal;
}
/* 🚀 博主（作者）专属徽章 - 优雅背景版样式 */
.bypostauthor > .comment-body .comment-author .fn::after {
    content: "AUTHOR";
    font-size: 9px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    letter-spacing: 0.5px;
    
    color: #f5f5f5; /* 调整了文字颜色以确保清晰 */
    background-color: #0066cc; /* 添加了浅灰色背景 */
    
    line-height: 13px;
    padding: 2px 6px; /* 调整了 padding */
    border-radius: 4px; /* 更柔和的圆角 */
    margin-left: 6px;
    font-weight: 500;
    
    /* 关键 4：终极微调（微调视觉重心）
       中文字体通常自带底部下沉，如果渲染出来发现微标依然偏上，
       可以通过下面这行微调 0.5px 或 1px，直到完美 */
    transform: translateY(0.5px);
}

/* 链接（时间、编辑）淡化 */
.comment-meta a {
    color: #999;
    text-decoration: none;
}
.comment-meta a:hover {
    color: #111;
}

/* 4. 评论正文内容 */
.comment-content {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 8px 0;
    word-wrap: break-word;
}

/* 5. 互动操作（回复按钮） */
.reply {
    font-size: 12px;
    margin-top: 8px;
}
.reply a {
    color: #0066cc;
    text-decoration: none;
    opacity: 0.8;
}
.reply a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ==========================================================================
   💥 核心：子评论（回复）“盖楼”层级优化
   ========================================================================== */
.comment-list .children {
    margin-left: 32px;       /* 桌面端优雅缩进 */
    padding-left: 16px;
    border-left: 2px solid #f0f0f0; /* 左侧浅色嵌套引导线 */
}

/* 嵌套评论内的单条样式微调 */
.comment-list .children .comment-body {
    border-bottom: none;     /* 盖楼内部取消虚线分割，靠留白区分 */
    padding: 12px 0 4px 0;
}

/* ==========================================================================
   💬 评论输入区域优化 (#respond / .comment-respond)
   ========================================================================== */

/* 1. 表单整体容器 */
#respond {
    margin-top: 40px;
    padding: 30px 0;
    border-top: 1px solid #f0f0f0;
}

/* 标题：“发表回复” */
#reply-title {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin-bottom: 20px;
}

/* 取消回复链接样式 (当点击某人回复后出现的 [取消回复]) */
#cancel-comment-reply-link {
    font-size: 13px;
    color: #999;
    font-weight: normal;
    margin-left: 10px;
    text-decoration: none;
    border-bottom: 1px dashed #ccc;
}
#cancel-comment-reply-link:hover {
    color: #f44336;
    border-bottom-color: #f44336;
}

/* 2. 登录状态/提示文字 */
.logged-in-as, .comment-notes {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}
.logged-in-as a {
    color: #0066cc;
    text-decoration: none;
}
.logged-in-as a:hover {
    text-decoration: underline;
}

/* 3. 输入框排版（文本域与访客信息表单） */
.comment-form-comment {
    margin-bottom: 15px;
}

/* 统一输入框基础样式 (包括评论框、名字、邮箱、网址) */
#respond textarea,
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    border-radius: 6px; /* 柔和的圆角 */
    font-size: 14px;
    color: #333;
    font-family: inherit;
    transition: all 0.25s ease;
    box-shadow: none;
    -webkit-appearance: none;
}

/* 文本域高度微调 */
#respond textarea {
    min-height: 120px;
    resize: vertical; /* 允许用户垂直拉伸 */
}

/* ✨ 输入框聚焦（Hover / Focus）时的丝滑动效 */
#respond textarea:hover,
#respond input:hover {
    border-color: #b3b3b3;
}
#respond textarea:focus,
#respond input:focus {
    border-color: #111; /* 极简黑边框高亮 */
    outline: none;
    background-color: #fff;
}

/* 占位符颜色 */
#respond ::placeholder {
    color: #bbb;
}

/* 4. 针对未登录访客（名字、邮箱、网址输入框并排） */
@media (min-width: 640px) {
    .comment-form-author,
    .comment-form-email,
    .comment-form-url {
        display: inline-block;
        width: 31.33%;
        margin-right: 3%;
        margin-bottom: 15px;
        vertical-align: top;
    }
    .comment-form-url {
        margin-right: 0; /* 最后一个去掉右边距 */
    }
}

/* 记住密码/记住信息的勾选框区域 */
.comment-form-cookies-consent {
    font-size: 13px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.comment-form-cookies-consent input {
    margin: 0;
}

/* 5. 🚀 极简高级感按钮 (Submit Button) */
#respond input[type="submit"] {
    background: #111; /* 纯黑底色，克制而有力 */
    color: #fff;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
}

#respond input[type="submit"]:hover {
    background: #333; /* 悬停微亮 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#respond input[type="submit"]:active {
    background: #000;
}

/* 6. 弱化垃圾评论过滤提示 (Akismet 提示等) */
.akismet_comment_form_privacy_notice {
    font-size: 12px;
    color: #999 !important;
    margin-top: 15px;
}
.akismet_comment_form_privacy_notice a {
    color: #999;
}


/* ==========================================================================
   页脚基础基础样式
   ========================================================================== */
.site-footer {
    margin-top: 60px;
    padding: 30px 0;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #999;
    text-align: center;
}

.site-footer a {
    color: #666;
    text-decoration: none;
}

.site-footer a:hover {
    color: #111;
}

/* ==========================================================================
   📱 移动端自适应优化 (屏幕小于 640px)
   ========================================================================== */
@media (max-width: 640px) {
    /* 减少缩进，防止手机端多层嵌套后内容变窄 */
    .comment-list .children {
        margin-left: 16px;
        padding-left: 10px;
    }
    
    /* 元数据信息在窄屏下允许舒适换行 */
    .comment-meta {
        gap: 6px;
        line-height: 1.4;
    }
    
    .comment-content {
        font-size: 14.5px; /* 稍微缩小手机端字号，提高阅读密度 */
    }
}

/* ==========================================================================
   🍃 优雅流动：新文章异步加载入场动画
   ========================================================================== */

/* 1. 定义动画轨迹：淡入的同时，从下方 10px 的地方微微托起 */
@keyframes mspFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. 将动画绑定到每一篇文章容器上 */
#post-list-container .post-item {
    /* 
       使用 cubic-bezier（贝塞尔曲线）让动画前快后慢，
       模拟自然界中落叶或水流慢慢静止的优雅感
    */
    animation: mspFadeInUp 0.45s cubic-bezier(0.215, 0.610, 0.355, 1) both;
}