/**
 * 语言切换器样式（独立文件，部署时请与 main.css 一并上传）
 * 首页顶栏在未滚动时为深色背景，见底部 body:not(.site-subpage) 覆盖规则。
 */

/* ======================== Language Switcher ======================== */
.lang-switcher {
    position: relative;
    margin-left: clamp(8px, 1vw, 20px);
    font-size: var(--fs-sm, 14px);
    display: inline-flex;
}
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(61, 124, 255, 0.25);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    color: var(--color-text, #22272e);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.site-header.scrolled .lang-toggle { background: rgba(255, 255, 255, 0.85); }
.lang-toggle:hover {
    border-color: rgba(61, 124, 255, 0.65);
    color: #3D7CFF;
    box-shadow: 0 6px 18px -8px rgba(61, 124, 255, 0.55);
}
.lang-toggle:focus-visible {
    outline: 2px solid #3D7CFF;
    outline-offset: 2px;
}
.lang-code {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: var(--fs-sm, 14px);
}
.lang-caret {
    transition: transform 0.25s ease;
    opacity: 0.6;
}
.lang-switcher.open .lang-caret { transform: rotate(180deg); opacity: 1; }

.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    max-height: min(60vh, 520px);
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.25), 0 10px 25px -12px rgba(61, 124, 255, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
    scrollbar-width: thin;
    scrollbar-color: rgba(61, 124, 255, 0.3) transparent;
}
.lang-switcher.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-menu::-webkit-scrollbar { width: 6px; }
.lang-menu::-webkit-scrollbar-thumb { background: rgba(61, 124, 255, 0.3); border-radius: 3px; }

.lang-menu li { margin: 0; }
.lang-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: #22272e;
    text-decoration: none;
    font-size: var(--fs-sm, 14px);
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.lang-menu a:hover {
    background: linear-gradient(135deg, rgba(61, 124, 255, 0.08), rgba(0, 229, 255, 0.08));
    color: #3D7CFF;
}
.lang-beta {
    margin-left: auto;
    padding: 1px 6px;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    color: #8B929E;
    background: rgba(139, 146, 158, 0.12);
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.lang-switcher[data-current="zh-CN"] .lang-menu a[hreflang="zh-CN"],
.lang-switcher[data-current="zh-cn"] .lang-menu a[hreflang="zh-cn"],
.lang-switcher[data-current="en"]    .lang-menu a[hreflang="en"],
.lang-switcher[data-current="fr"]    .lang-menu a[hreflang="fr"],
.lang-switcher[data-current="de"]    .lang-menu a[hreflang="de"],
.lang-switcher[data-current="pt"]    .lang-menu a[hreflang="pt"],
.lang-switcher[data-current="es"]    .lang-menu a[hreflang="es"],
.lang-switcher[data-current="ru"]    .lang-menu a[hreflang="ru"],
.lang-switcher[data-current="ja"]    .lang-menu a[hreflang="ja"],
.lang-switcher[data-current="ko"]    .lang-menu a[hreflang="ko"],
.lang-switcher[data-current="ar"]    .lang-menu a[hreflang="ar"],
.lang-switcher[data-current="it"]    .lang-menu a[hreflang="it"],
.lang-switcher[data-current="ro"]    .lang-menu a[hreflang="ro"],
.lang-switcher[data-current="pl"]    .lang-menu a[hreflang="pl"],
.lang-switcher[data-current="nl"]    .lang-menu a[hreflang="nl"],
.lang-switcher[data-current="fa"]    .lang-menu a[hreflang="fa"],
.lang-switcher[data-current="sr"]    .lang-menu a[hreflang="sr"] {
    background: linear-gradient(135deg, rgba(61, 124, 255, 0.14), rgba(0, 229, 255, 0.14));
    color: #3D7CFF;
    font-weight: 600;
}

/* 简洁国旗：用纯 CSS 条纹绘制主要国家/语言代表色，避免额外图片请求 */
.lang-flag {
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    background: #ccc;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
}
.lang-flag--zh-CN { background: #de2910; }
.lang-flag--zh-CN::before { content: "★"; color: #ffde00; font-size: 9px; position: absolute; left: 2px; top: 0; line-height: 14px; }
.lang-flag--zh-cn { background: #de2910; }
.lang-flag--zh-cn::before { content: "★"; color: #ffde00; font-size: 9px; position: absolute; left: 2px; top: 0; line-height: 14px; }
.lang-flag--en { background: linear-gradient(#012169 33%, #fff 33%, #fff 66%, #c8102e 66%); }
.lang-flag--fr { background: linear-gradient(90deg, #002395 33%, #fff 33%, #fff 66%, #ed2939 66%); }
.lang-flag--de { background: linear-gradient(#000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%); }
.lang-flag--pt { background: linear-gradient(90deg, #006600 40%, #ff0000 40%); }
.lang-flag--es { background: linear-gradient(#aa151b 25%, #f1bf00 25%, #f1bf00 75%, #aa151b 75%); }
.lang-flag--ru { background: linear-gradient(#fff 33%, #0039a6 33%, #0039a6 66%, #d52b1e 66%); }
.lang-flag--ja { background: #fff; }
.lang-flag--ja::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #bc002d; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lang-flag--ko { background: #fff; }
.lang-flag--ko::before { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(#cd2e3a 50%, #0047a0 50%); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.lang-flag--ar { background: linear-gradient(#007a3d 33%, #fff 33%, #fff 66%, #000 66%); }
.lang-flag--it { background: linear-gradient(90deg, #008c45 33%, #f4f5f0 33%, #f4f5f0 66%, #cd212a 66%); }
.lang-flag--ro { background: linear-gradient(90deg, #002b7f 33%, #fcd116 33%, #fcd116 66%, #ce1126 66%); }
.lang-flag--pl { background: linear-gradient(#fff 50%, #dc143c 50%); }
.lang-flag--nl { background: linear-gradient(#ae1c28 33%, #fff 33%, #fff 66%, #21468b 66%); }
.lang-flag--fa { background: linear-gradient(#239f40 33%, #fff 33%, #fff 66%, #da0000 66%); }
.lang-flag--sr { background: linear-gradient(#c6363c 33%, #0c4076 33%, #0c4076 66%, #fff 66%); }

/* Header 中移动端：窄屏把语言按钮放在紧凑模式 */
@media (max-width: 991px) {
    .lang-switcher { margin-left: 8px; }
    .lang-toggle { height: 32px; padding: 0 10px; }
    .lang-toggle .lang-flag { width: 16px; height: 12px; }
    .lang-menu { right: 0; left: auto; min-width: 180px; }
}
@media (max-width: 640px) {
    .lang-code { display: none; }
    .lang-toggle { padding: 0 8px; gap: 4px; }
}

/* RTL 语言适配 */
html[lang="ar"], html[lang="fa"] {
    direction: rtl;
}
html[lang="ar"] .lang-menu, html[lang="fa"] .lang-menu {
    right: auto;
    left: 0;
}

/* ---------- 首页 Hero：顶栏未滚动时语言按钮为浅色描边 / 白字（子页 body.site-subpage 不受影响） ---------- */
body:not(.site-subpage) .site-header:not(.scrolled) .lang-toggle {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
body:not(.site-subpage) .site-header:not(.scrolled) .lang-toggle:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    box-shadow: none;
}
body:not(.site-subpage) .site-header:not(.scrolled) .lang-caret {
    opacity: 0.85;
}
body:not(.site-subpage) .site-header:not(.scrolled) .lang-toggle:focus-visible {
    outline-color: rgba(255, 255, 255, 0.95);
}