/*
Theme Name:   MiPlus Child
Theme URI:    https://pro.xiutushi.cn/
Description:  MiPlus 主题的子主题，用于安全地存放自定义 CSS 和功能修改。
Author:       修图留语
Author URI:   https://pro.xiutushi.cn/
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. 纯粹缩小页脚整体字号，将颜色淡化为柔和灰蓝色，不改变任何间距和位置 */
.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;
}





/* ==========================================================================
   电脑（桌面）端专项修复：解决英文长标题撑爆大屏网页问题
   ========================================================================== */
@media (min-width: 768px) {
    
    /* 1. 强行解除电脑端标题父级和自身的弹性不换行锁定 */
    h1, h2, h3, h4, h5, h6,
    .mi-post-title,
    .entry-title,
    .mi-header h1 {
        display: block !important;             /* 在电脑端强行转为独立块级，拒绝并排 */
        white-space: normal !important;        /* 强行允许正常换行 */
        word-break: break-word !important;     /* 允许超长英文/特殊符号在边界处断开 */
        overflow-wrap: break-word !important;  /* 现代浏览器断行标准 */
        width: 100% !important;                /* 宽度锁死在父容器内，不准往外顶 */
    }

    /* 2. 顺藤摸瓜：把电脑端可能包裹标题的容器，统统解除单行锁定 */
    .mi-header,
    .mi-article-header,
    .mibox,
    .double-column-two .miyu-element-menu {
        flex-wrap: wrap !important;            /* 如果是flex，允许折行 */
        white-space: normal !important;        /* 允许内部文本换行 */
    }
}






/* VIP页面居中 */
.mi-vips-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 卡片列表居中 */
.mi-vips-level-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* 关键：居中 */
    gap: 24px;
}

/* 卡片宽度限制 */
.mi-vips-level-card {
    flex: 0 0 calc(33.333% - 24px);
    min-width: 280px;
    max-width: 380px;
}



.mi-vips-level-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 30px 24px;
  padding: 20px 0;
  max-width: 900px;
  margin: 0 auto;
}
.mi-vips-level-card {
  flex-shrink: 0 !important;
}

/* 手机端强制重写 */
@media screen and (max-width: 768px) {
  .mi-vips-level-list {
    gap: 24px 0 !important;
    padding: 15px 10px !important;
  }
  .mi-vips-level-card {
    width: 100% !important;
    max-width: 380px !important;
    flex-shrink: 1 !important;
    min-width: unset !important;
  }
}