/* ============================================================
   站点顶部导航 · 唯一样式源（nav.css）
   建立时间：2026-09-15（Codex 统一导航）
   ------------------------------------------------------------
   为什么单独抽这个文件（根因记录）：
     1) 导航样式此前同时写在 styles.css 与 my.css 两份里，已发生漂移：
        - .wf-nav .btn-cb（切角登录按钮）只在 my.css 有
        - 汉堡菜单 / 移动端抽屉（.wf-nav-toggle / .wf-mobile-menu）只在 styles.css 有
        结果是「不同页导航不一样」，且改一处另一处不跟着变。
     2) 首页 src/styles/build-guide.css 里有一条全局 body{font-weight:500;line-height:145%}，
        只挂在首页，会继承进导航 → 首页导航比其它页更粗、登录按钮高 1px。
   约定（后续务必遵守）：
     - 全站导航样式只能写在本文件，禁止再往 styles.css / my.css 里写 .wf-nav / .wf-mobile-menu 规则；
     - 导航自带排版（font-weight / line-height 显式声明），页面级 body 排版不得改变导航外观；
     - 由 src/layouts/BaseLayout.astro 统一引入，所有页面自动生效。
   消费方（改本文件前必读）：
     - 主站所有页面：由 src/layouts/BaseLayout.astro 引入；
     - /build 装机应用：pc-build-guide/src/app/layout.tsx 用
       <link rel="stylesheet" href="https://yjjy.club/nav.css"> 远程引用本文件，
       那边已删除本地副本（原副本漂移过：字重 500 / 行高 23.2px / 登录按钮 39px）。
       因此改本文件会**同时**改变 /build 的导航外观；
       /build 的导航项在 pc-build-guide/src/components/site/SiteHeader.tsx，
       口径与主站 src/components/Header.astro 一致：选配 / 交易 / 社区 / 天梯 / 展柜。
   ============================================================ */

/* ---------------- 顶栏容器 ---------------- */
.wf-nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(16px,3vw,48px);height:58px;background:rgba(12,13,15,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.05);transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.wf-nav > *{min-width:0}

