/* 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);
}

#nav-menu {
    display: flex;
    align-items: center;
}

#nav-menu > a {
    color: black;
    padding-left: 0;
    padding-right: 2vw;
    text-decoration: none;
    font-size: 14px;
    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);
}

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

/* 标题通过鼠标选中的下划线，选中后展开下拉 */
#nav-menu 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;
}

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

#hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

#hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: 0.4s;
}

@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: 2vw;
        overflow-x: visible; /* 修改：移除水平滚动 */
        overflow-y: visible; /* 修改：允许垂直展开 */
        white-space: normal; /* 修改：允许换行 */
    }

    #hamburger-menu {
        display: block;
    }

    #nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: white;
        flex-direction: column;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    #nav-menu.active {
        display: flex;
    }

    #nav-menu a {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 2vw;
        padding-right: 0;
        width: 100%;
        box-sizing: border-box;
        line-height: 2;
        height: auto;
    }

    /* 移除小屏幕上的下划线效果 */
    #nav-menu a::before,
    #nav-menu a::after {
        display: none;
    }
}

@media (max-width: 768px) {
    #top-nav {
        top: var(--top-nav-height);
        left: 0;
        width: 100%;
        max-width: none;
        overflow-x: auto;
        white-space: nowrap;
        padding-left: 2vw;
    }

    #hamburger-menu {
        display: none; /* 隐藏汉堡菜单按钮 */
    }

    #nav-menu {
        display: flex; /* 始终显示导航菜单 */
        position: static; /* 恢复正常文档流 */
        flex-direction: row; /* 水平排列 */
        box-shadow: none; /* 移除阴影 */
        width: auto; /* 自动宽度 */
    }

    #nav-menu a {
        padding: 0 1vw; /* 调整水平间距 */
        width: auto; /* 自动宽度 */
        line-height: var(--top-nav-height);
        height: var(--top-nav-height);
    }

    /* 恢复小屏幕上的下划线效果 */
    #nav-menu a::before,
    #nav-menu a::after {
        display: block;
    }
}