/**
 * nova.aixzd.com 式头部（templates/views/common/header_2.php 专用）
 *
 * 仅在「侧边栏设置 → 启用侧边栏」开启时由 header.php 引入（body.xl-side-nav-on）
 * 几何数值 1:1 实测自 nova.aixzd.com：
 *   头部高度 88px（大屏 4.5833333vw）/ 按钮 48px / 圆角 10px / 字号 14px
 *   搜索按钮 130px / 提交·登录按钮 138px / 容器 gap 20px、左右内边距 15px
 *   断点：1000px（标题显示）、1023.98px（侧边栏隐藏；≤1023.98px 隐藏 nova 头部，
 *         回退为默认 topbar——与 header.php 手机端一致，见文末「移动端回退」区块）
 * 强调色跟随站内 --theme-color（用户选择「跟随本站主题色」方案）
 */

:root {
    /* nova 移动端头部高度：max(13.33333333vw, 50px) */
    --xl2-header-height: max(13.33333333vw, 50px);
    --xl2-accent: var(--theme-color, #409EFF);
    --xl2-accent-soft: var(--theme-color, #409EFF);
}

@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        /* nova 渐变按钮的两个色阶：柔光色 → 主题色 */
        --xl2-accent-soft: color-mix(in srgb, #fff 40%, var(--theme-color, #409EFF));
    }
}

@media (min-width: 750px) {
    :root {
        /* nova 桌面端头部高度：88px 固定，大屏按 4.5833333vw（1920 时恰为 88px）放大 */
        --xl2-header-height: max(88px, 4.5833333vw);
    }
}

/* ========================================
   头部本体：底色与页面背景一致（var(--bg-body)）
   ======================================== */

/* 双写 .site-header 提升特异性（0,3,1），压过 classic 模式磨砂规则
   html[data-theme="dark"] .site-header--classic.site-header--bg-color
   与滚动变色 .site-header--scrolled：同页面底色 + 关闭磨砂与阴影 */
body.xl-side-nav-on .site-header.site-header {
    background: var(--bg-body);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* 透明头部下禁用主题的毛玻璃层，避免出现磨砂条 */
body.xl-side-nav-on .site-header::before {
    display: none;
}

/* 背景图模式的暗色叠加层同样不参与透明头部 */
body.xl-side-nav-on .site-header.site-header::after {
    content: none;
}

/* nova 头部没有第二行导航（菜单由侧边栏承载） */
body.xl-side-nav-on .site-header__bottom {
    display: none;
}

/* ========================================
   移动端回退：桌面显示 nova 头部，≤1023.98px（侧边栏隐藏区间）
   隐藏 nova 头部、显示与 header.php 完全一致的默认 topbar
   ======================================== */

body.xl-side-nav-on .site-header__topbar {
    display: none;
}

@media (max-width: 1023.98px) {
    body.xl-side-nav-on .xl2-container {
        display: none;
    }

    body.xl-side-nav-on .site-header__topbar {
        display: flex;
    }
}

/* 用户菜单挂载槽：节点直接参与 actions 布局，避免空槽产生多余间距 */
.xl2-user-slot-m {
    display: contents;
}

/* ========================================
   容器（复刻 nova: .header .r-container .container）
   与页面主容器 .x-container 同参对齐
   ======================================== */

.xl2-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    max-width: clamp(1570px, 81.77vw, 100%);
    margin: 0 auto;
    padding: 0 15px;
    height: var(--xl2-header-height);
    box-sizing: border-box;
    color: var(--text-primary);
    font-size: 14px;
}

/* ========================================
   通用按钮（复刻 nova: .btn / .btn-content）
   ======================================== */

.xl2-container .xl2-btn {
    display: block;
    border-radius: 10px;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 14px;
    text-decoration: none;
}

/* nova: .btn .btn-content（height 100% / 双居中 / gap .05rem / 省略号） */
.xl2-container .xl2-btn-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-style: normal;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xl2-container .xl2-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    flex-shrink: 0;
}

