/* =============================================================
 * 站点导航条统一结构样式（全站共享，单一数据源）
 * 由 transform_nav.py 在构建期为每个公开页注入 <nav id="siteNav">。
 * 依赖设计变量：--c-primary / --c-accent / --c-primary-deep
 *   / --c-text / --c-text-2 / --c-text-3 / --c-border / --c-bg-2
 *   / --radius-sm / --radius-md / --c-bg
 * 登录态(.nav-auth)样式在 assets/auth.css，本文件不含。
 * ============================================================= */

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-border);
}
/* 容器:大屏 nav 收拢到 1400px(与首页内容容器同宽,避免 space-between 把菜单/CTA/用户名 拉伸到屏幕两端导致切页水平抖)
   与 .nav-inner 共用 class(由 transform_nav.py 注入),不依赖各页内联 .container 变量。 */
.container.nav-inner{
  max-width:1400px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; gap:24px;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:16px; color:var(--c-text); text-decoration:none;
  white-space:nowrap;
}
.brand-mark{
  width:32px; height:32px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:14px;
}
.brand-mark.brand-mark--img{
  background-image:url('../logo-huachuang.jpg');
  background-size:cover; background-position:50% 50%; background-color:#fff;
  color:transparent; font-size:0;
}

.nav-menu{ display:flex; gap:28px; font-size:14px; color:var(--c-text-2); }
.nav-menu a{ transition:color .2s; text-decoration:none; color:inherit; }
.nav-menu a:hover{ color:var(--c-accent); }
.nav-menu a.active{ color:var(--c-accent); font-weight:600; position:relative; }
.nav-menu a.active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-22px; width:18px; height:2px; background:var(--c-accent); border-radius:1px;
}

.nav-cta{
  font-size:13px; padding:8px 16px; white-space:nowrap;
  border:1px solid var(--c-accent); color:var(--c-accent);
  border-radius:var(--radius-sm); transition:all .2s; text-decoration:none;
}
.nav-cta:hover{ background:var(--c-accent); color:#fff; }

.nav-toggle{
  display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--c-text);
}

/* 中等屏：8 个菜单项缩小间距，避免换行溢出 */
@media (max-width:1100px){
  .nav-menu{ gap:18px; font-size:13.5px; }
  .brand{ font-size:15px; }
}

/* 移动端：汉堡菜单 */
@media (max-width:640px){
  .nav-menu{
    display:none;
    position:absolute; top:64px; left:0; right:0;
    flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--c-border);
    padding:8px 20px; box-shadow:0 8px 20px rgba(0,0,0,.06);
  }
  .nav-menu.is-open{ display:flex; }
  .nav-menu a{ padding:12px 0; border-bottom:1px solid var(--c-border); }
  .nav-menu a:last-child{ border-bottom:none; }
  .nav-menu a.active::after{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* ===== 热门推荐（文章推荐前端板块：实时快报 / 本周热读 / 今日TOP3） ===== */
.recommend-section{margin-top:6px;}
.rec-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.rec-tab{appearance:none;border:1px solid var(--line,#e5e7eb);background:#fff;color:var(--text-2,#555);padding:8px 16px;border-radius:999px;cursor:pointer;font-size:14px;transition:.15s;}
.rec-tab:hover{border-color:var(--c-accent,#EF9F27);color:var(--c-accent,#EF9F27);}
.rec-tab.active{background:var(--c-accent,#EF9F27);border-color:var(--c-accent,#EF9F27);color:#fff;}
.rec-list{display:block;}
.rec-empty{padding:32px;text-align:center;color:var(--text-3,#999);background:var(--bg-soft,#f7f8fa);border-radius:12px;}
.rec-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.rec-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line,#eef0f3);border-radius:12px;padding:14px 18px;transition:.15s;}
.rec-item:hover{box-shadow:0 6px 20px rgba(0,0,0,.06);transform:translateY(-1px);}
.rec-rank{flex:0 0 auto;width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;background:var(--bg-soft,#f2f4f7);color:var(--text-2,#555);}
.rec-item:nth-child(1) .rec-rank{background:#EF9F27;color:#fff;}
.rec-item:nth-child(2) .rec-rank{background:#f0b457;color:#fff;}
.rec-item:nth-child(3) .rec-rank{background:#f3c98a;color:#fff;}
.rec-cover{flex:0 0 auto;width:96px;height:64px;border-radius:8px;background-size:cover;background-position:center;background-color:var(--bg-soft,#f2f4f7);}
.rec-main{flex:1 1 auto;min-width:0;}
.rec-title{font-size:16px;font-weight:700;color:var(--text-1,#1f2937);text-decoration:none;display:block;}
.rec-title:hover{color:var(--c-accent,#EF9F27);}
.rec-summary{margin:4px 0 0;font-size:13px;color:var(--text-3,#888);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rec-meta{margin-top:6px;font-size:12px;color:var(--text-3,#999);}
.rec-meta b{color:var(--c-accent,#EF9F27);}
.rec-pin{color:var(--c-accent,#EF9F27);font-weight:700;}
@media(max-width:640px){
  .rec-item{flex-wrap:wrap;}
  .rec-cover{width:100%;height:140px;}
}

/* ===================== 导航条「🔔 通知」按钮（全站共享） ===================== */
/* 位于「立即咨询」(nav-cta) 右侧，与 nav-cta 视觉协调；登录态无关，位置恒定不随路由变化。 */
.nav-mail{
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; line-height:1; white-space:nowrap;
  padding:7px 14px;
  background:#fff; color:var(--c-text-2);
  border:1px solid var(--c-border); border-radius:var(--radius-sm);
  text-decoration:none; cursor:pointer;
  transition:color .18s ease, background .18s ease, border-color .18s ease, transform .12s ease;
}
.nav-mail:hover{
  color:var(--c-accent); border-color:var(--c-accent);
  background:var(--c-accent-light, #fff7ec);
}
.nav-mail:active{ transform:translateY(1px); }

/* 通知中心未读角标（mail.js 动态注入） */
.nav-mail-badge{
  position:absolute; top:-5px; right:-5px;
  min-width:16px; height:16px; padding:0 4px;
  background:#d93025; color:#fff; border-radius:8px;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
  vertical-align:middle;
}
.nav-mail-badge[hidden]{ display:none; }

/* 中等屏：略缩间距避免与 nav-auth 拥挤 */
@media (max-width:1100px){
  .nav-mail{ padding:6px 12px; font-size:13px; }
}

/* 移动端：nav-cta 收起，通知按钮保留为图标+文字小按钮，紧邻个人中心 */
@media (max-width:640px){
  .nav-mail{ padding:6px 10px; font-size:12px; gap:3px; }
}