/* ==========================================================================
   szwcw 多语言补丁样式
   目标：外语 / 繁体站的「首（信息条 + 头部）」与「尾（页脚）」
        与简体中文站视觉完全对齐。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 站点容器宽度对齐
   中文站由 site-optimize.js 运行时给 <html> 加 .opt-width -> --container:1240px；
   外语站无该补丁，默认 --container:1760px，导致首尾比中文宽约 85px。
   这里用 html:root（特异性 0,1,1）确保压过 styles.css / homepage.css 的 :root。
   -------------------------------------------------------------------------- */
html:root { --container: 1240px; }

/* 头部容器与中文站一致放宽到 1440 上限。
   中文站 site-optimize.css:57 对 .site-header / .topbar 的 .container 单独放宽，
   因为 8 个导航项 + 品牌 + 功能按钮约需 1300px，1240 放不下会截断。 */
html .site-header .container,
html .tc-header .container,
html .topbar .container {
  width: min(calc(100% - (var(--page-gutter, 24px) * 2)), 1440px) !important;
}

/* --------------------------------------------------------------------------
   2. 头部版式：与中文站 opt-header 等效的三栏紧凑布局
   背景：中文站头部 61px；外语站因译文长 + brand/nav 未压缩，
         site-nav 被挤成多行（169px）。本组参数经 21 个语种实测，
         全部收敛到 56px（与中文 61px 视觉一致），且无横向溢出。
   -------------------------------------------------------------------------- */
