/* ============================================
   共用顶部横幅样式 - 干净重构，无!important
   ============================================ */

/* 全局变量 - 建筑抗震光伏展（绿色主题） */
:root {
  --primary-green: #2E7D32;
  --primary-dark-green: #1B5E20;
  --accent-yellow: #FFCC00;
  --text-dark: #1A202C;
  --text-gray: #4A5568;
  --text-light: #718096;
  --bg-light: #F7FAFC;
  --bg-white: #FFFFFF;
  --border-color: #E2E8F0;
}

/* 关键渲染 - 顶部横幅立即显示 */
.top-bar,
.navbar {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   PC端样式
   ============================================ */
.top-bar {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border-color);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 30px;
}

.top-bar .container {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* 左侧Logo区域 */
.top-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  padding-top: 14px;
}

.top-logo img {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: none; /* 默认无滤镜，确保logo显示原色 */
}

/* 左侧整体布局 - Logo + 年份 + 展会信息 */
.top-left {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.top-year {
  height: 50px;
  font-size: 50px;
  font-weight: 800;
  color: var(--primary-green);
  line-height: 0.9;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}

.top-year .zero {
  color: var(--accent-yellow);
}

/* 展会信息容器 */
.top-info-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 10px;
}

.top-info-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  white-space: nowrap;
}

.top-info-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: var(--text-gray);
  font-weight: 400;
}

.top-info-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.top-info-item i {
  color: var(--primary-green);
  font-size: 16px;
}

/* 右侧操作区域 */
.top-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-shrink: 0;
}

/* 导航栏 */
.navbar {
  background: transparent;
  border: none;
  position: static;
  z-index: 1000;
  display: block;
}

.navbar .nav-container {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.navbar .nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  justify-content: flex-end;
}

.navbar .nav-menu li {
  position: relative;
  margin-right: 25px;
}

.navbar .nav-menu li:last-child {
  margin-right: 0;
}

/* PC端隐藏移动端专用菜单项 */
.navbar .nav-menu li.mobile-only {
  display: none;
}

/* 金江公司首页 - PC端正常显示 */
.navbar .nav-menu li.nav-back-home-item {
  display: block;
}

/* 金江公司首页 - 图标样式 */
.navbar .nav-menu li.nav-back-home-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  border-radius: 0;
  transition: color 0.3s ease;
}

.navbar .nav-menu li.nav-back-home-item a i {
  font-size: 20px;
  color: var(--primary-green);
  transition: color 0.3s ease;
}

.navbar .nav-menu li.nav-back-home-item a:hover i {
  color: var(--primary-dark-green);
}

/* 统一下划线样式 - 基础 */
.navbar .nav-menu a {
  position: relative;
  color: var(--text-dark);
  text-decoration: none;
  padding: 12px 0;
  display: inline-block;
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  transition: color 0.3s;
}

/* ============================================
   下划线逻辑 - 都用::after伪元素，保持所有参数一致
   ============================================ */

/* 规则1：所有导航都有::after伪元素，默认宽度为0 */
.navbar .nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--header-nav-line, var(--primary-green));
}

/* 规则2：当前页导航(active) - 宽度100%，无动画，也响应CSS变量 */
.navbar .nav-menu a.active::after {
  width: 100%;
  background: var(--header-nav-line, var(--primary-green));
  transition: none;
  -webkit-transition: none;
}

/* 规则3：非当前页导航悬停时 - 宽度100%，有动画 */
.navbar .nav-menu a:not(.active):hover::after {
  width: 100%;
  transition: width 0.3s ease;
  -webkit-transition: width 0.3s ease;
}

/* ============================================ */

/* 登记按钮 */
.top-actions-buttons {
  display: flex;
  gap: 10px;
}

.top-actions-buttons a {
  padding: 10px 22px;
  background: #DC2626;
  color: white;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
  white-space: nowrap;
}

.top-actions-buttons a:hover {
  background: #B91C1C;
  transform: translateY(-2px);
}

/* 移动端菜单按钮 - PC端隐藏 */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-dark);
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
}

.btn-register {
  display: none;
}

/* 隐藏不需要的元素 */
.top-actions-left,
.top-actions-right,
.logo-divider,
.top-logo-img,
.top-logo-text,
.logo-cn,
.logo-meta {
  display: none;
}

/* ============================================
   手机端样式 - 干净重构，无!important
   ============================================ */
