/*
 * 顶部导航（全站唯一一套明暗 / 托底逻辑，配合 js/nav.js）
 * - 默认：完全透明，无背景、边框、阴影、模糊
 * - .is-scrolled：极淡托底 + 模糊 + 底部 1px 细线（首页 hero 内不加）
 * - .dark：nav 下方是浅底区块（data-nav-theme="light"），文字和 logo 切深色
 * 各页面不得再单独覆盖 nav 样式。
 */

nav.site-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    height: var(--nav-h);
    padding: 0 var(--nav-px);
    color: var(--nav-fg);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    letter-spacing: var(--tracking-normal);
    background: transparent;
    border-bottom: var(--line-width) solid transparent;
    box-shadow: none;
    transition:
        color var(--dur-slow) var(--ease-out),
        background-color var(--dur-slow) var(--ease-out),
        border-color var(--dur-slow) var(--ease-out),
        backdrop-filter var(--dur-slow) var(--ease-out);
}

nav.site-nav.is-scrolled {
    background-color: var(--nav-scrolled-bg);
    border-bottom-color: var(--nav-line);
    -webkit-backdrop-filter: blur(var(--nav-blur));
    backdrop-filter: blur(var(--nav-blur));
}

nav.site-nav.dark {
    color: var(--nav-fg-inverse);
}

nav.site-nav.dark.is-scrolled {
    background-color: var(--nav-scrolled-bg-inverse);
    border-bottom-color: var(--nav-line-inverse);
}

/* ── Logo ── */

.site-nav .logo {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--nav-logo-h);
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
}

.site-nav .logo img {
    height: 100%;
    width: auto;
    transition: opacity var(--dur-slow) var(--ease-out);
}

.site-nav .logo .logo-dark {
    position: absolute;
    inset: 0 auto 0 0;
    opacity: 0;
}

nav.site-nav.dark .logo-light {
    opacity: 0;
}

nav.site-nav.dark .logo-dark {
    opacity: 1;
}

/* ── 链接 + CTA ── */

.site-nav .nav-panel {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

.site-nav .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.site-nav .nav-links a {
    color: inherit;
    text-decoration: none;
    opacity: var(--opacity-muted);
    transition: opacity var(--dur-fast) var(--ease-out);
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a:focus-visible,
.site-nav .nav-links a[aria-current="page"] {
    opacity: var(--opacity-hover);
}

/* 线框按钮：每屏只留一个蓝色实心按钮（首页是 hero 下载块），导航下载不抢焦点 */
.site-nav .nav-cta {
    display: inline-flex;
    align-items: center;
    height: var(--nav-cta-h);
    padding: 0 var(--space-4);
    border: var(--line-width) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
    border-color: currentColor;
}

nav.site-nav.dark .nav-cta {
    border-color: var(--line-inverse);
}

.site-nav a:focus-visible,
.site-nav button:focus-visible {
    outline: var(--line-width) solid var(--brand-blue);
    outline-offset: var(--space-1);
}

/* ── 菜单按钮（仅移动端显示） ── */

.site-nav .nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--nav-toggle-bar-gap);
    width: var(--nav-toggle-size);
    height: var(--nav-toggle-size);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.site-nav .nav-toggle__bar {
    display: block;
    width: var(--nav-toggle-bar-w);
    height: var(--line-width);
    background-color: currentColor;
    transition: transform var(--dur-base) var(--ease-out);
}

@media (max-width: 768px) {
    nav.site-nav {
        height: var(--nav-h-mobile);
        padding: 0 var(--nav-px-mobile);
    }

    .site-nav .nav-toggle {
        display: inline-flex;
    }

    .site-nav .nav-panel {
        position: absolute;
        inset: var(--nav-h-mobile) 0 auto;
        z-index: var(--z-nav-panel);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-6);
        padding: var(--space-6) var(--nav-px-mobile) var(--space-8);
        background-color: var(--bg-elevated);
        border-bottom: var(--line-width) solid var(--line);
        color: var(--fg);
    }

    .site-nav.is-open .nav-panel {
        display: flex;
    }

    .site-nav .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav .nav-links a {
        padding: var(--space-4) 0;
        border-bottom: var(--line-width) solid var(--line);
        font-size: var(--fs-base);
    }

    .site-nav .nav-cta {
        justify-content: center;
        height: auto;
        padding: var(--space-3) var(--space-4);
    }

    /* 面板展开时 nav 本身也托底，避免和下方内容叠字 */
    nav.site-nav.is-open {
        background-color: var(--bg-elevated);
        color: var(--fg);
    }

    nav.site-nav.is-open .logo-light {
        opacity: 1;
    }

    nav.site-nav.is-open .logo-dark {
        opacity: 0;
    }

    /* 两条线各自移到中线再旋转成 ×：位移 = (间距 + 线宽) / 2 */
    .site-nav.is-open .nav-toggle__bar:first-child {
        transform: translateY(calc((var(--nav-toggle-bar-gap) + var(--line-width)) / 2)) rotate(45deg);
    }

    .site-nav.is-open .nav-toggle__bar:last-child {
        transform: translateY(calc((var(--nav-toggle-bar-gap) + var(--line-width)) / -2)) rotate(-45deg);
    }
}