/**
 * B2Child Critical CSS - 合并所有内联样式
 * 优化：将functions.php中的多个内联<style>合并为单一外部文件
 * 减少HTTP请求和HTML体积
 * 
 * Version: 1.0.0
 * Date: 2025-12-04
 */

/* ============================================
 * 1. 全站隐藏付费会员(VIP)相关显示
 * 原: b2child_hide_vip_frontend_css()
 * ============================================ */

/* 隐藏VIP图标 - 所有带 user-vip 或 b2-vip 类名的元素 */
.lv-icon.user-vip,
.lv-icon[class*="b2-vip"],
span[class*="b2-vip"],
.user-vip-icon,
.vip-icon {
    display: none !important;
}

/* 隐藏用户主页/个人中心的VIP标识 */
.user-header .lv-icon.user-vip,
.user-info .lv-icon.user-vip,
.user-verify .lv-icon.user-vip {
    display: none !important;
}

/* 隐藏评论区的VIP标识 */
.comment-item .lv-icon.user-vip,
.comment-author .lv-icon.user-vip {
    display: none !important;
}

/* 隐藏作者面板的VIP标识 */
.author-widget .lv-icon.user-vip,
.b2-widget-author .lv-icon.user-vip,
.w-a-lv .lv-icon.user-vip {
    display: none !important;
}

/* 隐藏文章页作者信息的VIP标识 */
.single-author .lv-icon.user-vip,
.post-author .lv-icon.user-vip {
    display: none !important;
}

/* 隐藏搜索结果用户的VIP标识 */
.search-user .lv-icon.user-vip {
    display: none !important;
}

/* ============================================
 * 2. 防止页面加载时样式闪烁（FOUC）
 * 原: b2child_prevent_fouc_css() - 仅首页生效
 * ============================================ */

/* 侧边栏骨架屏 - 加载时显示占位 */
html:not(.fouc-loaded) .links-category-sidebar,
html:not(.fouc-loaded) #links-category-sidebar {
    position: relative !important;
    width: 152px !important;
    min-width: 152px !important;
    flex-shrink: 0 !important;
    background: #f8f9fa !important;
    border-radius: 12px !important;
    min-height: 400px !important;
}

/* 侧边栏骨架屏内容隐藏，但保持空间 */
html:not(.fouc-loaded) .links-category-sidebar > *,
html:not(.fouc-loaded) #links-category-sidebar > * {
    opacity: 0 !important;
}

/* 侧边栏骨架屏动画 */
html:not(.fouc-loaded) .links-category-sidebar::before,
html:not(.fouc-loaded) #links-category-sidebar::before {
    content: '' !important;
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    height: 40px !important;
    background: linear-gradient(90deg, #e8e8ed 25%, #f0f0f5 50%, #e8e8ed 75%) !important;
    background-size: 200% 100% !important;
    border-radius: 8px !important;
    animation: skeleton-loading 1.5s infinite !important;
}

html:not(.fouc-loaded) .links-category-sidebar::after,
html:not(.fouc-loaded) #links-category-sidebar::after {
    content: '' !important;
    position: absolute !important;
    top: 80px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    background: 
        linear-gradient(90deg, #e8e8ed 25%, #f0f0f5 50%, #e8e8ed 75%) 0 0 / 200% 100%,
        linear-gradient(90deg, #e8e8ed 25%, #f0f0f5 50%, #e8e8ed 75%) 0 50px / 200% 100%,
        linear-gradient(90deg, #e8e8ed 25%, #f0f0f5 50%, #e8e8ed 75%) 0 100px / 200% 100% !important;
    background-repeat: no-repeat !important;
    border-radius: 8px !important;
    animation: skeleton-loading 1.5s infinite !important;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 防止页面加载时样式闪烁 - 网址导航内容区 */
html:not(.fouc-loaded) .home_row.module-links,
html:not(.fouc-loaded) .links-modules-container {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 页面加载完成后显示内容 - 带平滑过渡 */
html.fouc-loaded .home_row.module-links,
html.fouc-loaded .links-modules-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease-out !important;
}

/* 侧边栏加载完成 */
html.fouc-loaded .links-category-sidebar,
html.fouc-loaded #links-category-sidebar {
    background: transparent !important;
    min-height: auto !important;
}

html.fouc-loaded .links-category-sidebar::before,
html.fouc-loaded .links-category-sidebar::after,
html.fouc-loaded #links-category-sidebar::before,
html.fouc-loaded #links-category-sidebar::after {
    display: none !important;
}

html.fouc-loaded .links-category-sidebar > *,
html.fouc-loaded #links-category-sidebar > * {
    opacity: 1 !important;
    transition: opacity 0.3s ease-out !important;
}

/* ============================================
 * 3. 网址导航标题统一样式
 * 原: b2child_force_links_title_style()
 * ============================================ */

/* 强制覆盖所有网址导航模块标题 - 固定宽度胶囊 */
.link-title h2.cat-box,
.compact-header .compact-title,
h2.compact-title,
.link-box > .link-title h2,
.link-box .link-title h2,
.link-title-left h2,
.home_row.module-links .link-title h2,
.home_row.module-links .link-title-left h2 {
    background: linear-gradient(135deg, rgb(37, 99, 235) 0%, rgb(79, 70, 229) 100%) !important;
    border-radius: 9999px !important;
    -webkit-border-radius: 9999px !important;
    -moz-border-radius: 9999px !important;
    color: rgb(255, 255, 255) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    padding: 12px 36px !important;
    box-shadow: rgba(9, 50, 144, 0.3) 0px 2px 8px 0px !important;
    display: inline-block !important;
    margin: 0px !important;
    border: none !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    text-align: center !important;
    letter-spacing: 0px !important;
    position: relative !important;
    overflow: visible !important;
    height: 48px !important;
    min-height: 48px !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* 修复可能的伪元素干扰 */
.link-title h2.cat-box::before,
.link-title h2.cat-box::after,
.compact-header .compact-title::before,
.compact-header .compact-title::after,
h2.compact-title::before,
h2.compact-title::after {
    display: none !important;
    content: none !important;
}

/* 强制标题容器居中 */
.link-title,
.compact-header,
.link-box .link-title,
.compact-links-box .compact-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 0 28px 0 !important;
    margin: 0 !important;
    position: relative !important;
}

.link-title-left,
.compact-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 更多链接 - 固定样式 */
.link-more a,
.compact-more-link,
.erp-more-link,
.link-title .link-more a,
.compact-header .compact-more-link,
a.compact-more-link,
a.erp-more-link {
    background: rgba(230, 237, 255, 1) !important;
    background-color: rgba(230, 237, 255, 1) !important;
    border-radius: 9999px !important;
    color: rgb(37, 99, 235) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    white-space: nowrap !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
}

/* 更多按钮内的所有元素都继承颜色 */
.link-more a span,
.link-more a i,
.compact-more-link span,
.compact-more-link i,
.erp-more-link span,
.erp-more-link i {
    color: inherit !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    max-height: none !important;
}

.link-more,
.link-more a,
.compact-more-link,
.erp-more-link,
.link-title .link-more a,
.compact-header .compact-more-link,
a.compact-more-link {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.link-more:hover,
.link-more a:hover,
.compact-more-link:hover,
.erp-more-link:hover {
    background: rgba(220, 230, 255, 1) !important;
    background-color: rgba(220, 230, 255, 1) !important;
    transform: translateY(-50%) translateX(2px) !important;
}

/* 统一所有网址导航模块的背景为白色 */
.link-box,
.compact-links-box,
.erp-links-box,
.home_row.module-links .link-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
}