/* 确保 solid 和 regular 都被定义，且 font-weight 区分 */
@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 加载 Brands 图标字体 */
@font-face {
  font-family: "Font Awesome 6 Brands";
  src: url("/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
    --primary-blue: #4A90E2;
    --light-blue: #E3F2FD;
    --dark-blue: #1976D2;
}
body {
    font-family: 'Segoe UI', Roboto, sans-serif;
    background-color: #f8f9fa;
}

/* 导航栏全局 */
.navbar {
    background-color: var(--primary-blue) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-nav .nav-link {
    color: white !important;
    font-weight: 500;
    padding: 8px 14px;
}
.navbar-nav .nav-link:hover {
    background-color: var(--dark-blue);
    border-radius: 4px;
}

.navbar-brand img.logo-img,
.navbar-brand svg {
    height: 48px;
    width: auto;
    max-width: 500px;
}
@media (max-width: 767.98px) {
    .navbar-brand img.logo-img,
    .navbar-brand svg {
        height: 48px;
        max-width: 500px;
    }
}

/* 顶部菜单右对齐+样式兼容 */
#navbarNav ul.mod-list.nav > li.nav-item > a {
    color: white !important;
    font-weight: 500;
    padding: 8px 16px;
    display: block;
    text-decoration: none;
    border-radius: 4px;
}
#navbarNav ul.mod-list.nav > li.nav-item > a:hover {
    background-color: var(--dark-blue);
}
#navbarNav ul.mod-list.nav {
    margin-left: auto !important;
    margin-bottom: 0;
    gap: 4px;
}
@media (max-width: 991.98px) {
    #navbarNav ul.mod-list.nav {
        flex-direction: column;
        margin-left: 0 !important;
    }
    #navbarNav ul.mod-list.nav > li.nav-item {
        width: 100%;
    }
}

/* 广告轮播 */
.banner-section {
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
}
.banner-section img {
    height: 240px;
    object-fit: cover;
}
@media (max-width: 767.98px) {
    .banner-section,
    .banner-section img {
        height: 180px;
    }
}

/* 文章外层盒子 */
.article-box {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    height: 100%;
}
.section-title {
    color: var(--dark-blue);
    font-size: 25px;
    font-weight: 600;
    border-left: 4px solid var(--primary-blue);
    padding-left: 10px;
    margin-bottom: 12px;
}

/* 侧边栏卡片统一 */
.sidebar-box {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.sidebar-box .section-title {
    margin: 0 0 12px;
}
.sidebar-box:first-of-type {
    margin-top: 0 !important;
}

/* 侧边Quick Links菜单单独修复 */
.sidebar-box ul.mod-menu.mod-list.nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
.sidebar-box ul.mod-menu.mod-list.nav li.nav-item {
    display: block !important;
    width: 100% !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid #eee !important;
}
.sidebar-box ul.mod-menu.mod-list.nav li.nav-item:last-child {
    border-bottom: none !important;
}
.sidebar-box ul.mod-menu.mod-list.nav li.nav-item a {
    display: block !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 18px !important;
    transition: all 0.2s ease !important;
}
.sidebar-box ul.mod-menu.mod-list.nav li.nav-item a:hover {
    color: var(--dark-blue) !important;
    padding-left: 5px !important;
}

/* 旧mini卡片样式 */
.mini-card {
    display: flex;
    align-items: center;
    background: #fafbfc;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.mini-card img {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 10px;
}
.mini-card h6 {
    font-size: 13px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-card p {
    font-size: 11px;
    color: #666;
    margin: 2px 0 0;
}

/* Follow Us 社交图标布局（系统原生无品牌图标，仅保留容器样式） */
.social-block .social-icons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 0;
}
.social-block .social-icons a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-blue);
    color: var(--dark-blue);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.25s ease;
    font-size: 16px;
}
.social-block .social-icons a:hover {
    background-color: var(--dark-blue);
    color: #fff;
    transform: scale(1.08);
}

/* Subscribe订阅表单 */
.subscribe-block .form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(74, 144, 226, 0.25);
}
.subscribe-block .btn:hover {
    background: var(--primary-blue) !important;
}

/* 页脚 */
footer {
    background-color: var(--primary-blue);
    color: white;
    padding: 5px 0 15px;
    margin-top: 15px;
}
footer a {
    color: white;
    text-decoration: none;
}

/* ========== 文章列表核心样式 ========== */
.article-box ul.mod-articles-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 0 !important;
}

.article-box .mod-articles-item {
    position: relative !important;
    padding: 12px 0 12px 75px !important;
    border-bottom: 1px solid #eee !important;
}
.article-box .mod-articles-item:last-child {
    border-bottom: none !important;
}

