/* ============================================================
   水族文化 · 百科页样式（维基式：左目录 / 中正文，正文右浮插图）
   配色遵循组内统一规范（2026-08-14 定版色板）：颜色一律走变量，禁止硬编码。
   主色深藏蓝 #1A2A5C / 辅色暗金褐 #B8860B / 背景米白 #F7F2E7
   ============================================================ */
:root {
    /* ---- 主色（深藏蓝）梯度 ---- */
    --primary-50:  #EDEEF2;
    --primary-100: #D6D9E2;
    --primary-200: #AFB4C6;
    --primary-300: #8C94AE;
    --primary-400: #5F6A8D;
    --primary-500: #1A2A5C;   /* 主色原值 */
    --primary-600: #16244E;
    --primary-700: #121D40;
    --primary-800: #0D152E;
    --primary-900: #080D1C;

    /* ---- 辅色（暗金褐）梯度 ---- */
    --secondary-50:  #F9F5EB;
    --secondary-100: #F2E9D3;
    --secondary-200: #E6D5AA;
    --secondary-300: #DCC285;
    --secondary-400: #CDAA54;
    --secondary-500: #B8860B; /* 辅色原值 */
    --secondary-600: #9C7209;
    --secondary-700: #815E08;
    --secondary-800: #5C4306;
    --secondary-900: #372803;

    /* ---- 语义化变量 ---- */
    --color-primary:          var(--primary-500);
    --color-primary-hover:    var(--primary-400);
    --color-primary-active:   var(--primary-600);
    --color-primary-soft:     var(--primary-50);
    --color-primary-border:   var(--primary-200);
    --color-on-primary:       #FFFFFF;
    --color-secondary:        var(--secondary-500);
    --color-secondary-soft:   var(--secondary-50);
    --color-on-secondary:     #FFFFFF;

    /* ---- 中性色 ---- */
    --gray-50:  #F7F8FA;
    --gray-100: #EEF0F4;
    --gray-200: #DDE1E8;
    --gray-300: #C3CAD6;
    --gray-400: #9AA5B8;
    --gray-500: #76819A;
    --gray-600: #5A647C;
    --gray-700: #475064;
    --gray-800: #363D4E;
    --gray-900: #232833;
    --color-text-primary:   var(--gray-900);
    --color-text-secondary: var(--gray-500);
    --color-border:         var(--gray-200);

    /* ---- 水族网页语义别名 ---- */
    --indigo:        var(--primary-500);
    --indigo-dark:   var(--primary-600);
    --indigo-light:  var(--primary-400);
    --gold:          var(--secondary-500);
    --gold-deep:     var(--secondary-600);
    --gold-light:    var(--secondary-200);
    --cream:         #F7F2E7;   /* 背景米白 */
    --card:          #FFFDF6;   /* 卡片白 */
    --nav-bg:        #EDE6D8;
    --tag-bg:        #FFF8E7;
    --border-soft:   #E4DCC8;
    --danger:        #A04438;
    --white:         #FFFFFF;
    --text:          var(--color-text-primary);
    --text-soft:     var(--color-text-secondary);

    /* ---- RGB 分量 ---- */
    --indigo-rgb:      26, 42, 92;
    --gold-rgb:        184, 134, 11;
    --card-rgb:        255, 253, 246;

    /* ---- 字体 ---- */
    --font-display: "华文行楷", "STXingkai", "LXGW WenKai", "华文楷体", "STKaiti", "KaiTi", "Microsoft YaHei", serif;
    --font-kai: "LXGW WenKai", "华文楷体", "STKaiti", "KaiTi", "Microsoft YaHei", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-kai);
    background: var(--cream);
    color: var(--text);
    line-height: 1.9;
}

/* 锚点滚动留白（避免贴顶） */
h2[id], h3[id], h4[id], h5[id] { scroll-margin-top: 24px; }

.page { max-width: 1400px; margin: 0 auto; padding: 0 16px 48px; }

/* ============ 顶部页眉（居中） ============ */
.wiki-header {
    padding: 34px 16px 22px;
    text-align: center;
    border-bottom: 2px solid rgba(var(--gold-rgb), 0.4);
    margin-bottom: 8px;
}
.h-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--indigo);
    text-shadow: 0 2px 0 rgba(var(--gold-rgb), 0.15);
}
.h-name-text {
    letter-spacing: 14px;
    text-indent: 14px;        /* 抵消末字后多余字距，视觉居中 */
}
.brand-ornament {
    width: 0.9em;             /* 随标题字号自适应 */
    height: 0.9em;
    flex: 0 0 auto;
    opacity: 0.9;
}
.h-intro {
    margin: 16px 0 0;
    font-size: 17.5px;     /* 稍大 */
    font-weight: 700;      /* 加粗（霞鹜文楷 bold） */
    line-height: 2;
    color: var(--gray-700);
    text-align: justify;   /* 向左对齐排版 */
    text-indent: 2em;      /* 首行缩进两格 */
}

