/* =========================================================
   ToolHub 现代极简卡片布局（全新精修版）
   风格定位：现代极简 / 瑞士国际主义设计风格
   设计特点：
   1. 纯白卡片容器，大面积优雅留白，聚焦阅读体验
   2. 干净清爽的整体浅灰背景（营造明显的灰白分层）
   3. 彻底移除原有的超粗灰色边框与高饱和度红条，改用极细微环境阴影
   4. 完美的全设备响应式手机端适配
========================================================= */

/* =========================================================
   页面基础背景与文字
========================================================= */
html,
body {
    background: #f5f6f7 !important; /* 清爽明亮的现代浅灰色背景 */
    color: #333333 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   主栏及各大容器背景透明（确保卡片完美的独立悬浮感）
========================================================= */
#main,
#content,
#primary,
.site,
.site-content,
.content-area,
.site-main,
.container,
.wrapper,
#page {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   文章卡片（极简纯白悬浮版）
========================================================= */
.post,
.article,
.index-post,
.post-item,
.archive article,
article,
.entries,
.entry {
    background: #ffffff !important; /* 纯白背景容器 */
    
    /* 彻底移除超粗边框与左侧强调红条，改用极细的现代微光边缘线 */
    border: 1px solid #eaeaea !important;
    border-left: none !important;
    
    border-radius: 8px !important; /* 精致圆角 */
    padding: 36px 40px !important; /* 加大左右内边距，充足的留白是极简设计的核心 */
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    
    /* 极轻、极柔和的环境层次阴影，仅提供微弱的空间悬浮感 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.01) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* =========================================================
   卡片 Hover 悬浮交互反馈
========================================================= */
.post:hover,
.article:hover,
.index-post:hover,
.post-item:hover,
article:hover {
    transform: translateY(-4px) !important; /* 平滑轻量上浮 */
    border-color: #e0e0e0 !important;
    /* 悬浮时环境深度阴影自然加深 */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.02) !important;
}

/* 去除主题默认的多余分割线 */
.post + .post,
article + article,
.index-post + .index-post {
    border-top: none !important;
}

/* =========================================================
   文章标题
========================================================= */
.post-title,
.entry-title,
.archive-title,
article h2 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important; /* 减轻字重，看起来更利落高级 */
    letter-spacing: -0.02em;
}

.post-title a,
.entry-title a,
article h2 a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.post-title a:hover,
.entry-title a:hover,
article h2 a:hover {
    color: #0066cc !important; /* 现代高级感的学术链接蓝 */
}

/* =========================================================
   文章元信息（日期、作者、分类等）
========================================================= */
.post-meta,
.entry-meta,
.meta {
    border-bottom: none !important; /* 移除以前所有粗灰分割线，保持绝对纯净 */
    padding-bottom: 0 !important;
    margin-bottom: 22px !important;
    color: #888888 !important;
    font-size: 0.88rem !important;
}

.post-meta a,
.entry-meta a,
.meta a {
    color: #666666 !important;
    text-decoration: none !important;
}

.post-meta a:hover,
.entry-meta a:hover,
.meta a:hover {
    color: #0066cc !important;
}

/* =========================================================
   文章摘要内容区
========================================================= */
.post-content,
.entry-content,
.summary {
    line-height: 1.8 !important;
    color: #4a4a4a !important;
    font-size: 1rem !important;
    margin-bottom: 24px !important;
}

/* =========================================================
   "阅读全文" 按钮（精修文字链接版，完美复刻主流极简风格）
========================================================= */
.more a {
    display: inline-block !important;
    padding: 0 !important;
    background: transparent !important;
    color: #0066cc !important; /* 优雅的文本链接蓝 */
    border-radius: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    margin-top: 4px !important;
}

.more a:hover {
    color: #004499 !important;
    text-decoration: underline !important; /* 悬浮时出现精致下划线 */
    transform: none !important;
    opacity: 1 !important;
}

/* =========================================================
   底部分页导航导航（现代扁平化风格）
========================================================= */
.page-navigator {
    text-align: center !important;
    margin: 56px 0 !important;
}

.page-navigator a,
.page-navigator span {
    display: inline-block !important;
    padding: 8px 16px !important;
    background: #ffffff !important;
    border: 1px solid #dcdee0 !important; /* 纤细利落的现代页码边框 */
    border-radius: 6px !important;
    margin: 0 4px !important;
    text-decoration: none !important;
    color: #555555 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01) !important;
}

.page-navigator a:hover {
    border-color: #0066cc !important;
    color: #0066cc !important;
    background: #f4f9ff !important; /* 极其轻微的淡蓝交互背景 */
}

.page-navigator .current a,
.page-navigator .current span {
    background: #0066cc !important; /* 激活态切换为主题深蓝色 */
    border-color: #0066cc !important;
    color: #ffffff !important;
}

/* =========================================================
   侧边栏及小工具卡片同步美化
========================================================= */
.sidebar,
#secondary,
.widget-area {
    background: transparent !important;
}

.widget {
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-left: none !important; /* 同步去除侧边栏卡片的红条与粗框 */
    border-radius: 8px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
}

/* =========================================================
   移动端/手机端 响应式完美适配
========================================================= */
@media (max-width: 768px) {
    html,
    body {
        background: #f5f6f7 !important;
    }

    .post,
    .article,
    article {
        padding: 24px 20px !important; /* 移动端适当收紧内边距，提高空间利用率 */
        border-width: 1px !important;
        margin-bottom: 20px !important;
    }

    .widget {
        padding: 20px !important;
    }

    .post-title,
    .entry-title {
        font-size: 1.3rem !important;
    }
    
    .page-navigator a,
    .page-navigator span {
        padding: 6px 12px !important;
        margin: 0 2px !important;
        font-size: 0.85rem !important;
    }
}