/* ===================================================
   plusluo-site 自定义样式 — 线框简洁风格
   =================================================== */

/* ============================
   全局字体：Noto Sans SC（思源黑体）
   中英文风格统一，fallback 到系统中文字体
   ============================ */
body.bilberry-hugo-theme,
.bilberry-hugo-theme {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

.bilberry-hugo-theme .title,
.bilberry-hugo-theme .subtitle,
.bilberry-hugo-theme h1,
.bilberry-hugo-theme h2,
.bilberry-hugo-theme h3,
.bilberry-hugo-theme h4,
.bilberry-hugo-theme h5,
.bilberry-hugo-theme h6 {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

.bilberry-hugo-theme blockquote {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* 代码字体保持 Fira Code 不变 */
.bilberry-hugo-theme code,
.bilberry-hugo-theme pre {
    font-family: 'Fira Code', 'Menlo', 'Consolas', monospace !important;
}

/* --- Header 区域：白底 + 底部细线 --- */
header {
    background-color: #ffffff !important;
    color: #333 !important;
    border-bottom: 1px solid #e0e0e0;
}

/* 去掉 header 内部的竖线装饰 */
header .container:after {
    display: none !important;
}

/* header 缩小高度，更紧凑 */
header .container {
    min-height: 12rem;
}

/* ============================
   标题「序员先生」美化
   使用渐变下划线装饰 + 字重增强
   ============================ */
header .titles h3.title a {
    color: #2c2c2c !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    position: relative;
    display: inline-block;
    padding-bottom: 0.25em;
}

/* 标题底部渐变装饰线 —— 从橙色到透明的优雅渐变 */
header .titles h3.title a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #E8913A 0%, #f5c97a 60%, transparent 100%);
    border-radius: 2px;
}

header .titles h3.title a:hover {
    color: #E8913A !important;
}
header .titles h3.title a:hover::after {
    background: linear-gradient(90deg, #E8913A 0%, #E8913A 40%, #f5c97a 100%);
}

/* 副标题颜色 + 微调 */
header .titles .subtitle {
    color: #888 !important;
    font-size: 0.85em;
    margin-top: 0.5em;
    letter-spacing: 0.02em;
}

/* ============================
   问题1：头像 Logo 区域
   保持原有边框风格，hover 只放大，
   不显示 overlay 图标覆盖层
   ============================ */
header .logo {
    border: 2px solid #e0e0e0 !important;
    background-color: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.3s ease-in-out;
}

/* hover 时头像适当放大，表示可点击 */
header .logo:hover {
    transform: scale(1.08);
}

/* 隐藏 overlay 图标覆盖层，hover 时也不显示 */
header .logo .overlay {
    display: none !important;
}

/* 右上角 toggler 按钮：线框风格 */
header .toggler {
    background: transparent !important;
    color: #666 !important;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
}
header .toggler:hover {
    color: #E8913A !important;
    border-color: #E8913A;
}

/* ============================
   导航菜单展开后
   链接清晰可见
   ============================ */
nav {
    background: #ffffff !important;
    color: #444 !important;
    border-bottom: 1px solid #e0e0e0;
}

/* 导航链接：深色文字，白色背景下清晰可见 */
nav ul li a {
    color: #444 !important;
    font-weight: 500;
}
nav ul li a:hover {
    color: #E8913A !important;
    background-color: #faf5ef !important;
}

/* --- 时间线区域微调 --- */
/* 时间线竖线用更浅的色 */
.main:before {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* 时间线底部圆点 */
.main:after {
    background: #ddd !important;
}

/* ===================================================
   文章类型图标搭配专属背景色
   默认淡色 → hover 正色，与图标主题搭配
   =================================================== */

/* 通用 bubble 基础样式 */
.article-wrapper .bubble {
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: all 0.3s ease-in-out;
}

/* ---- 投资理财 fa-chart-line：上涨红色 ---- */
.article-wrapper .bubble .fa-chart-line {
    color: #fff !important;
}
.article-wrapper .bubble:has(.fa-chart-line) {
    background-color: #e88a8a !important;
}
.article-wrapper .bubble:has(.fa-chart-line):hover {
    background-color: #d43333 !important;
    transform: scale(1.1);
}

/* ---- 读书笔记 fa-book-open：书香棕色 ---- */
.article-wrapper .bubble:has(.fa-book-open) {
    background-color: #c4a882 !important;
}
.article-wrapper .bubble:has(.fa-book-open):hover {
    background-color: #8B6914 !important;
    transform: scale(1.1);
}

/* ---- 心理学与认知 fa-brain：思维紫色 ---- */
.article-wrapper .bubble:has(.fa-brain) {
    background-color: #b09fd4 !important;
}
.article-wrapper .bubble:has(.fa-brain):hover {
    background-color: #7B52AB !important;
    transform: scale(1.1);
}

/* ---- 物理学 fa-atom：科技蓝 ---- */
.article-wrapper .bubble:has(.fa-atom) {
    background-color: #87b5e0 !important;
}
.article-wrapper .bubble:has(.fa-atom):hover {
    background-color: #2878B5 !important;
    transform: scale(1.1);
}

/* ---- 生物学 fa-dna：生命绿 ---- */
.article-wrapper .bubble:has(.fa-dna) {
    background-color: #8cc5a0 !important;
}
.article-wrapper .bubble:has(.fa-dna):hover {
    background-color: #2E8B57 !important;
    transform: scale(1.1);
}

/* ---- 汽车知识 fa-car：金属蓝灰 ---- */
.article-wrapper .bubble:has(.fa-car) {
    background-color: #8aa8c4 !important;
}
.article-wrapper .bubble:has(.fa-car):hover {
    background-color: #3A6FA0 !important;
    transform: scale(1.1);
}

/* ---- 个人成长 fa-seedling：新芽绿 ---- */
.article-wrapper .bubble:has(.fa-seedling) {
    background-color: #94c98e !important;
}
.article-wrapper .bubble:has(.fa-seedling):hover {
    background-color: #3AA835 !important;
    transform: scale(1.1);
}

/* ---- 软件研发 fa-code：代码蓝 ---- */
.article-wrapper .bubble:has(.fa-code) {
    background-color: #7daed4 !important;
}
.article-wrapper .bubble:has(.fa-code):hover {
    background-color: #1A73E8 !important;
    transform: scale(1.1);
}

/* ---- AI 技术 fa-robot：科技橙 ---- */
.article-wrapper .bubble:has(.fa-robot) {
    background-color: #e8b07a !important;
}
.article-wrapper .bubble:has(.fa-robot):hover {
    background-color: #E8913A !important;
    transform: scale(1.1);
}

/* ---- 碎碎念 fa-comment-dots：柔和灰蓝 ---- */
.article-wrapper .bubble:has(.fa-comment-dots) {
    background-color: #a0b4c4 !important;
}
.article-wrapper .bubble:has(.fa-comment-dots):hover {
    background-color: #5A7D9A !important;
    transform: scale(1.1);
}

/* ---- 其他默认图标的 fallback ---- */
/* 相册/图片类 fa-camera */
.article-wrapper .bubble:has(.fa-camera) {
    background-color: #d4a0b0 !important;
}
.article-wrapper .bubble:has(.fa-camera):hover {
    background-color: #C0507A !important;
    transform: scale(1.1);
}

/* 视频类 fa-video */
.article-wrapper .bubble:has(.fa-video) {
    background-color: #d49090 !important;
}
.article-wrapper .bubble:has(.fa-video):hover {
    background-color: #CC3333 !important;
    transform: scale(1.1);
}

/* 音频类 fa-music */
.article-wrapper .bubble:has(.fa-music) {
    background-color: #c8a4d8 !important;
}
.article-wrapper .bubble:has(.fa-music):hover {
    background-color: #9B59B6 !important;
    transform: scale(1.1);
}

/* 链接类 fa-link */
.article-wrapper .bubble:has(.fa-link) {
    background-color: #8eccc4 !important;
}
.article-wrapper .bubble:has(.fa-link):hover {
    background-color: #1ABC9C !important;
    transform: scale(1.1);
}

/* 默认/文件类 fa-file */
.article-wrapper .bubble:has(.fa-file) {
    background-color: #aab8c4 !important;
}
.article-wrapper .bubble:has(.fa-file):hover {
    background-color: #5A7D9A !important;
    transform: scale(1.1);
}

/* 默认文章 fa-pencil-alt */
.article-wrapper .bubble:has(.fa-pencil-alt) {
    background-color: #c4b498 !important;
}
.article-wrapper .bubble:has(.fa-pencil-alt):hover {
    background-color: #8B7355 !important;
    transform: scale(1.1);
}

/* 状态/评论类 fa-comment */
.article-wrapper .bubble:has(.fa-comment) {
    background-color: #a0b4c4 !important;
}
.article-wrapper .bubble:has(.fa-comment):hover {
    background-color: #5A7D9A !important;
    transform: scale(1.1);
}

/* 引用类 fa-quote-right */
.article-wrapper .bubble:has(.fa-quote-right) {
    background-color: #b8c4a0 !important;
}
.article-wrapper .bubble:has(.fa-quote-right):hover {
    background-color: #6B8E23 !important;
    transform: scale(1.1);
}

/* ===================================================
   问题2：文章 meta 区 — 去掉 "/" 分隔符
   只保留日期，用简洁的小圆点作分隔符（如有多项）
   =================================================== */

/* 覆盖主题的 "/" 分隔符为空 */
article .content .meta span:before {
    content: "" !important;
    margin: 0 !important;
}

/* 如果有多个 span，用小圆点分隔 */
article .content .meta span:not(:first-child):before {
    content: "·" !important;
    margin: 0 0.6em !important;
    color: #ccc !important;
    font-weight: bold;
}

/* meta 区域整体样式微调 — 更轻盈 */
article .content .meta {
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 0.8em !important;
    margin-bottom: 1.5em !important;
    font-size: 0.8em !important;
    color: #999 !important;
    letter-spacing: 0.5px;
}

/* 日期前加一个日历小图标 */
article .content .meta .date:before {
    content: "\f073" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    margin-right: 0.4em;
    font-size: 0.9em;
    color: #bbb;
}

/* ===================================================
   问题3：文章底部标签区
   去掉 "/" 分隔符，改为胶囊标签样式
   =================================================== */

/* 去掉标签之间的 "/" 分隔符 */
article .footer .tags .links a:not(:last-child):after {
    content: "" !important;
}

/* 标签改为胶囊/药丸样式 */
article .footer .tags .links a {
    display: inline-block;
    background-color: #f5f5f5;
    color: #666 !important;
    padding: 0.2em 0.75em;
    margin: 0.15em 0.25em;
    border-radius: 99px;
    font-size: 0.85em;
    border: 1px solid #e8e8e8;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
    line-height: 1.6;
}

/* hover 效果 — 橙色边框 + 橙色文字 + 浅橙色背景 */
article .footer .tags .links a:hover {
    background-color: #fff7ef;
    color: #E8913A !important;
    border-color: #E8913A;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(232, 145, 58, 0.15);
}

/* 标签图标颜色微调 */
article .footer .tags > .fa {
    color: #bbb !important;
    font-size: 0.9em;
}

/* 底部 footer 区域整体微调 */
article .footer {
    padding: 0.6em 1.5em !important;
    background: #fafafa !important;
    border-top: 1px solid #f0f0f0;
}

/* --- 全局链接 hover 颜色统一为橙色 --- */
a:hover {
    color: #E8913A;
}

/* ===================================================
   页面底部 Footer 全面优化
   =================================================== */

/* --- Footer 整体容器 --- */
footer {
    border-top: 1px solid #e8e8e8 !important;
    border-bottom: none !important;
    background-color: #fafafa !important;
    padding-bottom: 0 !important;
}

/* ============================
   分类目录 — 置于 .main container 底部
   间距与翻页按钮上方到文章卡片的 75px 保持一致
   ============================ */

/* 覆盖 .main 的底部外边距
   3号区域（分类标签最后一行底部 → footer border-top）
   需与 1号区域（文章卡片底部 → 翻页按钮顶部）视觉一致 */
.main.container {
    margin-bottom: 75px !important;
}

/* 消除 .paginator 自带的 padding-bottom，避免撑大 2号区域 */
.paginator {
    padding-bottom: 0 !important;
}

.main-categories {
    /* 与文章卡片左边缘对齐：左侧 100px 是时间线区域 */
    padding-left: 100px;
    padding-right: 0;
    /* 2号区域 = paginator下边缘 → 分类第一行标签上边缘
       paginator padding-bottom 已置 0
       CATEGORIES 标题隐藏（仅保留标签按钮）
       所以 margin-top 就是纯净的 2号间距，应与 1号(75px) 一致 */
    margin-top: 75px;
    padding-top: 0;
    padding-bottom: 0;
}

/* 隐藏 CATEGORIES 文字标题（只留分类标签按钮，减少多余高度） */
.main-categories > a {
    display: none;
}

.main-categories ul {
    margin-top: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    list-style: none !important;
    padding: 0 !important;
}

.main-categories ul li {
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-categories ul li a {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4em;
    left: 0 !important;
    position: relative;
    background: #fff;
    color: #555 !important;
    padding: 0.4em 1em !important;
    border-radius: 99px;
    border: 1px solid #e0e0e0;
    font-size: 0.95em !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    transition: all 0.25s ease-in-out !important;
    text-decoration: none !important;
    line-height: 1.5;
}

.main-categories ul li a .cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    background: #f0f0f0;
    color: #999;
    font-size: 0.78em;
    font-weight: 600;
    border-radius: 50%;
    line-height: 1;
}

.main-categories ul li a:hover {
    left: 0 !important;
    background: #fff7ef !important;
    color: #E8913A !important;
    border-color: #E8913A !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(232, 145, 58, 0.15);
}

.main-categories ul li a:hover .cat-count {
    background: #E8913A;
    color: #fff;
}

/* ============================
   联系方式 — 两组水平排列，渐变竖线分隔
   ============================ */
footer .footer-contact {
    display: block !important;
    padding: 1.5rem 0 1.5rem 0 !important;
    /* 与文章卡片左边缘对齐 */
    padding-left: 100px !important;
    box-sizing: border-box;
}

/* 整行容器：水平排列 */
footer .contact-row {
    display: flex;
    align-items: center;
    gap: 0;
}

/* 每组内部水平排列 */
footer .contact-group {
    display: flex;
    align-items: center;
    gap: 1.8em;
}

/* 渐变竖线分隔符 —— 中间深两头浅 */
footer .contact-divider {
    width: 1px;
    height: 1.6em;
    margin: 0 2em;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #ccc 35%,
        #999 50%,
        #ccc 65%,
        transparent 100%
    );
    flex-shrink: 0;
}

/* 每个联系项 */
footer .contact-link {
    position: relative;
}

footer .contact-link > a,
footer .contact-link a.tip-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    /* 字体只比分类标签小 2px：分类标签 0.95em ≈ 15.2px，这里用 0.9em ≈ 14.4px */
    font-size: 0.9em !important;
    font-weight: 500;
    color: #555 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    line-height: 1.5;
    white-space: nowrap;
}

footer .contact-link em {
    font-style: normal;
    font-size: 1.15em;
    width: 1.2em;
    text-align: center;
    color: #888;
    transition: color 0.2s ease;
}

footer .contact-link span {
    color: inherit;
}

footer .contact-link > a:hover,
footer .contact-link a.tip-trigger:hover {
    color: #E8913A !important;
}

footer .contact-link > a:hover em,
footer .contact-link a.tip-trigger:hover em {
    color: #E8913A !important;
}

/* --- Tooltip 弹出层（邮箱 / 公众号） --- */
footer .tip-popup {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) scale(0.95);
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    padding: 0.8em 1em;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    white-space: nowrap;
    pointer-events: none;
}

footer .tip-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
}

