/* =====================================================================
   中普达企业站 · 自定义交互样式
   配合 js/main.js 使用，覆盖 Tailwind 工具类无法静态表达的交互态。
   后续迁移 Thymeleaf 时，此文件可整体保留在 static/css/ 下。
   ===================================================================== */

/* ---------- 顶部导航：滚动状态 ----------
   .site-header 默认透明 + 白字（页面顶部多为深色 banner）
   .nav-scrolled 由 js/main.js 在 scrollY > 60 时添加 */
.site-header { color: #ffffff; background-color: transparent; }
.site-header.nav-scrolled {
  background-color: rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
  color: #0f172a;
}
/* 导航链接 hover 颜色随滚动状态变化 */
.site-header:not(.nav-scrolled) .nav-link:hover { color: #67e8f9; } /* cyan-300 */
.site-header.nav-scrolled .nav-link:hover { color: #3b82f6; }      /* blue-500 */
/* 英文副标题颜色随滚动状态变化 */
.site-header:not(.nav-scrolled) .nav-en { color: rgb(255 255 255 / 0.7); }
.site-header.nav-scrolled .nav-en { color: #64748b; }             /* slate-500 */
/* 当前页高亮（静态写入，不随滚动变化） */
.nav-link.active-link { color: #3b82f6; }                         /* blue-500 */

/* ---------- Tab 激活态（产品页 / 招聘页） ----------
   .tab-btn.active 由 js/main.js 在点击时切换 */
.tab-btn.active { background-color: #2563eb; color: #ffffff; }    /* blue-600 */
.tab-btn.active .tab-icon {
  background-color: rgb(255 255 255 / 0.2);
  color: #ffffff;
}

/* ---------- 证书放大 Modal ---------- */
.cert-modal { overflow-y: auto; }