/* 基本样式 */
/* 清除默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;

}
a {
    text-decoration: none;
    color: #333;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #F4FFCC;
}

/* ———————————————————————————————————————————————————————————————————————————————————————————— */

header {
    position: relative;
    background: url(https://static.igem.wiki/teams/5570/homepage/background/background-clear.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 20px;
    text-align: center;
    font-family: 'Gill Sans Ultra Bold', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* 可根据需要调整容器高度 */
    overflow: hidden;
}

/* 头部底部渐变条（固定于 header 容器底部，高度 100px） */
header .header-bottom-gradient {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, #BCE69A 0%, #F4FFCC 100%);
    pointer-events: none; /* 不阻挡交互 */
}

/* 头部标题区（仅作用于 header 内的 .header-content 范围） */
header .header-content {
    /* 主题变量，方便跨页微调，仅在该容器内生效 */
    --oc-hero-title-color: #142117;
    --oc-hero-title-weight: 900;
    --oc-hero-title-letter-spacing: 0.02em;
    --oc-hero-title-shadow: 0 10px 12px rgba(0, 0, 0, 0.2);
    --oc-hero-accent-height: 8px;
    --oc-hero-accent-radius: 4px;
    --oc-hero-accent-from: #6fd35b;
    --oc-hero-accent-to: #2fb6a1;

    --oc-hero-subtitle-color: #003602;
    --oc-hero-subtitle-weight: 500;
    --oc-hero-subtitle-letter-spacing: 0.01em;
    --oc-hero-subtitle-opacity: 0.6; /* 副标题透明度（0~1），可按需调整 */

    width: min(1100px, 92vw);
    margin: 96px auto 40px; /* 顶部为导航留白 */
    padding: 16px 8px 0;
    text-align: center;
}

header .header-content .header-title {
    position: relative;
    margin: 0;
    color: var(--oc-hero-title-color);
    font-weight: var(--oc-hero-title-weight);
    font-size: clamp(32px, 4.2vw + 6px, 64px);
    line-height: 1.12;
    letter-spacing: var(--oc-hero-title-letter-spacing);
    text-shadow: var(--oc-hero-title-shadow);
}

header .header-content .header-title::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -14px;
    width: min(42vw, 240px);
    height: var(--oc-hero-accent-height);
    border-radius: var(--oc-hero-accent-radius);
    background: linear-gradient(90deg, var(--oc-hero-accent-from), var(--oc-hero-accent-to));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

header .header-content .header-subtitle {
    margin: 22px auto 0; /* 与主标题的间距 */
    max-width: 900px;
    color: var(--oc-hero-subtitle-color);
    font-weight: var(--oc-hero-subtitle-weight);
    font-size: clamp(16px, 1.2vw + 8px, 22px);
    line-height: 1.7;
    letter-spacing: var(--oc-hero-subtitle-letter-spacing);
    opacity: var(--oc-hero-subtitle-opacity);
}

@media (max-width: 480px) {
    header .header-content {
        margin: 82px auto 32px;
        padding-top: 12px;
    }
    header .header-content .header-title::after {
        bottom: -10px;
        width: 56vw; /* 移动端装饰线更短 */
    }
    header .header-content .header-subtitle {
        margin-top: 16px;
    }
}

/* 正文区域采用 flex 布局 */
.main-content {
    display: flex;
    padding-bottom: 20px;
    background: #F4FFCC;
    margin: bottom 50px;
}

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

/* 固定宽度正文容器，同时预留侧边栏空间 */
.main-content-area {
    width: 100%;
    margin-left: 50px;
    margin-right: 50px;
    transition: margin-left 0.5s;
    background: #F4FFCC;
}

/* 正文区域内部 */
.content {
    padding: 20px;
    background: #F4FFCC;
}

/* 各部分内容（修改后适用于直接嵌套在 .content 内的 section 元素） */
.content > section {
    margin-bottom: 100px;
    min-height: 500px;
    background-color: rgba(255, 243, 205, 0.132);           
    padding: 70px;                      /* 增加内边距，内容更宽松 */
    scroll-margin-top: 100px;            /* 顶部空隙 */
    border: none;                       /* 去除原有边框 */
    border-radius: 8px;                 /* 添加圆角效果 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);  /* 添加柔和阴影 */
    backdrop-filter: blur(11px) brightness(120%);  /* 添加模糊效果 */
}

.content > section > p {
    scroll-margin-top: 100px; /* 顶部空隙 */
}

/* —————————————————————————————————————————————————————————————————————————————————————————————————————————————————— */

/* 标题样式（仅限定在正文容器内，避免影响其他模块） */
.main-content .content {
    /* 本页专用的标题主题变量，仅在 .main-content .content 作用域内生效 */
    --oc-title-color: #1d2b1f;                 /* 标题主色 */
    --oc-title-weight: 800;                    /* 标题字重 */
    --oc-title-letter-spacing: 0.02em;         /* 字距 */
    --oc-title-underline-height: 6px;          /* 下划线高度 */
    --oc-title-underline-radius: 3px;          /* 下划线圆角 */
    --oc-title-underline-from: #6fd35b;        /* 渐变起始色 */
    --oc-title-underline-to: #2fb6a1;          /* 渐变终止色 */
    --oc-title-underline-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

    /* 次级标题主题变量（作用域同上，仅在正文容器内生效） */
    --oc-subtitle-color: #263228;              /* 次级标题颜色（稍深） */
    --oc-subtitle-weight: 700;                 /* 次级标题字重 */
    --oc-subtitle-letter-spacing: 0.015em;     /* 次级标题字距 */
    --oc-subtitle-accent-width: 6px;           /* 左侧装饰条宽度 */
    --oc-subtitle-accent-radius: 3px;          /* 装饰条圆角 */
    --oc-subtitle-accent-from: var(--oc-title-underline-from); /* 继承主色系 */
    --oc-subtitle-accent-to: var(--oc-title-underline-to);
    --oc-subtitle-accent-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    /* 三级标题主题变量（作用域同上） */
    --oc-tertiary-title-color: #3a4a3c;         /* 三级标题颜色 */
    --oc-tertiary-title-weight: 650;            /* 三级标题字重 */
    --oc-tertiary-title-letter-spacing: 0.01em; /* 三级标题字距 */
}

.main-content .content .section-title {
    position: relative;
    color: var(--oc-title-color);
    font-weight: var(--oc-title-weight);
    /* 自适应字号：在不同屏宽保持舒适的对比度 */
    font-size: clamp(22px, 2.2vw + 6px, 36px);
    line-height: 1.25;
    letter-spacing: var(--oc-title-letter-spacing);
    margin: 0 0 32px; /* 与下方正文拉开距离 */
}

.main-content .content .section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px; /* 下划线与文字的间距 */
    height: var(--oc-title-underline-height);
    width: 150px; /* 下划线长度，可按需调整 */
    background: linear-gradient(90deg, var(--oc-title-underline-from), var(--oc-title-underline-to));
    border-radius: var(--oc-title-underline-radius);
    box-shadow: var(--oc-title-underline-shadow);
}

