/* ==========================================================================
   YXY bilingual runtime — language switcher + Chinese typography
   ========================================================================== */

/* --- Switcher ------------------------------------------------------------ */

.yxy-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    line-height: 1;
    vertical-align: middle;
    flex: 0 0 auto;
}

.yxy-header.is-white .yxy-lang-switch,
.yxy-lang-switch--ondark {
    border-color: var(--cn-line, #d9e2f1);
    background: #fff;
}

.yxy-lang-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 6px 11px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.22s ease, color 0.22s ease;
    white-space: nowrap;
}

.yxy-lang-btn:hover,
.yxy-lang-btn:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}

.yxy-lang-btn.is-active {
    background: #fff;
    color: var(--cn-blue, #193190);
}

.yxy-lang-btn.is-active:hover,
.yxy-lang-btn.is-active:focus-visible {
    background: #fff;
    color: var(--cn-blue, #193190);
}

/* Solid (white) header variant */
.yxy-header.is-white .yxy-lang-btn,
.yxy-lang-switch--ondark .yxy-lang-btn {
    color: var(--cn-navy, #10203f);
}

.yxy-header.is-white .yxy-lang-btn:hover,
.yxy-lang-switch--ondark .yxy-lang-btn:hover,
.yxy-header.is-white .yxy-lang-btn:focus-visible,
.yxy-lang-switch--ondark .yxy-lang-btn:focus-visible {
    color: var(--cn-blue, #193190);
    background: var(--cn-faint, #eef3fb);
}

.yxy-header.is-white .yxy-lang-btn.is-active,
.yxy-lang-switch--ondark .yxy-lang-btn.is-active {
    background: var(--cn-blue, #193190);
    color: #fff;
}

.yxy-lang-sep {
    width: 1px;
    height: 12px;
    background: currentColor;
    opacity: 0.28;
}

/* Compact single-button style (used where space is tight) */
.yxy-lang-switch--compact .yxy-lang-btn {
    padding: 5px 9px;
    font-size: 12px;
}

/* In the topbar (visible when the topbar row is enabled) */
.yxy-topbar-lang .yxy-lang-switch {
    border-color: rgba(255, 255, 255, 0.35);
}

/* --- Placement ----------------------------------------------------------- */

/* Keep the switcher last (top-right) inside the header action row.
   Note: the theme already lays out .yxy-header-actions — do not restyle it here. */
.yxy-header-actions .yxy-lang-switch {
    order: 99;
    margin-left: 4px;
}

/* Mobile: .yxy-header-right is a closed drawer, so surface a copy of the
   switcher next to the burger and hide the one inside the drawer. */
.yxy-lang-mobile {
    display: none;
}

@media (max-width: 1024px) {
    .yxy-lang-mobile {
        display: inline-flex;
        margin-left: auto;
    }
    .yxy-header-actions .yxy-lang-switch {
        display: none;
    }
}

@media (max-width: 600px) {
    .yxy-lang-btn {
        padding: 6px 9px;
        font-size: 12px;
    }
    .yxy-lang-switch {
        padding: 2px;
    }
}

/* --- Chinese typography -------------------------------------------------- */

html[lang^="zh"] body,
html[lang^="zh"] .cnx-page,
html[lang^="zh"] .cn-home {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
        "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
        system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[lang^="zh"] body {
    letter-spacing: 0.01em;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Headings read better slightly tighter in CJK */
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] h4,
html[lang^="zh"] .cnx-title,
html[lang^="zh"] .cnx-hero h1 {
    letter-spacing: 0;
    line-height: 1.35;
}

/* Uppercase / letter-spaced eyebrow labels look wrong in Chinese */
html[lang^="zh"] .cnx-eyebrow,
html[lang^="zh"] .cnx-stat span,
html[lang^="zh"] .cnx-table th,
html[lang^="zh"] [style*="letter-spacing"] {
    text-transform: none;
    letter-spacing: 0.02em;
}

html[lang^="zh"] .yxy-logo-wordmark {
    font-size: 17px;
    letter-spacing: 0.06em;
}