.xl2-container .xl2-txt {
    font-style: normal;
}

/* ========================================
   站点标题（复刻 nova: header-title，≥1000px 显示）
   ======================================== */

.xl2-title {
    flex-grow: 0;
    flex-shrink: 0;
    display: none;
}

@media (min-width: 1000px) {
    .xl2-title {
        display: block;
    }
}

.xl2-site-title {
    margin: 0;
}

.xl2-title-btn {
    height: 48px;
    line-height: 48px;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
}

.xl2-title-btn .xl2-btn-content {
    color: var(--text-primary);
    padding: 0 16px;
}

.xl2-title-btn .xl2-icon {
    color: var(--xl2-accent);
}

.xl2-title-text {
    display: block;
    max-width: 70px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ========================================
   搜索（复刻 nova: header-search）
   ======================================== */

.xl2-search {
    flex-grow: 1;
    min-width: 0;
}

.xl2-search-form {
    position: relative;
    margin: 0;
}

.xl2-s {
    width: 100%;
    height: 48px;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 10px;
    font-size: 14px;
    line-height: 20px;
    /* nova 右侧内边距 150px 为 130px 搜索按钮 + 20px 间距；
       左侧 55px 原为吉祥物占位，本站无吉祥物改为 16px */
    padding: 14px 150px 14px 16px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.xl2-s:focus {
    border-color: var(--xl2-accent);
    color: var(--text-primary);
}

.xl2-s::placeholder {
    color: var(--text-muted);
}

.xl2-search-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 130px;
    height: 48px;
    border: none;
    border-radius: 0 10px 10px 0;
    /* nova 桌面端：深色文字/图标压在渐变底上（.header-search .search-btn{color:#181a1e}） */
    color: #181a1e;
    background: transparent;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    outline: none;
}

/* nova 渐变动画：300% 底图 + 初始 50% 相位 + hover 平移（400ms） */
.xl2-search-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, var(--xl2-accent-soft), var(--xl2-accent), var(--xl2-accent-soft), var(--xl2-accent));
    background-size: 300% 100%;
    background-position: 50% 0;
    transition: background-position 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    .xl2-search-btn:hover::before {
        background-position: 100% 0;
    }
}

.xl2-search-btn .xl2-btn-content {
    position: relative;
    z-index: 1;
}

/* nova: .header-search .search-btn .icon{margin-right:.42857143em}（叠加 gap 后图标-文字间距 11px） */
.xl2-search-btn .xl2-icon {
    margin-right: 6px;
}

/* ========================================
   提交按钮（复刻 nova: header-btns / product-submit-btn）
   ======================================== */

.xl2-btns {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.xl2-action-btn {
    position: relative;
    width: 138px;
    height: 48px;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
    color: var(--text-secondary);
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* 提交按钮用主题强调色描边（替代 nova 跨皮肤不变的奶油色，随深浅色与主题色自适应） */
.xl2-submit .xl2-action-btn {
    border-color: var(--xl2-accent);
    color: var(--xl2-accent);
}

.xl2-btns .xl2-action-btn:hover,
.xl2-login .xl2-action-btn:hover {
    border-color: var(--xl2-accent);
    color: var(--xl2-accent);
}

.xl2-submit .xl2-subtitle {
    position: absolute;
    right: -1px;
    top: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: 20px;
    background: var(--xl2-accent);
    border-radius: 10px 10px 0 10px;
    color: #fff;
    padding: 0 7px;
    font-style: normal;
}

.xl2-sub-txt {
    font-style: normal;
    font-size: 12px;
    line-height: 1;
}

/* ========================================
   登录 / 用户区
   登录态复用主题 .user-menu（样式与交互见 main.less，与默认头部一致）
   此处仅保留 nova 登录按钮（未登录态）的容器
   ======================================== */

.xl2-login {
    display: flex;
    align-items: center;
}