/* docnav-style.css */
#top-nav {
    max-width: 800px;
    height: var(--top-nav-height);
    top: 0;
    left: var(--side-bar-width);
    right: 0;
    z-index: 1009; /* 与下拉框保持一致 */
    background-color: white !important;
    margin: 0 !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    /* justify-content: flex-start; 改为左对齐 */
    justify-content: left; /* 改为居中对齐 */
    border-bottom: 1px solid #e5e5e5 !important; /* 底部添加绿色分割线 */

    position: fixed;
    padding-left: var(--content-padding-left);
}

#top-nav .nav-item,
#top-nav .nav-item > a {
    color: black;
    padding-left: 0;
    padding-right: 15px;
    text-decoration: none;
    font-size: 16px;
    font-family: SourceHanSansCN-Regular, "Source Han Sans", 思源黑体, "Noto Sans CJK SC", "Noto Sans CJK TC", sans-serif;
    cursor: pointer;
    position: relative; /* Add this for positioning the underline */
    height: var(--top-nav-height); /* 添加这行，确保高度一致 */
    white-space: nowrap; /* 防止页面放大的时候一级标题换行 */

    font-weight: bold; /* 加粗 */
    line-height: var(--top-nav-height);
    align-items: center;

    background-color: transparent;
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* 如果需要特别处理第一个链接，可以保留这个样式 */
#top-nav .nav-item:first-child {
    padding-left: 0;
}

#top-nav .nav-item:last-child {
    border-bottom: none;
}

#top-nav .nav-item-divider {
    margin: 10px 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
}

/* topnav和conten之间的灰色分割线 */
#top-nav .nav-item > a:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 3px;/* 下划线在标题下的位置 */
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
    transition: width 0.3s ease-in-out;
}

/* 标题通过鼠标选中的下划线，选中后展开下拉 */
#top-nav .nav-item > a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 3px; /* 下划线在标题下的位置 */
    width: 0; /* 鼠标未选择默认是0不显示，鼠标悬浮逐渐增长到100% */
    height: 5px; /* 下划线的高度 */
    background-color: #007bff; /* 蓝色下划线 */
    transition: width 0.4s ease-in-out; /* 鼠标悬浮逐渐增长到100% */
    z-index: 1011;
}

/* 悬停状态下的下划线 */
#top-nav .nav-item > a:hover::before {
    width: 80%; /* 鼠标悬浮逐渐增长到100% */
}

@media (max-width: 768px) {
    #top-nav {
        top: var(--top-nav-height);
        left: 0;
        width: 100%;
        max-width: none;
        overflow-x: auto; /* 允许内容过多时左右滑动 */
        overflow-y: hidden;
        white-space: nowrap;
        padding-left: 10px;
    }

    #top-nav .nav-item,
    #top-nav .nav-item > a {
        padding-right: 10px;
    }
}