/* 自定义的 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;
}


/* ==================== 广告 ==================== */
.toc-above-block {
    position: relative;
    margin-bottom: 0.8rem;
    padding: 0.6rem 2rem 0.6rem 0.8rem;
    background: var(--md-code-bg-color);
    border-radius: 0.2rem;
    font-size: 0.7rem;
    color: var(--md-default-fg-color--light);
}

.toc-above-block__close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--md-default-fg-color--light);
    cursor: pointer;
    opacity: 0.6;
}

.toc-above-block__close:hover {
    opacity: 1;
}