/* 设置主题颜色 */
/* 深颜色：#2e85fd; ，浅一点的颜色：69, 79,239 , #ECB7B7;*/
[data-md-color-scheme="default"] {
    --md-primary-fg-color:        #2E3AED;
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        black;
}


/* 设置宽度 */
.md-grid {
    max-width: 98%;
}

/* 标题设置 */
.md-typeset h1 {
    font-size: 32px;
    font-weight: 500;
}

.md-typeset h2 {
    font-size: 24px;
    font-weight: 470;
}

.md-typeset h3 {
    font-size: 20px;
    font-weight: 460;
}

.md-typeset h4 {
    font-size: 18px;
    font-weight: 450;
}

.md-typeset h5 {
    font-size: 16px;
}

.md-typeset h6 {
    font-size: 14px;
}


/* 顶部导航的设置 */
.md-tabs__link {
    font-weight: 450;
    font-size: 16px;
}

.md-tabs__link .md-tabs__link--active {
    font-weight: 600;
    font-size: 20px;
    border-bottom: 2px solid white;
}





/* 底部备案信息 ------------------------------------------------------------------ */
.wy-footer {
    padding: 50px 50px 25px 25px;
    margin-top: 100px;
    color: #99979c;
    /* background-color: #2a2730; */
    background-color: black;
    text-align: left;
    text-size-adjust: 100%;
    line-height: 20px;
    font-size: 14px;
    display: block;
    box-sizing: border-box;
}

.wy-footer-links {
    padding-left: 0;
    margin-bottom: 20px;
}
.wy-footer a:hover {
    text-decoration: underline;
    /* color: blue; */
}

.wy-row {
    width: 100%;
    clear: both;  /* 清楚 float 浮动，否则在宽屏幕下不同row会挤在一行 */
    float: left;
    /* display: flex;
    justify-content: space-between;  */

}

.wy-col {
    display: block;
    width: 45%;
    min-width: 300px;
    max-width: 600px;
    /* background-color: yellow; */
    float:left;
    margin: 0 10px;
}

.wy-qrcode {
    width: 100px;
    float: left;
    margin: 20px;
}

.wy-qrcode img{
    width: 100px;
}

.wy-qrcode-type {
    font-size: 12px;
    text-align: center;
    margin: 0;
}
.wy-qrcode-name {
    font-size: 8px;
    text-align: center;
    margin: 0;
}

.wy-footer-ad {
    font-size: 18px;
    color: red;
    font-weight: 600;
}


/* 设置文档中心 card 在鼠标经过时的动态效果 */
.md-typeset .grid.cards>ol>li:focus-within,.md-typeset .grid.cards>ol>li:hover,.md-typeset .grid.cards>ul>li:focus-within,.md-typeset .grid.cards>ul>li:hover,.md-typeset .grid>.card:focus-within,.md-typeset .grid>.card:hover {
    border-color:  #2E3AED;
    box-shadow: var(--md-shadow-z3);
}


.md-typeset .md-button {
    border:.05rem solid;
    border-radius:.3rem;
    /* color: var(--md-primary-fg-color); */
    /* color:#2E3AED; */
    /* cursor:pointer; */
    display: inline-block;
    font-weight: 450;
    padding: .5em 1em;
    transition: color 125ms,background-color 125ms,border-color 125ms;
    width: 280px;
    white-space: nowrap;
    overflow: hidden;         /* 溢出内容隐藏 */
    text-overflow: ellipsis;  /* 溢出后显示 ...*/
    line-height: 40px; /* 用于垂直居中 */
}


.md-typeset .md-button--primary {
    background-color: #2E3AED;
    border-color: #2E3AED;
    color: white;
}




.cncfstack-container {
    max-width: 100%;
    margin: 0 auto;
}

.cncfstack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.cncfstack-card {
    background: white;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid #eee;
    transition: 0.2s;
    cursor: pointer;
    display: flex; /* 新增flex布局 */
    align-items: center;
    gap: 15px;

}

.cncfstack-card:hover {
   box-shadow: 0 8px 16px rgba(0,0,0,0.1);
   transform: translateY(-2px);
   background-color: #F0F2F5;
}

.cncfstack-card-img {
   width: 48px;
   height: 48px;
   border-radius: 8px;
   object-fit: cover;
   flex-shrink: 0;
}

.cncfstack-text-content {
    flex: 1;
    min-width: 0;
    white-space: nowrap;     /* 禁止换行 */
    overflow: hidden;        /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出时显示省略号 */
}

.cncfstack-title {
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 4px;
}

.cncfstack-subtitle {
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.cncfstack-brand {
    color: #999;
    font-size: 12px;
    margin-top: 8px;
}

.cncfstack-center  {
    text-align: center;
}