/* Butterfly主题 - IT科技风格文章标题图标美化 */
/* 文件位置：source/_data/custom.css */

/* 引入Font Awesome（如果主题未加载） */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* 为文章标题添加IT科技风格图标 */
.post-title:before,
.article-title:before,
.entry-title:before,
h1.post-title:before {
    /* 图标设置 - 选择IT科技风格图标 */
    font-family: 'Font Awesome 6 Free';
    content: '\f5fc';  /* 桌面/终端图标，代表IT科技 */
    /* 其他备选图标：
       '\f120' - 终端图标
       '\f121' - 代码图标
       '\f1c9' - 文件代码图标
       '\f2db' - 微芯片图标
       '\f5fc' - 服务器图标
       '\f085' - 齿轮组图标（代表技术）
       '\f7b2' - 二进制图标
    */
    font-weight: 900;   /* solid样式 */
    
    /* 样式设置 - 科技蓝配色方案 */
    color: #006400;     /* 科技蓝图标颜色 */
    margin-right: 12px; /* 图标与文字间距 */
    font-size: 0.95em;  /* 图标大小 */
    vertical-align: middle;
    display: inline-block;
    
    /* 可选：过渡动画效果 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 添加轻微发光效果，增强科技感 */
    text-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}

/* 悬停效果 - 增强科技感 */
.post-title:hover:before {
    transform: scale(1.1);      /* 悬停时轻微放大 */
    color: #2ecc71;             /* 悬停时变为科技绿 */
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.5); /* 增强发光效果 */
}

/* 为不同标题级别添加不同图标（可选功能） */
/* 如果希望h2使用不同图标，可以启用这段代码 */

h2.post-title:before {
    content: '\f121';  /* 代码图标 */
    color: #9b59b6;    /* 紫色 */
}


/* 为特定分类的文章标题添加不同图标（可选功能） */
/* 需要在文章front-matter中添加分类 */
.category-programming .post-title:before {
    content: '\f121';  /* 代码图标 */
    color: #e74c3c;    /* 红色 */
}

.category-network .post-title:before {
    content: '\f5fc';  /* 服务器图标 */
    color: #3498db;    /* 蓝色 */
}

.category-ai .post-title:before {
    content: '\f5fc';  /* 服务器图标或使用脑图标 '\f5dc' */
    color: #9b59b6;    /* 紫色 */
}
*/

/* 简约科技风 - 去掉背景色，只保留简洁线条 */
.post-title:before {
    /* 保持简洁设计，符合现代IT审美 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .post-title:before {
        margin-right: 8px;
        font-size: 0.85em;
        text-shadow: 0 0 3px rgba(52, 152, 219, 0.2); /* 移动端减小发光效果 */
    }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .post-title:before {
        color: #1abc9c;  /* 暗色模式下使用亮青色 */
        text-shadow: 0 0 8px rgba(26, 188, 156, 0.4);
    }
    
    .post-title:hover:before {
        color: #27ae60;  /* 暗色模式下悬停色 */
        text-shadow: 0 0 12px rgba(39, 174, 96, 0.6);
    }
}

/* 为代码相关的标题添加特殊效果（可选） */
code .post-title:before,
pre .post-title:before {
    content: '\f121';  /* 代码图标 */
    color: #f39c12;    /* 橙色 */
}

/* 简约版本 - 如果喜欢极简风格，使用这个版本 */
/*
.post-title:before {
    font-family: 'Font Awesome 6 Free';
    content: '\f120';  /* 终端图标 */
    font-weight: 900;
    color: #2c3e50;    /* 深灰色 */
    margin-right: 10px;
    font-size: 0.9em;
    vertical-align: middle;
    display: inline-block;
}
*/