/* 左侧缩略图 */
.article-box .mod-articles-item .mod-articles-image {
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
.article-box .mod-articles-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 6px !important;
    transition: transform 0.2s ease;
}
.article-box .mod-articles-item:hover .mod-articles-image img {
    transform: scale(1.05);
}

/* 文字区域 */
.article-box .mod-articles-item-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* 文章标题 */
.article-box .mod-articles-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.article-box .mod-articles-title a {
    color: #222 !important;
    text-decoration: none !important;
    transition: color 0.2s;
    font-weight:600;
}
.article-box .mod-articles-title a:hover {
    color: var(--dark-blue) !important;
}

/* 文章内容样式重置 */
.article-box .mod-articles-item-content p,
.article-box .mod-articles-item-content h3,
.article-box .mod-articles-item-content div,
.article-box .mod-articles-item-content span {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    background: none !important;
}
/* 隐藏多余非封面图片 */
.article-box .mod-articles-item-content img:not(.mod-articles-image img) {
    display: none !important;
}

/* 移动端文章列表适配 */
@media (max-width: 767.98px) {
    .article-box .mod-articles-item {
        padding-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
    .article-box .mod-articles-item .mod-articles-image {
        position: static !important;
        margin-bottom: 8px !important;
    }
    .article-box .mod-articles-title {
        white-space: normal;
        text-align: center;
    }
    .article-box .mod-articles-item-content p {
        text-align: center;
    }
}

/* 分页布局修复（只保留样式，不涉及字体映射） */
.pagination .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 48px !important;
    padding: 0.6rem 0.8rem !important;
    gap: 0.25rem;
    font-size: 18px !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--dark-blue) !important;
    border-color: var(--dark-blue) !important;
    color: #fff !important;
}
.pagination .page-item.disabled .page-link {
    opacity: 0.5 !important;
    pointer-events: none;
}
.pagination .page-link [class^="icon-"] {
    min-width: 18px !important;
    min-height: 18px !important;
}

/* 内页正文文字统一 */
.com-content .item-content p,
.com-content .item-content li {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #222 !important;
}
/* 分页箭头图标强制修复（直接指定 content 和字体） */
.pagination .icon-angle-double-left::before {
    content: "\f100"; /* 双左箭头 */
}
.pagination .icon-angle-left::before {
    content: "\f104"; /* 单左箭头 */
}
.pagination .icon-angle-right::before {
    content: "\f105"; /* 单右箭头 */
}
.pagination .icon-angle-double-right::before {
    content: "\f106"; /* 双右箭头 */
}

