/* 导航菜单修复 - 解决二级菜单被覆盖问题 */

/* 确保容器允许内容溢出 */
html,
body,
.page-wrapper,
.container,
.header,
.header-main,
.main-content,
.content-wrapper {
    overflow: visible !important;
}

/* 保证header的层级高于其他元素 */
.header {
    position: relative;
    z-index: 1000 !important;
}

/* 调整导航相关元素 */
.main-nav,
.nav-list {
    overflow: visible !important;
    position: relative;
    z-index: 1000 !important;
}

.nav-item {
    position: relative !important;
    overflow: visible !important;
}

/* 增强二级菜单的显示层级和位置 */
.sub-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    /* 使用超高z-index确保在最上层 */
    overflow: visible !important;
    pointer-events: none;
    /* 初始状态下禁用鼠标事件 */
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important;
}

.nav-item:hover .sub-nav {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    /* 悬停时启用鼠标事件 */
}

/* 确保下拉菜单内容完全可见 */
.sub-nav li {
    position: relative;
    z-index: 9999 !important;
}

.sub-nav a {
    display: block;
    position: relative;
    z-index: 9999 !important;
}

/* 禁用可能干扰的元素 */
.content-main,
.side-content {
    position: relative;
    z-index: 900;
}

/* 与文章页和栏目页的兼容性修复 */
.article-section,
.category-header,
.hot-section,
.related-section,
.hot-recommend-section,
.latest-section,
.almanac-days-section,
.featured-section {
    position: relative;
    z-index: 100 !important;
}

/* 确保页面互动元素不覆盖导航 */
.breadcrumb,
.pagination,
.article-pagination,
.almanac-categories {
    position: relative;
    z-index: 10;
}

/* 修复移动端样式 */
@media (max-width: 768px) {

    /* 在移动端使用不同的样式，避免干扰 */
    .sub-nav {
        position: static !important;
        z-index: 1000 !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }

    .nav-item.active .sub-nav {
        display: block !important;
    }
}