/* 小屏优化：缩小装饰线并调节间距 */
@media (max-width: 480px) {
    .main-content .content .section-title {
        margin-bottom: 28px;
    }
    .main-content .content .section-title::after {
        bottom: -10px;
        width: 64px;
    }
}

/* 次级标题样式（作用域：正文容器） */
.main-content .content .section-subtitle {
    position: relative;
    color: var(--oc-subtitle-color);
    font-weight: var(--oc-subtitle-weight);
    font-size: clamp(18px, 1.2vw + 6px, 24px);
    line-height: 1.35;
    letter-spacing: var(--oc-subtitle-letter-spacing);
    margin: 24px 0 12px;              /* 与上、下内容的合理间距 */
    padding-left: calc(var(--oc-subtitle-accent-width) + 10px); /* 给左侧装饰条留空间 */
}

.main-content .content .section-subtitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--oc-subtitle-accent-width);
    height: 0.9em;                     /* 装饰条高度与文字相协调 */
    border-radius: var(--oc-subtitle-accent-radius);
    background: linear-gradient(180deg, var(--oc-subtitle-accent-from), var(--oc-subtitle-accent-to));
    box-shadow: var(--oc-subtitle-accent-shadow);
}

/* Consultation list 专用：紫色渐变（仅作用于 consultation-list 内的次级标题装饰条） */
.main-content .content .consultation-list {
    --oc-consultation-accent-from: #7c3aed; /* 紫色起始 */
    --oc-consultation-accent-to: #c4b5fd;   /* 紫色终止（更浅） */
}

