/* ==========================================================================
  页面整体布局与容器
   ========================================================================== */

/* 基础网格限制 */
.md-grid {
    max-width: 100%;
}

/* 正文容器布局 */
.md-content {
    max-width: 1000px;
    min-width: 800px;
    margin: 0 auto;
    margin-left: 120px;
    margin-right: 240px; 
    padding: 0 20px;
    position: relative;
    transition: margin 0.3s ease;
}

/* --- 响应式适配  --- */

/* 超大屏幕：增加右侧留白 */
@media screen and (min-width: 1400px) {
    .md-content {
        margin-left: 120px;
        margin-right: 260px;
    }
}

/* 中屏幕：隐藏右侧栏预留位 */
@media screen and (max-width: 1399px) and (min-width: 1301px) {
    .md-content {
        margin-left: 120px;
        margin-right: 40px;
    }
}

/* 平板/小屏幕：左右侧栏隐藏，内容居中 */
@media screen and (max-width: 1300px) {
    .md-content {
        margin-left: 20px !important;
        margin-right: 20px;
        min-width: 700px;
    }
}

/* 移动端：流式布局，取消最小宽度限制 */
@media screen and (max-width: 1000px) {
    .md-content {
        margin-left: 20px !important;
        margin-right: 20px;
        min-width: 0;
        width: auto;
    }
}

/* ==========================================================================
   2. 正文内容区域样式 (Content Styling)
   ========================================================================== */

.md-content__inner {
    padding-bottom: 2rem;
    padding-top: 0;
    position: relative;
}


/* 标题间距调整 */
.md-content h1, .md-content h2, .md-content h3, 
.md-content h4, .md-content h5, .md-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* 首个标题移除顶部间距 */
.md-content h1:first-child,
.md-content h2:first-child {
    margin-top: 0;
}

/* ==========================================================================
   滚动条
   ========================================================================== */

/* Webkit 浏览器 (Chrome, Safari, Edge) */
.md-grid::-webkit-scrollbar { height: 12px; }
.md-grid::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 6px; }
.md-grid::-webkit-scrollbar-thumb { background: #ccc; border-radius: 6px; }
.md-grid::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* Firefox 兼容 */
.md-grid {
    scrollbar-color: #ccc #f1f1f1;
    scrollbar-width: thin;
}

/* ==========================================================================
   4. 字体与排版 (Typography)
   ========================================================================== */

.md-content__inner {
   font-family: "HarmonyOS Sans SC", "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    color: #1a1a1a;
    font-size: 17px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    
    /* 字体渲染优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.md-typeset p, 
.md-typeset ul li, 
.md-typeset ol li {
    color: #1a1a1a !important;
}
/* ==========================================================================
   标题样式 
   ========================================================================== */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
    color: #000000 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    letter-spacing: -0.015em; 
}

.md-typeset h1 {
    font-weight: 800 !important; 
    color: #111111 !important;
}

.md-typeset h2 {
    border-bottom: 1px solid #eaecef; 
    padding-bottom: 0.3em;
}

.md-typeset h1 a,
.md-typeset h2 a,
.md-typeset h3 a,
.md-typeset h4 a,
.md-typeset h5 a {
    color: inherit !important; 
}
/* ==========================================================================
   5. 导航网格系统 
   ========================================================================== */

/* --- 网格容器布局 --- */
.md-typeset .nav-grid ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 默认三列 */
    gap: 20px;
    padding: 0;
    margin: 25px 0 !important;
    list-style: none !important;
}

