/* ============================================================
   香菇网 · xg.css —— 香菇知识站绿色主题样式
   ============================================================
   【字号规范】全站只允许 3 档：
     14px  xg-text-sm   辅助/小字（元信息、标签、面包屑）
     16px  默认（body） 正文、导航、卡片标题、列表
     24px  xg-title     页面大标题（Hero/页头/区块标题/文章 h2）
   【颜色规范】全站统一：
     正文   #444        次要  #777        标题  #143C26
     链接/强调 #2F7D46  深底文字继承容器（白）
     其余颜色仅用于按钮/卡片/背景等组件，不用于文字层次
   ============================================================ */

:root {
    --xg-green: #2F7D46;
    --xg-green-dark: #1F5C36;
    --xg-green-deep: #143C26;
    --xg-green-mid: #4C9A5F;
    --xg-green-light: #EAF3E9;
    --xg-green-tint: #F2F7F0;
    --xg-brown: #8A5A33;
    --xg-cream: #F6F3EA;
    --xg-line: #DCEADE;
    --xg-text: #444;
    --xg-text-muted: #777;
    --xg-title: #143C26;
}

html { scroll-behavior: smooth; }

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    color: var(--xg-text);
}

h1, h2 { font-size: 24px; font-weight: 700; color: var(--xg-title); }
h3, h4 { font-size: 16px; font-weight: 700; color: var(--xg-title); }

.container { max-width: 1200px; }

/* 通用字号/颜色工具 */
.xg-title    { font-size: 24px; font-weight: 700; color: var(--xg-title); }
.xg-title-light { color: #fff; }
.xg-text-sm  { font-size: 14px; color: var(--xg-text-muted); }
.xg-link     { color: var(--xg-green); }
.xg-link:hover { color: var(--xg-green-dark); }

/* ---------- Logo ---------- */
.xg-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #4C9A5F 0%, #2F7D46 100%);
    color: #fff;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(47, 125, 70, .25);
}
.xg-logo-icon { font-size: 14px; color: #D9F2DF; }
.xg-logo-text { font-size: 16px; font-weight: 800; letter-spacing: 2px; }
.xg-logo-light { background: rgba(255,255,255,.08); box-shadow: none; }

/* ---------- 按钮 ---------- */
.xg-btn-primary {
    background: linear-gradient(135deg, #4C9A5F 0%, #2F7D46 100%);
    color: #fff;
}
.xg-btn-primary:hover { filter: brightness(1.06); }

.xg-btn-outline {
    border: 2px solid #2F7D46;
    color: #2F7D46;
    transition: all .3s;
}
.xg-btn-outline:hover { background: #2F7D46; color: #fff; }

/* ---------- Header / 导航 ---------- */
header.xg-scrolled { box-shadow: 0 6px 20px rgba(20,60,38,.10); }
header nav a { color: #444; }
header nav a:hover { color: var(--xg-green); }
header nav a.xg-nav-active { color: var(--xg-green); font-weight: 700; }
header .fa-search { color: #999; }
header button[data-mobile-menu] { color: #444; }
.xg-nav-active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #4C9A5F, #2F7D46);
}

/* ---------- 搜索输入 ---------- */
input::placeholder, textarea::placeholder { color: #999; }

/* ---------- 移动端底部快捷栏 ---------- */
.xg-mobile-bar a { color: #444; }

/* ---------- 区块标题 ---------- */
.xg-section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}
.xg-section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 52px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #4C9A5F, #2F7D46);
}
.xg-section-title-left::after { left: 0; transform: none; }
.xg-kicker {
    color: var(--xg-green);
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 600;
}

/* ---------- Hero ---------- */
.xg-hero {
    position: relative;
    background:
        radial-gradient(circle at 12% 22%, rgba(143,211,160,.28) 0, transparent 46%),
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.14) 0, transparent 40%),
        linear-gradient(120deg, #143C26 0%, #1F5C36 45%, #2F7D46 100%);
    color: #fff;
    overflow: hidden;
}
.xg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .5;
}
.xg-hero h1 { font-size: 24px; font-weight: 800; line-height: 1.3; color: #fff; }
.xg-hero-sub { font-size: 16px; color: rgba(255,255,255,.85); }
.xg-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    font-size: 14px;
    letter-spacing: 2px;
}

/* ---------- 卡片 / 侧栏 ---------- */
.xg-card {
    background: #fff;
    border: 1px solid var(--xg-line);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(20,60,38,.05);
    transition: box-shadow .3s, transform .3s;
}
.xg-card:hover { box-shadow: 0 10px 28px rgba(20,60,38,.10); }
.xg-sidebar-block { overflow: hidden; }
.xg-sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--xg-green-tint);
    border-bottom: 1px solid var(--xg-line);
    font-size: 16px;
    font-weight: 700;
    color: var(--xg-title);
}
.xg-sidebar-title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4C9A5F, #2F7D46);
}

