/* ==========================================================================
   金唐律所 · 全站多语言切换（七国语言）                     2026-09-10
   --------------------------------------------------------------------------
   语言：中文 / English / 한국어 / 日本語 / Español / Français / Русский
   位置：导航栏「微信公众号 · 视频号 · Bilibili」三个图标之后
   实现：不改动模板 DOM，用 flex order 把语言模块前移到社交图标之后，
        因此原有的兄弟选择器（.logo.white ~ .h_share 等）全部保持有效。
   配色：沿用品牌蓝 #003894，与站内二维码浮层保持同一视觉语言。
   稳定：当前语种用固定宽度槽位居中显示，切换语言时导航栏不抖动。
   v1.1 新增：API 翻译进度条（浮动小芯片）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 导航栏模块顺序  logo → 社交图标 → 语言 → 汉堡按钮
   -------------------------------------------------------------------------- */
.header .logo    { order: 1; }
.header .h_share { order: 2; }
.header .lang    { order: 3; }
.header .but     { order: 4; }

/* --------------------------------------------------------------------------
   2. 触发器：地球图标 + 当前语言 + 箭头
   -------------------------------------------------------------------------- */

/* 2.1 解除主题对语言模块的隐藏。主题里有两条互不相容的规则把它藏了起来：
       · style/css.css      → .header .lang{margin-right:2.08vw; display:none}
       · style/animation.css→ @media(min-width:758px){
                                .header .lang    {opacity:0}
                                .header.on .lang {opacity:1; display:none}
                              }
       animation.css 里 .header.on 那条与同一行的 opacity:1 自相矛盾（并且页头
       常态就带 on 类），几乎可以确定是笔误；但它的选择器权重(0,3,0)高于
       .header .lang(0,2,0)，所以这里补一层 html 前缀把权重提到(0,3,1)再复位。
       只覆盖 display/opacity 两项，其余属性仍由下面的 .header .lang 控制，
       避免影响后续媒体查询里对 margin-right 的改写。 */
html .header .lang,
html .header.on .lang {
    display: block;
    opacity: 1;
}

