/* 
Theme Name: OneNav 子主题模板
Theme URI: https://www.iotheme.cn
Description: Modern SaaS UI / UX Upgrade v3.1 (Complete Fix)
Template: onenav
Version: 1.3.1
Author: SRE Agent & UI/UX Pro Max
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Override CSS Variables
   ========================================================================== */
:root {
    --main-radius: 8px !important;
    --main-shadow: rgba(0,0,0,0.04) !important;
    --hover-color: #F97316 !important;
    --focus-color: #F97316 !important;
}

/* ==========================================================================
   Typography
   ========================================================================== */
body, h1, h2, h3, h4, h5, h6,
.text-sm, .text-xs, .text-muted,
.posts-item, .item-title, .sites-body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* --- 页面背景加深 --- */
body {
    background-color: #E5E7EB !important;
}
.io-black-mode body {
    background-color: #030712 !important;
}

/* ==========================================================================
   问题2: 去掉 content-card 背景, 增加横向分割线
   ========================================================================== */
.content-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}
.content-card:last-child {
    border-bottom: none !important;
}
.io-black-mode .content-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   问题1: 恢复卡片圆角边框 & 触发样式
   ========================================================================== */
.posts-item.sites-item {
    margin-bottom: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.posts-item.sites-item .sites-body {
    padding: 18px 16px !important;
}

/* Hover: 上浮 + 橙色边框 + 轻柔阴影 */
.posts-item.sites-item:hover {
    transform: translateY(-4px) !important;
    border-color: #F97316 !important;
    box-shadow: 0 12px 20px -8px rgba(249, 115, 22, 0.12), 
                0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   Icon: border-radius 40px(圆) → 7px(圆角)
   ========================================================================== */
.posts-item.sites-item .item-media {
    border-radius: 7px !important;
}
.posts-item.sites-item .item-media img.sites-icon {
    border-radius: 7px !important;
}

/* 问题3: 彻底隐藏 icon 的 blur 晕色效果 */
.posts-item.sites-item .blur-img-bg {
    display: none !important;
}

/* 隐藏 hover 弹出的 togo 箭头 */
.posts-item.sites-item .togo {
    display: none !important;
}

/* ★ 恢复 Bootstrap Tooltip (之前错误隐藏的, 现在不再屏蔽) */
/* .tooltip 不再设置 display:none */

/* ==========================================================================
   链接 hover → 品牌橙红
   ========================================================================== */
a:hover {
    color: #F97316 !important;
}
.posts-item.sites-item:hover .item-title,
.posts-item.sites-item:hover .item-title b {
    color: #F97316 !important;
}

/* ==========================================================================
   Title & Description
   ========================================================================== */
.posts-item.sites-item .item-title,
.posts-item.sites-item .item-title b {
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
.posts-item.sites-item .item-body .text-muted.text-xs {
    color: #6B7280 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */
.io-black-mode .posts-item.sites-item {
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: #111827 !important;
    box-shadow: none !important;
}
.io-black-mode .posts-item.sites-item:hover {
    border-color: #F97316 !important;
    box-shadow: 0 12px 24px -8px rgba(249, 115, 22, 0.2) !important;
}
.io-black-mode .posts-item.sites-item .item-title,
.io-black-mode .posts-item.sites-item .item-title b {
    color: #F9FAFB !important;
}
.io-black-mode .posts-item.sites-item .item-body .text-muted.text-xs {
    color: #9CA3AF !important;
}
.io-black-mode .posts-item.sites-item .item-media {
    background-color: #FFFFFF !important;
    padding: 2px !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary, .badge-primary {
    background-color: #F97316 !important;
    border-color: #F97316 !important;
    color: #FFFFFF !important;
}
.btn-primary:hover {
    background-color: #EA580C !important;
    border-color: #EA580C !important;
}