/* ---------- 资讯列表容器 ---------- */
.xg-news-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- 资讯列表卡片 ---------- */
.xg-news-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--xg-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(20,60,38,.05);
    transition: box-shadow .3s, transform .3s;
}
.xg-news-card:hover {
    box-shadow: 0 10px 28px rgba(20,60,38,.10);
    transform: translateY(-2px);
}
.xg-news-thumb {
    flex: 0 0 280px;
    width: 280px;
    height: 200px;
    background: var(--xg-green-tint);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9DC3A8;
    font-size: 42px;
}
.xg-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s;
}
.xg-news-card:hover .xg-news-thumb img { transform: scale(1.05); }
.xg-news-body {
    flex: 1;
    min-width: 0;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.xg-news-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--xg-title);
    line-height: 1.45;
}
.xg-news-card:hover .xg-news-title { color: var(--xg-green); }
.xg-news-desc {
    margin-top: 8px;
    color: var(--xg-text);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 639px) {
    .xg-news-card { flex-direction: column; }
    .xg-news-thumb { flex: none; width: 100%; height: 170px; }
}
/* ---------- 列表条目 ---------- */
.xg-list-item {
    display: flex;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px dashed #EDF2EC;
    transition: background .2s;
}
.xg-list-item:hover { background: var(--xg-green-tint); }
.xg-list-item:last-child { border-bottom: none; }
.xg-list-item a { color: var(--xg-text); }
.xg-list-item a:hover { color: var(--xg-green); }
.xg-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--xg-green-light);
    color: var(--xg-green);
}
.xg-num.top { background: linear-gradient(135deg, #8A5A33, #B07C4F); color: #fff; }

/* ---------- 标签云 ---------- */
.xg-tag {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 8px 8px 0;
    border-radius: 999px;
    background: var(--xg-green-tint);
    border: 1px solid var(--xg-line);
    color: var(--xg-green);
    font-size: 14px;
    transition: all .25s;
}
.xg-tag:hover { background: var(--xg-green); color: #fff; border-color: var(--xg-green); }

/* ---------- 文章正文 ---------- */
.article-content { color: #444; font-size: 16px; line-height: 1.95; word-break: break-word; }
.article-content h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--xg-title);
    margin: 30px 0 14px;
    padding-left: 14px;
    border-left: 5px solid #4C9A5F;
    line-height: 1.5;
}
.article-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--xg-green);
    margin: 24px 0 10px;
}
.article-content p { margin: 12px 0; }
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 14px auto;
    display: block;
    box-shadow: 0 4px 16px rgba(20,60,38,.12);
}
.article-content a { color: var(--xg-green); text-decoration: underline; }
.article-lead {
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: var(--xg-green-tint);
    border-left: 4px solid #4C9A5F;
    color: var(--xg-green);
    font-size: 16px;
}

/* ---------- 分页 ---------- */
.xg-pagination a {
    padding: 8px 14px;
    border: 1px solid var(--xg-line);
    border-radius: 10px;
    background: #fff;
    color: var(--xg-green);
    font-size: 14px;
    transition: all .2s;
}
.xg-pagination a:hover { border-color: var(--xg-green); color: var(--xg-green); }
.xg-pagination .active a {
    background: linear-gradient(135deg, #4C9A5F, #2F7D46);
    border-color: var(--xg-green);
    color: #fff;
}
.xg-pagination .disabled a { opacity: .5; cursor: not-allowed; }

/* ---------- 面包屑 / 页面头 ---------- */
.xg-page-head {
    background:
        radial-gradient(circle at 85% 20%, rgba(143,211,160,.25) 0, transparent 45%),
        linear-gradient(120deg, #143C26 0%, #1F5C36 60%, #2F7D46 100%);
    color: #fff;
}
.xg-page-head h1 { font-size: 24px; font-weight: 800; color: #fff; }
.xg-breadcrumb a { color: rgba(255,255,255,.75); transition: color .2s; }
.xg-breadcrumb a:hover { color: #8FD3A0; }

/* ---------- Footer ---------- */
.xg-footer { color: #cfe0d4; }
.xg-footer h3 { color: #fff; }
.xg-footer a { color: #b7d0c0; }
.xg-footer a:hover { color: #fff; }
.xg-footer .fa-envelope, .xg-footer .fa-globe, .xg-footer .fa-shield-alt { color: #8FD3A0; }

/* ---------- 关于页配图 ---------- */
.xg-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(20,60,38,.18);
}
.xg-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 16px;
    pointer-events: none;
}
.xg-frame-badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: rgba(20,60,38,.85);
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    font-size: 14px;
}