.header .lang {
    margin-right: 1.98vw;
    flex: 0 0 auto;
}
.header .lang dl { position: relative; }
.header .lang dt {
    display: flex;
    align-items: center;
    color: #003894;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .4s, opacity .4s;
}
.header .lang dt:hover { opacity: .8; }
.header .lang dt .icon-lang {
    font-size: 1.02vw;
    flex: 0 0 auto;
}
.header .lang dt span {
    min-width: 4.3vw;               /* 固定槽位：切换语种时导航不位移 */
    padding: 0 .3vw;
    text-align: center;
    font-size: .88vw;
    font-weight: 400;
    font-family: "Barlow Semi Condensed", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 0;
}
.header .lang dt .icon-jt_xia {
    font-size: .7vw;
    opacity: .7;
    flex: 0 0 auto;
    transition: transform .3s ease;
}
.header .lang.jt-open dt .icon-jt_xia { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   3. 下拉面板：7 个语种
   -------------------------------------------------------------------------- */
.header .lang dd {
    width: 7.4vw;
    min-width: 108px;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%) translateY(-.31vw);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
    z-index: 12;
}
.header .lang dd > span {
    display: block;
    margin-top: .52vw;
    padding: .34vw 0;
    background: #fff;
    box-shadow: 0 .42vw 1.6vw rgba(0, 20, 60, .14), 0 0 0 1px rgba(0, 20, 60, .05);
}
.header .lang dd a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .42vw .6vw;
    font-size: .78vw;
    line-height: 1.2;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: color .22s, background-color .22s;
}
.header .lang dd a:hover { color: #003894; background: #f2f6fd; }
.header .lang dd a.on {
    color: #003894;
    font-weight: 600;
    background: #f6f9ff;
}
.header .lang dd a.on::before {
    content: "";
    flex: 0 0 auto;
    width: .26vw;
    height: .26vw;
    min-width: 4px;
    min-height: 4px;
    border-radius: 50%;
    background: #003894;
    margin-right: .42vw;
}
/* 悬停即开（与站内二维码浮层一致）＋ 点击锁定展开 */
.header .lang dl:hover dd,
.header .lang.jt-open dd {
    opacity: 1;
    visibility: visible;
    pointer-events: initial;
    transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   4. 深色屏 / 白色 logo 状态下同步变白
   （主题脚本会给 .logo 与 .lang 同时加 .white，故两条都保留）
   -------------------------------------------------------------------------- */
.header .lang.white dt,
.header .logo.white ~ .lang dt { color: #fff; }
.header.showNav .lang dt,
.header.showNav .logo.white ~ .lang dt { color: #003894; }

/* --------------------------------------------------------------------------
   5. 响应式
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .header .h_share  { margin-right: 14px; }
    .header .h_share a{ margin-left: 13px; font-size: 16px; }
    .header .lang     { margin-right: 14px; }
    .header .lang dt .icon-lang  { font-size: 15px; }
    .header .lang dt span        { min-width: 60px; padding: 0 5px; font-size: 13.5px; }
    .header .lang dt .icon-jt_xia{ font-size: 11px; }
    .header .lang dd             { width: 118px; min-width: 118px; transform: translateX(-50%) translateY(-4px); }
    .header .lang dd > span      { padding: 4px 0; margin-top: 8px; }
    .header .lang dd a           { font-size: 13px; padding: 8px 10px; }
    .header .lang dd a.on::before{ width: 4px; height: 4px; margin-right: 6px; }
    .header .lang dl:hover dd,
    .header .lang.jt-open dd     { transform: translateX(-50%) translateY(0); }
}

@media screen and (max-width: 758px) {
    .header .h_share  { margin-right: 8px; }
    .header .h_share a{ margin-left: 9px; font-size: 16px; }
    .header .lang     { margin-right: 8px; }
    .header .lang dt .icon-lang  { font-size: 14px; }
    .header .lang dt span        { min-width: 56px; padding: 0 4px; font-size: 12.5px; }
    .header .lang dt .icon-jt_xia{ font-size: 10px; }
    .header .lang dd             { width: 108px; min-width: 108px; }
    .header .lang dd > span      { padding: 3px 0; margin-top: 7px; }
    .header .lang dd a           { font-size: 12px; padding: 7px 8px; }
}

/* 窄屏：只留地球 + 箭头，避免挤压 logo 与社交图标 */
@media screen and (max-width: 480px) {
    .header .lang dt span { display: none; }
    .header .lang dt      { padding: 6px 1px; }
}
/* 窄屏同样需要复位（animation.css 的隐藏规则只在 ≥758px 生效，这里一并兜住） */
@media screen and (max-width: 758px) {
    html .header .lang,
    html .header.on .lang { display: block; opacity: 1; }
}

/* --------------------------------------------------------------------------
   6. 非中文语种的排版微调
   西文 / 西里尔文的字宽与词长明显大于中文，首屏通栏大字若不收字号会向左溢
   出视口。语言类名由脚本写在 <html> 上（.jt-foreign / .jt-latin），
   只在该语种生效，中文状态下不参与匹配，因此不会出现样式闪烁。
   -------------------------------------------------------------------------- */

/* 6.1 韩 / 日：字宽接近中文，仅轻微收字号 */
html.jt-foreign .home_part1 .box .txt { font-size: 4.6vw; letter-spacing: .01em; }

/* 6.2 英 / 西 / 法 / 俄：词更长，收字号并去掉中文式字距 */
html.jt-latin .home_part1 .box .txt {
    font-size: 3.3vw;
    letter-spacing: 0;
    font-family: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
}

/* 6.3 副标语行（精于道 敏于行 · 全国优秀律师事务所）：缩小并收紧字距 */
html.jt-foreign .home_part1 .box .tit ul { font-size: 1.15vw; }
html.jt-foreign .home_part1 .box .tit li { letter-spacing: .06em; }
html.jt-foreign .home_part1 .box .tit li + li::before { margin: 0 1.3vw; }

/* 6.4 响应式对齐 */
@media screen and (max-width: 1200px) {
    html.jt-foreign .home_part1 .box .txt { font-size: 40px; }
    html.jt-latin   .home_part1 .box .txt { font-size: 34px; }
    html.jt-foreign .home_part1 .box .tit ul { font-size: 14px; }
    html.jt-foreign .home_part1 .box .tit li + li::before { margin: 0 12px; }
}
@media screen and (max-width: 758px) {
    html.jt-foreign .home_part1 .box .txt {
        width: auto; max-width: 86vw; margin: 0 auto;
        font-size: 30px; letter-spacing: 0; line-height: 1.25;
    }
    html.jt-foreign .home_part1 .box .tit ul {
        font-size: 12px; flex-wrap: wrap; justify-content: center; row-gap: 6px;
    }
    html.jt-foreign .home_part1 .box .tit li { letter-spacing: .02em; }
}

/* --------------------------------------------------------------------------
   7. v1.1：API 翻译进度提示
   -------------------------------------------------------------------------- */
#jt-i18n-progress {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    max-width: 60vw;
    padding: 8px 14px;
    background: rgba(0, 56, 148, 0.92);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 24px rgba(0, 56, 148, 0.25);
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    animation: jt-i18n-progress-in 220ms ease-out;
}
#jt-i18n-progress::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    animation: jt-i18n-progress-pulse 1s ease-out infinite;
}
#jt-i18n-progress.done::before {
    animation: none;
    background: #2dd471;
    box-shadow: none;
}
/* 熔断态：翻译通道不可用，保留中文原文 */
#jt-i18n-progress.warn {
    background: rgba(120, 86, 0, 0.94);
    box-shadow: 0 6px 24px rgba(120, 86, 0, 0.25);
}
#jt-i18n-progress.warn::before {
    animation: none;
    background: #f0b429;
    box-shadow: none;
}
@keyframes jt-i18n-progress-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes jt-i18n-progress-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0);   }
    100% { box-shadow: 0 0 0 0   rgba(255,255,255,0);   }
}
@media screen and (max-width: 758px) {
    #jt-i18n-progress { right: 12px; bottom: 12px; font-size: 11px; max-width: 70vw; }
}

/* 7.1 正在翻译中的段落：加一道淡蓝下划光，避免用户看到「空白」 */
html.jt-translating [data-jt-loading="1"] {
    color: transparent !important;
    position: relative;
}
html.jt-translating [data-jt-loading="1"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 56, 148, 0.45) 50%, transparent 100%);
    animation: jt-i18n-shimmer 1.2s ease-in-out infinite;
}
@keyframes jt-i18n-shimmer {
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(30%);  }
}