/* ============================================================
   多语言切换下拉 —— 在 reset.css 原有 .header_lang 基础上做增强
   只补新增结构与容错，不覆盖原有观感
   ============================================================ */

/* ---- 当前语言：图标槽位 ---- */
.header_lang .tit .flag {
  display: flex;
  align-items: center;
}
.header_lang .tit .flag:empty {
  display: none;
}
.header_lang .tit .lang_cur_flag {
  display: block;
  width: 25px;
  height: auto;
  border-radius: 5px;
}
/* 图标缺失时（语言代码与文件名对不上），标题只剩文字也要对齐 */
.header_lang .tit .flag + p {
  margin-left: 10px;
}
.header_lang .tit .flag:empty + p {
  margin-left: 0;
}

/* ---- 下拉列表 ---- */
.header_lang ul {
  /* 语言多时不能顶出屏幕 */
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.header_lang ul::-webkit-scrollbar {
  width: 4px;
}
.header_lang ul::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .18);
  border-radius: 4px;
}

/* 语言名长短不一（中文繁體 / हिंदी / Português）。
   原样式把 ul 固定成 width:100px + 居中偏移，文字会被截成「Engl…」。
   改成右对齐 + 宽度由内容撑开（max-content），既不截断也不会顶出屏幕。 */
.header_lang ul {
  left: auto;
  right: 0;
  margin-right: 0;
  width: -moz-max-content;
  width: max-content;
  min-width: 100px;
  max-width: 240px;
}
.header_lang ul li a {
  justify-content: flex-start;
  white-space: nowrap;
  text-align: left;
}
.header_lang ul li a img {
  flex: 0 0 auto;
}
.header_lang ul li a p {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto;
}

/* 当前语言高亮，让用户知道自己现在在哪个语种 */
.header_lang ul li.on a {
  color: #e51b27;
  font-weight: bold;
}
.header_lang ul li.on a p {
  color: #e51b27;
}

/* 注意：不要加 :hover 自动展开。
   原站是「点击展开」（main.js 的 toggleClass('active')），
   加 hover 会把行为改成「划过就开」，既是行为回归，也会让
   「点击后 active 是否真的加上」这件事失去可验证性。 */

/* ---- 移动端 ---- */
@media screen and (max-width: 1200px) {
  .header_lang {
    height: 60px;
  }
  .header_lang .tit p {
    display: none;          /* 窄屏只留国旗，省宽度 */
  }
  .header_lang .tit .flag:empty + p {
    display: block;         /* 但连国旗都没有时必须显示文字，否则是个空按钮 */
    font-size: 13px;
  }
  .header_lang ul {
    right: 0;
    margin-right: 0;
    max-height: 50vh;
  }
  .header_lang ul li a {
    padding: 10px 14px;
  }
}

/* 国旗加一圈极细描边：日本国旗是白底红圆，白背景上像个红点，没边看不出来 */
.header_lang .tit img,
.header_lang ul li a img {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}