/* 覆盖作用域内的 .section-subtitle::before 为紫色渐变（比通用选择器更具体，优先级更高） */
.main-content .content .consultation-list .section-subtitle::before {
    background: linear-gradient(180deg, var(--oc-consultation-accent-from), var(--oc-consultation-accent-to));
}

@media (max-width: 480px) {
    .main-content .content .section-subtitle {
        margin: 18px 0 10px;
        padding-left: calc(var(--oc-subtitle-accent-width) + 8px);
    }
}

/* 三级标题样式（作用域：正文容器） */
.main-content .content .section-tertiary-title {
    color: var(--oc-tertiary-title-color);
    font-weight: var(--oc-tertiary-title-weight);
    font-size: clamp(16px, 1.1vw + 4px, 20px); /* 比次级标题更小 */
    line-height: 1.4;
    letter-spacing: var(--oc-tertiary-title-letter-spacing);
    margin: 20px 0 8px; /* 与上下文的间距 */
}

/* 段落样式（限定在正文容器内） */
.main-content .content {
    --oc-paragraph-font-size: 20px;         /* 段落字号 */
    --oc-paragraph-line-height: 1.75;        /* 充分的行距，提升可读性 */
    --oc-paragraph-color: #2b2f2b;          /* 段落文字颜色 */
    --oc-paragraph-margin-y: 14px;          /* 段前/段后间距 */
}

.main-content .content p {
    font-size: var(--oc-paragraph-font-size);
    line-height: var(--oc-paragraph-line-height);
    color: var(--oc-paragraph-color);
    margin: var(--oc-paragraph-margin-y) 0;
    text-align: left;
    word-break: break-word; /* 避免长链接等溢出 */
}

/* 标题后的首段紧贴标题（标题自身已提供下方留白） */
.main-content .content > section > p:first-of-type {
    margin-top: 0;
}

@media (max-width: 480px) {
    .main-content .content {
        --oc-paragraph-font-size: 16.5px;
        --oc-paragraph-line-height: 1.85;
        --oc-paragraph-margin-y: 12px;
    }
}


/* 图片组件（作用域限制在正文区域，支持单张图片独立控制尺寸） */
.main-content .content {
    /* 组件主题变量（可在单个元素内通过 style 覆盖，例如 style="--oc-figure-width: 520px;"） */
    --oc-figure-width: 640px;                 /* 默认图片容器宽度（不会超过容器宽度） */
    --oc-figure-radius: 10px;                 /* 图片圆角 */
    --oc-figure-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* 图片阴影 */
    --oc-figure-gap: 10px;                    /* 图片与说明文字的间距 */
    --oc-caption-color: #4b4f4b;              /* 说明文字颜色 */
    --oc-caption-size: 17px;                  /* 说明文字字号 */
    --oc-caption-weight: 500;                 /* 说明文字字重 */
    --oc-caption-letter-spacing: 0.01em;      /* 说明文字字距 */

    /* 组合式图片容器（画廊）主题变量，仅在正文容器内生效 */
    --oc-gallery-columns: 3;                  /* 默认列数，可在容器或 section 覆盖 */
    --oc-gallery-gap: 16px;                   /* 项之间的间距 */
    --oc-gallery-radius: 10px;                /* 图片圆角 */
    --oc-gallery-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); /* 图片阴影 */
    --oc-gallery-caption-color: #4b4f4b;      /* caption 颜色（与单图一致） */
    --oc-gallery-caption-size: 15px;          /* caption 字号 */
    --oc-gallery-caption-weight: 500;         /* caption 字重 */
    --oc-gallery-caption-letter-spacing: 0.01em; /* caption 字距 */
    --oc-gallery-min-width: 220px;            /* auto-fit 模式下的最小宽度 */
}