/* ---------------- 左侧主导航 ---------------- */
.wf-nav .links{display:flex;gap:clamp(10px,1.6vw,26px);justify-content:flex-start}
.wf-nav .links a{color:#fff;font-family:'Inter',-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;font-size:15px;font-weight:400;line-height:1.6;letter-spacing:.16em;transition:color .2s,background-color .3s ease;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.wf-nav .links a:hover{color:#fff}

/* ---------------- 中间 logo ---------------- */
.wf-nav .logo{display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Inter',-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;font-size:16px;font-weight:400;line-height:1.6;letter-spacing:.3em;color:#fff;white-space:nowrap;text-align:center;text-shadow:0 1px 10px rgba(0,0,0,.55);transition:color .3s ease}
.wf-nav .logo .logo-img{height:28px;width:auto;object-fit:contain;transition:filter .3s ease}

/* ---------------- 右侧操作区 ---------------- */
.wf-nav .actions{display:flex;gap:14px;justify-content:flex-end;align-items:center}
.wf-nav .actions a{color:#fff;font-family:'Inter',-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;font-size:15px;font-weight:400;line-height:1.6;letter-spacing:.14em;text-shadow:0 1px 10px rgba(0,0,0,.5);transition:color .2s,background-color .3s ease}
.wf-nav .actions a:hover{color:#fff}
.wf-nav .btn-line{border:1px solid rgba(255,255,255,.55);padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.06);transition:border-color .3s ease,background-color .3s ease,color .3s ease}
.wf-nav .btn-line:hover{border-color:#fff;color:#fff}

/* ---------------- 登录按钮：双层切角按钮（自带排版，不依赖页面 CSS）---------------- */
.wf-nav .btn-cb{
  --cb-clip: polygon(9.65723px .999985px, calc(100% - 4px) .999985px, calc(100% - 4px) .999985px, calc(100% - 3.432281px) 1.045794373px, calc(100% - 2.893728px) 1.178417824px, calc(100% - 2.391547px) 1.390649251px, calc(100% - 1.932944px) 1.675282552px, calc(100% - 1.525125px) 2.025111625px, calc(100% - 1.175296px) 2.432930368px, calc(100% - .890663px) 2.891532679px, calc(100% - .678432px) 3.393712456px, calc(100% - .545809px) 3.932263597px, calc(100% - .5px) 4.49998px, calc(100% - .5px) calc(100% - 10.1572px), calc(100% - .5px) calc(100% - 10.1572px), calc(100% - .510988px) calc(100% - 9.8800535px), calc(100% - .543624px) calc(100% - 9.606324px), calc(100% - .597416px) calc(100% - 9.3371965px), calc(100% - .671872px) calc(100% - 9.073856px), calc(100% - .7665px) calc(100% - 8.8174875px), calc(100% - .880808px) calc(100% - 8.569276px), calc(100% - 1.014304px) calc(100% - 8.3304065px), calc(100% - 1.166496px) calc(100% - 8.102064px), calc(100% - 1.336892px) calc(100% - 7.8854335px), calc(100% - 1.525px) calc(100% - 7.6817px), calc(100% - 7.182px) calc(100% - 2.0254px), calc(100% - 7.182px) calc(100% - 2.0254px), calc(100% - 7.385652px) calc(100% - 1.8371836px), calc(100% - 7.602216px) calc(100% - 1.6667008px), calc(100% - 7.830504px) calc(100% - 1.5144412px), calc(100% - 8.069328px) calc(100% - 1.3808944px), calc(100% - 8.3175px) calc(100% - 1.26655px), calc(100% - 8.573832px) calc(100% - 1.1718976px), calc(100% - 8.837136px) calc(100% - 1.0974268px), calc(100% - 9.106224px) calc(100% - 1.0436272px), calc(100% - 9.379908px) calc(100% - 1.0109884px), calc(100% - 9.657px) calc(100% - 1px), 4px calc(100% - 1px), 4px calc(100% - 1px), 3.432281px calc(100% - 1.045809px), 2.893728px calc(100% - 1.178432px), 2.391547px calc(100% - 1.390663px), 1.932944px calc(100% - 1.675296px), 1.525125px calc(100% - 2.025125px), 1.175296px calc(100% - 2.432944px), .890663px calc(100% - 2.891547px), .678432px calc(100% - 3.393728px), .545809px calc(100% - 3.932281px), .5px calc(100% - 4.5px), .5px 10.1572px, .5px 10.1572px, .510988741px 9.88004128px, .543628368px 9.60630424px, .597428987px 9.33717256px, .671900704px 9.07382992px, .766553625px 8.81746px, .880897856px 8.56924648px, 1.014443503px 8.33037304px, 1.166700672px 8.10202336px, 1.337179469px 7.88538112px, 1.52539px 7.68163px, 7.18164px 2.02538px, 7.18164px 2.02538px, 7.38539384px 1.8371686px, 7.60203832px 1.666689px, 7.83038988px 1.5144311px, 8.06926496px 1.3808848px, 8.31748px 1.26654px, 8.57385144px 1.1718866px, 8.83719572px 1.0974145px, 9.10632928px 1.0436136px, 9.38006856px 1.0109738px, 9.65723px .999985px);
  display:inline-flex;padding:1px;text-decoration:none;cursor:pointer;background:#fff;clip-path:var(--cb-clip);transition:background .6s ease-in-out;
}
.wf-nav .btn-cb .cb-frm{position:relative;display:block;width:100%;height:100%;z-index:1;background:#111;clip-path:var(--cb-clip)}
.wf-nav .btn-cb .cb-frm::before{content:'';position:absolute;top:0;left:0;width:0;height:100%;background:#fff;z-index:2;transition:all .4s ease-in-out}
.wf-nav .btn-cb:hover .cb-frm::before{width:100%}
.wf-nav .btn-cb .cb-ct{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 16px;color:#fff;font-family:'Inter',-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;font-size:14px;font-weight:600;line-height:1.6;letter-spacing:.02em;white-space:nowrap;transition:color .4s ease-in-out}
.wf-nav .btn-cb:hover{background:#fff}
.wf-nav .btn-cb:hover .cb-ct{color:#111}
.wf-nav .btn-cb .cb-arr{width:10px;height:12px;transition:transform .4s ease-in-out}
.wf-nav .btn-cb:hover .cb-arr{transform:translateX(3px)}

/* ---------------- 浅色导航（预留，当前无页面启用）---------------- */
.wf-nav.light{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(0,0,0,.06)}
.wf-nav.light .links a,.wf-nav.light .actions a,.wf-nav.light .logo{color:#222;text-shadow:none}
.wf-nav.light .links a:hover,.wf-nav.light .actions a:hover{color:#111214}
.wf-nav.light .logo-img{filter:invert(1)}
.wf-nav.light .btn-line{border-color:rgba(17,18,20,.5);background:rgba(17,18,20,.06)}
.wf-nav.light .btn-line:hover{border-color:#111214;color:#111214}

/* ---------------- 移动端汉堡菜单 ---------------- */
.wf-nav-toggle{display:none;background:none;border:0;color:#fff;padding:8px;margin:0 -8px 0 0;cursor:pointer;border-radius:6px;line-height:0}
.wf-nav-toggle svg{width:24px;height:24px}
.wf-nav-toggle:hover{color:#00E5FF}
.wf-nav-toggle.open svg path{d:path("M6 6l12 12M18 6L6 18")}
.wf-mobile-menu{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;background:rgba(12,13,15,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 18px 30px rgba(0,0,0,.35);z-index:1001}
.wf-mobile-menu.open{display:flex}
.wf-mobile-menu a{color:#fff;font-family:'Inter',-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;font-size:15px;font-weight:400;line-height:1.6;letter-spacing:.16em;padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.06);transition:background-color .2s,color .2s}
.wf-mobile-menu a:hover{background:rgba(255,255,255,.06);color:#00E5FF}
.wf-mobile-menu a:last-child{border-bottom:0}

/* ---------------- 移动端断点：隐藏主导航、显示汉堡按钮 ---------------- */
@media (max-width:900px){
  .wf-nav{grid-template-columns:auto auto 1fr}
  .wf-nav .links{display:none}
  .wf-nav-toggle{display:block}
}