footer .tip-popup::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #e0e0e0;
}

footer .contact-link--tip.active .tip-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

/* 邮箱 tooltip */
footer .tip-popup .email-text {
    color: #E8913A;
    font-weight: 600;
    font-size: 0.92em;
    letter-spacing: 0.02em;
    cursor: pointer;
}

footer .tip-popup .copy-hint {
    color: #bbb;
    font-size: 0.72em;
    margin-top: 0.3em;
    display: block;
}

/* 公众号 tooltip */
footer .tip-popup.tip-popup--qrcode {
    padding: 0.6em;
    white-space: normal;
    text-align: center;
}

footer .tip-popup .qrcode-img {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 6px;
}

footer .tip-popup .qrcode-text {
    color: #999;
    font-size: 0.72em;
    margin-top: 0.4em;
    display: block;
}

/* ============================
   Credits 底栏微调
   ============================ */
.credits {
    background: #f5f5f5 !important;
    border-top: 1px solid #eee;
}

.credits .container {
    padding: 2rem 0 !important;
    font-size: 0.78em !important;
    color: #aaa !important;
}

.credits .container a {
    color: #aaa !important;
}

.credits .container a:hover {
    color: #E8913A !important;
}

/* ============================
   响应式：移动端适配
   ============================ */
@media (max-width: 800px) {
    /* 分类目录移动端：去掉 100px 左偏移，间距跟移动端翻页按钮一致 */
    .main-categories {
        padding: 0 1.5em;
        margin-top: 50px;
    }

    .main-categories ul {
        gap: 0.4em;
    }

    .main-categories ul li a {
        font-size: 0.85em !important;
        padding: 0.35em 0.8em !important;
    }

    /* --- 联系方式移动端：2×2 网格布局 --- */
    footer .footer-contact {
        padding: 1.2em 1.5em 1.5em 1.5em !important;
    }

    /* 隐藏竖线分隔符 */
    footer .contact-divider {
        display: none;
    }

    /* 整行改为 2×2 网格 */
    footer .contact-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    /* 每组占满一行，内部项目均分 */
    footer .contact-group {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        width: 100%;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        gap: 0;
    }

    /* 每组之间加间距（第二组=邮箱/公众号行） */
    footer .contact-group + .contact-group {
        margin-top: 0.8em;
        padding-top: 0.8em;
        border-top: 1px solid #f0f0f0;
    }

    /* 每个联系项占 50% 宽度 */
    footer .contact-link {
        width: 50%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        flex: 0 0 50%;
        box-sizing: border-box;
    }

    footer .contact-link > a,
    footer .contact-link a.tip-trigger {
        font-size: 0.85em !important;
    }

    .credits .container {
        padding: 2rem 1.5em !important;
    }

    /* tooltip 弹出框在移动端的位置调整 */
    footer .tip-popup {
        left: 0;
        transform: translateX(0) scale(0.95);
    }

    footer .contact-link--tip.active .tip-popup {
        transform: translateX(0) scale(1);
    }

    footer .tip-popup::after,
    footer .tip-popup::before {
        left: 2em;
        transform: none;
    }
}