/*
Theme Name:     B2子主题
Theme URI:      http: //7b2.com/
Description:    Child theme for the B2 PRO
Author:         子主题模版
Author URI:     http: //7b2.com/
Template:       b2
Version:        0.1.5
*/

/*下面是您自己DIY的css样式代码*/

/* =============== 全站缩略图hover时放大 =============== */
.post-module-thumb>a {  
  overflow: hidden;
}
/* 图片基础样式 - 强制保证过渡生效 */
.post-thumb {
  transform: scale(1); /* 强制初始缩放值 */
  /* 关键：增加-webkit-前缀兼容webkit内核浏览器，同时强制过渡生效 */
  -webkit-transition: transform 0.4s ease-out ;
  transition: transform 0.4s ease-out !important;
  will-change: transform; /* 告诉浏览器提前优化这个属性的渲染 */
}
/* =============== 全站缩略图hover时放大 =============== */

/* 鼠标悬浮放大 - 仅修改缩放值 */
.item-in:hover .post-thumb {
  transform: scale(1.1) !important; /* 强制触发缩放 */
}
/* 鼠标悬浮放大 - 仅修改缩放值 */


/* hover文章向上微动 */
    .item-post-style-1>.item-in {
        transition:all .4s ease-out;;
    }
    
    .item-post-style-1>.item-in:hover {
        transform: translateY(-3px);
        box-shadow: 0 2rem 1rem -1rem #ddd3fb4d;
        transition:all .4s ease-out;;
    }
/* hover文章向上微动 */

/* ============================================
   顶部导航毛玻璃效果页面滚动时，导航栏轻微透明，透出页面内容
   ============================================ */
.site-header-in {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9 !important;
}

/* 导航背景轻微透明，模糊效果才能透出来 */
.header-banner {
    background: rgba(255, 255, 255, 0.70) !important;
}

/* ============================================
   顶部导航毛玻璃效果页面滚动时，导航栏轻微透明，透出页面内容
   ============================================ */

/* 取消向下滚动时导航向上收回的效果 */
.site.up .site-header-in {
    transform: translate(0, 0) !important;
}
.header-banner-left.hidden {
    opacity: 1!important;
}
/* 取消向下滚动时导航向上收回的效果 */

/* 鼠标悬停导航链接时轻微放大 */
.site-header a, 
#app-header a {
    transition: transform 0.25s ease-in-out;
}

.site-header a:hover, 
#app-header a:hover {
    transform: scale(1.15) !important; /* 放大到 1.08 倍 */
}
/* 鼠标悬停导航链接时轻微放大 */


/* 改变首页文章显示样式 */
.posts-item, 
.post-list-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 2. 精准定位卡片内部容器：加大圆角、柔和阴影 */
.posts-item .item-in, 
.post-list-item .item-in,
.posts-item > div:not(.post-thumb) {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 3. 鼠标悬停时：卡片优雅上浮并加深阴影 */
.posts-item:hover .item-in, 
.post-list-item:hover .item-in,
.posts-item:hover > div:not(.post-thumb) {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* 4. 缩略图区域：四周留白，打造内嵌式圆角大图效果 */
.posts-item .post-module-thumb,
.posts-item .item-thumbnail,
.post-list-item .post-thumb-box {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    margin: 12px 12px 0 12px !important;
}

.posts-item img, 
.post-list-item img,
.item-thumbnail img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 鼠标悬停时图片平滑放大 */
.posts-item:hover img, 
.post-list-item:hover img,
.item-thumbnail img:hover {
    transform: scale(1.08) !important;
}

/* 5. 悬浮在图片左下角的高颜值粉红胶囊分类标签 */
.posts-item .item-cat,
.posts-item .post-category,
.posts-item .item-meta-category,
.item-thumbnail-cat,
.post-module-thumb .category {
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    background: #e60067 !important;
    color: #ffffff !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    z-index: 3 !important;
    box-shadow: 0 4px 12px rgba(230, 0, 103, 0.35) !important;
    text-decoration: none !important;
}
/* 改变首页文章显示样式 */

/* 文章内页上一篇/下一篇macOS 风格 */
.post-previous-next,
.post-pre-next {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 30px 0 !important;
}

/* 2. 主卡片容器（仅在此层设置背景与红黄绿窗口控制点） */
.post-previous-next > div,
.post-pre-next > div {
    flex: 1 !important;
    width: 50% !important;
    background: #fbfbfb !important;                     /* macOS 原生浅灰底色 */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;                     /* Apple 精细圆角 */
    padding: 28px 16px 14px 16px !important;            /* 顶部留出红黄绿圆点空间 */
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

/* 3. 🚨 核心修复：强制清空卡片内部所有子元素的背景、边框和阴影，解决“双层嵌套框”问题 */
.post-previous-next * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 4. 左上角 macOS 经典“红黄绿”三色小圆点 */
.post-previous-next > div::before,
.post-pre-next > div::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ff5f56 !important;
    box-shadow: 11px 0 0 #ffbd2e, 22px 0 0 #27c93f !important;
    opacity: 0.85;
}

/* 5. 悬停效果：卡片变纯白、微悬浮 */
.post-previous-next > div:hover,
.post-pre-next > div:hover {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}

/* 6. 链接布局：让内部文字与箭头水平垂直居中排列 */
.post-previous-next a,
.post-pre-next a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
}

/* 7. 标题样式与单行截断（防止文字过长撑乱结构） */
.post-previous-next h2,
.post-pre-next h2,
.post-previous-next .title,
.post-pre-next .title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    margin: 4px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;                 /* 超长自动变成 ... */
}

