/* ============================================================
   Shared Topnav — single source of truth across all pages.
   ============================================================
   Spec:
     - Sticky bar, height 76px (logo height auto-fits)
     - 3 nav links (my-requests / messages / help) with active highlight
     - Right cluster: start-sourcing CTA + account-widget slot + lang toggle
     - Mobile (< 960px): navlinks + cta hide, hamburger shows, mobnav drawer
     - Scrolled state: deeper shadow + opaque bg
     - Brand logo path: ../_shared/imgs/logo.png (single transparent PNG)
   ============================================================ */

/* --- Sticky bar --- */
.topnav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--ink-100);
  transition:box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.topnav--scrolled{
  background:rgba(255,255,255,.96);
  border-bottom-color:transparent;
  box-shadow:0 6px 18px rgba(11,18,32,.08), 0 2px 6px rgba(11,18,32,.04);
}

/* --- Inner row --- */
.topnav__inner{
  max-width:1240px;margin:0 auto;
  height:64px;                  /* 2026-09-12: 96→64 紧凑 */
  display:flex;align-items:center;gap:24px;
  padding:0 var(--sp-5);
}

/* --- Brand (logo + sr-only name) --- */
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:var(--text-md);
  color:var(--ink-900);text-decoration:none;
  flex-shrink:0;
  min-width:0;
}
.brand__logo{
  display:block;
  height:32px;                  /* 2026-09-12: 80→32,单图已含文字 */
  width:auto;                   /* keep aspect ratio of the source image */
  max-height:100%;              /* safety: never exceed container height */
  max-width:160px;              /* 2026-09-12: 240→160,横长 3.82:1 logo */
  object-fit:contain;
  object-position:center;
  flex-shrink:0;
  user-select:none;-webkit-user-drag:none;
  transition:height .2s ease;   /* smooth when breakpoint switches size */
}
.brand__name{
  position:absolute;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;  /* sr-only */
}

/* --- Center navlinks --- */
.navlinks{
  display:flex;align-items:center;gap:6px;
  margin-left:var(--sp-2);
}
.navlink{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--r-md);
  color:var(--ink-700);text-decoration:none;
  font-weight:500;font-size:var(--text-sm);
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.navlink:hover{background:var(--ink-50);color:var(--ink-900)}
.navlink.is-active{
  color:var(--brand-700);
  background:var(--brand-50);
}
.navlink__icon{font-size:var(--text-md);line-height:1}
.navlink__badge{
  position:absolute;top:2px;right:2px;
  background:var(--accent-600);color:#fff;
  font-size:10px;font-weight:700;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;
}
/* 兜底：[hidden] 属性必须胜出，否则 display:flex 会强制显示 */
.navlink__badge[hidden]{display:none}

/* --- Right cluster (CTA + account + lang) --- */
.topnav__cta{
  display:flex;align-items:center;gap:10px;
  margin-left:auto;
}

/* --- Lang toggle button --- */
.lang{
  background:transparent;border:1px solid var(--ink-200);
  padding:6px 10px;border-radius:var(--r-md);
  font-weight:600;font-size:var(--text-xs);
  color:var(--ink-700);cursor:pointer;font-family:inherit;
  transition:background .15s ease, border-color .15s ease;
}
.lang:hover{background:var(--ink-50);border-color:var(--ink-300)}

/* --- Mobile language mini-button (CMD-386) ---
   仅 ≤960px 显示；桌面已有 .lang（#langBtn）按钮，此处不许双按钮。
   文案由 topnav.js 按当前语种重写（zh-CN ⇒ EN，其余 ⇒ 中）。 */
.lang-mini{
  display:none;                 /* 桌面隐藏，避免与 .lang 双按钮 */
  align-items:center;justify-content:center;
  height:32px;min-width:32px;padding:0 8px;
  background:transparent;border:1px solid var(--ink-200);border-radius:var(--r-md);
  font-weight:600;font-size:var(--text-xs);color:var(--ink-700);
  cursor:pointer;font-family:inherit;line-height:1;
}
.lang-mini:hover{background:var(--ink-50);border-color:var(--ink-300)}

/* --- Nav-local btn override (so all pages share accent CTA) --- */
/* Pages may use either .btn-accent (landing/help/messages) or .btn--accent (upload BEM).
   This rule pins the visual to whichever class is present, regardless of page CSS. */
