/* ==========================================================================
   Huatai Theme · Header & Navigation
   桌面：横向导航 + 悬停/键盘下拉
   移动：右侧抽屉 + 手风式子菜单（由 inc/class-huatai-walker-nav-menu.php 输出结构）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页头外壳
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--h-z-sticky);
    min-height: var(--h-header-total);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--h-bg-surface);
    border-block-end: 1px solid var(--h-border-subtle);
    transition: box-shadow var(--h-dur-base) var(--h-ease-standard),
                background-color var(--h-dur-base) var(--h-ease-standard);
}

/* --------------------------------------------------------------------------
   1b. 顶栏（左标语 · 右邮箱）
   -------------------------------------------------------------------------- */
.top-bar {
    display: flex;
    align-items: center;
    min-height: var(--h-topbar-h);
    background: var(--h-color-navy-deep);
    color: var(--h-text-inverse-muted);
    font-size: var(--h-fs-100);
}

.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h-space-sm);
    width: 100%;
    max-width: calc(var(--h-container-max) + (var(--h-container-pad) * 2));
    margin-inline: auto;
    padding-block: var(--h-space-3xs);
    padding-inline: var(--h-container-pad);
}

.top-bar-slogan {
    display: inline-flex;
    align-items: center;
    gap: var(--h-space-2xs);
    font-weight: var(--h-fw-medium);
    letter-spacing: var(--h-tracking-wide);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-bar-email {
    display: inline-flex;
    align-items: center;
    gap: var(--h-space-3xs);
    color: var(--h-text-inverse);
    text-decoration: none;
    white-space: nowrap;
}

.top-bar-email .icon { width: 1em; height: 1em; flex: none; }
.top-bar-email:hover { color: var(--h-color-gold-soft); }

/* 移动端只保留邮箱 */
@media (max-width: 47.99em) {
    .top-bar-slogan { display: none; }
    .top-bar-inner { justify-content: flex-end; }
}

/* 滚动后加阴影 —— 由 JS 切换属性，避免内联 style 硬写颜色 */
.site-header.is-stuck {
    box-shadow: var(--h-shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h-space-md);
    width: 100%;
    min-height: var(--h-header-h);
    max-width: calc(var(--h-container-max) + (var(--h-container-pad) * 2));
    margin-inline: auto;
    padding-inline: var(--h-container-pad);
}

@media (min-width: 62em) {
    :root {
        --h-header-total: calc(var(--h-header-h-lg) + var(--h-topbar-h));
    }
    .site-header { min-height: var(--h-header-total); }
    .header-inner { min-height: var(--h-header-h-lg); }
}

/* --------------------------------------------------------------------------
   2. 品牌区
   -------------------------------------------------------------------------- */
.brand {
    display: flex;
    align-items: center;
    gap: var(--h-space-2xs);
    /* 允许品牌区在窄屏收缩，防止长文字把菜单按钮挤出视口 */
    flex: 0 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

/* 长版品牌文字在移动端隐藏，仅保留图片 logo，避免顶出菜单按钮 */
.brand-text {
    min-width: 0;
    max-width: 14rem;
}

@media (max-width: 61.99em) {
    .brand-text { display: none; }
}

.brand-logo-img {
    width: auto;
    /* 高度自适应，宽度用 clamp 收敛，窄屏不会被 logo 撑开 */
    height: clamp(34px, 7vw, 52px);
    max-width: min(52vw, 220px);
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-name {
    font-size: var(--h-fs-400);
    font-weight: var(--h-fw-bold);
    line-height: 1.15;
    color: var(--h-text-strong);
    letter-spacing: var(--h-tracking-tight);
}

.brand-tagline {
    font-size: var(--h-fs-100);
    font-weight: var(--h-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-caps);
    color: var(--h-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 47.99em) {
    .brand-tagline { display: none; }
}

.brand-logo {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--h-radius-md);
    background: linear-gradient(135deg, var(--h-color-brand), var(--h-color-gold));
    color: #fff;
    font-weight: var(--h-fw-bold);
    font-size: var(--h-fs-400);
}

.brand:hover .brand-logo-img { opacity: 0.92; }

/* --------------------------------------------------------------------------
   3. 桌面导航
   -------------------------------------------------------------------------- */
.main-nav {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--h-space-2xs) var(--h-space-xs);
    border-radius: var(--h-radius-sm);
    font-size: var(--h-fs-300);
    font-weight: var(--h-fw-medium);
    line-height: 1.4;
    color: var(--h-text-body);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--h-transition);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--h-color-brand-strong);
    background: var(--h-color-brand-wash);
}