/* 组件容器：水平居中，垂直方向按文流排列（上图下文） */
.main-content .content .oc-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 24px auto; /* 在 section 内水平居中 */
    width: min(100%, var(--oc-figure-width));
}

/* 图片本体：等比缩放、圆角与阴影 */
.main-content .content .oc-figure__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--oc-figure-radius);
    box-shadow: var(--oc-figure-shadow);
    object-fit: cover; /* 若手动设置固定高度时可保持填充 */
}

/* 说明文字 */
.main-content .content .oc-figure__caption {
    margin-top: var(--oc-figure-gap);
    color: var(--oc-caption-color);
    font-size: var(--oc-caption-size);
    font-weight: var(--oc-caption-weight);
    letter-spacing: var(--oc-caption-letter-spacing);
    line-height: 1.5;
    text-align: center;
    max-width: 90%;
}

/* 小屏优化：默认图宽适当收窄，间距略微减小 */
@media (max-width: 480px) {
    .main-content .content {
        --oc-figure-width: 92vw;
        --oc-figure-gap: 8px;
        --oc-caption-size: 13px;
    }
}

/* 组合式图片容器（多图）——受控于正文作用域的样式 */
.main-content .content .oc-gallery {
    display: grid;
    grid-template-columns: repeat(var(--oc-gallery-columns), 1fr);
    gap: var(--oc-gallery-gap);
    align-items: start;
    margin: 24px 0; /* 和周围内容留白 */
}

/* 可选：自适应列数版本（根据最小宽度自动换行），在容器上添加 .oc-gallery--auto-fit 即可 */
.main-content .content .oc-gallery.oc-gallery--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(var(--oc-gallery-min-width), 1fr));
}

/* 单元项（建议使用 <figure class="oc-gallery__item">） */
.main-content .content .oc-gallery__item {
    display: flex;
    flex-direction: column;
    margin: 0; /* figure 默认 margin 清零，交给 grid gap 控制 */
}

.main-content .content .oc-gallery__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--oc-gallery-radius);
    box-shadow: var(--oc-gallery-shadow);
    object-fit: cover; /* 若设置固定高度或比例时保持填充 */
    /* 如需指定比例，可在单个 item 上写 style="--oc-gallery-item-aspect: 4/3;" */
    aspect-ratio: var(--oc-gallery-item-aspect, auto);
}

.main-content .content .oc-gallery__caption {
    margin-top: 8px;
    color: var(--oc-gallery-caption-color);
    font-size: var(--oc-gallery-caption-size);
    font-weight: var(--oc-gallery-caption-weight);
    letter-spacing: var(--oc-gallery-caption-letter-spacing);
    line-height: 1.5;
    text-align: center;
}

/* 列/行跨度工具类：按需为某个 item 添加这些类实现不规则编排 */
.main-content .content .oc-gallery__item--col-span-2 { grid-column: span 2; }
.main-content .content .oc-gallery__item--col-span-3 { grid-column: span 3; }
.main-content .content .oc-gallery__item--row-span-2 { grid-row: span 2; }
.main-content .content .oc-gallery__item--row-span-3 { grid-row: span 3; }

/* 响应式列数调整：在小屏上自动减少列数 */
@media (max-width: 960px) {
    .main-content .content .oc-gallery {
        --oc-gallery-columns: 2;
    }
}

@media (max-width: 480px) {
    .main-content .content .oc-gallery {
        --oc-gallery-columns: 1;
        --oc-gallery-gap: 12px;
    }
}


/* ================= MathJax Equation Styling =================
   Applied to elements with class "equation" for consistent styling */
.equation { text-align:center; font-size:1.15rem; margin: 1.2em 0; }
.equation span.eq-num { display:inline-block; margin-left:0.75em; font-size:0.85rem; color:#555; }