@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 加载 Brands 图标字体 */
@font-face {
  font-family: "Font Awesome 6 Brands";
  src: url("/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 1. 重置默认链接颜色和下划线 */
.mod-menu a,
.mod-menu a:visited,
ul.nav a,
ul.nav a:visited {
    color: #333333 !important;            /* 深灰色文字，清晰且通用 */
    text-decoration: none !important;     /* 彻底去除下划线 */
}

/* 2. 导航容器：全宽、取消外边距和圆角 */
.mod-menu, 
ul.nav {
    display: flex !important;
    width: 100% !important;            /* 强制占满全宽 */
    margin: 0 !important;              /* 取消所有外边距 */
    padding: 0 !important;             /* 取消所有内边距 */
    list-style: none;
    
    /* 导航条整体背景色和边框 */
    background-color: #01bdff;         /* 浅灰蓝色底色 */

    
}

/* 3. 菜单项 (li)：平分宽度 + 分隔线 */
.mod-menu > li,
ul.nav > li {
    flex: 1 1 0;                       /* 让每个 li 平分剩余空间 */
    text-align: center;                /* 文字在各自区域内居中 */
    
    /* === 核心：添加垂直分隔线 === */
    border-right: 1px solid #e2e8f0;   /* 右侧垂直分隔线 */
}

/* 取消最后一个菜单项的右侧分隔线 */
.mod-menu > li:last-child,
ul.nav > li:last-child {
    border-right: none;
}

/* 4. 菜单链接 (a)：占满 li 空间，设置高度 */
.mod-menu a,
ul.nav a {
    display: flex !important;          /* 垂直居中需要 */
    align-items: center;
    justify-content: center;
    width: 100%;                       /* 点击区域铺满 */
    
    /* 保持你之前设置的高度 */
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    
    font-weight: 500;                  /* 中等字重 */
    white-space: nowrap;               /* 防止文字换行 */
    transition: all 0.2s ease-in-out;   /* 平滑过渡 */
}

/* ===================================================
   5. 交互效果 (Hover 悬停 & Active 当前页)
   =================================================== */

/* 鼠标悬停 (Hover) 效果：仅改变背景色 */
.mod-menu a:hover,
ul.nav a:hover {
    color: #333333 !important;            /* 文字变品牌蓝 */
    background-color: #30c9ff !important; /* 稍深的灰色背景 */
}

/* 当前所在页面的高亮项 (.active 类) */
.mod-menu li.active > a,
.mod-menu a.active,
ul.nav li.active > a,
ul.nav a.active {
    color: #ffffff !important;            /* 白字 */
    background-color: #00aae5 !important; /* BS5 主色背景 */
}

/* ===================================================
   6. 移动端自适应 (小屏转为垂直)
   =================================================== */
@media (max-width: 991.98px) {
    .mod-menu, 
    ul.nav {
        flex-direction: column !important;
        border-right: none;
    }
    
    .mod-menu > li,
    ul.nav > li {
        border-right: none;            /* 取消垂直分隔线 */
        border-bottom: 1px solid #e2e8f0; /* 改为底部水平分隔线 */
    }
}

/* 修改菜单链接的上下内边距（Padding） */
.mod-menu a,
ul.nav a {
    padding-top: 1.25rem !important;    /* 增加顶部留白（默认通常是 0.5rem） */
    padding-bottom: 1.25rem !important; /* 增加底部留白 */
    font-size: 1.1rem;                 /* （可选）稍稍放大字号，视觉更协调 */
}