/* ======================================================= */
/* 响应式断点：针对屏幕宽度小于或等于 768px 的设备 */
/* 目标：一级标题水平多行排列，自动换行 */
/* ======================================================= */
@media (max-width: 1000px) {
    
    /* 1. 容器调整（与之前相同，确保 LOGO 和汉堡图标在一行） */
    .navbar-content-container {
        display: flex;
        flex-wrap: wrap; 
        justify-content: space-between;
        align-items: center;
        padding: 0 15px; 
    }
    .logo-switcher-container {
        width: auto;
        padding-left: 0;
        position: static !important; 
    }
    .navbar-logo {
        height: 40px;
    }
    
    /* 2. 核心调整：让菜单在文档流内展开（不遮盖内容） */
    .collapse.navbar-collapse {
        /* 关键：确保菜单内容占据导航栏的剩余空间，而不是覆盖 */
        position: static; 
        width: 100%;
        background-color: #f8f8f8; 
        border-top: 1px solid #eee;
        padding-bottom: 10px; /* 底部留出空间 */
    }

    /* 3. 一级标题：使用 Flexbox 和换行 */
    .navbar-nav {
        display: flex;
        flex-direction: row; /* 关键：保持横向排列 */
        flex-wrap: wrap; /* 关键：允许换行 */
        width: 100%;
        margin: 0 !important;
        padding: 5px 10px; /* 整体内边距 */
        justify-content: flex-start; /* 靠左对齐 */
    }
    
    /* 4. 导航项样式优化：使其成为“小方块”并占据空间 */
    .nav-item {
        /* 这里的宽度定义了每行能显示多少个项目 */
        width: 33.33%; /* 默认每行 3 个 */
        /* min-width: 120px; */ /* 可以设置最小宽度，保证项目不会太小 */
        box-sizing: border-box;
        text-align: center;
        flex-grow: 1; /* 允许在剩余空间内微调宽度 */
    }
    
    /* 导航链接文本样式 */
    .nav-link {
        font-size: 0.95rem !important; 
        padding: 8px 5px !important; /* 减小内边距，更紧凑 */
        display: block;
        color: #333 !important;
        font-weight: 600;
        /* 增加一个边框或背景色，使其看起来像小方块 */
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin: 3px; /* 项目间留出空隙 */
        background-color: white;
    }

    /* 悬停/点击颜色：保持原有样式 */
    .nav-item:hover .nav-link,
    .nav-item.dropdown.show .nav-link {
         color: #5A4634 !important; 
         background-color: #f1dab3ee;
    }

    /* 5. 下拉菜单（二级）：保持内嵌展开 */
    /* 下拉菜单需要紧跟在一级标题下方，并充满该行 */
    .dropdown-menu {
        /* 覆盖定位和动画，使其在文档流内展开 */
        position: static !important; 
        width: 100% !important; 
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        
        /* 确保二级菜单也占据整行，将其他导航项向下推 */
        clear: both; 
        margin-top: 0;
        background: #fffaf0; 
        border: none;
        padding: 5px 0;
    }

    /* 6. 移除图片容器 */
    .nav-cell-img,
    .nav-cell-container {
        display: none !important;
    }
}