/**
 * 站点公用样式（头部导航）
 * 由根目录 header.php 使用；各页面自身的 <style> 在其后加载，可正常覆盖本文件
 *
 * 注意：头部为「贴顶全宽」结构，要求各页面 body 不使用上下左右的 padding，
 *      横向留白与内容宽度统一交由 Bootstrap 的 .container 承担。
 */

:root{
    --line:#e9eef7;
    --text:#28313f;
    --muted:#8792a6;
    --brand:#4a7dff;
    --brand-2:#7aa8ff;
}

/* 头部：贴顶、全宽、纯白 */
.site-head{
    position:relative;
    z-index:30;
    margin-bottom:38px;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.site-head-inner{
    display:flex;
    align-items:center;
    gap:22px;
    min-height:64px;
}

/* Logo：渐变图标 + 文字 */
.site-head .brand{
    display:flex;
    align-items:center;
    gap:9px;
    flex:0 0 auto;
    text-decoration:none;
    white-space:nowrap;
}
.site-head .brand:hover{text-decoration:none}
.site-head .brand-mark{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:#fff;
    background:linear-gradient(135deg,#5b8cff,#3f6bff 58%,#7c5cff);
    box-shadow:0 4px 12px rgba(63,107,255,.30);
}
.site-head .brand-mark svg{
    width:17px;
    height:17px;
    display:block;
}
.site-head .brand-txt{
    display:flex;
    align-items:baseline;
    line-height:1;
}
.site-head .brand-main{
    font-size:19px;
    font-weight:800;
    letter-spacing:.3px;
    color:#1b2430;
}
.site-head .brand-dot{
    font-size:19px;
    font-weight:700;
    color:#ff4626;
    margin:0 2px;
}
.site-head .brand-alt{
    font-size:16.5px;
    font-weight:700;
    color:#12b886;
}

/* 导航：紧贴 Logo 左对齐 */
.site-head .site-nav{
    display:flex;
    align-items:center;
    gap:2px;
    flex:1 1 auto;
    flex-wrap:wrap;
}
.site-head .site-nav a{
    padding:7px 13px;
    border-radius:6px;
    font-size:15px;
    font-weight:400;
    color:#1b2430;
    text-decoration:none;
    white-space:nowrap;
    transition:color .16s;
}
.site-head .site-nav a:hover{
    color:#2265b3;
    text-decoration:none;
}
.site-head .site-nav a.on{
    color:#2265b3;
    font-weight:600;
}

/* 右侧按钮 */
.site-head .site-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    height:32px;
    padding:0 16px;
    border-radius:5px;
    font-size:14px;
    font-weight:600;
    color:#3d3d3d;
    text-decoration:none;
    background:#ffc107;
    transition:background .16s;
}
.site-head .site-cta:hover{
    background:#ffb300;
    color:#3d3d3d;
    text-decoration:none;
}

@media (max-width:767.98px){
    .site-head{margin-bottom:26px}
    .site-head-inner{
        flex-wrap:wrap;
        gap:10px;
        min-height:0;
        padding-top:9px;
        padding-bottom:9px;
    }
    .site-head .brand-mark{
        width:28px;
        height:28px;
        flex:0 0 28px;
        border-radius:8px;
    }
    .site-head .brand-mark svg{width:16px;height:16px}
    .site-head .brand-main,
    .site-head .brand-dot{font-size:17.5px}
    .site-head .brand-alt{font-size:15.5px}
    .site-head .site-cta{
        margin-left:auto;
        height:30px;
        padding:0 13px;
        font-size:13px;
    }
    .site-head .site-nav{
        order:3;
        width:100%;
        flex:1 1 100%;
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding-bottom:2px;
        scrollbar-width:none;
    }
    .site-head .site-nav::-webkit-scrollbar{display:none}
    .site-head .site-nav a{
        padding:5px 10px;
        font-size:13.5px;
    }
}