/* ============================================================
   header.css — 内容页头部样式（原 default_pc 头部无样式，此处补齐）
   仅由 public/include.html 引入，不影响首页（首页走 template/default）。
   设计：顶部细条 + 主头部（logo / 标语 / 导航），导航在窄屏折叠为汉堡。
   ============================================================ */

/* ---------- 顶部细条 ---------- */
.topDiv {
    background: #f6f8fa;
    border-bottom: 1px solid #e8eaed;
    font-size: 12px;
    color: #666;
}
.topDiv .wal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 6px 12px;
}
.topDiv .fl {
    display: flex;
    align-items: center;
    gap: 6px;
}
.topDiv .fl img { height: 16px; width: auto; }
.topDiv .fr ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.topDiv .fr .li_01 {
    display: flex;
    align-items: center;
}
.topDiv .fr .input1 {
    width: 200px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    padding: 0 8px;
    color: #999;
}
.topDiv .fr .btn1 {
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 3px;
    background: #2f84d7;
    color: #fff;
    cursor: pointer;
}

/* ---------- 主头部 ---------- */
.headDiv {
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    position: relative;
    z-index: 50;
}
.headDiv .wal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 12px;
}
.headDiv .logo {
    display: block;
    flex: 0 0 auto;
}
.headDiv .logo img {
    display: block;
    max-height: 56px;
    width: auto;
}
.headDiv .msg {
    color: #999;
    font-size: 13px;
    margin-left: 4px;
}
.headDiv .msg b { color: #e67e22; }

/* ---------- 导航 ---------- */
.nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}
.nav > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav > ul > li { position: relative; }
.nav > ul > li > a {
    display: block;
    padding: 8px 14px;
    color: #333;
    font-size: 15px;
    white-space: nowrap;
    border-radius: 4px;
    transition: color .2s, background .2s;
}
.nav > ul > li > a:hover {
    color: #4c8fe8;
    background: #f2f7ff;
}

/* ---------- 汉堡开关（窄屏） ---------- */
.nav-toggle-cb { display: none; }
.nav-toggle-label {
    display: none;
    width: 42px;
    height: 36px;
    margin-left: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background: #fff;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: "";
    position: absolute;
    left: 9px;
    width: 24px;
    height: 2px;
    background: #333;
    transition: .25s;
}
.nav-toggle-label span { top: 17px; }
.nav-toggle-label span::before { top: -7px; }
.nav-toggle-label span::after { top: 7px; }

@media (max-width: 768px) {
    .headDiv .wal { padding: 10px 12px; }
    .headDiv .msg { display: none; }

    .nav-toggle-label { display: block; }
    .nav {
        flex-basis: 100%;
        justify-content: flex-start;
    }
    .nav > ul {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 6px;
        border-top: 1px solid #eee;
    }
    .nav > ul > li > a {
        padding: 12px 10px;
        border-bottom: 1px solid #f2f2f2;
    }
    .nav-toggle-cb:checked ~ .nav > ul { display: flex; }

    /* 顶部细条在手机端允许换行，搜索框占满 */
    .topDiv .wal { flex-wrap: wrap; }
    .topDiv .fr { width: 100%; }
    .topDiv .fr .li_01 { width: 100%; }
    .topDiv .fr .input1 { flex: 1 1 auto; width: auto; }
    .topDiv .fr ul { width: 100%; justify-content: space-between; }
}

@media (max-width: 480px) {
    .headDiv .logo img { max-height: 44px; }
    .nav > ul > li > a { font-size: 14px; }
}