html .nav-wrap {
  padding: 8px 0 !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
/* 「品牌 · 导航 · 功能」三栏，导航居中 */
html .brand { order: 1; padding: 4px 8px 4px 4px !important; gap: 8px !important; }
html .site-nav {
  order: 2; flex: 1 1 auto !important; min-width: 0 !important;
  flex-wrap: wrap !important; justify-content: center !important;
  column-gap: 3px !important; row-gap: 2px !important;
  border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important;
}
html .nav-actions { order: 3; gap: 6px !important; flex: 0 0 auto !important; margin-left: auto !important; }
html .brand-mark { width: 44px !important; height: auto !important; }
/* 232px 经 21 语种实测为最优：15 个语种品牌中英文名可完整显示，且全部保持单行 56px。
   仅 fr 需回落到 200px、ru/de/pl/tr/pt/hu 回落到 140px（见下方专项），
   否则导航会让位换行。 */
html .brand-copy { gap: 2px !important; max-width: 232px !important; overflow: hidden !important; }
html .brand-name-cn {
  font-size: 13.5px !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important;
}
html .brand-name-en {
  font-size: 9px !important; line-height: 1.05 !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important;
  display: block !important;
}
html .site-nav a {
  padding: 4px 4px !important; min-height: 34px !important;
  font-size: 12px !important; white-space: nowrap !important;
}
html .search-trigger {
  max-width: 92px !important; font-size: 11px !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
html .language-switcher { max-width: 92px !important; }
html .language-switcher select { max-width: 64px !important; }
html .nav-hotline,
html .nav-wechat,
html .nav-whatsapp {
  width: 36px !important; height: 36px !important;
  min-width: 36px !important; min-height: 36px !important;
}
html .nav-hotline img { width: 20px !important; height: auto !important; }

/* 超长语种专项：俄语 / 德语 / 波兰语 / 土耳其语 / 葡语 / 匈牙利语
   这些语种的导航词长度约为中文的 2–3 倍，需要再收一档才能保持单行。 */
html[lang="ru"] .site-nav a, html[lang="de"] .site-nav a, html[lang="pl"] .site-nav a,
html[lang="tr"] .site-nav a, html[lang="pt"] .site-nav a, html[lang="hu"] .site-nav a {
  font-size: 11px !important; padding: 4px 2px !important;
}
html[lang="ru"] .site-nav, html[lang="de"] .site-nav, html[lang="pl"] .site-nav,
html[lang="tr"] .site-nav, html[lang="pt"] .site-nav, html[lang="hu"] .site-nav { column-gap: 1px !important; }
html[lang="ru"] .brand-copy, html[lang="de"] .brand-copy, html[lang="pl"] .brand-copy,
html[lang="tr"] .brand-copy, html[lang="pt"] .brand-copy, html[lang="hu"] .brand-copy { max-width: 140px !important; }
/* 法语导航较长，品牌区需比全局 232px 略收 */
html[lang="fr"] .brand-copy { max-width: 200px !important; }
html[lang="ru"] .search-trigger, html[lang="de"] .search-trigger, html[lang="pl"] .search-trigger,
html[lang="tr"] .search-trigger, html[lang="pt"] .search-trigger, html[lang="hu"] .search-trigger { max-width: 72px !important; }
html[lang="ru"] .language-switcher, html[lang="de"] .language-switcher, html[lang="pl"] .language-switcher,
html[lang="tr"] .language-switcher, html[lang="pt"] .language-switcher, html[lang="hu"] .language-switcher { max-width: 78px !important; }
html[lang="ru"] .language-switcher select, html[lang="de"] .language-switcher select, html[lang="pl"] .language-switcher select,
html[lang="tr"] .language-switcher select, html[lang="pt"] .language-switcher select, html[lang="hu"] .language-switcher select { max-width: 52px !important; }

/* 滚动后二次收缩，与中文站一致 */
html.is-scrolled .nav-wrap { padding: 4px 0 !important; }
html.is-scrolled .site-nav a { min-height: 32px !important; }

/* 移动端：压到单行，nav-actions 收窄到与中文站一致 */
@media (max-width: 900px) {
  html .nav-wrap { flex-wrap: nowrap !important; padding: 5px 0 !important; gap: 8px !important; }
  html .brand { padding: 2px 8px 2px 2px !important; gap: 7px !important; border-radius: 12px !important; }
  html .brand-mark { width: 42px !important; }
  html .brand-name-cn { font-size: 14.5px !important; text-shadow: none !important; }
  html .brand-name-en { font-size: 9px !important; letter-spacing: 0 !important; }
  html .brand-copy { padding-left: 8px !important; }
  html .site-header .nav-actions,
  html .tc-header .nav-actions {
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 8px !important; margin-left: auto !important;
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
  }
  html .site-header .nav-actions > *:not(.nav-hotline):not(.nav-wechat):not(.nav-whatsapp):not(.menu-toggle),
  html .tc-header .nav-actions > *:not(.nav-hotline):not(.nav-wechat):not(.nav-whatsapp):not(.menu-toggle) {
    display: none !important;
  }
  html .site-header .nav-hotline,
  html .site-header .nav-wechat,
  html .site-header .nav-whatsapp,
  html .tc-header .nav-hotline,
  html .tc-header .nav-wechat,
  html .tc-header .nav-whatsapp {
    width: 40px !important; height: 40px !important;
    min-width: 40px !important; min-height: 40px !important;
  }
  html .site-header .menu-toggle,
  html .tc-header .menu-toggle { padding: 0 !important; width: 40px !important; height: 40px !important; }
  html .nav-hotline img { width: 22px !important; height: auto !important; }
}
@media (max-width: 380px) {
  html .site-header .nav-hotline,
  html .site-header .nav-wechat,
  html .site-header .nav-whatsapp,
  html .tc-header .nav-hotline,
  html .tc-header .nav-wechat,
  html .tc-header .nav-whatsapp {
    width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
  }
  html .site-header .menu-toggle,
  html .tc-header .menu-toggle { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  html .brand { gap: 6px !important; }
  html .brand-mark { width: 36px !important; }
  html .brand-name-cn { font-size: 14px !important; }
}

/* --------------------------------------------------------------------------
   3. 页脚四列（与中文站同一套）
   -------------------------------------------------------------------------- */
.opt-footer-4 { padding: 42px 0 30px !important; }
.opt-footer-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1.3fr !important; gap: 28px; }
@media (max-width: 900px) { .opt-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { .opt-footer-grid { grid-template-columns: minmax(0,1fr) !important; } }
.opt-footer-grid h4 { margin: 0 0 10px; font-size: 15px; color: #fff; font-weight: 700; }
.opt-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.opt-footer-grid li { margin: 5px 0; font-size: 13.5px; }
.opt-footer-grid a { color: rgba(235,246,255,.9) !important; text-decoration: none; }
.opt-footer-grid a:hover { text-decoration: underline; }
.opt-footer-4 .opt-f-contact p { margin: 5px 0; font-size: 13.5px; color: rgba(235,246,255,.85); }
.opt-footer-4 .opt-f-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  margin-top: 26px; padding-top: 16px; font-size: 12.5px;
  color: rgba(235,246,255,.62); border-top: 1px solid rgba(255,255,255,.14);
}
.opt-footer-4 .opt-f-bottom a { color: rgba(230,244,255,.85) !important; }

/* 多语言页补出来的信息条：沿用站点 .topbar 视觉，仅确保不被压缩 */
.i18n-topbar .topbar-inner { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between; }
.i18n-topbar .topbar-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }

/* --------------------------------------------------------------------------
   4. 独立模板页（technical-center 系列）信息条基础样式
   这类页面用 tc-header + technical-center.css，未加载 styles.css，
   补丁插入的 .topbar 需要一套自成体系的最小样式。
   -------------------------------------------------------------------------- */
html.opt-tc .topbar {
  background: #07355d;
  color: #d8e9f7;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
html.opt-tc .topbar .container {
  width: min(calc(100% - (var(--page-gutter, 24px) * 2)), 1440px) !important;
  margin: 0 auto;
}
html.opt-tc .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
}
html.opt-tc .topbar-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}
html.opt-tc .topbar p { margin: 0; }
html.opt-tc .topbar a { color: #bfe6ff; text-decoration: none; }
html.opt-tc .topbar a:hover { text-decoration: underline; }
html[lang="ar"].opt-tc .topbar-inner,
html[lang="ar"].opt-tc .topbar-meta { direction: rtl; }
@media (max-width: 720px) {
  html.opt-tc .topbar-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  html.opt-tc .topbar-meta { flex-wrap: wrap; gap: 10px; }
  html.opt-tc .topbar { font-size: 12px; }
}