/*
Theme Name: SEO Tech Pro
Version: 2.0
Description: 集成 FontAwesome 与 Animate.css 的现代技术主题
Author: Gemini
*/

/* =========================================
   1. CSS 变量定义 (轻松换肤)
   ========================================= */
:root {
    /* 核心色调：科技蓝 */
    --primary-color: #2563eb;       /* 主色：按钮、链接 */
    --primary-hover: #1d4ed8;       /* 悬停色 */
    --secondary-color: #1e293b;     /* 辅色：深色背景 */
    
    /* 文本颜色 */
    --text-main: #111827;           /* 主要文字 */
    --text-light: #6b7280;          /* 次要文字（灰色） */
    
    /* 背景颜色 */
    --bg-body: #f3f4f6;             /* 网页大背景（浅灰） */
    --bg-card: #ffffff;             /* 卡片背景（纯白） */
    
    /* 阴影与圆角 */
    --border-radius: 12px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-blue: 0 10px 25px -5px rgba(37, 99, 235, 0.2); /* 蓝色光晕 */
}

/* =========================================
   2. 全局重置 (Reset)
   ========================================= */
* { box-sizing: border-box; }

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.75;
    margin: 0; padding: 0;
    -webkit-font-smoothing: antialiased; /* 让字体更清晰 */
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
a:hover { color: var(--primary-color); }

img { max-width: 100%; height: auto; border-radius: 6px; display: block; }

/* =========================================
   3. 顶部导航栏 (Glassmorphism 毛玻璃)
   ========================================= */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 72px;
    background: rgba(255, 255, 255, 0.85); /* 半透明白 */
    backdrop-filter: blur(12px);           /* 核心：模糊背景 */
    border-bottom: 1px solid rgba(255,255,255,0.3);
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    display: flex; align-items: center;
}

.header-inner {
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
    position: relative;
}

/* Logo 样式 */
.site-branding { z-index: 1002; }
.site-title-link { 
    font-size: 22px; font-weight: 800; color: var(--primary-color); 
    letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px;
}

/* 桌面端菜单 */
.main-navigation ul { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; }
.main-navigation a { 
    font-size: 15px; font-weight: 600; color: var(--text-main); 
    padding: 8px 0; position: relative;
}
/* 菜单下划线动画 */
.main-navigation a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--primary-color); transition: width 0.3s;
}
.main-navigation a:hover::after { width: 100%; }

/* 手机端汉堡按钮 (默认隐藏) */
.menu-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--text-main); cursor: pointer; z-index: 1002; }

/* =========================================
   4. 布局容器系统 (Layout)
   ========================================= */
.container {
    max-width: 1200px;
    margin: 110px auto 60px; /* 顶部避开导航栏 */
    padding: 0 20px;
}

/* 首页 Hero 区域 */
.hero-section {
    background: #fff; padding: 60px 40px; text-align: center;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e7eb; margin-bottom: 50px;
    background-image: radial-gradient(#eff6ff 1px, transparent 1px); /* 细微点阵背景 */
    background-size: 20px 20px;
}
.hero-section h2 { font-size: 2.5rem; color: var(--text-main); margin-bottom: 15px; font-weight: 800; }
.hero-section p { font-size: 1.1rem; color: var(--text-light); max-width: 600px; margin: 0 auto; }

/* 标题样式 */
.section-title {
    font-size: 1.5rem; font-weight: 700; color: var(--text-main);
    border-left: 5px solid var(--primary-color);
    padding-left: 15px; margin: 50px 0 30px;
    display: flex; align-items: center; gap: 10px;
}

/* 网格布局 (Grid) - 用于首页 */
.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* 自适应列 */
    gap: 30px;
}

/* 左右分栏布局 (Flex) - 用于内页 */
.content-area-flex {
    display: flex;
    align-items: flex-start; /* 顶部对齐 */
    gap: 40px;
}

/* =========================================
   5. 卡片样式 (Cards) - 用于首页文章
   ========================================= */
.post-card {
    background: var(--bg-card);
    padding: 25px;
    border-radius: var(--border-radius);
    border: 1px solid #e5e7eb;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}

/* 悬停特效 */
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

/* 顶部彩色条 */
.post-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: var(--primary-color); opacity: 0; transition: 0.3s;
}
.post-card:hover::before { opacity: 1; }

.card-cat {
    display: inline-block; font-size: 12px; font-weight: 700;
    color: var(--primary-color); background: #eff6ff;
    padding: 4px 10px; border-radius: 20px;
    margin-bottom: 15px; align-self: flex-start;
}

