/* ============================================================
   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)}

/* --- 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:none;
  font-size:22px;cursor:pointer;
  padding:6px 10px;border-radius:var(--r-md);
  margin-left:auto;
  color:var(--ink-800);
}

/* --- 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}

/* --- Responsive: ≤960px → mobile drawer + compact nav --- */
@media (max-width: 960px){
  .navlinks,.topnav__cta{display:none}
  .hamburger{display:inline-flex}
  .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 */
  }
}