/* 确保这些图标使用正确的字体和字重 */
.pagination [class^="icon-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}
/* ---------- 品牌图标映射（手动添加） ---------- */
.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

/* 常用品牌图标的 Unicode 映射（Font Awesome 6.7.2） */
.fab.fa-facebook-f::before {
    content: "\f39e";
}
.fab.fa-x-twitter::before {
    content: "\e61b"; /* X（原 Twitter）新标志 */
}
.fab.fa-linkedin-in::before {
    content: "\f0e1";
}
.fab.fa-youtube::before {
    content: "\f167";
}
.fab.fa-instagram::before {
    content: "\f16d";
}
/* ========== 分类博客分页导航居中上下排列 ========== */
.com-content-category-blog__navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 清除计数器的浮动，并使其在上方居中 */
.com-content-category-blog__navigation .counter {
    float: none !important;
    margin-right: 0 !important;  /* 移除右侧边距 */
    padding-right: 0 !important; /* 移除右侧内边距 */
    order: -1; /* 确保计数器在分页上方（虽然默认已在上面，但显式指定更稳妥） */
    width: 100%; /* 占满宽度以便居中文本 */
    text-align: center;
}

/* 分页容器宽度100%，内部页码居中 */
.com-content-category-blog__pagination {
    width: 100%;
}

/* 页码列表居中 */
.pagination {
    justify-content: center !important;
}

/* 可选：调整上下间距 */
.com-content-category-blog__navigation .counter {
    margin-bottom: 0.5rem; /* 计数器与页码间留一点间距 */
}

/* ========== 分类博客分页导航居中上下排列 ========== */
.com-content-category-blog__navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* 计数器：清除浮动，显示在上方，居中 */
.com-content-category-blog__navigation .counter {
    float: none !important;          /* 移除原有右浮动 */
    margin-right: 0 !important;
    padding-right: 0 !important;
    order: -1;                        /* 确保计数器显示在分页上方 */
    width: 100%;
    text-align: center;
    padding-top: 0.5rem;              /* 可微调顶部间距 */
}

/* 分页容器：宽度100%，页码居中 */
.com-content-category-blog__pagination {
    width: 100%;
}

/* 页码列表：水平居中 */
.pagination {
    justify-content: center !important;
    margin-bottom: 0 !important;      /* 清除默认底部外边距，统一间距 */
}

/* ========== 分页品牌蓝配色 ========== */
/* 页码链接文字颜色 */
.pagination .page-link {
    color: var(--dark-blue) !important;  /* 使用深品牌蓝 */
}

/* 页码链接悬停效果（可选） */
.pagination .page-link:hover {
    color: var(--primary-blue) !important; /* 悬停时变亮 */
    background-color: var(--light-blue);   /* 浅蓝背景（需定义 --light-blue） */
    border-color: var(--primary-blue);
}

/* 当前活动页码（背景已是品牌蓝，只需确保文字为白色） */
.pagination .page-item.active .page-link {
    background-color: var(--dark-blue) !important;
    border-color: var(--dark-blue) !important;
    color: #fff !important;
}

/* 计数文字（Page 1 of 2） */
.com-content-category-blog__counter {
    color: var(--primary-blue) !important;
    font-weight: 500;
}

/* ========== 分类博客文章标题链接颜色 - 品牌蓝 ========== */
.com-content-category-blog .page-header h2 a,
.com-content-category-blog .item-title a {  /* 有些模板可能用 .item-title */
    color: var(--dark-blue) !important;     /* 使用深品牌蓝 (#1976D2) */
    text-decoration: none;
    transition: color 0.2s ease;
}

.com-content-category-blog .page-header h2 a:hover,
.com-content-category-blog .item-title a:hover {
    color: var(--primary-blue) !important;  /* 悬停时变亮 (#4A90E2) */
    text-decoration: none;
}

/* ========== 分类博客文章间距增大 ========== */
.com-content-category-blog__items .blog-item {
    margin-bottom: 6rem !important;  /* 可调整数值，如 3rem 更大 */
}

/* 如果是引导文章（items-leading）也统一间距 */
.items-leading .blog-item {
    margin-bottom: 6rem !important;
}

/* 文章卡片化 */
.com-content-category-blog__items .blog-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 0.5rem;  /* 内边距，右侧和下侧稍小 */
    margin-bottom: 1.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.com-content-category-blog__items .blog-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);  /* 悬停加深阴影 */
}

/* 如果引导文章（第一条）也想同样样式 */
.items-leading .blog-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 0.5rem;
    margin-bottom: 1.8rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

h1 { margin-bottom: 3rem; }  /* 24px */
h2 { margin-bottom: 2rem; }    /* 16px */
h3 { margin-bottom: 1rem; } /* 12px */
h4, h5, h6 { margin-bottom: 0.5rem; }

/* ========== 单篇文章样式优化 ========== */

/* 1. 文章主标题 h1 增加下边距，并使用品牌色 */
.com-content-article .page-header h1 {
    color: var(--dark-blue);
    margin-bottom: 1.5rem;
    border-bottom: 3px solid var(--primary-blue);
    padding-bottom: 0.5rem;
}

/* 2. 文章正文内的标题（h2, h3 等）增加间距 */
.com-content-article__body h2,
.com-content-article__body h3,
.com-content-article__body h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--dark-blue);
}

/* 3. 正文段落样式（覆盖内联样式，统一字体、颜色、行高） */
.com-content-article__body p {
    font-family: 'Segoe UI', Roboto, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #222 !important;
    margin-bottom: 1.2rem !important;
    background: none !important;  /* 清除可能的内联背景色 */
}

/* 4. 正文内图片（右浮动）增加边距，并适应移动端 */
.com-content-article__body img[style*="float: right"],
.com-content-article__body img[style*="float:right"] {
    margin: 0 0 1rem 1.5rem !important;
    max-width: 50% !important;
    height: auto !important;
    border-radius: 6px;
}

/* 移动端取消浮动，图片占满宽度 */
@media (max-width: 767.98px) {
    .com-content-article__body img[style*="float: right"],
    .com-content-article__body img[style*="float:right"] {
        float: none !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
        display: block;
    }
}

/* 5. 正文内链接颜色使用品牌蓝 */
.com-content-article__body a:not(.btn) {
    color: var(--dark-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.com-content-article__body a:not(.btn):hover {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

/* 6. 可选：文章正文区域整体增加内边距，提升阅读舒适度 */
.com-content-article__body {
    padding: 0.5rem 0;
}

.btn-primary {
    background-color: var(--dark-blue) !important;
    border-color: var(--dark-blue) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
    color: #fff !important;
}