@media (max-width: 768px) {
  /* ================================
     基础布局
     ================================ */
  .top-bar {
    height: auto;
    padding: 2px 10px;
    flex-direction: column;
  }

  .top-bar .container {
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 2px;
  }

  /* ================================
     上面一行：Logo + 2026 + 展会信息
     ================================ */
  .top-left {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  /* Logo - 48px固定高度 */
  .top-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    padding-top: 0;
  }

  .top-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none; /* 默认无滤镜，确保logo显示原色 */
  }

  /* 2026 - 32px高度，30px字号 */
  .top-year {
    font-size: 30px;
    height: 32px;
    margin-left: 0;
    padding-top: 0;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
  }

  /* 展会信息容器 - 占满剩余空间 */
  .top-info-container {
    flex: 1;
    margin-left: 0;
    padding-top: 0;
    min-width: 0;
    width: 100%;
  }

  .top-info-title {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }

  .top-info-meta {
    flex-direction: row;
    gap: 6px;
    margin-top: 3px;
    flex-wrap: nowrap;
    width: 100%;
  }

  .top-info-item {
    font-size: 9px;
    white-space: nowrap;
  }

  .top-info-item i {
    font-size: 11px;
    margin-right: 2px;
  }

  .top-info-item i {
    margin-right: 2px;
  }

  /* ================================
     下面一行：按钮 + 菜单按钮
     ================================ */
  .top-actions {
    width: 100%;
    justify-content: space-between;
    margin-top: -10px;
    align-items: center;
    gap: 0;
  }

  .top-actions-buttons {
    gap: 8px;
  }

  .top-actions-buttons a {
    font-size: 12px;
    padding: 2px 14px;
  }

  .mobile-menu-btn {
    display: inline-flex;
    font-size: 22px;
    padding: 6px 12px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--header-text, var(--text-dark));
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  /* 透明状态下的移动端菜单按钮 - 半透明黑底 */
  .top-bar:not(.scrolled) .mobile-menu-btn {
    background: rgba(0, 0, 0, 0.2);
    color: white;
  }

  /* 白底状态下的移动端菜单按钮 - 蓝色底 */
  .top-bar.scrolled .mobile-menu-btn {
    background: var(--primary-green);
    color: white;
  }

  /* ================================
     导航菜单 - 下拉式（在按钮下方）
     ================================ */
  .navbar {
    position: fixed;
    width: 200px;
    max-width: none;
    height: auto;
    background: white;
    z-index: 9999;
    padding: 10px 15px;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    /* top和right由JS动态设置，不在这里设置 */
  }

  .navbar.active {
    display: block;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
  }

  .nav-menu li {
    display: block;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
  }

  .nav-menu li:last-child {
    border-bottom: none;
  }

  .nav-menu li a {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--primary-green);
    padding: 0;
    text-decoration: none;
  }

  /* 金江公司首页 - 移动端显示图标样式 */
  .top-bar .navbar .nav-menu li.nav-back-home-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
  }

  .top-bar .navbar .nav-menu li.nav-back-home-item a i {
    font-size: 22px;
  }

  /* 移动端下拉菜单文字颜色 - 覆盖透明横幅样式（更高优先级） */
  .top-bar .navbar.active .nav-menu li a {
    color: var(--primary-green);
  }

  /* 覆盖云展厅透明横幅的白色文字 */
  .header-transparent .top-bar .navbar.active .nav-menu li a {
    color: var(--primary-green);
  }

  /* 移动端显示移动端专用菜单项 */
  .top-bar .navbar .nav-menu li.mobile-only {
    display: block;
  }

  .top-bar .navbar .nav-menu li.mobile-only a {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .top-bar .navbar .nav-menu li.mobile-only a i {
    font-size: 16px;
  }
}

/* ==================== 云展厅页面透明横幅效果 ==================== */

/* 云展厅页面特殊类 - 透明横幅（默认状态/未滚动） */
.header-transparent .top-bar:not(.scrolled) {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 云展厅透明状态 - 白色logo */
.header-transparent .top-bar:not(.scrolled) .top-logo img {
  filter: brightness(0) invert(1);
}

/* 云展厅透明状态 - 白色文字（只针对未滚动状态） */
.header-transparent .top-bar:not(.scrolled) .top-info-title,
.header-transparent .top-bar:not(.scrolled) .top-info-item,
.header-transparent .top-bar:not(.scrolled) .nav-menu a,
.header-transparent .top-bar:not(.scrolled) .mobile-menu-btn {
  color: white;
  font-weight: 600;
}

/* 云展厅透明状态 - 白色年份 */
.header-transparent .top-bar:not(.scrolled) .top-year {
  color: white;
}

/* 云展厅透明状态 - 白色meta信息 */
.header-transparent .top-bar:not(.scrolled) .top-info-meta {
  color: white;
}

/* 云展厅透明状态下的移动端菜单按钮 - 半透明黑底（和其他页面一致） */
.header-transparent .top-bar:not(.scrolled) .mobile-menu-btn {
  background: rgba(0, 0, 0, 0.2);
  color: white;
}

/* 云展厅透明状态 - 黄色图标 */
.header-transparent .top-bar:not(.scrolled) .top-info-item i {
  color: var(--accent-yellow);
}

/* 云展厅透明状态 - 白色下划线 */
.header-transparent .top-bar:not(.scrolled) .nav-menu a::after {
  background: white;
}

/* 云展厅透明状态 - 返回首页图标白色 */
.header-transparent .top-bar:not(.scrolled) .nav-menu li.nav-back-home-item a i {
  color: white;
}

/* 云展厅透明状态 - 返回按钮白色 */
.header-transparent .top-bar:not(.scrolled) .btn-back-home {
  color: white;
  border-color: white;
}

/* 云展厅透明状态 - 返回按钮悬停效果 */
.header-transparent .top-bar:not(.scrolled) .btn-back-home:hover {
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border-color: white;
}

/* ==================== 云展厅滚动后状态 ==================== */

/* 云展厅滚动后 - 白色背景 */
.header-transparent .top-bar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-bottom-color: var(--border-color);
}