/* CMD-160：CTA「开始我的采购 → 搜索货源」同步去黄底改蓝字，字号字重对齐 .navlink。
   配色全部沿用 design-tokens 现有变量，未新增任何十六进制色值。 */
.topnav .btn-accent,
.topnav .btn--accent{
  background:var(--brand-50);color:var(--brand-600);
  box-shadow:var(--shadow-sm);
  padding:10px 18px;border-radius:var(--r-md);
  border:1px solid var(--brand-200);cursor:pointer;
  font-weight:500;font-size:var(--text-sm);font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.topnav .btn-accent:hover,
.topnav .btn--accent:hover{
  background:var(--brand-100);color:var(--brand-700);border-color:var(--brand-300);
  transform:translateY(-1px);
  box-shadow:var(--shadow-brand);
}
.topnav .btn-accent:active,
.topnav .btn--accent:active{transform:translateY(0)}

/* --- Hamburger (mobile only) --- */
.hamburger{
  display:none;
  background:transparent;border:1px solid var(--ink-200);
  font-size:22px;cursor:pointer;line-height:1;
  height:32px;min-width:32px;padding:0 8px;border-radius:var(--r-md);
  margin-left:auto;
  color:var(--ink-800);
}

/* CMD-389：汉堡 open 态（菜单展开期间）浅蓝底 / 描框 / 浮起 —— 纯 CSS 属性选择器。
   组件与 sample 页两套 toggleMobile 都在维护 aria-expanded ⇒ 全站生效，零 JS 改动。 */
.hamburger[aria-expanded="true"]{
  background:var(--brand-50);
  border-color:var(--brand-200);
  box-shadow:var(--shadow-brand);
}

/* --- Mobile drawer --- */
.mobnav{
  display:flex;flex-direction:column;gap:6px;
  padding:12px var(--sp-5) var(--sp-5);
  border-top:1px solid var(--ink-100);
  background:#fff;
}
.mobnav[hidden]{display:none}
.mobnav .navlink{padding:10px 12px}
.mobnav .btn{margin-top:6px}
.mobnav__sep{height:1px;background:var(--ink-100);margin:4px 0}
.mobnav__action{
  display:block;width:100%;text-align:left;padding:10px 12px;
  background:#fff;border:1px solid var(--ink-100);border-radius:var(--r-md);
  font-size:14px;color:var(--ink-800);cursor:pointer;
}
.mobnav__action--danger{color:#c0392b;border-color:#f0c5c0}
/* DEPRECATED（CMD-386）：对应按钮已从 TOPNAV_HTML 移除，此样式留作占位无害，
   但禁止再为任何元素挂 .mobnav__lang 类，否则会复活旧的双语言入口。 */
.mobnav__lang{
  display:block;width:100%;margin-top:6px;padding:10px 12px;background:transparent;
  border:1px dashed var(--ink-200);border-radius:var(--r-md);
  font-size:13px;color:var(--ink-600);cursor:pointer;
}

/* --- Responsive: ≤960px → mobile drawer + compact nav --- */
/* 🟢 CMD-395 加注（2026-10-21，HELP 端）：下面 189 行
   `.navlinks,.topnav__cta{display:none}` **不是遗留未清理，是小屏布局的必要规则，禁止删除**。
   分工说明：≤960px 时，桌面导航链接与 CTA 由本条隐藏；账号/登录/注册/语言等功能
   由 topnav.js 挂载进 .mobnav 抽屉（CMD-374 修复 · BUY-239 修法，HELP-008 已实测有效：
   打开汉堡后 drawerLogin/drawerRegister/.mobnav__lang 均 visible）。
   ⚠️ HELP-008 曾按本条单独误判「移动端没账号入口」——按 CSS 判断会错，
   必须配合汉堡抽屉实测（静态 CSS ≠ 功能有无，主册短板 2「内容对≠环境认」）。 */
@media (max-width: 960px){
  .navlinks,.topnav__cta{display:none}
  .hamburger{display:inline-flex;margin-left:8px}
  .lang-mini{display:inline-flex;margin-left:auto}
  .topnav__inner{
    height:56px;              /* 2026-09-12: 76→56 紧凑 */
    gap:var(--sp-3);
    padding:0 var(--sp-4);
  }
  .brand__logo{
    height:28px;              /* 2026-09-12: 48→28 */
  }
}