/* ============================================================
   恒德环保 · 富文本组件库（知识库文章 / 公告正文）
   ------------------------------------------------------------
   设计约束：
     · 优先使用站点 CSS 变量（见 assets/css/style.css 的 :root），
       但每个 var() 都带同值回退 —— 站点变量缺失时（预览页/独立页）仍能正确渲染
     · 类名统一 rc- 前缀，绝不改写页面原生元素样式
     · 组件由后台「组件面板」插入；本文件只在文章详情页按需加载
     · 窄屏（≤768px）自动降级：多列 → 单列，表格 → 横向滚动
     · 不依赖任何外部 CDN
   ============================================================ */

/* ==================== 0. 正文里"裸表格"的兜底 ====================
   从网页/Word 粘贴进来的表格没有 rc- 类，默认是浏览器最丑的样式。
   这里只作用于正文的直接子表格，不影响 rc-table 组件（它包在 .rc-table-wrap 里）。 */
.article-content > table,
.announce-detail-body > table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 0.92rem;
}
.article-content > table th,
.announce-detail-body > table th {
    padding: 10px 12px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    text-align: left;
    color: var(--text, #1a1a2e);
    font-weight: 600;
}
.article-content > table td,
.announce-detail-body > table td {
    padding: 10px 12px;
    border: 1px solid var(--border-light, #f1f5f9);
    color: var(--text-secondary, #4a5568);
    vertical-align: top;
}

/* ==================== 1. 可折叠块（原生 details，无 JS 也能用） ==================== */
.rc-fold {
    margin: 18px 0;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    background: #fff;
    overflow: hidden;
}
.rc-fold > summary {
    position: relative;
    padding: 14px 46px 14px 18px;
    font-weight: 600;
    color: var(--text, #1a1a2e);
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    list-style: none;
    transition: var(--transition, all 0.35s cubic-bezier(0.4, 0, 0.2, 1));
}
.rc-fold > summary::-webkit-details-marker { display: none; }
.rc-fold > summary::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--primary, #1a8a4a);
    border-bottom: 2px solid var(--primary, #1a8a4a);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
}
.rc-fold[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.rc-fold > summary:hover { background: var(--primary-light, #e6f5ec); color: var(--primary-dark, #0f5c30); }
.rc-fold > summary:focus-visible { outline: 2px solid var(--primary, #1a8a4a); outline-offset: -2px; }
.rc-fold[open] > summary {
    background: var(--primary-light, #e6f5ec);
    color: var(--primary-dark, #0f5c30);
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.rc-fold-body { padding: 16px 18px; }
.rc-fold-body > *:first-child { margin-top: 0; }
.rc-fold-body > *:last-child { margin-bottom: 0; }

/* ==================== 2. 提示框 ==================== */
.rc-callout {
    --rc-accent: var(--primary, #1a8a4a);
    --rc-bg: var(--primary-light, #e6f5ec);
    position: relative;
    margin: 18px 0;
    padding: 14px 18px 14px 52px;
    border-radius: var(--radius, 12px);
    border-left: 4px solid var(--rc-accent);
    background: var(--rc-bg);
    color: var(--text-secondary, #4a5568);
}
.rc-callout::before {
    content: '💡';
    position: absolute;
    left: 16px;
    top: 12px;
    font-size: 1.1rem;
    line-height: 1.6;
}
.rc-callout-title {
    font-weight: 600;
    color: var(--rc-accent);
    margin-bottom: 6px;
}
.rc-callout > *:last-child { margin-bottom: 0; }
.rc-callout.is-ok     { --rc-accent: #137a41; --rc-bg: #eefaf1; }
.rc-callout.is-ok::before     { content: '✅'; }
.rc-callout.is-warn   { --rc-accent: #b45309; --rc-bg: #fffbeb; }
.rc-callout.is-warn::before   { content: '⚠️'; }
.rc-callout.is-note   { --rc-accent: #2563eb; --rc-bg: #eff6ff; }
.rc-callout.is-note::before   { content: '📝'; }
.rc-callout.is-danger { --rc-accent: #b91c1c; --rc-bg: #fef2f2; }
.rc-callout.is-danger::before { content: '⛔'; }

/* ==================== 3. 多列布局 ==================== */
.rc-cols {
    display: grid;
    gap: 20px;
    align-items: start;
    margin: 18px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-col { min-width: 0; }
.rc-col > *:first-child { margin-top: 0; }
.rc-col > *:last-child { margin-bottom: 0; }

/* ==================== 4. 分割线 ==================== */
hr.rc-divider {
    border: 0;
    height: 1px;
    margin: 28px 0;
    background: linear-gradient(90deg, transparent, var(--border, #e2e8f0) 12%, var(--border, #e2e8f0) 88%, transparent);
}
.rc-divider-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0;
    color: var(--text-muted, #94a3b8);
    font-size: 0.9rem;
    text-align: center;
}
.rc-divider-label::before,
.rc-divider-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border, #e2e8f0);
}

/* ==================== 5. 标签徽章 ==================== */
.rc-badge {
    display: inline-block;
    margin: 0 4px 0 0;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(26, 138, 74, 0.2);
    background: var(--primary-light, #e6f5ec);
    color: var(--primary-dark, #0f5c30);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.75;
    vertical-align: middle;
    white-space: nowrap;
}
.rc-badge.is-orange { background: var(--accent-light, #fff7ed); border-color: rgba(249, 115, 22, 0.25); color: #b45309; }
.rc-badge.is-blue   { background: #eff6ff; border-color: rgba(37, 99, 235, 0.22); color: #1d4ed8; }
.rc-badge.is-red    { background: #fef2f2; border-color: rgba(185, 28, 28, 0.22); color: #b91c1c; }
.rc-badge.is-gray   { background: var(--bg-secondary, #f8fafc); border-color: var(--border, #e2e8f0); color: var(--text-secondary, #4a5568); }
.rc-badge.is-solid  { background: var(--primary, #1a8a4a); border-color: var(--primary, #1a8a4a); color: #fff; }
.rc-badge.is-lg     { font-size: 0.88rem; padding: 4px 14px; }

/* ==================== 6. 引用块 ==================== */
blockquote.rc-quote {
    position: relative;
    margin: 20px 0;
    padding: 16px 20px 16px 24px;
    border-left: 4px solid var(--primary, #1a8a4a);
    border-radius: 0 var(--radius, 12px) var(--radius, 12px) 0;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #4a5568);
}
blockquote.rc-quote::before {
    content: '\201C';
    position: absolute;
    left: 6px;
    top: -10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--primary, #1a8a4a);
    opacity: 0.16;
}
blockquote.rc-quote > *:last-child { margin-bottom: 0; }
blockquote.rc-quote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}
blockquote.rc-quote cite::before { content: '—— '; }

/* ==================== 7. 代码块（含语法高亮配色） ==================== */
pre.rc-code {
    position: relative;
    margin: 20px 0;
    padding: 42px 18px 18px;
    border-radius: var(--radius, 12px);
    background: #0f1b2a;
    color: #e6edf3;
    font-size: 0.9rem;
    line-height: 1.7;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
pre.rc-code::before {
    content: attr(data-lang);
    position: absolute;
    left: 16px;
    top: 13px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b9bb4;
}
pre.rc-code:not([data-lang])::before { content: '代码'; }
pre.rc-code code {
    display: block;
    background: none;
    padding: 0;
    border: 0;
    color: inherit;
    font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-size: inherit;
    white-space: pre;
    tab-size: 4;
}
.rc-code-copy {
    position: absolute;
    right: 12px;
    top: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #c9d4e3;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition, all 0.35s cubic-bezier(0.4, 0, 0.2, 1));
}
.rc-code-copy:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.rc-code-copy.is-done { color: #4ade80; border-color: rgba(74, 222, 128, 0.5); }

/* —— highlight.js 主题（GitHub Dark 风格，压成站点色调） —— */
.rc-code .hljs-comment,
.rc-code .hljs-quote          { color: #8b949e; font-style: italic; }
.rc-code .hljs-keyword,
.rc-code .hljs-selector-tag,
.rc-code .hljs-doctag,
.rc-code .hljs-formula        { color: #ff7b72; }
.rc-code .hljs-string,
.rc-code .hljs-meta .hljs-string,
.rc-code .hljs-regexp         { color: #a5d6ff; }
.rc-code .hljs-number,
.rc-code .hljs-literal,
.rc-code .hljs-variable,
.rc-code .hljs-template-variable { color: #79c0ff; }
.rc-code .hljs-title,
.rc-code .hljs-title.function_,
.rc-code .hljs-section        { color: #d2a8ff; }
.rc-code .hljs-attr,
.rc-code .hljs-attribute,
.rc-code .hljs-property,
.rc-code .hljs-selector-attr,
.rc-code .hljs-selector-class,
.rc-code .hljs-selector-id    { color: #ffa657; }
.rc-code .hljs-built_in,
.rc-code .hljs-type,
.rc-code .hljs-class .hljs-title,
.rc-code .hljs-symbol,
.rc-code .hljs-bullet         { color: #7ee787; }
.rc-code .hljs-name,
.rc-code .hljs-tag            { color: #7ee787; }
.rc-code .hljs-meta           { color: #8b949e; }
.rc-code .hljs-params         { color: #e6edf3; }
.rc-code .hljs-addition       { color: #aff5b4; background: rgba(46, 160, 67, 0.15); }
.rc-code .hljs-deletion       { color: #ffdcd7; background: rgba(248, 81, 73, 0.15); }
.rc-code .hljs-emphasis       { font-style: italic; }
.rc-code .hljs-strong         { font-weight: 700; }

/* ==================== 8. 单图（带说明） ==================== */
figure.rc-figure { margin: 20px 0; }
figure.rc-figure img {
    display: block;
    width: 100%;
    border: 1px solid var(--border-light, #f1f5f9);
    border-radius: var(--radius, 12px);
}
figure.rc-figure figcaption {
    margin-top: 8px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}

/* ==================== 9. 图片画廊 + 灯箱 ==================== */
.rc-gallery {
    display: grid;
    gap: 12px;
    margin: 20px 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rc-gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-gallery-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-gallery figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border-light, #f1f5f9);
    border-radius: var(--radius, 12px);
    background: var(--bg-secondary, #f8fafc);
    cursor: zoom-in;
}
.rc-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.rc-gallery figure:hover img { transform: scale(1.05); }
.rc-gallery figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 10px 7px;
    font-size: 0.78rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}
.rc-gallery figcaption:empty { display: none; }

/* 灯箱 */
.rc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 14, 24, 0.93);
}
.rc-lightbox.is-open { display: flex; }
.rc-lightbox img {
    max-width: 92vw;
    max-height: 82vh;
    border-radius: 8px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.rc-lightbox-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    text-align: center;
    color: #e2e8f0;
    font-size: 0.9rem;
}
.rc-lightbox-count {
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
}
.rc-lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition, all 0.35s cubic-bezier(0.4, 0, 0.2, 1));
}
.rc-lightbox-btn:hover { background: rgba(255, 255, 255, 0.22); }
.rc-lightbox-prev  { left: 20px; }
.rc-lightbox-next  { right: 20px; }
.rc-lightbox-close { top: 20px; right: 20px; transform: none; }

/* ==================== 10. 本地视频 / 音频 ==================== */
.rc-video-wrap { margin: 20px 0; }
video.rc-video,
.rc-video-wrap video {
    display: block;
    width: 100%;
    max-height: 72vh;
    border-radius: var(--radius, 12px);
    background: #000;
}
.rc-audio-wrap {
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    background: var(--bg-secondary, #f8fafc);
}
.rc-audio-title {
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary, #4a5568);
}
audio.rc-audio,
.rc-audio-wrap audio { display: block; width: 100%; }

/* ==================== 11. 高级表格（筛选 / 排序 / 固定表头） ==================== */
.rc-table-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 20px 0 8px;
}
.rc-table-tools input[data-rc-filter] {
    flex: 1 1 200px;
    max-width: 300px;
    padding: 8px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    background: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text, #1a1a2e);
}
.rc-table-tools input[data-rc-filter]:focus {
    outline: none;
    border-color: var(--primary, #1a8a4a);
    box-shadow: 0 0 0 3px var(--primary-light, #e6f5ec);
}
.rc-table-tools .rc-table-hint { font-size: 0.8rem; color: var(--text-muted, #94a3b8); }

.rc-table-wrap {
    margin: 0 0 20px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    background: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.rc-table-wrap.is-scroll { max-height: 68vh; }
.rc-table-wrap.is-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
table.rc-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.92rem;
}
table.rc-table thead th {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
    color: var(--text, #1a1a2e);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
table.rc-table thead th[data-sortable] {
    position: relative;
    padding-right: 28px;
    cursor: pointer;
    user-select: none;
}
table.rc-table thead th[data-sortable]::after {
    content: '↕';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #94a3b8);
    font-size: 0.78rem;
}
table.rc-table thead th.is-sort-asc::after  { content: '↑'; color: var(--primary, #1a8a4a); }
table.rc-table thead th.is-sort-desc::after { content: '↓'; color: var(--primary, #1a8a4a); }
table.rc-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light, #f1f5f9);
    color: var(--text-secondary, #4a5568);
    vertical-align: top;
}
table.rc-table tbody tr:last-child td { border-bottom: 0; }
table.rc-table tbody tr:hover td { background: var(--bg-tertiary, #f0fdf4); }
table.rc-table tbody tr td.is-num { font-variant-numeric: tabular-nums; }
table.rc-table.is-striped tbody tr:nth-child(even) td { background: var(--bg-secondary, #f8fafc); }
.rc-table-empty {
    display: none;
    padding: 18px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-size: 0.9rem;
    border: 1px dashed var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    margin-bottom: 20px;
}
.rc-table-empty.is-show { display: block; }

/* ==================== 12. 信息卡片 ==================== */
.rc-cards {
    display: grid;
    gap: 16px;
    margin: 20px 0;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.rc-card {
    padding: 18px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    background: #fff;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04));
    transition: var(--transition, all 0.35s cubic-bezier(0.4, 0, 0.2, 1));
}
.rc-card:hover {
    transform: translateY(-2px);
    border-color: rgba(26, 138, 74, 0.28);
    box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04));
}
.rc-card-icon { margin-bottom: 10px; font-size: 1.6rem; line-height: 1; }
.rc-card-title {
    margin-bottom: 8px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text, #1a1a2e);
}
.rc-card p { margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--text-secondary, #4a5568); }
.rc-card ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.9rem; color: var(--text-secondary, #4a5568); }
.rc-card > .rc-badge { margin-top: 12px; }
.rc-card.is-flat { box-shadow: none; background: var(--bg-secondary, #f8fafc); }
.rc-card.is-flat:hover { transform: none; box-shadow: none; }

/* ==================== 13. 步骤卡片 ==================== */
ol.rc-steps {
    margin: 20px 0;
    padding: 0;
    list-style: none;
    counter-reset: rc-step;
}
ol.rc-steps > li {
    position: relative;
    padding: 0 0 24px 46px;
    counter-increment: rc-step;
}
ol.rc-steps > li::before {
    content: counter(rc-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary, #1a8a4a);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: var(--shadow-green, 0 8px 30px rgba(26, 138, 74, 0.15));
}
ol.rc-steps > li::after {
    content: '';
    position: absolute;
    left: 14px;
    top: 36px;
    bottom: 8px;
    width: 2px;
    background: var(--border, #e2e8f0);
}
ol.rc-steps > li:last-child { padding-bottom: 0; }
ol.rc-steps > li:last-child::after { display: none; }
ol.rc-steps > li > :first-child {
    margin-top: 3px;
    font-weight: 600;
    color: var(--text, #1a1a2e);
    font-size: 1rem;
}
ol.rc-steps > li p {
    margin: 6px 0 0;
    font-size: 0.93rem;
    color: var(--text-secondary, #4a5568);
}
ol.rc-steps > li > *:last-child { margin-bottom: 0; }

/* ==================== 14. 窄屏降级 ==================== */
@media (max-width: 768px) {
    .rc-cols,
    .rc-cols-2,
    .rc-cols-3,
    .rc-cols-4 { grid-template-columns: 1fr; gap: 14px; }

    .rc-gallery,
    .rc-gallery-3,
    .rc-gallery-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    .rc-callout { padding: 12px 14px 12px 44px; }
    .rc-callout::before { left: 12px; font-size: 1rem; }

    pre.rc-code { font-size: 0.84rem; padding: 38px 14px 14px; }
    .rc-cards { grid-template-columns: 1fr; }
    .rc-lightbox-btn { width: 40px; height: 40px; font-size: 1.1rem; }
    .rc-table-wrap.is-scroll { max-height: 60vh; }
}

/* ==================== 15. 打印 ==================== */
@media print {
    .rc-fold > summary::after,
    .rc-code-copy,
    .rc-table-tools,
    .rc-lightbox { display: none !important; }
    .rc-fold { border-color: #ccc; }
    .rc-fold[open] > summary { background: #f2f2f2; }
    pre.rc-code { background: #f6f8fa; color: #111; }
    .rc-code .hljs-comment,
    .rc-code .hljs-keyword,
    .rc-code .hljs-string,
    .rc-code .hljs-number,
    .rc-code .hljs-title,
    .rc-code .hljs-attr,
    .rc-code .hljs-built_in,
    .rc-code .hljs-name { color: #111; }
}