/* ============================================================
   全站导航样式（唯一来源，所有页面共用，勿在页面内重复定义）
   两套外观，用 class 切换：
   1) 默认（滚动变色型）：顶部透明融入页头渐变，滚动后转浅色毛玻璃。
      适用于有 page-head / hero 深色渐变的页面。
   2) .nav--solid（固定深色型）：常驻深绿实底。
      适用于无页头渐变、主体浅色的页面（如分类页），否则白字看不清。
   ============================================================ */

.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--nav-h, 68px);
    display: flex; align-items: center;
    transition: background .3s, box-shadow .3s, color .3s;
}
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    width: min(1200px, 92%); margin: 0 auto; padding: 0 clamp(18px, 3.5vw, 56px);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo img { width: 38px; height: 38px; border-radius: 8px; background: #fff; }
.nav-logo .cn { font-size: 18px; font-weight: 700; }

.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { font-size: 15px; position: relative; padding: 6px 0; }
.nav-links a::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    height: 2px; width: 0; background: currentColor; transition: width .25s;
}
.nav-links a:hover::after { width: 100%; }

/* 滚动变色型：顶部（深色页头上，白字 + 投影保证可识别） */
.nav.top { background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0)); color: #fff; }
.nav.top .nav-logo .cn, .nav.top .nav-links a { text-shadow: 0 2px 8px rgba(0,0,0,.55); }
/* 滚动变色型：滚动后（浅色内容区上，毛玻璃实底 + 深字） */
.nav.scrolled {
    background: rgba(250,246,240,.94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 16px rgba(20,32,19,.10);
    color: var(--ink, #142013);
}
/* 固定深色型 */
.nav.nav--solid {
    background: rgba(20,32,19,.9);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #fff;
}

.nav-toggle { display: none; font-size: 24px; background: none; border: 0; color: inherit; cursor: pointer; }

@media (max-width: 768px) {
    .nav-links {
        display: none; position: absolute; top: var(--nav-h, 68px); left: 0; right: 0;
        flex-direction: column; gap: 0;
        background: rgba(250,246,240,.98);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 8px 20px rgba(20,32,19,.12);
        color: var(--ink, #142013);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 14px 22px; border-bottom: 1px solid #ece4d8; text-shadow: none; }
    .nav-toggle { display: block; }
}