/* ============================================
 * Categories Page Main Header Fix
 * 分类页面主标题显示修复
 * ============================================ */

/* 
 * 此文件专门修复分类页面顶部 "Categories" 标题区域的显示问题
 * 确保在明暗主题下都清晰可见
 */

/* ============================================
 * 主标题容器基础样式
 * ============================================ */
.category-lists #page-header,
.layout_category #page-header,
#page-header.category-header {
    padding: 50px 30px;
    border-radius: 12px;
    margin-bottom: 40px;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* 防止内容被裁剪 */
}

/* Light 背景下的 Header */
body.light-background .category-lists #page-header,
body.light-background .layout_category #page-header,
body:not(.dark-background) .category-lists #page-header,
body:not(.dark-background) .layout_category #page-header {
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 6px solid var(--theme-color, #667eea);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Dark 背景下的 Header */
body.dark-background .category-lists #page-header,
body.dark-background .layout_category #page-header {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-left: 6px solid var(--theme-color, #667eea);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================
 * "CATEGORY" 标签文字
 * ============================================ */
#page-header .page-title,
.category-header-label {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    background: transparent !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

/* Light 背景 - 标签 */
body.light-background #page-header .page-title,
body.light-background .category-header-label,
body:not(.dark-background) #page-header .page-title,
body:not(.dark-background) .category-header-label {
    color: #666 !important;
    text-shadow: none;
}

/* Dark 背景 - 标签 */
body.dark-background #page-header .page-title,
body.dark-background .category-header-label {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
 * 主分类名称（大标题）
 * ============================================ */
.category-title-main,
.category-header-title {
    font-size: 36px;
    font-weight: 700;
    margin: 10px 0 15px 0;
    line-height: 1.2;
}

/* Light 背景 - 主标题 */
body.light-background .category-title-main,
body.light-background .category-header-title,
body:not(.dark-background) .category-title-main,
body:not(.dark-background) .category-header-title {
    color: #1a1a1a !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark 背景 - 主标题 */
body.dark-background .category-title-main,
body.dark-background .category-header-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ============================================
 * 分类描述文字
 * ============================================ */
.category-description,
.category-header-description {
    font-size: 14px;
    margin: 10px 0;
    line-height: 1.6;
}

/* Light 背景 - 描述 */
body.light-background .category-description,
body.light-background .category-header-description,
body:not(.dark-background) .category-description,
body:not(.dark-background) .category-header-description {
    color: #555 !important;
}

/* Dark 背景 - 描述 */
body.dark-background .category-description,
body.dark-background .category-header-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
 * 统计信息栏
 * ============================================ */
.category-stats,
.category-stats-bar {
    font-size: 14px;
    padding-top: 15px;
    display: flex;
    gap: 20px;
    align-items: center;
    transition: all 0.3s ease;
}

/* Light 背景 - 统计栏 */
body.light-background .category-stats,
body.light-background .category-stats-bar,
body:not(.dark-background) .category-stats,
body:not(.dark-background) .category-stats-bar {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-background .category-stats .stat-item,
body.light-background .category-stats-bar .stat-item,
body:not(.dark-background) .category-stats .stat-item,
body:not(.dark-background) .category-stats-bar .stat-item {
    color: #666 !important;
}

/* Dark 背景 - 统计栏 */
body.dark-background .category-stats,
body.dark-background .category-stats-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-background .category-stats .stat-item,
body.dark-background .category-stats-bar .stat-item {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
 * 统计项样式
 * ============================================ */
.category-stats .stat-item,
.category-stats-bar .stat-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.category-stats .stat-item::before,
.category-stats-bar .stat-item::before {
    font-size: 14px;
}

/* Post Count Stat */
.stat-posts::before {
    content: '📝';
}

/* Latest Update Stat */
.stat-updated::before {
    content: '🕒';
}

/* ============================================
 * 顶部图标栏（如果有）
 * ============================================ */
.category-icons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.category-icon-item {
    font-size: 24px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.category-icon-item:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ============================================
 * 移动端适配
 * ============================================ */
@media screen and (max-width: 768px) {
    .category-lists #page-header,
    .layout_category #page-header {
        padding: 30px 20px;
    }

    .category-title-main,
    .category-header-title {
        font-size: 28px;
    }

    .category-stats,
    .category-stats-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ============================================
 * 确保 "Categories" 文字在所有情况下都可见
 * ============================================ */
body #page-header h1,
body #page-header .page-title,
body .category-header h1,
body .category-header .category-header-title {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 防止 glassmorphism 样式覆盖 */
body.light-background #page-header *,
body.dark-background #page-header * {
    text-shadow: none; /* 移除可能的文字阴影干扰 */
}

body.dark-background #page-header h1,
body.dark-background #page-header .page-title,
body.dark-background #page-header .category-title-main {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; /* 深色背景重新添加阴影 */
}