/* =========================================================
   ERON VISUAL STUDIO — 自定义样式
   基于 docsify v5 核心主题的补充样式
   ========================================================= */

/* ===== Mermaid 图表 ===== */
.mermaid {
    background: #2d2d2d;
    border-radius: 6px;
    padding: 16px;
    margin: 8px 0;
    text-align: center;
}
.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* ===== 分页插件 ===== */
.docsify-pagination-container {
    border-top: 1px solid #444;
}

/* ===== 主题色（docsify v5 官方主题属性，改这里即可换主色） ===== */
:root {
    --theme-color: #8C2633; /* 绛红（宫墙红） */
}

/* ===== 封面页：自适应明暗的绛红渐变 ===== */
section.cover {
    background:
        radial-gradient(ellipse at 15% 20%, color-mix(in srgb, var(--theme-color) 26%, transparent), transparent 58%),
        radial-gradient(ellipse at 85% 80%, color-mix(in srgb, var(--theme-color) 18%, transparent), transparent 55%),
        linear-gradient(160deg, var(--color-bg), color-mix(in srgb, var(--theme-color) 14%, var(--color-bg))) !important;
}
/* 封面标题：主题色渐变文字 */
section.cover .cover-main h1 {
    background: linear-gradient(120deg, var(--theme-color), color-mix(in srgb, var(--theme-color) 40%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* ===== 封面按钮：统一样式，保证文字清晰可读 ===== */
section.cover .cover-main > p:last-child a {
    display: inline-block;
    margin: 0.3em 0.35em;
    padding: 0.55em 1.35em;
    border-radius: 6px;
    border: 1.5px solid var(--theme-color);
    font-weight: 600;
    transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
/* 主按钮（开始阅读）：实心主题色 + 白字 */
section.cover .cover-main > p:last-child a:first-child {
    background: var(--theme-color);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-color) 45%, transparent);
}
section.cover .cover-main > p:last-child a:first-child:hover {
    background: color-mix(in srgb, var(--theme-color) 80%, #000);
    transform: translateY(-1px);
}
/* 次按钮（GITHUB / CODEBERG）：描边 */
section.cover .cover-main > p:last-child a:not(:first-child) {
    background: color-mix(in srgb, var(--theme-color) 12%, transparent);
    color: var(--theme-color);
}
section.cover .cover-main > p:last-child a:not(:first-child):hover {
    background: var(--theme-color);
    color: #fff;
}
/* 暗色模式下描边按钮文字提亮，避免深色文字看不清 */
html:not(.light-theme) section.cover .cover-main > p:last-child a:not(:first-child) {
    color: color-mix(in srgb, var(--theme-color) 55%, #fff);
}

/* ===== 亮色主题覆盖 ===== */
html.light-theme .mermaid {
    background: #f5f5f5;
}
html.light-theme .docsify-pagination-container {
    border-top: 1px solid #ddd;
}

/* ===== 主题切换按钮 ===== */
#theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    background: #444;
    color: #f0c040;
}
#theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
html.light-theme #theme-toggle {
    background: #fff;
    color: #555;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* ===== 代码块折叠 / 展开（点击头部折叠） ===== */
.code-block-wrapper {
    position: relative;
    margin: 1em 0;
}
/* 可点击的代码块头部 */
.code-block-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 10px;
    background: #1e1e1e;
    border: 1px solid #3a3a3a;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, border-color 0.2s;
}
.code-block-toolbar:hover {
    background: color-mix(in srgb, var(--theme-color) 16%, #1e1e1e);
    border-color: color-mix(in srgb, var(--theme-color) 50%, #3a3a3a);
}
.code-block-toolbar:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: -1px;
}
/* 折叠指示图标（明显的绛红箭头） */
.code-collapse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    font-size: 18px;
    line-height: 1;
    color: var(--theme-color);
    border: 1px solid color-mix(in srgb, var(--theme-color) 40%, transparent);
    border-radius: 5px;
    transition: background 0.2s, color 0.2s;
}
.code-block-toolbar:hover .code-collapse-icon {
    background: color-mix(in srgb, var(--theme-color) 25%, transparent);
}
/* 折叠提示（默认隐藏，折叠时显示并占满中间空间） */
.code-collapse-hint {
    flex: 1;
    text-align: center;
    display: none;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: color-mix(in srgb, var(--theme-color) 75%, #ddd);
}
/* 代码本体 */
.code-block-wrapper pre {
    margin: 0 !important;
    border-radius: 0 0 6px 6px !important;
}
.code-block-wrapper pre.collapsed {
    display: none;
}
/* ===== 折叠态：提示居中、箭头始终靠右、虚线底边提示 ===== */
.code-block-wrapper.collapsed .code-block-toolbar {
    border-bottom: 1px dashed color-mix(in srgb, var(--theme-color) 55%, transparent);
    border-radius: 6px;
}
.code-block-wrapper.collapsed .code-collapse-hint {
    display: block;
}
/* 亮色主题 */
html.light-theme .code-block-toolbar {
    background: #f6f8fa;
    border-color: #e1e4e8;
}
html.light-theme .code-block-toolbar:hover {
    background: color-mix(in srgb, var(--theme-color) 10%, #f6f8fa);
    border-color: color-mix(in srgb, var(--theme-color) 35%, #e1e4e8);
}
html.light-theme .code-collapse-hint {
    color: color-mix(in srgb, var(--theme-color) 70%, #444);
}