/* ==========================================================================
   页头：滚动/悬浮配色 + 大型下拉面板 + 联系方式 + 语言切换
   ========================================================================== */


/* ---------- 0. 首页首屏顶到页面最上方，页头浮在其上 ---------- */
.home .hero,
.is-home .hero,
main > .page-banner:first-child {
  margin-top: calc(-1 * var(--header-h, 88px));
}

/* ---------- 1. 头部基础配色 ---------- */
.site-header {
  background: rgba(0, 0, 0, .6);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  transition: background-color .3s var(--ease, ease),
              border-color .3s var(--ease, ease),
              box-shadow .3s var(--ease, ease);
}

/* 深色态下的文字 */
.site-header .nav__list > li > a,
.site-header .header-phone,
.site-header .lang-switch__btn,
.site-header .search-toggle,
.site-header .nav-toggle {
  color: #fff;
}

.site-header .nav__list a:hover { color: #7fb4ef; }
.site-header .nav__list a.is-active { color: #7fb4ef; }

/* 悬浮 / 滚动过 600px → 白底 */
.site-header.is-solid,
.site-header.is-hover {
  background: #fff;
  border-bottom-color: var(--c-line, #e5e9f0);
  color: var(--c-title, #10233f);
}

.site-header.is-solid .nav__list > li > a,
.site-header.is-hover  .nav__list > li > a,
.site-header.is-solid .header-phone,
.site-header.is-hover  .header-phone,
.site-header.is-solid .lang-switch__btn,
.site-header.is-hover  .lang-switch__btn,
.site-header.is-solid .search-toggle,
.site-header.is-hover  .search-toggle,
.site-header.is-solid .nav-toggle,
.site-header.is-hover  .nav-toggle {
  color: var(--c-title, #10233f);
}

.site-header.is-solid .nav__list a:hover,
.site-header.is-hover  .nav__list a:hover { color: var(--c-brand-2, #1f6fd0); }

.site-header.is-solid { box-shadow: 0 4px 16px rgba(15, 40, 80, .08); }

/* ---------- 2. 右侧：电话 + 语言 + 搜索 ---------- */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.4em;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: color .2s ease;
}

.header-phone svg { flex: 0 0 auto; }

@media (max-width: 1280px) {
  .header-phone span { display: none; }
  .header-phone { padding: 6px; }
}

/* 语言切换（下拉） */
.lang-switch--dd { position: relative; }

.lang-switch__btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.lang-switch__btn:hover { background: rgba(127, 180, 239, .18); }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: -6px;
  z-index: 80;
  min-width: 132px;
  padding: 6px 0;
  background: #3c3c3c;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.lang-switch--dd.is-open .lang-switch__menu,
.lang-switch--dd:hover .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switch__menu button {
  display: block;
  width: 100%;
  padding: 8px 20px;
  background: none;
  border: 0;
  color: #f2f2f2;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.lang-switch__menu button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lang-switch__menu button.is-active { color: #7fb4ef; font-weight: 600; }

/* ---------- 3. 大型下拉面板 ---------- */
.nav__item--mega { position: static; }

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 70;
  background: #fff;
  box-shadow: 0 18px 40px rgba(12, 40, 78, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .24s var(--ease, ease),
              transform .24s var(--ease, ease),
              visibility .24s var(--ease, ease);
}

.nav__item--mega:hover > .mega,
.nav__item--mega:focus-within > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__inner {
  display: flex;
  gap: 34px;
  padding: 30px 0 34px;
}

/* 左侧分类 */
.mega__cats {
  flex: 0 0 208px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 26px;
  border-right: 1px solid #eef1f5;
}

.mega__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--c-text, #3a4a60);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.mega__cat:hover { background: #f4f8fd; color: var(--c-brand-2, #1f6fd0); }

.mega__cat.is-active {
  background: var(--c-brand, #0b4f9c);
  color: #fff;
  font-weight: 600;
}

.mega__cat-num {
  font-size: 12px;
  opacity: .65;
}

/* 右侧内容区 */
.mega__panes { flex: 1 1 auto; min-width: 0; }

.mega__pane { display: none; }
.mega__pane.is-active { display: block; }

.mega__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

/* 面板内的链接不受主导航样式影响 */
.nav__list .mega a,
.nav__list .mega .mega-card,
.nav__list .mega .hd-sol {
  display: block;
  height: auto;
  font-size: inherit;
  color: var(--c-text, #3a4a60);
  text-align: initial;
}

.mega-card {
  display: block;
  border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.mega-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15, 40, 80, .1); }

.mega-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #f4f6f9;
  border: 1px solid #eef1f5;
  border-radius: 8px;
  overflow: hidden;
}

.mega-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-card__name {
  display: block;
  padding: 10px 2px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-title, #10233f);
  text-align: center;
}

.mega-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

.mega__empty {
  padding: 40px 0;
  color: var(--c-muted, #8494a8);
  font-size: 14px;
  text-align: center;
}

/* ---------- 4. 行业应用面板（整行图文） ---------- */
.mega--solutions .mega__inner { display: block; }

.mega__solgrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
}

.hd-sol { display: block; }

.hd-sol__media {
  display: block;
  aspect-ratio: 4 / 5;
  background: #f4f6f9;
  border-radius: 6px;
  overflow: hidden;
}

.hd-sol__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease, ease);
}

.hd-sol:hover .hd-sol__media img { transform: scale(1.04); }

.hd-sol__name {
  display: block;
  padding-top: 12px;
  font-size: 15px;
  color: var(--c-title, #10233f);
  text-align: center;
  transition: color .2s ease;
}

.hd-sol:hover .hd-sol__name { color: var(--c-brand-2, #1f6fd0); }

/* ---------- 5. 移动端：收起为普通列表 ---------- */
@media (max-width: 1024px) {
  .site-header,
  .site-header.is-solid,
  .site-header.is-hover {
    background: #fff;
    color: var(--c-title, #10233f);
  }

  .site-header .nav__list > li > a,
  .site-header .search-toggle,
  .site-header .nav-toggle,
  .site-header .lang-switch__btn {
    color: var(--c-title, #10233f);
  }

  .mega { display: none !important; }

  .header-phone { display: none; }

  /* 移动端保留语言切换（base.css 默认隐藏） */
  .site-header .lang-switch--dd { display: flex; }
}