/*
Theme Name:   MiPlus Child
Theme URI:    https://www.shupingba.com/
Description:  MiPlus 主题的子主题，用于安全地存放自定义 CSS 和功能修改。
Author:       修图留语
Author URI:   https://www.shupingba.com/
Template:     MiPlus
Version:      1.0.0
*/

/* 你可以在这里接着写你自己的自定义 CSS 样式 */

 /* ==========================================================================
   修图留语（MiPlus主题）正文图片拉伸修复 & 侧边栏头像尺寸强行修正
   ========================================================================== */

/* 1. 只影响文章正文区 (.article-content) 内部的图片 */
.article-content img:not(.avatar):not(.user-avatar):not(.mi-search-user-avatar):not(.mi-rank-avatar):not(.related-post-img) {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;   /* 允许在手机端缩小，但绝对不允许放大超过原图 */
    object-fit: contain !important; /* 保持原图比例 */
    display: block !important;      /* 独立成行 */
    margin: 18px auto !important;   /* 居中对齐，并与上下文字保持舒适的间距 */
    box-sizing: border-box !important;
}

/* 兼容处理：针对被 p 标签紧紧包裹的段落内小图 */
.article-content p img {
    display: inline-block !important; 
    vertical-align: middle !important;
}

/* 2. 强行把“最新在线”小工具的头像死死锁在标准尺寸（40px） */
.mi-rank-left {
    width: 40px !important;
    height: 40px !important;
    position: relative !important;
    display: inline-block !important;
}

.mi-rank-left a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.mi-rank-left img.mi-rank-avatar {
    width: 100% !important;
    height: 100% !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important; /* 如果原本是圆形的，强行恢复圆形 */
    object-fit: cover !important;
}

/* 3. 基础安全隔离：确保站点其他核心区域头像雷打不动 */
.mi-UserInfo img,
.mi-search-user-avatar,
.avatar,
.comment-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}



/*-------------------------------------------------------------------------------
 * 文章阅读体验优化 - 增加行间距
 *-------------------------------------------------------------------------------
*/

/* ==========================================
 * MiPlus 主题文章排版全面优化（电脑+手机端自适应）
 * ========================================== */

/* 1. 正文段落：1.8倍黄金行高，配合原主题的首行缩进，阅读最舒服 */
.article-content p,
.mi-postdocs-article-body p {
    line-height: 1.8 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.03em !important; /* 增加一点微小的字间距，缓解手机看字密带来的头晕 */
}

/* 2. 列表项（如1.2.3或圆点）：行高同步放大，防止多行列表挤在一起 */
.article-content li,
.mi-postdocs-article-body li {
    line-height: 1.8 !important;
    margin-bottom: 6px !important;
}

/* 3. 文章标题（H1-H6）：稍微拉开上下间距，让段落层次更分明 */
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6 {
    line-height: 1.4 !important;
    margin-top: 1.2em !important;
    margin-bottom: 0.6em !important;
}

/* 4. 引用块（blockquote）：修复原主题线高0.8和字号过小的问题，使其更高级 */
blockquote {
    line-height: 1.6 !important;
}
.article-content blockquote p {
    line-height: 1.6 !important;
    font-size: 15px !important; /* 适度放大引用块内的字号 */
}




/* ==========================================================================
   修图留语（MiPlus主题）页脚文字美化与精致化微调（保留原版排版）
   ========================================================================== */

/* 1. 纯粹缩小页脚整体字号，将颜色淡化为柔和灰蓝色，不改变任何间距和位置 */
.mi-footer, 
.mi-footer p, 
.mi-footer span, 
.mi-footer a,
.mi-footer-copyright,
.mi-footer-bottom {
    font-size: 13px !important;       /* 统一缩小到 13px，精致耐看 */
    color: #7a8b9a !important;       /* 替换掉原本的大黑色，改为柔和的灰蓝色 */
    font-weight: 400 !important;
}

/* 2. 备案号和链接的 Hover 鼠标悬停变色效果 */
.mi-footer a:hover {
    color: #409EFF !important;       /* 鼠标放上去时变成主题蓝色 */
    text-decoration: none !important;
}

/* 3. 备案号中间的小圆点颜色稍微淡化点缀 */
.mi-beian {
    color: #ccd6dd !important;
}



/* ==========================================================================
   超强权重版：强制覆盖父主题移动端 Slider-5 幻灯片
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. 整体容器：防穿透安全锁 */
    body .html-swiper {
        position: relative !important;
        z-index: 1 !important;
    }

    /* 2. 中间大图：强行拉高并撑满（加深了选择器层级） */
    body div.html-swiper .slider-5-middle,
    body .slider-5-middle .el-carousel__container {
        height: 240px !important; 
    }
    body div.html-swiper .slider-5-middle img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 3. 四角小图：高度减半、自动对齐不穿透 */
    body .slider5-left-top,
    body .slider5-left-bottom,
    body .slider5-right-top,
    body .slider5-right-bottom {
        height: 110px !important; 
    }
    body .slider5-left-top img,
    body .slider5-left-bottom img,
    body .slider5-right-top img,
    body .slider5-right-bottom img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}