/* ============ 两栏布局：左目录 + 右正文 ============ */
.body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

/* ============ 左侧目录 ============ */
.toc {
    position: sticky;
    top: 14px;
    align-self: start;
    background: linear-gradient(180deg, #EFE6D3 0%, #FBF6EA 100%);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px 12px;
    max-height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
}
.panel-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 6px;
    color: var(--indigo);
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(var(--gold-rgb), 0.55);
    flex: 0 0 auto;
}
.toc-list {
    overflow-y: auto;
    flex: 1 1 auto;
    padding-right: 4px;
}
.toc-list::-webkit-scrollbar { width: 6px; }
.toc-list::-webkit-scrollbar-thumb { background: var(--primary-200); border-radius: 3px; }

.toc-list ul { list-style: none; }
.toc-link {
    display: block;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.6;
    border-left: 3px solid transparent;
    margin: 1px 0;
}
.toc-link:hover { background: var(--tag-bg); color: var(--indigo); }
.toc-link.active {
    background: var(--card);
    color: var(--indigo);
    font-weight: 700;
    border-left-color: var(--gold);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* 层级缩进 */
.toc-lv1 { font-size: 15.5px; font-weight: 700; color: var(--indigo); margin-top: 3px; }
.toc-lv2 { padding-left: 16px; }
.toc-lv3 { padding-left: 28px; font-size: 13.8px; color: var(--gray-500); }
.toc-lv4 { padding-left: 40px; font-size: 13.2px; color: var(--gray-400); }

/* 子级列表（默认收起；点击父级标题即可展开/收起） */
.toc-sub { list-style: none; }
.toc-sub[hidden] { display: none; }
.toc-link { cursor: pointer; }
/* 已展开的父项：标题略作强调，便于识别 */
li.expanded > .toc-link { color: var(--indigo); }

/* ============ 中间正文 ============ */
.content {
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 30px 44px 36px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
#wikiArticle > .chapter { margin-bottom: 26px; }

/* 章标题 */
.chapter-title {
    font-family: var(--font-display);
    font-size: 31px;
    color: var(--indigo);
    letter-spacing: 4px;
    padding: 14px 16px 12px;
    margin: 8px 0 20px;
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.16), transparent 70%);
    border-left: 6px solid var(--gold);
    border-radius: 4px 10px 10px 4px;
    position: relative;
}
/* 节标题 */
.sec-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--indigo-dark);
    margin: 30px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(var(--gold-rgb), 0.5);
}
/* 三级小标题 */
.sub-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--indigo);
    margin: 20px 0 8px;
}
/* 四级小标题 */
h5.sub-title {
    font-size: 16.5px;
    color: var(--gray-700);
    border-left: 3px solid var(--primary-200);
    padding-left: 10px;
}

/* 正文段落（像写文章：每段首行缩进两格） */
#wikiArticle p {
    margin: 0 0 14px;
    text-align: justify;
    text-indent: 2em;   /* 首行缩进两格 */
    font-size: 17px;
}

/* 正文插图（右浮动，放在对应内容右侧，维基式） */
.chapter-fig {
    float: right;
    width: 300px;
    margin: 6px 0 14px 20px;
    background: var(--cream);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 6px 6px 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.chapter-fig img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}
.chapter-fig figcaption {
    font-size: 13px;
    color: var(--text-soft);
    text-align: center;
    padding: 5px 4px 3px;
    line-height: 1.5;
}

/* ============ 视频卡片（本地视频 + 封面） ============ */
.video-card {
    display: block;
    clear: both;               /* 避开正文右浮图 */
    width: min(600px, 100%);
    margin: 24px auto 10px;    /* 居中 */
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}
.video-card video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}
.video-meta {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--border-soft);
}
.video-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--indigo);
    line-height: 1.5;
}
.video-src {
    display: block;
    font-size: 12.5px;
    color: var(--text-soft);
    margin-top: 4px;
    line-height: 1.5;
}

/* 页脚来源说明 */
.art-footer {
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-soft);
    font-size: 13.5px;
    color: var(--text-soft);
    text-align: center;
}

/* ============ 响应式 ============ */
/* 中屏：目录略窄 */
@media (max-width: 1100px) {
    .body { grid-template-columns: 220px minmax(0, 1fr); }
    .content { padding: 24px 28px 32px; }
    .chapter-fig { width: 260px; }
}
/* 窄屏：单栏，目录置顶收起 */
@media (max-width: 820px) {
    .body { grid-template-columns: 1fr; }
    .toc {
        position: static;
        max-height: none;
    }
    .toc-list { max-height: 320px; }
    .content { padding: 22px 18px 28px; }
    .chapter-title { font-size: 26px; }
    .h-name { font-size: 32px; }
    .chapter-fig { float: none; width: 100%; margin: 6px 0 14px; }
}