/* =====================================================================
   绿循集市 · 中文排版基线
   ---------------------------------------------------------------------
   为什么需要这个文件：
     中文没有词间空格，字距过紧会糊成一块、过松又散。Tailwind 默认
     letter-spacing 是 normal，中文长段落读起来偏挤；而页面上原先零散用了
     12 处 tracking-tight（负字距），对中文是反效果。

   规则：
     · 正文给一点点正字距（0.015em），标题再多一点（0.02em）
     · 只设 letter-spacing / 数字特性，不改字号、行高、颜色
     · Tailwind 的 tracking-* 工具类是「类选择器」，优先级高于这里的
       元素选择器，所以个别地方想单独调，照旧写 tracking-xxx 即可覆盖
   ===================================================================== */

body {
  /* 正文基准 14px：没写字号类的元素以前走浏览器默认 16px，
     比设计基准大一号，混在里面就成了"第 7 种字号"。这里定死。 */
  font-size: 14px;
  /* 默认文字色：没写颜色类的元素以前走浏览器默认的纯黑，和全站灰阶不搭 */
  color: #374151;
  letter-spacing: .02em;
}

/* 标题：层级越高的字越大，字距略放宽更稳 */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: .025em;
}

/* 说明文字、标签、按钮这类短文本，稍微再松一点更好认 */
button,
label,
summary,
th {
  letter-spacing: .025em;
}

/* 数字用等宽数字：价格、阅读量、统计数字位数不同时不会忽宽忽窄 */
.tnum,
.price,
[data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 输入框里的占位符也跟正文一致，避免填表时字挤在一起 */
input, textarea, select {
  letter-spacing: .02em;
}


/* ===== 顶部导航 =====
   之前是 text-[17px] font-bold，12 个菜单挤在一起又粗又糊；
   而且当前页额外加了 font-bold + 下划线，点别的菜单时字重和宽度都在变。

   现在：所有菜单用同一套 class，字重固定 500 不变，
   当前页只通过「颜色 + 淡绿药丸底」区分 —— 不换字重就不会有宽度跳动。

   注意：字号写在 CSS 里而不是 Tailwind 的 text-[Npx]，
   否则 sync-type-scale.js 会按全站五级尺度把它改回去。 */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 间距跟着屏幕宽度走：
     1920 宽时原来一个菜单左右各 .7rem，11 个菜单光内边距就吃掉 240px；
     小屏还按这个来，整行就会被挤爆。 */
  padding: .42rem .55rem;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: #374151;
  letter-spacing: .01em;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color .18s ease, background-color .18s ease;
}
/* 屏幕越宽，菜单之间越松 —— 窄屏先保证放得下，宽屏再谈好看 */
@media (min-width: 1280px) { .nav-link { padding: .45rem .68rem; } }
@media (min-width: 1600px) { .nav-link { padding: .5rem .8rem; font-size: 15.5px; } }

.nav-link:hover {
  color: #1b7a3a;
  background-color: #f0f7f2;
}
.nav-link.active {
  color: #1b7a3a;
  font-weight: 500;          /* 故意不加重：加重会让这一项变宽，点菜单时整排都在动 */
  background-color: #e8f5ee;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  left: .55rem;
  right: .55rem;
  bottom: .1rem;
  height: 2px;
  border-radius: 2px;
  background-color: #1b7a3a;
}
/* 「邀请赚钱」是运营入口，刻意做成不同的样式（而不是"不小心不一样"） */
.nav-link.nav-cta {
  color: #c2410c;
  background-color: #fff7ed;
}
.nav-link.nav-cta:hover {
  color: #9a3412;
  background-color: #ffedd5;
}

/* ===== 导航放不下时的兜底 =====
   11 个菜单 + 定位 + 账号 + 发布按钮，在 1366/1440 这种常见宽度上确实吃紧。
   与其让整行被挤换行（页面会变高、更难看），不如让菜单区自己横向滚动。
   滚动条藏起来，鼠标滚轮/触控板照样能滚。 */
.nav-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-scroll::-webkit-scrollbar { display: none; }

/* ===== 账号名截断 =====
   昵称可能有十几个字（「大量回收废弃油脂」这种），直接铺开就把头部顶破了。
   限宽 + 省略号，完整名字放在 title 里，鼠标悬停能看到。 */