/* 悬停时标题变为经典苹果蓝色 */
.post-previous-next > div:hover h2,
.post-pre-next > div:hover h2,
.post-previous-next > div:hover .title,
.post-pre-next > div:hover .title {
    color: #0071e3 !important;
}

/* 8. 分类与日期文字收拢 */
.post-previous-next span,
.post-pre-next span,
.post-previous-next time,
.post-pre-next time {
    font-size: 11px !important;
    color: #86868b !important;
    display: block !important;
}

/* 9. 左右箭头图标排版 */
.post-previous-next i,
.post-pre-next i,
.post-previous-next svg,
.post-pre-next svg,
.post-previous-next .b2font,
.post-pre-next .b2font {
    font-size: 16px !important;
    color: #a1a1a6 !important;
    flex-shrink: 0 !important;
    margin: 0 4px !important;
}

/* 10. 移动端自适应：自动变成上下单列 */
@media (max-width: 768px) {
    .post-previous-next,
    .post-pre-next {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .post-previous-next > div,
    .post-pre-next > div {
        width: 100% !important;
    }
}
/* 文章内页上一篇/下一篇macOS 风格 */

/* 主题顶部导航 悬停下划线 */
#top-menu li a,
.top-menu-ul li a,
.header-banner-left li a,
.site-header .nav-ul li a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 2. 在链接下方生成全局下划线（默认隐藏 + 0 宽度） */
#top-menu li a::after,
.top-menu-ul li a::after,
.header-banner-left li a::after,
.site-header .nav-ul li a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 12px !important;              /* 距离导航栏底部的距离，可根据实际高度自由微调 */
    left: 70% !important;                 /* 从中间展开 */
    transform: translateX(-55%) !important;
    width: 0 !important;                  /* 默认宽度为 0 */
    height: 2px !important;               /* 横线粗细 */
    background: #009966 !important;       /* 横线颜色 */
    border-radius: 5px !important;        /* 两端微圆角 */
    opacity: 0 !important;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important; /* 强制平滑动画 */
    pointer-events: none !important;
}

/* 3. 悬停菜单项（li 或 a）时，强制动画展开 */
#top-menu li:hover > a::after,
.top-menu-ul li:hover > a::after,
.header-banner-left li:hover > a::after,
.site-header .nav-ul li:hover > a::after {
    width: 60% !important;                /* 展开至 80% 宽度，两端留白更高级 */
    opacity: 1 !important;
}

/* 4. 当前选中的页面（例如当前就在首页），横线保持显示 */
#top-menu li.current-menu-item > a::after,
.top-menu-ul li.current-menu-item > a::after,
#top-menu li.current-menu-parent > a::after {
    width: 80% !important;
    opacity: 1 !important;
}
/* 主题顶部导航 悬停下划线 */