/* ========================
   固定顶部导航栏（滚动时显示）
   - 作用位置：页面顶部固定定位
   - 用途：滚动时快速访问导航和搜索
   ======================== */

/* 固定导航栏整体容器 */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #750a20;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 显示状态 */
.sticky-header.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 固定导航栏内层容器（限制内容宽度并居中） */
.sticky-header-inner {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    /* 
       原来使用 space-between 会把右侧导航整体推到最右侧，
       导致 mini logo 和文字之间间距过大。
       改为从左开始排布，再用 gap 控制 logo 与导航的间距。
    */
    justify-content: flex-start;
    column-gap: 200px;
    height: 50px;
}

/* 固定导航栏左侧 LOGO */
.sticky-logo {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    max-width: 45px;
    flex-shrink: 0;
}

/* 固定导航栏 LOGO 图片（避免拉伸变形） */
.sticky-logo .sticky-logo-img {
    height: 38px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* 固定导航栏右侧导航和搜索区域 */
.sticky-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 1 auto;
    margin: 0 auto; /* 让导航文字整体在横向上居中（桌面端也生效） */
}

/* ========================
   固定导航栏 - 一级导航样式（独立设计）
   - 作用范围：仅影响固定导航栏的一级导航项
   - 修改此部分不会影响二级导航
   ======================== */

/* 固定导航栏一级导航列表容器 */
.sticky-nav>ul {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 固定导航栏一级导航项（直接子元素） */
.sticky-nav>ul>li {
    display: inline-block;
    position: relative;
    height: 50px;
    line-height: 50px;
    margin: 0;
    padding: 0;
}

/* 固定导航栏一级导航链接样式 */
.sticky-nav>ul>li>a {
    display: inline-block;
    padding: 0 20px;
    line-height: 50px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    transition: color 0.3s;
    height: 50px;
    position: relative;
    /* 为伪元素定位做准备 */
}

/* 固定导航栏一级导航链接的分割线：使用伪元素创建，高度与文字一致 */
.sticky-nav>ul>li>a::after {
    content: '';
    position: absolute;
    right: 0;
    top: calc(50% - 8px);
    /* 垂直居中：向上调整，与文字对齐 */
    width: 1px;
    height: 14px;
    /* 高度与文字大小一致（font-size: 14px） */
    background-color: #ffffff;
}

/* 最后一个固定导航栏一级导航项不显示分割线 */
.sticky-nav>ul>li:last-child>a::after {
    display: none;
}

/* 固定导航栏一级导航 hover / 当前高亮状态 */
.sticky-nav>ul>li>a:hover,
.sticky-nav>ul>li>a.current {
    color: #ffff00;
}

/* ========================
   固定导航栏 - 二级导航样式（独立设计）
   - 作用范围：仅影响固定导航栏的二级导航（下拉菜单）
   - 修改此部分不会影响一级导航
   ======================== */

/* 固定导航栏二级导航容器（下拉菜单） */
.sticky-nav .has-submenu>.submenu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    margin: 0;
    padding: 0;
    min-width: 160px;
    background-color: #750a20;
    list-style: none;
    z-index: 10000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 固定导航栏二级导航显示控制 */
.sticky-nav .has-submenu:hover>.submenu {
    display: block;
}

/* 固定导航栏二级导航项 */
.sticky-nav .submenu>li {
    display: block;
    border-bottom: 1px solid #ffffff;
}

/* 最后一个固定导航栏二级导航项不显示底边框 */
.sticky-nav .submenu>li:last-child {
    border-bottom: none;
}

/* 固定导航栏二级导航链接样式 */
.sticky-nav .submenu>li>a {
    display: block;
    padding: 10px 32px;
    line-height: 1.4;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    border-right: none;
    white-space: nowrap;
    text-align: center;
}

/* 固定导航栏二级导航 hover 高亮状态 */
.sticky-nav .submenu>li>a:hover {
    background-color: #a01330;
    color: #ffff00;
    text-decoration: none;
}

/* 固定导航栏中的搜索框样式复用原有样式 */
.sticky-nav .menu-search {
    position: relative;
    margin-right: 0;
}

/* ========================
   移动端响应式适配（手机等小屏幕）
   - 断点：768px 及以下
   ======================== */
@media (max-width: 768px) {

    /* 固定导航栏内层容器：调整布局，优先显示导航 */
    .sticky-header-inner {
        padding: 0 10px;
        height: auto;
        min-height: 50px;
        column-gap: 12px; /* 减小minilogo和右侧导航的间距 */
    }

    /* 固定导航栏右侧导航区域：在手机端让文字整体在横向上居中 */
    .sticky-nav {
        gap: 0;
        flex: 0 1 auto;
        margin: 0 auto; /* 让导航文字块在可用宽度内居中 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 隐藏搜索框，优先保证导航字体显示 */
    .sticky-nav .menu-search {
        display: none;
    }

    /* 固定导航栏一级导航链接：调整内边距和字体大小 */
    .sticky-nav>ul>li>a {
        padding: 0 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* 固定导航栏左侧 LOGO：缩小字体 */
    .sticky-logo {
        font-size: 16px;
        margin-right: 0; /* 移除右边距，由column-gap控制间距 */
        flex-shrink: 0;
    }
}

/* ========================
   超小屏幕适配（手机竖屏）
   - 断点：480px 及以下
   ======================== */
@media (max-width: 480px) {

    /* 固定导航栏一级导航链接：进一步减小内边距和字体 */
    .sticky-nav>ul>li>a {
        padding: 0 8px;
        font-size: 11px;
    }

    /* 固定导航栏左侧 LOGO：进一步缩小 */
    .sticky-logo {
        font-size: 14px;
        margin-right: 0; /* 移除右边距，由column-gap控制间距 */
    }
}



/* ========================
   绉诲姩绔搷搴斿紡閫傞厤锛堟墜鏈虹瓑灏忓睆骞曪級
   - 鏂偣锛?68px 鍙婁互涓?   ======================== */

/* ========================
   瓒呭皬灞忓箷閫傞厤锛堟墜鏈虹珫灞忥級
   - 鏂偣锛?80px 鍙婁互涓?   ======================== */
@media (max-width: 480px) {

    /* 鍥哄畾瀵艰埅鏍忎竴绾у鑸摼鎺ワ細杩涗竴姝ュ噺灏忓唴杈硅窛鍜屽瓧浣?*/
    .sticky-nav>ul>li>a {
        padding: 0 8px;
        font-size: 11px;
    }

    /* 鍥哄畾瀵艰埅鏍忓乏渚?LOGO锛氳繘涓€姝ョ缉灏?*/
    .sticky-logo {
        font-size: 14px;
        margin-right: 8px;
    }
}