/**
 * 20 主题顶栏 #nav20-header 唯一样式源
 * 由 layout.html / layout_old.html 引入；勿在 header.html 再写大块 <style>，避免与 checklist、CMS common 多处重复。
 * @see addons/cms/view/default/20/header.html
 */

/* 仅覆盖主题：蓝底、白字、悬停下拉、下拉样式。自适应交给 Bootstrap */
.nav20-header .navbar.navbar-white { background: #2257a6; border-color: #2257a6; }
.nav20-header .navbar-white .navbar-nav > li > a,
.nav20-header .navbar-white .navbar-brand { color: #fff !important; }
/* logo 适当缩小，不占满导航栏高度 */
.nav20-header .navbar-brand { padding-top: 8px; padding-bottom: 8px; display: flex; align-items: center; }
.nav20-header .navbar-brand img { height: auto !important; max-height: 36px; width: auto; max-width: 220px; object-fit: contain; vertical-align: middle; }
.nav20-header .navbar-white .navbar-nav > li > a:hover,
.nav20-header .navbar-white .navbar-nav > .active > a { color: #FDCF4B !important; background: transparent !important; }
/* 一级菜单悬停展开二级时：背景保持蓝色，仅文字与箭头变金色 */
#nav20-header .navbar-nav > li.dropdown:hover > a,
#nav20-header .navbar-nav > li.dropdown.open > a { background: transparent !important; color: #FDCF4B !important; }
#nav20-header .navbar-nav > li.dropdown:hover .caret,
#nav20-header .navbar-nav > li.dropdown.open .caret { border-top-color: #FDCF4B; }
/* 小屏汉堡按钮：高于常见悬浮层/插件条，避免点击被挡 */
.nav20-header .navbar-header { position: relative; z-index: 1050; }
.nav20-header .navbar-white .navbar-toggle {
    border-color: rgba(255,255,255,0.6); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    position: relative; z-index: 1051;
}
.nav20-header .navbar-white .navbar-toggle .icon-bar { background: #fff; pointer-events: none; }
.nav20-header .navbar-white .caret { border-top-color: #fff; }
/* 一级菜单悬停显示二级：强制覆盖任何 display，PC 端仅悬停、不依赖 Bootstrap 点击 */
#nav20-header .navbar-nav > li.dropdown .dropdown-menu { display: none !important; margin-top: 0; border-top: 1px solid rgba(0,0,0,0.06); }
#nav20-header .navbar-nav > li.dropdown:hover .dropdown-menu,
#nav20-header .navbar-nav > li.dropdown.open .dropdown-menu,
#nav20-header .navbar-nav > li.dropdown .dropdown-menu:hover { display: block !important; visibility: visible !important; opacity: 1 !important; }
#nav20-header .navbar-nav > li.dropdown .dropdown-menu.hidden { display: none !important; }
.nav20-header .navbar-lang-wrap:hover .dropdown-menu,
.nav20-header .navbar-userinfo:hover .dropdown-menu,
.nav20-header .swmultilingual:hover .dropdown-menu { display: block; }
.nav20-header .navbar .dropdown-menu { border: none; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 10px; }
/* 一二级菜单悬停/焦点：文字一律变金色，无灰底 */
#nav20-header .navbar-nav > li > a:hover,
#nav20-header .navbar-nav > li > a:focus,
#nav20-header .navbar-nav > li.dropdown:hover > a,
#nav20-header .navbar-nav > li.dropdown.open > a { color: #FDCF4B !important; background: transparent !important; }
/* 二级下拉项 */
#nav20-header .dropdown-menu > li > a:hover,
#nav20-header .dropdown-menu > li > a:focus,
#nav20-header .navbar-nav > li.dropdown .dropdown-menu > li > a:hover,
#nav20-header .navbar-nav > li.dropdown .dropdown-menu > li > a:focus,
#nav20-header .navbar-nav > li.dropdown .dropdown-menu > li:hover > a,
#nav20-header .navbar .dropdown-menu li a:hover,
#nav20-header .navbar .dropdown-menu li a:focus,
#nav20-header .navbar .dropdown-menu li:hover a { color: #FDCF4B !important; background: transparent !important; background-color: transparent !important; text-decoration: none !important; }
#nav20-header .navbar-nav > li.dropdown .dropdown-menu > li:hover { background: transparent !important; background-color: transparent !important; }
/* 下拉项悬停（与上互补，覆盖 Bootstrap） */
#nav20-header .navbar .dropdown-menu > li > a:hover,
#nav20-header .navbar .dropdown-menu > li > a:focus,
#nav20-header .navbar .dropdown-menu > li:hover > a,
#nav20-header .navbar-nav .dropdown-menu > li > a:hover,
#nav20-header .navbar-nav .dropdown-menu > li > a:focus,
#nav20-header .navbar-nav .dropdown-menu > li:hover > a {
    color: #FDCF4B !important;
    background: transparent !important;
    background-color: transparent !important;
}
#nav20-header .navbar .dropdown-menu > li:hover,
#nav20-header .navbar-nav .dropdown-menu > li:hover {
    background: transparent !important;
    background-color: transparent !important;
}
/* 多语言图标：下拉展开时背景保持蓝色，仅图标变金色 */
.nav20-header .navbar-lang-wrap .dropdown-toggle,
.nav20-header .navbar-lang-wrap.open .dropdown-toggle,
.nav20-header .navbar-lang-wrap.open .dropdown-toggle:hover,
.nav20-header .navbar-lang-wrap.open .dropdown-toggle:focus,
.nav20-header .swmultilingual .dropdown-toggle,
.nav20-header .swmultilingual.open .dropdown-toggle,
.nav20-header .swmultilingual.open .dropdown-toggle:hover,
.nav20-header .swmultilingual.open .dropdown-toggle:focus { background: transparent !important; border-color: transparent !important; }
.nav20-header .navbar-lang-wrap.open .dropdown-toggle i { color: #ae9132 !important; }
.nav20-header .swmultilingual .dropdown-toggle img { opacity: 1; }
.nav20-header .swmultilingual.open .dropdown-toggle img { opacity: 1; filter: brightness(0) saturate(100%) invert(72%) sepia(42%) saturate(500%); }
.nav20-header .nav-contact-trigger i { color: #FDCF4B !important; }
.nav20-header .search-popover-bottom { border-radius: 8px; }
.nav20-header .search-popover-form .input-group .form-control,
.nav20-header .search-popover-form .input-group .input-group-btn .btn { height: 38px; box-sizing: border-box; line-height: 1; }
.nav20-header .search-popover-form .input-group .form-control { border-radius: 4px 0 0 4px; }
.nav20-header .search-popover-form .input-group .input-group-btn .btn { border-radius: 0 4px 4px 0; }
body.nav20-header-fixed .nav20-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 999; box-shadow: 0 2px 12px rgba(0,0,0,0.08); animation: nav20-fixed 0.35s ease-out forwards; }
@keyframes nav20-fixed { from { opacity: 0.92; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
body.nav20-header-fixed #main-content { padding-top: 56px; transition: padding-top 0.3s ease-out; }
.navbar .navbar-collapse .navbar-right { background: #2257a6; }

/* PC：白底下拉内链接深色（不继承顶栏白字）；小屏折叠内仍由下方 max-width:767 覆盖为白字 */
@media (min-width: 768px) {
    #nav20-header .navbar .dropdown-menu > li > a,
    #nav20-header .navbar-nav .dropdown-menu > li > a {
        color: #333 !important;
        background: transparent !important;
    }
}

/* 小屏折叠内：下拉与背景统一蓝色，白字 */
@media (max-width: 767px) {
    /*
     * 与 addons/cms/css/common.css 小屏规则冲突处理：
     * common.css 对 .navbar .navbar-collapse 设 background:#fff，对 > ul.navbar-nav > li 设 #fbfbfb，
     * 顶栏链接为白色 → 白字叠浅白底。用 #nav20-header 提高优先级。
     */
    #nav20-header .navbar .navbar-collapse {
        background: #2257a6 !important;
        background-color: #2257a6 !important;
        border-top-color: rgba(255,255,255,0.2) !important;
    }
    #nav20-header .navbar .navbar-collapse > ul.navbar-nav > li {
        background: transparent !important;
        background-color: transparent !important;
    }
    #nav20-header .navbar-collapse .navbar-nav > li > a,
    #nav20-header .navbar-collapse .navbar-nav.navbar-right > li > a {
        color: #fff !important;
    }
    /* 移动端：右侧工具同一行 + 垂直居中对齐（inline-block 易基线错位；角标/头像与 fa 高度不一致时用 flex 统一） */
    #nav20-header .navbar .navbar-collapse .navbar-nav.navbar-right {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
    }
    #nav20-header .navbar .navbar-collapse .navbar-nav.navbar-right > li {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }
    /* 语言 / 搜索 / 会员：触发器同一高度、图标在盒内居中 */
    #nav20-header .navbar-collapse .navbar-nav.navbar-right > li > a.dropdown-toggle,
    #nav20-header .navbar-collapse .navbar-nav.navbar-right > li > a.nav-user-trigger,
    #nav20-header .navbar-collapse .navbar-nav.navbar-right > li > a.nav-search-trigger,
    #nav20-header .navbar-collapse .navbar-nav.navbar-right > li > a.nav-icon-trigger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    #nav20-header .navbar-collapse .navbar-nav.navbar-right > li > a .fa {
        line-height: 1 !important;
    }
    #nav20-header .navbar-collapse .navbar-nav.navbar-right .swmultilingual .dropdown-toggle img {
        display: block !important;
        max-height: 22px !important;
        width: auto !important;
        margin: 0 auto !important;
    }
    #nav20-header .navbar-collapse .navbar-nav.navbar-right .nav-user-trigger .avatar-img {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
    }
    #nav20-header .navbar-collapse .navbar-nav.navbar-right .nav-user-trigger .avatar-img img {
        display: block !important;
        vertical-align: middle !important;
    }
    /* 插件可能在会员入口挂角标，避免把整行撑乱：相对定位 + 限制偏移 */
    #nav20-header .navbar-collapse .navbar-nav.navbar-right .nav-user-trigger {
        position: relative !important;
    }
    #nav20-header .navbar-collapse .navbar-nav.navbar-right .nav-user-trigger .badge,
    #nav20-header .navbar-collapse .navbar-nav.navbar-right .nav-user-trigger [class*="badge"] {
        position: absolute !important;
        top: 4px !important;
        right: 2px !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }
    #nav20-header .navbar .navbar-collapse .navbar-nav.navbar-right > li:nth-child(4) {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    .nav20-header .navbar-collapse.in { display: block !important; overflow: visible !important; }
    .nav20-header .navbar-collapse .navbar-nav > .active > a,
    .nav20-header .navbar-collapse .navbar-nav > .active > a:hover,
    .nav20-header .navbar-collapse .navbar-nav > .active > a:focus {
        background: transparent !important;
        background-color: transparent !important;
        color: #FDCF4B !important;
    }
    .nav20-header .navbar-collapse .dropdown-menu > li.active > a,
    .nav20-header .navbar-collapse .dropdown-menu > li.active > a:hover,
    .nav20-header .navbar-collapse .dropdown-menu > li.active > a:focus {
        background: transparent !important;
        background-color: transparent !important;
        color: #FDCF4B !important;
    }
    .nav20-header .navbar-collapse .dropdown-menu { background: #1a4290 !important; border: none; }
    .nav20-header .navbar-collapse .dropdown-menu li a { color: #fff !important; }
    .nav20-header .navbar-collapse .dropdown-menu li.active > a { color: #FDCF4B !important; }
    .nav20-header .navbar-collapse .search-popover-bottom,
    .nav20-header .navbar-collapse .navbar-lang-wrap .dropdown-menu,
    .nav20-header .navbar-collapse .swmultilingual .dropdown-menu,
    .nav20-header .navbar-collapse .navbar-userinfo .dropdown-menu { display: none !important; }
}

/* 移动端弹层：搜索 / 语言 / 会员 */
.mobile-search-modal, .mobile-lang-modal, .mobile-user-modal { display: none; }
@media (max-width: 767px) {
    .mobile-search-modal, .mobile-lang-modal, .mobile-user-modal { position: fixed; inset: 0; z-index: 9999; padding: 60px 16px 20px; align-items: flex-start; justify-content: center; box-sizing: border-box; }
    .mobile-search-modal.is-open, .mobile-lang-modal.is-open, .mobile-user-modal.is-open { display: flex !important; }
    .mobile-lang-modal__backdrop, .mobile-user-modal__backdrop, .mobile-search-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
    .mobile-lang-modal__content, .mobile-user-modal__content, .mobile-search-modal__content { position: relative; width: 100%; max-width: 360px; background: #2257a6; border-radius: 10px; padding: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
    .mobile-lang-modal__content a, .mobile-user-modal__content a { display: block; padding: 12px 16px; color: #fff !important; text-decoration: none; border-radius: 6px; }
    .mobile-lang-modal__content a:hover, .mobile-user-modal__content a:hover { background: rgba(255,255,255,0.15); }
    .mobile-user-modal__content ul { list-style: none; margin: 0; padding: 0; }
    #mobile-user-modal .mobile-user-modal__content .dropdown-menu,
    #mobile-user-modal .mobile-user-modal__content .mobile-user-modal__list {
        position: static !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        display: block !important;
        z-index: auto !important;
    }
    #mobile-user-modal .mobile-user-modal__content .dropdown-menu > li,
    #mobile-user-modal .mobile-user-modal__content .mobile-user-modal__list > li {
        margin: 0;
        padding: 0;
        list-style: none;
        background: transparent !important;
    }
    #mobile-user-modal .mobile-user-modal__content .dropdown-menu > li > a,
    #mobile-user-modal .mobile-user-modal__content .mobile-user-modal__list > li > a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 12px 16px !important;
        color: #fff !important;
        text-decoration: none !important;
        border-radius: 6px;
        white-space: normal;
        line-height: 1.4;
    }
    #mobile-user-modal .mobile-user-modal__content .dropdown-menu > li > a:hover,
    #mobile-user-modal .mobile-user-modal__content .mobile-user-modal__list > li > a:hover,
    #mobile-user-modal .mobile-user-modal__content .dropdown-menu > li > a:focus,
    #mobile-user-modal .mobile-user-modal__content .mobile-user-modal__list > li > a:focus {
        background: rgba(255,255,255,0.12) !important;
        color: #fff !important;
    }
    .mobile-search-modal__input-wrap { display: flex; width: 100%; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); }
    .mobile-search-modal__input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: none; background: transparent; color: #fff; font-size: 16px; }
    .mobile-search-modal__input::placeholder { color: rgba(255,255,255,0.6); }
    .mobile-search-modal__btn { width: 48px; height: 44px; border: none; background: rgba(255,255,255,0.2); color: #fff; cursor: pointer; }
}