@import url("/assets/css/unified-site-header.css?v=20260723-1");

/*
 * Unified mining navigation for Chinese, English, and Spanish pages.
 * The shared shell keeps each language's mining information architecture and
 * submenu destinations while matching the commercial-power navigation style.
 */
.site-header.mining-nav-prototype {
  --site-header-height: 72px;
  position: sticky;
  background: rgba(0, 24, 63, 0.97);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
}

.site-header.mining-nav-prototype .header-inner {
  display: flex;
  min-height: 72px;
  width: min(calc(100% - clamp(40px, 7vw, 128px)), 1760px);
  max-width: 1760px;
  gap: 0;
}

.site-header.mining-nav-prototype .brand {
  min-width: 178px;
  margin-right: clamp(20px, 2vw, 32px);
  gap: 12px;
}

.site-header.mining-nav-prototype .brand-mark {
  width: 48px;
  height: 42px;
}

.site-header.mining-nav-prototype .brand-copy strong {
  font-size: 18px;
  line-height: 1.1;
}

.site-header.mining-nav-prototype .brand-copy small {
  margin-top: 1px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.site-header.mining-nav-prototype .desktop-nav {
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: clamp(4px, 0.45vw, 7px);
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(12px, 0.72vw, 13px);
  font-weight: 400;
  line-height: 1.55;
}

.site-header.mining-nav-prototype .desktop-nav > .nav-item {
  min-height: 44px;
}

.site-header.mining-nav-prototype .desktop-nav > .nav-link,
.site-header.mining-nav-prototype .desktop-nav > .nav-item > .nav-link {
  position: relative;
  min-height: 0;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.site-header.mining-nav-prototype .desktop-nav > .nav-link:hover,
.site-header.mining-nav-prototype .desktop-nav > .nav-link:focus-visible,
.site-header.mining-nav-prototype .desktop-nav > .nav-item > .nav-link:hover,
.site-header.mining-nav-prototype .desktop-nav > .nav-item > .nav-link:focus-visible,
.site-header.mining-nav-prototype .desktop-nav > .nav-link[aria-current="page"] {
  color: #fff;
  border-bottom-color: #f8b918;
}

.site-header.mining-nav-prototype .business-line-link {
  color: rgba(255, 255, 255, 0.82);
}

.site-header.mining-nav-prototype .has-submenu > .nav-link::after {
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-width: 0 1px 1px 0;
  opacity: 0.64;
}

.site-header.mining-nav-prototype .nav-submenu {
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 24px 54px rgba(4, 28, 64, 0.2);
}

.site-header.mining-nav-prototype .language-control {
  margin-left: 10px;
}

.site-header.mining-nav-prototype .header-actions {
  width: auto;
  margin-left: 10px;
}

.site-header.mining-nav-prototype .header-actions .button {
  width: auto;
  min-width: 96px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
  white-space: nowrap;
}

/* The original mining home compensates for a fixed header. The unified shell
 * is sticky, matching the commercial site, so the extra offset is removed. */
.site-header.mining-nav-prototype + main .hero-home {
  margin-top: 0 !important;
}

.mobile-menu.mining-nav-prototype-mobile nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu.mining-nav-prototype-mobile {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
}

.mobile-menu.mining-nav-prototype-mobile .nav-link {
  font-weight: 400;
}

.mobile-menu.mining-nav-prototype-mobile .business-line-link {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1360px) {
  .site-header.mining-nav-prototype .header-inner {
    width: min(100% - 32px, 1760px);
    gap: 0;
  }

  .site-header.mining-nav-prototype .brand {
    margin-right: auto;
  }

  .site-header.mining-nav-prototype .language-control {
    margin-left: auto;
  }

  .site-header.mining-nav-prototype .mobile-menu-toggle {
    margin-left: 12px;
  }
}