/* header-container 样式 */
#header-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 2px;
    background-color: #ffffff;
    color: #333;
    /* border-bottom: 1px solid #ddd;  */  /* 保留上面一条线 */
    box-shadow: none; /* 移除阴影，避免出现第二条线 */
}

#header-container a {
    color: #333;
    text-decoration: none;
    padding: 5px;
}

#header-container a:hover {
    text-decoration: underline;
}

/* 导航栏样式 */
.nav-tabs {
    display: flex;
    justify-content: center;
    gap: 4px; /* 原20px，缩小为4px，减少tab间距 */
    border-bottom: none; /* 移除多余的底部边框 */
    background-color: #ffffff;
    /* 新增：防止溢出 */
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px; /* 与 header-container 保持一致 */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.nav-link {
    color: #333;
    font-size: 16px;
    padding: 7px 8px; /* 原10px 20px，缩小为7px 8px */
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    transition: all 0.3s ease;
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
    white-space: nowrap;
    background: none;
    outline: none;
}

.nav-link.active {
    color: #222;
    background-color: #fff;
    border-bottom: 2px solid #fff;
    font-weight: bold;
    z-index: 1;
}

.nav-link:not(.active) {
    color: #3687f7;
    background: none;
    border-bottom: 2px solid #e5e5e5;
}

.nav-link:hover {
    background-color: #f0f0f0;
    color: #333;
}

/* 响应式导航菜单 */
.nav-menu {
    display: flex;
    gap: 15px;
}

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

.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px 0;
}

/* 优化 logo 显示：把 logo 当作行内内容处理，避免固定方块导致文字被裁剪 */
.logo {
    /* 将固定尺寸改为自适应，优先显示文字（若你使用图片，可将 <img> 放入 .logo 并启用下面的规则） */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px; /* 桌面默认大小 */
    line-height: 1;
    color: #333;
    /* 取消可能导致隐藏的尺寸约束 */
    min-width: 0;
    overflow: visible;
}

/* 如果你在 .logo 内使用 <img>，固定图标尺寸并保持不裁剪 */
.logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 6px;
}

/* 移动端优化：减少 header 内边距，缩小 logo 字体，保证 logo 文本可见 */
@media (max-width: 768px) {
    #header-container {
        padding: 6px 10px; /* 缩小内边距，给 logo 留更多空间 */
        min-height: 48px;  /* 缩短高度，避免占用过多空间 */
    }

    /* logo 文本缩小以适配窄屏 */
    .logo {
        font-size: 14px !important;
    }

    /* 若存在 logo img，缩小图标 */
    .logo img {
        width: 28px !important;
        height: 28px !important;
    }

    /* 导航按钮、菜单等在小屏可隐藏或收敛（按需保留） */
    .nav-menu {
        /* 保持可见但压缩间距，若需要可 display:none 隐藏 */
        gap: 8px;
    }

    /* 导航 tab 在小屏时不应超出 header 宽度 */
    .nav-tabs {
        padding-left: 6px;
        padding-right: 6px;
        box-sizing: border-box;
    }

    /* 保证 .hamburger 仍可见以便切换菜单 */
    .hamburger {
        display: block;
    }
}

/* 小屏覆盖：保证 header 内的 .title 始终可见，缩小并限制宽度 */
@media (max-width: 800px) {
	#header-container {
		padding: 6px 10px;
		min-height: 48px;
	}

	/* logo 容器：横向排列并收缩间距 */
	.logo-container {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}

	/* 如果使用 img 作为 logo，缩小图标 */
	.logo, .logo img {
		width: 28px !important;
		height: 28px !important;
		object-fit: contain;
	}

	/* 强制显示标题（覆盖其它全局 display:none） */
	.logo-container .title,
	#header-container .title {
		display: inline-block !important;
		font-size: 14px !important;        /* 缩小字体 */
		font-weight: 700;
		line-height: 1;
		white-space: nowrap !important;    /* 不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: calc(100vw - 120px);    /* 留出空间给右侧菜单/汉堡，按需微调 */
		min-width: 0;
	}

	/* 导航收敛，避免占用过多空间 */
	.nav-menu {
		gap: 8px;
		font-size: 13px;
	}

	/* 如果需要，汉堡显式可见以替代过多菜单项 */
	.hamburger {
		display: block;
	}
}

/* H5：只显示 搜索（search-link），其余链接隐藏 */
@media (max-width: 768px) {
    .nav-links {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    /* 隐藏所有普通链接（先隐藏再显示例外） */
    .nav-links .link {
        display: none !important;
    }
    /* H5 显示：搜索 + 关于 */
    .nav-links .search-link,
    .nav-links .about {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
        padding: 6px 10px !important;
        white-space: nowrap;
        border: 1px solid rgba(0,0,0,0.12) !important;
        border-radius: 8px !important;
        background-color: #ffffff !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        color: #333 !important;
        transition: background-color .12s ease, transform .08s ease;
    }
    .nav-links .search-link:hover,
    .nav-links .about:hover {
        background-color: #f5f7fb !important;
        transform: translateY(-1px);
    }
}