/* 云展厅滚动后 - 恢复原始logo颜色（蓝色） */
.header-transparent .top-bar.scrolled .top-logo img {
  filter: none;
}

/* 云展厅滚动后 - 深色文字 */
.header-transparent .top-bar.scrolled .top-info-title,
.header-transparent .top-bar.scrolled .top-info-item,
.header-transparent .top-bar.scrolled .nav-menu a {
  color: var(--text-dark);
  font-weight: 600;
}

/* 云展厅滚动后 - 蓝色年份 */
.header-transparent .top-bar.scrolled .top-year {
  color: var(--primary-green);
}

/* 云展厅滚动后 - 灰色meta信息 */
.header-transparent .top-bar.scrolled .top-info-meta {
  color: var(--text-gray);
}

/* 云展厅滚动后的移动端菜单按钮 - 蓝色底（和其他页面一致） */
.header-transparent .top-bar.scrolled .mobile-menu-btn {
  background: var(--primary-green);
  color: white;
}

/* 云展厅滚动后 - 蓝色下划线 */
.header-transparent .top-bar.scrolled .nav-menu a::after {
  background: var(--primary-green);
}

/* 云展厅滚动后 - 返回首页图标绿色 */
.header-transparent .top-bar.scrolled .nav-menu li.nav-back-home-item a i {
  color: var(--primary-green);
}

/* 云展厅滚动后 - 蓝色图标 */
.header-transparent .top-bar.scrolled .top-info-item i {
  color: var(--primary-green);
}

/* 云展厅滚动后 - 返回按钮蓝色 */
.header-transparent .top-bar.scrolled .btn-back-home {
  color: var(--primary-green);
  border-color: var(--primary-green);
}

/* 云展厅滚动后 - 返回按钮悬停蓝底白字 */
.header-transparent .top-bar.scrolled .btn-back-home:hover {
  background: var(--primary-green);
  color: white;
}

/* ============================================
   Logo 样式分层管理（无 !important）
   ============================================ */

/* 规则1：默认样式（所有页面）- logo 无滤镜，显示蓝色 */
.top-bar .top-logo img {
  filter: none;
}

/* 规则2：首页透明状态 - logo 白色 */
body.page-home .top-bar:not(.scrolled) .top-logo img,
.page-home .top-bar:not(.scrolled) .top-logo img {
  filter: brightness(0) invert(1);
}

/* 规则2.1：首页透明状态 - 图标白色 */
body.page-home .top-bar:not(.scrolled) .top-info-item i,
.page-home .top-bar:not(.scrolled) .top-info-item i {
  color: white;
}

/* 规则2.2：首页透明状态 - 年份白色 */
body.page-home .top-bar:not(.scrolled) .top-year,
.page-home .top-bar:not(.scrolled) .top-year {
  color: white;
}

/* 规则3：首页白底状态 - logo 蓝色（重置为默认）*/
body.page-home .top-bar.scrolled .top-logo img,
.page-home .top-bar.scrolled .top-logo img {
  filter: none;
}

/* 规则3.1：首页下滑后 - 年份中226变绿色，0保持黄色 */
body.page-home .top-bar.scrolled .top-year .year-num,
.page-home .top-bar.scrolled .top-year .year-num {
  color: var(--primary-green);
}

body.page-home .top-bar.scrolled .top-year .zero,
.page-home .top-bar.scrolled .top-year .zero {
  color: var(--accent-yellow);
}

/* 规则3.2：首页下滑后 - 图标变绿色 */
body.page-home .top-bar.scrolled .top-info-item i,
.page-home .top-bar.scrolled .top-info-item i {
  color: var(--primary-green);
}

/* 规则4：云展厅透明状态 - logo 白色 */
.header-transparent .top-bar:not(.scrolled) .top-logo img {
  filter: brightness(0) invert(1);
}

/* 规则5：云展厅白底状态 - logo 蓝色（重置为默认）*/
.header-transparent .top-bar.scrolled .top-logo img {
  filter: none;
}