/* 响应式断点 */
@media screen and (max-width: 1000px) {
    .md-typeset .nav-grid ul { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   导航卡片 (nav-grid) 手机端双列显示优化
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. 强制改为双列布局 */
    .md-typeset .nav-grid ul {
        grid-template-columns: repeat(2, 1fr) !important; /* 核心：1列变2列 */
        gap: 10px !important;       /* 缩小卡片间距 */
        margin: 15px 0 !important;  /* 调整整体上下边距 */
    }

    /* 2. 卡片容器瘦身 */
    .md-typeset .nav-grid li {
        padding: 12px 10px !important; /* 减小内边距 (原来是24px，太宽了) */
        min-height: 100px !important;  /* 设置一个合理的最小高度 */
        height: auto !important;       /* 高度自适应 */
    }

    /* 3. 标题文字缩小 */
    .nav-grid li strong {
        margin-bottom: 5px !important;
    }

    .nav-grid li strong a {
        font-size: 14px !important; /* 标题字号改小 (原来17px) */
        line-height: 1.3 !important;
    }

    /* 4. 右上角的箭头缩小 */
    .nav-grid li strong a::after {
        font-size: 18px !important; /* 箭头改小 */
        top: 0 !important;
    }

    /* 5. 描述文字缩小 */
    .nav-grid li {
        font-size: 12px !important; /* 描述文字改小 (原来14px) */
        line-height: 1.4 !important;
    }
    
    /* 可选：如果你觉得描述文字太长，可以限制显示行数 */
    .nav-grid li {
        display: -webkit-box !important;
        -webkit-line-clamp: 4; /* 最多显示4行描述 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* 此时需要把li原本的display: flex覆盖掉，或者针对内部p标签做截断，
       但通常简单的字号缩小就够用了。如果布局乱了，把上面限制行数的代码删掉即可。 */
}
/* --- 卡片样式 (li) --- */
.md-typeset .nav-grid li {
    display: flex !important;
    flex-direction: column;
    padding: 24px 26px;
    background-color: #ffffff;
    border: 1px solid #e0e2e7; 
    border-top: 4px solid #009485;
    border-radius: 8px;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    margin: 0 !important;
    height: 100%;
}

/* 悬停交互效果 */
.nav-grid li:hover {
    transform: translateY(-6px); 
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1), 
                0 8px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #d1d5db;
    border-top-color: #009485;
    cursor: pointer;
}

/* --- 标题样式 --- */
.nav-grid li strong {
    display: block;
    margin-bottom: 10px;
}

.nav-grid li strong a {
    font-size: 17px;
    font-weight: 700;
    color: #1a202c;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    position: static;
}

/* --- 全卡片点击热区覆盖 (Stretched Link) --- */
.nav-grid li strong a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
}

.nav-grid li:hover strong a {
    color: #009485;
}


.nav-grid li strong a::after {
    content: "›"; 
    font-size: 24px;
    line-height: 1;
    margin-left: auto;
    color: #009485;
    font-weight: 400;
    transition: transform 0.3s ease;
    transform: translateX(0);
    position: relative;
    z-index: 2; 
}

.nav-grid li:hover strong a::after {
    transform: translateX(6px);
}

/* --- 描述文字样式 --- */
.nav-grid li {
    font-size: 14px;
    color: #5f6c7b; 
    line-height: 1.65;
}

.nav-grid li p {
    margin: 0;
}

/* ==========================================================================
   侧边栏收缩时的正文宽屏模式
   ========================================================================== */

.md-main {
    transition: margin-left 0.3s ease !important;
}


body.sidebar-collapsed .md-content {

    max-width: 1400px !important; 
    

    margin-left: 40 !important;
    margin-right: 40 !important;
    

    padding-left: 60px !important;
    padding-right: 60px !important;
}


@media screen and (min-width: 1400px) {
    body.sidebar-collapsed .md-content {
        margin-right: 40 !important;
        margin-left: 40 !important;
    }
}

/* ==========================================================================
   优化手机端阅读体验：减少两侧留白，增加内容宽度
   ========================================================================== */
@media screen and (max-width: 768px) {
    .md-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        
        padding-left: 5px !important;
        padding-right: 5px !important;
        

        width: 100% !important;
        min-width: 100% !important;
    }
}