/* 自定义的 CSS 样式 */


/* ==================== 颜色 ==================== */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #2e303e;
}


/* ==================== 文本 ==================== */
/* 二级标题配置 */
.md-typeset h2 {
    /* font-weight: bold; */
    text-align: center !important;
    border-bottom: 1px solid #ddd;
    /* 浅浅的下划线 */
    padding-bottom: 0.1em;
    /* 让文字和下划线保持一定间距 */
    margin-bottom: 0.8em;
    /* 和下面的内容拉开一些距离 */
}

/* 三级标题配置 */
.md-typeset h3 {
    font-weight: 500;
}

/* 外链小箭头 */
.md-content a[target="_blank"]:not(.md-content__button):not(.md-author):not(:has(img)),
.md-tabs__link[target="_blank"] {
    background: url('data: image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDdCRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTggMTN2NmEyIDIgMCAwIDEtMiAySDUuMDAxYTIgMiAwIDAgMS0yLTJWOGEyIDIgMCAwIDEgMi0yaDZaIi8+PHBvbHlsaW5lIHBvaW50cz0iMTUgMyAyMSAzIDIxIDkiLz48bGluZSB4MT0iMTAiIHkxPSIxNCIgeDI9IjIxIiB5Mj0iMyIvPjwvc3ZnPg==') center right no-repeat;
    padding-right: 13px;
    margin-right: 3px;
}

/* 解决超长字符串无法换行的问题 */
.md-typeset {
    overflow-wrap: break-word;
}

/* 页脚的社交链接在容器中垂直居中（因为额外添加了备案号一行） */
.md-social {
    align-items: center;
}

/* 自定义 status: todo 图标 */
.md-status--todo::after {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-todo-icon lucide-list-todo"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><rect x="3" y="4" width="6" height="6" rx="1"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-todo-icon lucide-list-todo"><path d="M13 5h8"/><path d="M13 12h8"/><path d="M13 19h8"/><path d="m3 17 2 2 4-4"/><rect x="3" y="4" width="6" height="6" rx="1"/></svg>');
}


/* ==================== 表格 ==================== */
/* 解决 KaTeX 表格在移动端的尾部有异常空白的问题 */
.md-typeset__table {
    /* position: sticky; */
    position: relative;
}

/* 表格元素垂直居中 */
td,
th {
    vertical-align: middle !important;
}

/* 表格居中 */
.md-typeset__scrollwrap {
    text-align: center;
}


/* ==================== 图片 ==================== */
/* 美化图片样式 */
.md-content img {
    border-radius: 0.3rem;
    display: block;
    margin: 0 auto;
    /* box-shadow: var(--md-shadow-z2); */
}

/* 让图片在暗色模式下不那么刺眼 */
[data-md-color-scheme="slate"] .md-typeset img,
[data-md-color-scheme="slate"] .md-typeset svg,
[data-md-color-scheme="slate"] .md-typeset video {
    filter: brightness(0.85) invert(0.05);
}

/* 图片的 alt 内容样式 */
.markdown-img-caption {
    color: #888;
    font-size: 0.9em;
    font-style: normal;
    text-align: center;
    margin-top: 0.3em;
}

/* mermaid 居中 */
.mermaid {
    text-align: center;
}


/* ==================== 广告 ==================== */
.ads {
    margin: 0.2rem;
    padding: 0.5rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.3rem;
    background: var(--md-default-bg-color);
}

.ads.ads-visible {
    display: block;
}

.ads-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 0.65rem;
}

.ads-title {
    margin: 0;
    font-weight: 700;
    color: var(--md-default-fg-color);
}

.ads-close {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--md-default-fg-color--light);
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.ads-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.7rem;
}

.ads-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.5rem 0.4rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.3rem;
    background: var(--md-default-bg-color);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ads-color, var(--md-accent-fg-color));
    line-height: 1.5;
}

.ads-item:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.01));
}


/* ==================== 滚动条 ==================== */
/* 美化侧边栏滚动条：初始可见，滚动后隐藏，悬停时重新显示 */

/* 滚动条基础样式 */
.md-sidebar__scrollwrap::-webkit-scrollbar { width: 4px; }
.md-sidebar__scrollwrap::-webkit-scrollbar-track { background: transparent; }
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb { border-radius: 4px; }

/* 滚动后隐藏 */
.md-sidebar__scrollwrap.scrollbar-hidden { scrollbar-color: transparent transparent !important; }
.md-sidebar__scrollwrap.scrollbar-hidden::-webkit-scrollbar-thumb { background-color: transparent !important; }

/* 悬停时显示 */
.md-sidebar__scrollwrap.scrollbar-hidden:hover,
.md-sidebar__scrollwrap.scrollbar-hidden:focus-within { scrollbar-color: var(--md-accent-fg-color) transparent !important; }
.md-sidebar__scrollwrap.scrollbar-hidden:hover::-webkit-scrollbar-thumb,
.md-sidebar__scrollwrap.scrollbar-hidden:focus-within::-webkit-scrollbar-thumb { background-color: var(--md-default-fg-color--lighter) !important; }
.md-sidebar__scrollwrap.scrollbar-hidden:hover::-webkit-scrollbar-thumb:hover,
.md-sidebar__scrollwrap.scrollbar-hidden:focus-within::-webkit-scrollbar-thumb:hover { background-color: var(--md-accent-fg-color) !important; }

/* ==================== 回到顶部按钮 ==================== */
/* 显示在页面顶部而不是底部 */
.md-top {
  top: 6rem !important;
  bottom: auto !important;
}