/* 当前菜单项 / 当前项的祖先 */
.nav-item.current-menu-item > .nav-link,
.nav-item.current-menu-ancestor > .nav-link,
.nav-item.current-menu-parent > .nav-link,
.nav-link.active {
    color: var(--h-color-brand-strong);
    font-weight: var(--h-fw-semibold);
}

.nav-item.current-menu-item > .nav-link::after {
    content: "";
    position: absolute;
    inset-inline: var(--h-space-xs);
    inset-block-end: -2px;
    height: 2px;
    border-radius: var(--h-radius-pill);
    background: var(--h-color-brand);
}

/* 箭头 */
.nav-link .arrow {
    width: 14px;
    height: 14px;
    flex: none;
    transition: rotate var(--h-dur-base) var(--h-ease-standard);
}

.nav-item:hover > .nav-link .arrow,
.nav-item:focus-within > .nav-link .arrow,
.nav-item.is-open > .nav-link .arrow {
    rotate: 180deg;
}

/* --- 子菜单（Walker 输出为 ul.dropdown） --- */
.dropdown {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: var(--h-z-overlay);
    min-width: min(300px, 88vw);
    max-width: min(360px, 90vw);
    padding-block: var(--h-space-2xs);
    margin-block-start: var(--h-space-2xs);
    background: var(--h-bg-surface);
    border: 1px solid var(--h-border-subtle);
    border-radius: var(--h-radius-md);
    box-shadow: var(--h-shadow-lg);
    opacity: 0;
    visibility: hidden;
    translate: 0 -6px;
    transition: opacity var(--h-dur-base) var(--h-ease-standard),
                translate var(--h-dur-base) var(--h-ease-out),
                visibility var(--h-dur-base);
}

/* 小三角（纯装饰，屏幕阅读器忽略） */
.dropdown::before {
    content: "";
    position: absolute;
    inset-block-start: -5px;
    inset-inline-start: 22px;
    width: 10px;
    height: 10px;
    rotate: 45deg;
    background: var(--h-bg-surface);
    border-block-start: 1px solid var(--h-border-subtle);
    border-inline-start: 1px solid var(--h-border-subtle);
}

/* 最后一个顶级菜单的下拉向右对齐，避免超出视口右边缘 */
.nav-list > .nav-item:nth-last-child(-n + 2) .dropdown {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.nav-list > .nav-item:nth-last-child(-n + 2) .dropdown::before {
    inset-inline-start: auto;
    inset-inline-end: 22px;
}

.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown,
.nav-item.is-open > .dropdown {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
}

.dropdown-link {
    display: block;
    padding: var(--h-space-2xs) var(--h-space-sm);
    font-size: var(--h-fs-200);
    line-height: 1.45;
    color: var(--h-text-body);
    text-decoration: none;
    border-inline-start: 2px solid transparent;
    transition: var(--h-transition);
}

.dropdown-link:hover,
.dropdown-link:focus-visible {
    color: var(--h-color-brand-strong);
    background: var(--h-color-brand-wash);
    border-inline-start-color: var(--h-color-brand);
}

.dropdown-link:last-child { border-block-end: 0; }

.dropdown-header {
    padding: var(--h-space-2xs) var(--h-space-sm);
    font-size: var(--h-fs-100);
    font-weight: var(--h-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--h-tracking-caps);
    color: var(--h-text-muted);
}

.dropdown-divider {
    height: 1px;
    margin-block: var(--h-space-2xs);
    background: var(--h-border-subtle);
}

/* --------------------------------------------------------------------------
   3b. 超级菜单（顶级含子项 → 多列面板，仅桌面）
   实现：桌面端把顶级 .nav-item.has-dropdown 设为 static，使其下拉面板改以
   固定页头 .site-header 为定位基准（top:100% = 页头底部，无缝衔接、不随页
   面滚动漂移）；面板 left:50% + translateX(-50%) 按视口居中、限宽 94vw，无论
   由哪个菜单项触发都不会溢出视口；内部子项按多列网格排布。另用透明 ::after
   “桥接”导航项与面板间的页头留白，避免鼠标下移时菜单提前收起。
   移动端（≤61.99em）仍走原手风琴，不受影响。
   -------------------------------------------------------------------------- */
@media (min-width: 62em) {
    /* 让面板锚定到固定页头，而不是较窄的导航项 */
    .nav-item.has-dropdown { position: static; }

    .nav-item.has-dropdown > .dropdown {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        translate: 0 0;
        width: min(1080px, 94vw);
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: var(--h-space-md) var(--h-space-lg);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: var(--h-space-md) var(--h-space-lg);
        text-align: start;
        box-shadow: var(--h-shadow-xl);
    }

    /* 宽面板下的小三角不自然，隐藏 */
    .nav-item.has-dropdown > .dropdown::before { display: none; }

    /* 透明桥接：填补导航项与面板之间的页头留白，消除悬停断档
       （面板隐藏时 ::after 随父级 visibility:hidden，不会拦截点击） */
    .nav-item.has-dropdown > .dropdown::after {
        content: "";
        position: absolute;
        inset-block-end: 100%;
        inset-inline: 0;
        height: 2.5rem;
    }

    /* 末两项原右对齐逻辑会破坏居中，这里兜底复位为居中面板 */
    .nav-list > .nav-item:nth-last-child(-n + 2).has-dropdown > .dropdown {
        inset-inline-start: 50%;
        inset-inline-end: auto;
        transform: translateX(-50%);
    }

    /* 面板内每一项作为一列 */
    .nav-item.has-dropdown > .dropdown > .nav-item {
        position: static;
        display: block;
        width: auto;
        border: 0;
        align-items: stretch;
    }

    /* 列主链接（自身仍含下级）→ 当作列标题 */
    .nav-item.has-dropdown > .dropdown > .nav-item.has-dropdown > .nav-link {
        padding: var(--h-space-2xs) var(--h-space-2xs);
        margin-block-end: var(--h-space-3xs);
        font-weight: var(--h-fw-semibold);
        color: var(--h-color-brand-strong);
        border-block-end: 1px solid var(--h-border-subtle);
        white-space: normal;
    }

    /* 嵌套下拉（列内叶子）在桌面超级菜单里常驻展开，铺成纯列表 */
    .nav-item.has-dropdown > .dropdown > .nav-item > .dropdown {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .nav-item.has-dropdown > .dropdown > .nav-item > .dropdown .nav-link {
        padding: var(--h-space-3xs) var(--h-space-2xs);
        font-size: var(--h-fs-200);
        font-weight: var(--h-fw-regular);
        color: var(--h-text-body);
        white-space: normal;
    }
}

/* 子菜单展开/收起按钮：桌面隐藏，移动端显示 */
.nav-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--h-radius-xs);
    color: var(--h-text-muted);
}