.acct-name {
  max-width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* 手机上头部很挤（Logo + 账号 + 定位 + 发布按钮），但**不能把账号名截成一个点** ——
   3.5em 时 390px 的手机上只能看到「大量...」，等于没显示。
   改成：窄屏给 6 个字，超窄屏 5 个字，宁可让头部换行也要让人看清是谁。 */
@media (max-width: 1535px) { .acct-name { max-width: 6em; } }
@media (max-width: 1279px) { .acct-name { max-width: 6em; } }
@media (max-width: 640px)  { .acct-name { max-width: 5em; } }
/* 手机上定位只留图标，把宽度让给账号名 */
@media (max-width: 640px)  { .loc-text { display: none; } }



/* ===== 自定义主题色的兜底 =====
   问题：`deep` 这个颜色**只有 index.html 的 tailwind.config 里定义了**，
   但页脚统一写的是 <footer class="bg-deep text-white">。
   Tailwind 只会生成"配置里有的"类，所以另外 24 个页面 .bg-deep 这个类
   **压根不存在 → 没有背景色 → 白字落在白底上 → 整个页脚看不见**。

   这类 bug 特别难发现：页面能打开、控制台不报错、DOM 也在，
   只是"看起来那里什么都没有"（用户的原话：「这是个啥，我都看不清楚」）。

   修在这里而不是去给 24 个页面各加一份 tailwind 配置：
   一处覆盖全部，以后新增页面也不会再漏。 */
.bg-deep   { background-color: #0d4f26; }
.text-deep { color: #0d4f26; }
.border-deep { border-color: #0d4f26; }



/* ===== 手机端头部：保证放得下 =====
   站点名从「绿循集市」(4 字) 改成「废弃物交易中心」(7 字) 之后，
   22px 粗体 = 154px（原来只要 88px），加上：
     图标 40 + 间距 8 + 定位 80 + 登录 70 + 免费注册 100 + 左右内边距 32 ≈ 524px
   而手机只有 390px —— 最右边的「免费注册」**直接被屏幕切掉**。

   ⚠️ 为什么之前的检查没发现：
     body 没有 overflow-x:hidden，但**被切掉的部分不会产生页面滚动条**，
     document.scrollWidth 依然等于视口宽度。
     所以「scrollWidth 没超」这个判断在这里是**假阴性** ——
     必须去看**元素的右边缘有没有超出视口**。

   改法：窄屏把站点名和按钮都收窄；很窄的屏让「免费注册」让位
        （登录页里有注册入口，手机上少一个按钮不影响注册）。 */
@media (max-width: 767px) {
  /* 站点名：22px -> 17px，7 个字省 35px */
  header .container > a > span:last-child { font-size: 17px; }
  /* 登录 / 注册按钮：内边距和字号都收一点 */
  #navLoginBtn, #navRegisterBtn {
    padding-left: .8rem !important;
    padding-right: .8rem !important;
    font-size: 13px !important;
  }
}
@media (max-width: 480px) {
  /* 很窄的屏：免费注册让位给「登录」（注册入口在登录页里） */
  #navRegisterBtn { display: none !important; }
  header .container > a > span:last-child { font-size: 16px; }
  /* logo 图标也小一点 */
  header .container > a > span:first-child { width: 2.25rem; height: 2.25rem; }
}


/* ===== 手机端头部：登录之后也要放得下 =====
   上一版只按"未登录"算过（登录 + 免费注册），够用；
   但**登录之后**右边是「账号 + 定位 + 发布废弃物」，比未登录还宽：

     图标 36 + 站名 154 + 账号 95 + 定位 60 + 发布废弃物 110 + 间距/内边距 80  ≈ 535px

   手机只有 390px —— **整页被撑宽，页面能左右滑，左边全被切掉**
   （截图里 logo 只剩「交易中心」、「一站式」被切了一半）。

   改法：手机上**只留 logo 图标，藏掉站名**。
   站点名可能是 7 个字（废弃物交易中心），在手机上本来也读不完；
   图标 + 右上角的「发布废弃物」已经能说明这是哪个站。
   选择器用 a:first-child 精确命中 logo，避免误伤别的 a > span。 */
@media (max-width: 640px) {
  header .container > a:first-child > span:last-child { display: none; }
  /* 发布废弃物按钮也收一点 */
  #navPublishBtn {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    font-size: 13px !important;
  }
}