/* ============================================================================
 * 站点顶栏样式(从原 index.html 内联样式抽出,保持"以前的风格和 logo")
 * logo 走 .nav-logo 背景图;暗色经 body.dark 切换为 logo_dark.png
 * ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; }
ul, ol, li { list-style: none; }

.header {
  position: fixed; top: 0; left: 0; z-index: 10000;
  width: 100%; height: 60px;
  background: rgba(255, 255, 255, 0.6); padding: 0 47px;
  transition: height 0.3s; overflow: hidden;
}
.header.open { height: 140px; background: white; }
.header-nav { height: 60px; }
.box-shadow { box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15); }

.nav-logo {
  float: left; width: 100px; height: 100%; line-height: 60px;
  background: url("../imgs/logo.png"); background-repeat: no-repeat;
  background-size: 100px 26px; background-position: center center;
}
.dark .nav-logo { background-image: url('../imgs/logo_dark.png'); background-size: 81px 19px; }
.nav-logo img { width: 100%; vertical-align: middle; background-size: 100% 100%; }

.nav-menu { max-width: calc(100% - 377px); min-width: 200px; height: 60px; overflow: hidden; float: left; }
.nav-menu .sub-menu { display: flex; flex: 1; justify-content: center; align-items: center; overflow: hidden; }
.nav-menu .sub-menu-item { padding: 0 20px; height: 60px; line-height: 60px; cursor: pointer; }
.nav-menu .sub-menu .sub-menu-item a { display: inline-block; color: #484d63; transition: color .18s; }
/* 展平后的顶栏直达入口 hover 高亮（与 frontend_1 一致）。 */
.nav-menu .sub-menu .sub-menu-item a:hover { color: #189ca9; }
.nav-menu .sub-menu-item:hover .sub-menu-item-sub,
.nav-menu .sub-menu-item:focus-within .sub-menu-item-sub,
.nav-menu .sub-menu-item.sub-open .sub-menu-item-sub { display: flex; }

.sub-menu-item a>.icon {
  display: inline-block; width: 39px; height: 39px; vertical-align: middle;
  background: rgba(24, 156, 169, 0.6); border-radius: 4px;
  background-size: 25px; background-position: center center; background-repeat: no-repeat;
}
.dark .sub-menu-item a>.icon { background-color: #F05A27; }
.sub-menu-item a>.explor { background-image: url("../imgs/explor.png"); }
.sub-menu-item a>.gloss { background-image: url("../imgs/gloss.png"); }
.sub-menu-item a>.report { background-image: url("../imgs/report.png"); }
.sub-menu-item a>.download { background-image: url("../imgs/cloud-download.png"); }
.sub-menu-item a>.tibet_plateau { background-image: url("../imgs/tibet_plateau.png"); background-size: 32px; }
.sub-menu-item a>.biodiversity { background-image: url("../imgs/biodiversity.png"); }
.sub-menu-item a>.people { background-image: url("../imgs/people.png"); }
.sub-menu-item a>.funding { background-image: url("../imgs/funding.png"); }
.sub-menu-item a>.faq { background-image: url("../imgs/faq.png"); }

.nav-menu .sub-menu ul { width: 100%; }
.sub-menu-item-sub { position: absolute; left: 0; top: 60px; height: 80px; padding: 0 47px; display: none; align-items: center; flex: 1; }
.sub-menu-item-sub .sub-menu-item { border-radius: 4px; margin-right: 15px; }
.sub-menu-item-sub .sub-menu-item:hover { background: rgba(196, 196, 196, 0.6); }

.nav-search { height: 60px; float: right; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }

.sub-menu-item span { padding: 5px 10px; font-weight: 600; }
.dark .sub-menu-item span { color: #6C6C6C; }
.dark .sub-menu-item-sub .sub-menu-item:hover { background: #0E0E0E; }
.sub-menu-item span i {
  display: inline-block; width: 19px; height: 18px; vertical-align: middle;
  background: url('../imgs/arrow-down.png') no-repeat center; background-size: 16px 10px;
  margin-left: 8px; transition: transform 0.3s;
}
.menu-active>a>span { background-color: rgba(196, 196, 196, 0.6) !important; border-radius: 4px !important; }
.sub-menu-item span i.hover { transform: rotate(180deg); }

/* 暗色:仅改配色,不改版式(布局与亮色一致,避免顶栏右偏) */
.dark .header { background: #232323; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.15); }
.dark .nav-menu .sub-menu .sub-menu-item a { color: #c7ccd8; }

/* Hamburger toggle (hidden on wide screens, shown on narrow) */
.nav-hamburger {
  display: none; position: absolute; top: 12px; right: 16px;
  width: 36px; height: 36px; padding: 8px 6px;
  background: transparent; border: none; cursor: pointer;
  flex-direction: column; justify-content: space-between; z-index: 10010;
}
.nav-hamburger .bar {
  display: block; width: 100%; height: 2px; background: #484d63;
  border-radius: 2px; transition: transform 0.3s, opacity 0.3s;
}
.dark .nav-hamburger .bar { background: #c7ccd8; }
.nav-hamburger.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-hamburger.active .bar:nth-child(2) { opacity: 0; }
.nav-hamburger.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Responsive: below 1000px switch to a hamburger-driven stacked menu. */
@media (max-width: 1000px) {
  .header { padding: 0 16px; }
  .nav-hamburger { display: flex; }
  .header:has(.header-menu.mobile-open), .header.open { height: auto; overflow: visible; }
  .header-menu { float: none; width: 100%; display: none; }
  .header-menu.mobile-open { display: block; padding-bottom: 12px; }
  .nav-menu { float: none; width: 100%; max-width: 100%; height: auto; overflow: visible; }
  .nav-menu .sub-menu { flex-direction: column; align-items: stretch; overflow: visible; }
  .nav-menu .sub-menu-item { height: auto; line-height: 2; padding: 8px 12px; }
  .sub-menu-item-sub {
    position: static; height: auto; padding: 4px 0 4px 16px;
    flex-direction: column; align-items: stretch;
  }
  .sub-menu-item-sub .sub-menu-item { margin-right: 0; }
  .nav-search { float: none; width: 100%; justify-content: flex-start; padding: 8px 12px; }
}