.nav-toggle-btn svg {
    width: 14px;
    height: 14px;
    transition: rotate var(--h-dur-base) var(--h-ease-standard);
}

.nav-toggle-btn[aria-expanded="true"] svg { rotate: 180deg; }
.nav-toggle-btn:hover { background: var(--h-color-brand-wash); color: var(--h-color-brand); }

/* --------------------------------------------------------------------------
   4. 页头右侧操作区
   -------------------------------------------------------------------------- */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--h-space-2xs);
    flex: none;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--h-space-2xs);
    border: 1px solid var(--h-border-default);
    border-radius: var(--h-radius-sm);
    font-size: var(--h-fs-200);
    font-weight: var(--h-fw-medium);
    color: var(--h-text-body);
}

.lang-switch svg { width: 15px; height: 15px; }
.lang-switch:hover { border-color: var(--h-color-brand); color: var(--h-color-brand); }

/* --------------------------------------------------------------------------
   5. 汉堡按钮 & 遮罩 & 抽屉
   -------------------------------------------------------------------------- */
.menu-toggle {
    display: none;
    position: relative;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--h-radius-sm);
    color: var(--h-text-strong);
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: rotate var(--h-dur-base) var(--h-ease-standard),
                opacity var(--h-dur-fast) linear,
                translate var(--h-dur-base) var(--h-ease-standard);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

.menu-toggle:hover { background: var(--h-color-brand-wash); color: var(--h-color-brand); }

.nav-overlay {
    display: none;
}

.mobile-nav-header {
    display: none;
}