.post-card h3 { margin: 10px 0; font-size: 1.25rem; line-height: 1.4; }
.post-card p { color: var(--text-light); font-size: 0.95rem; flex-grow: 1; margin-bottom: 20px; }

.read-more { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; }
.read-more i { transition: 0.3s; }
.post-card:hover .read-more i { transform: translateX(5px); }

/* =========================================
   6. 文章详情页 (Single Post)
   ========================================= */
.site-main {
    flex: 1; /* 占满剩余宽度 */
    background: #fff; padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    min-width: 0; /* 防止内容撑破 */
    border: 1px solid #e5e7eb;
}

.entry-header { margin-bottom: 30px; border-bottom: 1px solid #f3f4f6; padding-bottom: 20px; }
.entry-title { font-size: 2rem; font-weight: 800; margin-bottom: 15px; line-height: 1.3; }
.entry-meta { color: var(--text-light); font-size: 0.9rem; display: flex; gap: 20px; }
.entry-meta i { margin-right: 5px; }

.entry-content { font-size: 1.1rem; color: #374151; }
.entry-content h2 { 
    margin-top: 40px; margin-bottom: 20px; font-size: 1.5rem; 
    border-left: 4px solid var(--primary-color); padding-left: 15px;
    background: linear-gradient(90deg, #eff6ff 0%, transparent 100%);
    padding-top: 5px; padding-bottom: 5px;
}
.entry-content p { margin-bottom: 20px; text-align: justify; }

/* 代码块美化 */
.entry-content pre {
    background: #1e293b; color: #e2e8f0; padding: 20px;
    border-radius: 8px; overflow-x: auto; font-family: monospace;
}

/* =========================================
   7. 侧边栏 (Sidebar)
   ========================================= */
.site-sidebar {
    width: 320px;
    flex-shrink: 0; /* 禁止缩小 */
    position: sticky; top: 90px; /* 悬浮定位 */
}

.widget {
    background: #fff; padding: 25px; margin-bottom: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e7eb;
}
.widget-title {
    font-size: 1.1rem; font-weight: 700; margin-bottom: 15px;
    padding-bottom: 10px; border-bottom: 2px solid #f3f4f6;
    display: flex; align-items: center; gap: 10px;
}
.widget-title i { color: var(--primary-color); }

.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li { border-bottom: 1px dashed #e5e7eb; padding: 12px 0; }
.sidebar-list li:last-child { border-bottom: none; }
.sidebar-list a { font-size: 0.95rem; color: var(--text-main); display: block; }
.sidebar-list a:hover { color: var(--primary-color); transform: translateX(5px); }

/* 标签云 (Pill 样式) */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
    font-size: 12px !important; 
    background: #f1f5f9; color: var(--text-light);
    padding: 6px 12px; border-radius: 20px;
    transition: 0.2s; border: 1px solid transparent;
}
.tag-cloud a:hover {
    background: var(--primary-color); color: #fff;
    box-shadow: var(--shadow-blue);
}

/* =========================================
   8. 页脚 (Footer)
   ========================================= */
.site-footer {
    text-align: center; padding: 50px 0;
    color: var(--text-light); font-size: 0.9rem;
    margin-top: 60px; border-top: 1px solid #e5e7eb;
}

/* =========================================
   9. 响应式适配 (Mobile)
   ========================================= */
@media screen and (max-width: 900px) {
    /* 容器调整 */
    .container { margin-top: 90px; padding: 0 15px; }
    
    /* 布局变垂直 */
    .content-area-flex { flex-direction: column; gap: 30px; }
    .site-main, .site-sidebar { width: 100%; }
    .site-sidebar { position: static; } /* 手机端取消悬浮 */
    
    /* 汉堡菜单显示 */
    .menu-toggle { display: block; }
    
    /* 菜单隐藏与显示动画 */
    .main-navigation {
        display: none; /* 默认隐藏 */
        position: fixed; top: 72px; left: 0; width: 100%;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #eee;
        box-shadow: var(--shadow-lg);
        padding: 20px;
    }
    .main-navigation.toggled { display: block; animation: slideDown 0.3s ease; }
    
    .main-navigation ul { flex-direction: column; gap: 0; }
    .main-navigation a { 
        display: block; padding: 15px 0; font-size: 1.1rem;
        border-bottom: 1px solid #f3f4f6; 
    }
    .main-navigation a:hover { color: var(--primary-color); padding-left: 10px; }
    
    /* 动画关键帧 */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* =========================================
   10. 文章目录 (Table of Contents) 样式
   ========================================= */
.article-toc {
    background: #f8fafc; /* 浅灰蓝背景 */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px; /* 距离正文的间距 */
    position: relative;
}

.toc-header {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-toc li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.article-toc a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.2s;
    border-bottom: 1px solid transparent;
}

.article-toc a:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* H3 标题缩进，体现层级 */
.article-toc li.h3 {
    padding-left: 20px;
    font-size: 0.9rem;
}
.article-toc li.h3::before {
    content: "•";
    margin-right: 5px;
    color: #cbd5e1;
}

/* 相关推荐布局优化 */
.related-posts {
    background: #f8fafc;
    padding: 25px;
    border-radius: 12px;
    margin-top: 40px;
}
.related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.related-item {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
}
.related-item .date {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 5px;
}
.related-item a {
    font-weight: 600;
}

@media (max-width: 768px) {
    .related-grid { grid-template-columns: 1fr; }
}

/* =========================================
   11. 文章翻页导航 (最终修复版)
   ========================================= */
.post-navigation {
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin: 40px 0 !important;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* 卡片整体样式 */
.nav-card {
    flex: 1; /* 左右各占 50% */
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 20px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column; /* 垂直排列标签和标题 */
    position: relative;
    overflow: hidden;
}

/* 鼠标悬停特效 */
.nav-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12); /* 蓝色投影 */
    transform: translateY(-3px); /* 微微上浮 */
}

/* 没有文章时的占位框 */
.nav-card.empty {
    background: #f9fafb;
    border: 1px dashed #e5e7eb;
    color: #9ca3af;
    cursor: default;
    pointer-events: none;
}

/* "上一篇/下一篇" 小标签 */
.nav-label {
    font-size: 12px;
    color: #6b7280; /* 灰色 */
    margin-bottom: 8px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 文章标题 */
.nav-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937; /* 深黑 */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-card:hover .nav-title {
    color: var(--primary-color); /* 悬停时标题变蓝 */
}

/* 下一篇：文字靠右 */
.nav-next {
    text-align: right;
    align-items: flex-end; /* 内容靠右对齐 */
}
.nav-next .nav-label {
    flex-direction: row; /* 让图标在文字右边 */
}

/* 手机端适配：垂直排列 */
@media (max-width: 768px) {
    .post-navigation {
        flex-direction: column !important;
    }
    .nav-next {
        text-align: left; /* 手机上改回左对齐 */
        align-items: flex-start;
    }
}

/* =========================================
   12. 搜索框美化 (Search Form)
   ========================================= */
.widget .modern-search-form {
    width: 100%;
}

.search-group {
    display: flex;
    align-items: center;
    background: #f9fafb; /* 默认浅灰背景 */
    border: 2px solid #e5e7eb; /* 浅灰边框 */
    border-radius: 50px; /* 大圆角 (胶囊形) */
    overflow: hidden; /* 防止按钮溢出 */
    transition: all 0.3s ease;
    position: relative;
}

/* 鼠标点进去时的特效：背景变白，边框变蓝，加阴影 */
.search-group:focus-within {
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

/* 输入框样式 */
.search-field {
    flex: 1; /* 占满剩余空间 */
    border: none;
    background: transparent;
    padding: 12px 20px;
    font-size: 14px;
    color: var(--text-main);
    outline: none; /* 去掉浏览器默认黑边 */
}

.search-field::placeholder {
    color: #9ca3af;
}

/* 按钮样式 */
.search-submit {
    background: transparent;
    border: none;
    color: #6b7280; /* 默认灰色图标 */
    padding: 0 20px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 鼠标悬停按钮时，图标变蓝并放大 */
.search-submit:hover {
    color: var(--primary-color);
    transform: scale(1.1);
}

/* 手机端适配：稍微调大一点方便手指点击 */
@media (max-width: 768px) {
    .search-field {
        padding: 15px 20px;
        font-size: 16px;
    }
    .search-submit {
        padding: 0 25px;
    }
}

/* =========================================
   14. 图标强制修复 (Icon Fix)
   ========================================= */
/* 强制所有 FontAwesome 图标使用正确的字体，防止被全局字体覆盖 */
.fas, .fab, .far, .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900; /* Solid图标必须加粗 */
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* 品牌图标 (Github/Twitter等) 需要特殊的 font-family */
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400;
}