/* ============================================================================
   8FO 门户 · 顶部工具条下拉（品牌站群 / 选择区域·语言）
   结构参考华为官网头部范式（www.huawei.com）：
     · 单条细工具条，条目右对齐
     · 「品牌站群 / 选择区域·语言」两个带 ▾ 的下拉入口
     · 区域语言面板为全宽下拉，按 6 大地理分组平铺「国家或地区 - 语言」，
       共 36 项、20 种语言，每项指向真实语言版本页面，当前项高亮
   本样式不新建第二条工具条，而是并入站点原有的 .topbar（深藏青），
   仅替换其中冗余的「中文 | English」文字切换。
   ========================================================================== */

/* --------------------------------------------------- 1. 让 .topbar 成为定位与层级基准 */
.topbar {
  position: relative;
  z-index: 940;            /* 高于 .nav(900)，保证下拉面板盖住主栏 */
}

/* ------------------------------------------------------------------ 2. 触发器 */
.hwbar-item { position: relative; display: flex; align-items: center; }

.hwbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--top-h, 36px);
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;               /* 继承 .topbar 的 rgba(255,255,255,.72) */
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}
.hwbar-link:hover,
.hwbar-item.open > .hwbar-link { color: #fff; }
.hwbar-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .7);
  outline-offset: -2px;
  border-radius: 4px;
}

.hwbar-ico { flex-shrink: 0; opacity: .85; }
.hwbar-arrow { flex-shrink: 0; opacity: .62; transition: transform .2s ease; }
.hwbar-item.open > .hwbar-link .hwbar-arrow { transform: rotate(180deg); }

/* ------------------------------------------------- 3. 下拉层（语言 / 品牌站群） */
.region-panel,
.hwbar-pop {
  position: absolute;
  top: 100%;
  background: #fff;
  color: #6b7280;               /* 面板内恢复浅色主题文字 */
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid #e6e8ec;
  box-shadow: 0 22px 48px -22px rgba(4, 12, 30, .38);
}
.region-panel {
  left: 0;
  right: 0;
  max-height: min(88vh, 900px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hwbar-pop {
  left: auto;
  right: 0;
  width: min(1120px, 94vw);
  border-radius: 0 0 14px 14px;
}
.region-panel[hidden], .hwbar-pop[hidden] { display: none; }

.rp-in,
.hwbar-pop-in-wrap {
  max-width: var(--maxw, 1240px);
  margin: 0 auto;
  padding: 26px 28px 28px;
}

/* --------------------------------------------- 4. 「选择区域 / 语言」面板内容 */
.rp-head { margin-bottom: 20px; }
.rp-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink, #0f172a);
}
.rp-sub { margin: 0; font-size: 12.5px; line-height: 1.7; color: #98a1b0; }
.rp-sub b { color: #384152; font-weight: 800; }
.rp-sub a { color: var(--brand, #1a56db); font-weight: 600; }

.rp-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 30px;
  align-items: start;
}
/* 欧洲条目最多（含瑞士 4 个语言版本），独占两列并在列内再分两栏 */
.rp-col--eu { grid-column: span 2; }
.rp-col--eu .rp-list { columns: 2; column-gap: 26px; }

.rp-col-h {
  margin: 0 0 6px;
  padding-bottom: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink, #0f172a);
  border-bottom: 1px solid #e6e8ec;
}
.rp-col-h span { font-weight: 600; letter-spacing: .02em; color: #a7b0be; }

.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-item { border-bottom: 1px solid #f1f3f7; break-inside: avoid; }
.rp-item > a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #7b8494;
  text-decoration: none;
  transition: color .16s ease;
}
.rp-item > a:hover { color: var(--brand, #1a56db); }
.rp-mark {
  flex-shrink: 0;
  width: 11px;
  color: var(--brand, #1a56db);
  font-weight: 800;
  opacity: 0;
}
.rp-item.on .rp-mark { opacity: 1; }
.rp-region { color: #384152; font-weight: 600; }
.rp-sep { color: #ccd3dd; }
.rp-item.on > a,
.rp-item.on .rp-region,
.rp-item.on .rp-lang { color: var(--ink, #0f172a); font-weight: 700; }

.rp-foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #eef1f6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 34px;
  font-size: 12.5px;
  color: #98a1b0;
}
.rp-foot-l a { color: var(--brand, #1a56db); font-weight: 600; text-decoration: none; }
.rp-foot-l a:hover { text-decoration: underline; }
.rp-qr { display: inline-flex; align-items: center; gap: 10px; }
.rp-qr img {
  width: 52px;
  height: 52px;
  display: block;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
  border: 1px solid #e8ebf0;
}
.rp-qr span { display: inline-flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.rp-qr b { color: #384152; font-weight: 700; font-size: 12.5px; white-space: nowrap; }

/* --------------------------------------------------- 5. 「品牌站群」面板内容 */
.hwbar-pop-in {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px 30px;
}
.hp-col h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink, #0f172a);
}
.hp-col a {
  display: block;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #737d8d;
  text-decoration: none;
  transition: color .16s ease;
}
.hp-col a:hover { color: var(--brand, #1a56db); }
.hwbar-pop-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #eef1f6;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: #98a1b0;
}
.hwbar-pop-foot a { color: var(--brand, #1a56db); font-weight: 600; text-decoration: none; }
.hwbar-pop-foot a:hover { text-decoration: underline; }

/* --------------------------------------------------------- 6. 响应式收敛 */
@media (max-width: 1100px) {
  .rp-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hwbar-pop-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hwbar-pop { width: 94vw; }
  .hwbar-pop-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* 手机上「品牌站群」面板过长，收进 sites.html；工具条只保留语言入口 */
  .hwbar-item--sites { display: none; }
  .topbar-r { gap: 12px; }
  /* 隐藏顶栏左侧的公司全称，避免与右侧入口争宽导致换行 */
  .topbar-l { gap: 12px; overflow: hidden; }
  .topbar-l > span:not(.pill) { display: none; }

  .rp-in, .hwbar-pop-in-wrap { padding: 22px 16px 26px; }
  .rp-head { margin-bottom: 18px; }
  .rp-title { font-size: 19px; }
  /* 分组改为「组标题 + 单列」，整体纵向滚动 */
  .rp-groups { grid-template-columns: 1fr; gap: 20px; }
  .rp-col--eu { grid-column: auto; }
  .rp-col--eu .rp-list { columns: 1; }
  .rp-item > a { padding: 11px 2px; font-size: 13.5px; flex-wrap: wrap; }

  /* 语言面板：限高可滚动，避免整屏被占满 */
  .region-panel { max-height: 78vh; }
  /* 底部联系区：文字与链接占整行，两个二维码并排 */
  .rp-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
  }
  .rp-foot-l { grid-column: 1 / -1; }
  .rp-qr { gap: 8px; }
  .rp-qr img { width: 58px; height: 58px; }

  .hwbar-pop {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    max-height: 78vh;
    overflow-y: auto;
    border-radius: 0;
  }
  .hwbar-pop-in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* 极窄屏：顶栏去掉左侧品牌信息，成为纯功能条（更接近华为移动端做法） */
  .topbar-l { display: none; }
  .topbar .wrap { justify-content: flex-end; }
}
@media (max-width: 420px) {
  .hwbar-txt { font-size: 12px; }
  .topbar-r { gap: 10px; }
  .rp-foot { gap: 12px; }
}