@media (max-width: 61.99em) {
    .menu-toggle { display: flex; }
    /* 移动端隐藏整个操作区，否则空的 .header-actions 占位会把
       menu-toggle 挤离右边界，不再贴右对齐 */
    .header-actions { display: none; }

    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--h-z-overlay);
        background: rgb(15 12 10 / 55%);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--h-dur-base) var(--h-ease-standard),
                    visibility var(--h-dur-base);
    }

    .nav-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* --- 抽屉本体 ---
       关键点：关闭态用 translate 移出屏幕，同时 visibility:hidden，
       既不会产生横向滚动条，也不会被 Tab 键意外聚焦到。 */
    .main-nav {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: var(--h-z-drawer);
        display: flex;
        flex-direction: column;
        width: var(--h-drawer-w);
        max-width: 100%;
        margin: 0;
        background: var(--h-bg-surface);
        box-shadow: var(--h-shadow-xl);
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        translate: 100% 0;
        transition: translate var(--h-dur-slow) var(--h-ease-out),
                    visibility var(--h-dur-slow);
    }

    .main-nav.is-active {
        visibility: visible;
        translate: 0 0;
    }

    .mobile-nav-header {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--h-space-sm);
        width: 100%;
        padding: var(--h-space-sm) var(--h-space-md);
        background: var(--h-bg-surface);
        border-block-end: 1px solid var(--h-border-subtle);
    }

    .mobile-nav-title {
        font-size: var(--h-fs-400);
        font-weight: var(--h-fw-bold);
        color: var(--h-text-strong);
    }

    .mobile-nav-close {
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        flex: none;
        border-radius: var(--h-radius-pill);
        color: var(--h-text-muted);
        transition: var(--h-transition);
    }

    .mobile-nav-close svg { width: 20px; height: 20px; }
    .mobile-nav-close:hover { background: var(--h-color-brand-wash); color: var(--h-color-brand); }

    .nav-list {
        display: block;
        width: 100%;
        padding-block: var(--h-space-2xs);
    }

    .nav-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        border-block-end: 1px solid var(--h-border-subtle);
    }

    .nav-item:last-child { border-block-end: 0; }

    .nav-link {
        flex: 1 1 auto;
        min-width: 0;
        padding: var(--h-space-sm) var(--h-space-md);
        border-radius: 0;
        font-size: var(--h-fs-400);
        white-space: normal;
    }

    .nav-toggle-btn { display: inline-flex; margin-inline-end: var(--h-space-xs); }

    .nav-item.current-menu-item > .nav-link::after { display: none; }

    .nav-item.current-menu-item > .nav-link {
        box-shadow: inset 3px 0 0 var(--h-color-brand);
        background: var(--h-color-brand-wash);
    }

    /* 手风式子菜单 */
    .dropdown {
        position: static;
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--h-bg-surface-alt);
        opacity: 1;
        visibility: visible;
        translate: none;
        display: none;
    }

    .dropdown::before { display: none; }

    .dropdown.is-open { display: block; }

    .dropdown-link {
        padding: var(--h-space-xs) var(--h-space-md) var(--h-space-xs) var(--h-space-lg);
        font-size: var(--h-fs-300);
        border-inline-start: 0;
        border-block-end: 1px solid var(--h-border-subtle);
    }

    .dropdown-link:last-child { border-block-end: 0; }
}

/* ≥ 992px 时保证主导航与 Logo 之间有呼吸 */
@media (min-width: 62em) {
    .main-nav { margin-inline-end: var(--h-space-2xs); }
    .header-actions { margin-inline-start: var(--h-space-sm); }
}

/* 移动端抽屉：锁定横向溢出并预留滚动条槽位，
   展开二级菜单出现纵向滚动条时不再导致整列左移 */
@media (max-width: 61.99em) {
    .main-nav {
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }
}

/* 桌面端彻底关掉抽屉相关的两个容器 */
@media (min-width: 62em) {
    .nav-overlay { display: none !important; }
    .mobile-nav-header { display: none !important; }
}

/* --------------------------------------------------------------------------
   6. 抽屉打开时的滚动锁定
   配合 base.css 里的 scrollbar-gutter: stable，锁滚动不会造成宽度跳动。
   -------------------------------------------------------------------------- */
/* 注意：base.css 给 <html> 设了 overflow-x，因此 <body> 的 overflow 不会
   再向上传播到视口。必须直接锁 html，否则抽屉打开时背景依然能滚动。 */
html:has(body.has-open-nav),
html:has(body.has-open-sidebar) {
    overflow: hidden;
}

/* 旧浏览器（不支持 :has()）的降级方案 */
@supports not selector(:has(*)) {
    body.has-open-nav,
    body.has-open-sidebar {
        position: fixed;
        inset-inline: 0;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   7. 表单提交态
   -------------------------------------------------------------------------- */
form.is-submitting {
    opacity: 0.75;
    pointer-events: none;
}

form.is-submitting [type="submit"]::after {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-inline-start: 0.5em;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: h-spin 0.6s linear infinite;
    vertical-align: -1px;
}

@keyframes h-spin {
    to { rotate: 360deg; }
}

/* --------------------------------------------------------------------------
   8. 筛选隐藏态
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }