/* ============================================================
   语言切换按钮 中文 / EN
   由 _en_build 脚本统一插入到每个页面 header 的导航右侧
   中文页 -> en/index.html ；英文页 -> ../index.html
   ============================================================ */

header .container > nav {
    margin-left: auto;
}

.lang-switch {
    --cy-lang-w: 46px;
    --cy-lang-pad: 3px;
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 20px;
    padding: var(--cy-lang-pad);
    border: 1px solid rgba(139, 69, 19, 0.22);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.lang-switch:hover {
    border-color: rgba(139, 69, 19, 0.42);
    box-shadow: 0 2px 10px rgba(139, 69, 19, 0.08);
}

.lang-switch .lang-opt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cy-lang-w);
    height: 26px;
    padding: 0;
    border-radius: 999px;
    color: #8c7357;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease;
}

.lang-switch a.lang-opt:hover {
    background: rgba(139, 69, 19, 0.08);
    color: var(--primary-color, #8B4513);
}

.lang-switch .lang-opt.active {
    /* 背景由 .lang-switch::before 那颗会滑动的高亮块负责 */
    cursor: pointer;
}

@media (max-width: 992px) {
    .lang-switch {
        --cy-lang-w: 42px;
        margin-left: 14px;
    }

    .lang-switch .lang-opt {
        font-size: 12.5px;
    }
}

@media (max-width: 768px) {
    .lang-switch {
        --cy-lang-w: 40px;
        --cy-lang-pad: 2px;
        order: 2;
        margin-left: auto;
        margin-right: 10px;
    }

    .lang-switch .lang-opt {
        height: 24px;
        font-size: 12px;
    }
}

/* 404 等无 nav 的极简页 */
.logo-bar .lang-switch {
    margin-left: auto;
    font-size: 12.5px;
}

/* ============================================================
   英文版页面专用微调（html[lang="en"]，不影响中文站）
   英文公司名比中文长，页头字号要收一点，导航按钮不要换行
   ============================================================ */

html[lang="en"] .logo-title,
html[lang="en"] .logo h1 {
    font-size: 1.3rem;
    line-height: 1.25;
    white-space: nowrap;
}

html[lang="en"] .logo .sub-title {
    font-size: 0.74rem;
    line-height: 1.35;
    white-space: nowrap;
}

/* 详情页内联 CSS 把 logo 副标题卡在 260px，英文全称会显示成省略号 */
html[lang="en"] header .logo-container .sub-title,
html[lang="en"] header .logo-container h1 {
    max-width: 340px;
}

html[lang="en"] nav ul li a {
    white-space: nowrap;
}

@media (max-width: 1200px) {
    html[lang="en"] .logo-title,
    html[lang="en"] .logo h1 {
        font-size: 1.12rem;
    }

    html[lang="en"] header .logo-container .sub-title,
    html[lang="en"] header .logo-container h1 {
        max-width: 280px;
    }
}

@media (max-width: 992px) {
    html[lang="en"] .logo-title,
    html[lang="en"] .logo h1 {
        font-size: 1rem;
    }

    html[lang="en"] .logo .sub-title {
        font-size: 0.68rem;
    }

    html[lang="en"] header .logo-container .sub-title,
    html[lang="en"] header .logo-container h1 {
        max-width: 240px;
    }
}

@media (max-width: 768px) {
    html[lang="en"] .logo-title,
    html[lang="en"] .logo h1 {
        font-size: 1.05rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html[lang="en"] .logo .sub-title {
        font-size: 0.66rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100% !important;
    }
}

/* 小屏手机：按钮再收窄一点，给公司名让路 */
@media (max-width: 576px) {
    .lang-switch {
        --cy-lang-w: 34px;
        margin-right: 8px;
    }

    .lang-switch .lang-opt {
        height: 24px;
        font-size: 11.5px;
    }
}

/* ============================================================
   手机版页头：公司名不被语言按钮/汉堡按钮压住（2026-09-20 第三轮）
   全站 <header> 结构一致：.logo-container > img.header-logo + div >（标题 + 副标题）。
   标题在首页是 span.logo-title，其余页面是 h1，所以两种选择器都写。
   文字块的 min-width 必须归零，否则 flex 子项不肯收缩，公司名会直接
   盖到右侧的语言按钮上——这是原来手机版重叠的真正原因。
   本文件在每一页都是最后加载的样式表，因此这里用 !important 一定能生效。
   ============================================================ */

@media (max-width: 768px) {
    header .logo {
        min-width: 0 !important;
    }

    header .logo-container {
        min-width: 0 !important;
    }

    header .logo-container > div {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    header .logo-container .logo-title,
    header .logo-container h1 {
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    header .logo-container .sub-title {
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 576px) {
    header .container {
        padding: 0 12px !important;
    }

    header .logo-container {
        gap: 8px !important;
    }

    header .logo-container .header-logo {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
    }

    header .mobile-menu-btn {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
    }

    header .logo-container .logo-title,
    header .logo-container h1 {
        font-size: 0.95rem !important;
        line-height: 1.28 !important;
        margin-bottom: 0 !important;
    }

    header .logo-container .sub-title {
        font-size: 0.6rem !important;
        line-height: 1.35 !important;
        margin-top: 2px !important;
    }
}

/* 分档：放不下的副标题先收起来，再按宽度收字号；实在窄就折成两行，
   保证「广州长有皮革有限公司」在任何手机上都完整可读。 */
@media (max-width: 500px) {
    html[lang="en"] header .logo-container .sub-title {
        display: none !important;
    }
}

@media (max-width: 400px) {
    header .logo-container .sub-title {
        display: none !important;
    }
}

@media (max-width: 430px) {
    header .logo-container .logo-title,
    header .logo-container h1 {
        font-size: 0.92rem !important;
    }
}

@media (max-width: 380px) {
    header .logo-container .logo-title,
    header .logo-container h1 {
        font-size: 0.86rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

@media (max-width: 340px) {
    header .logo-container .logo-title,
    header .logo-container h1 {
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   可滑动的高亮块 + 整框可点（2026-09-20 第二轮）
   两个选项宽度固定成一样（--cy-lang-w），高亮块就是半个椭圆：
   静止时它压在「当前语言」那一半上，点一下先滑到另一半，页面才开始淡出。
   位置与文字颜色全靠下面几个自定义属性切换，用 :where() 把权重归零，
   保证「点击后的状态」永远排在「静止状态」后面生效。
   ============================================================ */

.lang-switch::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--cy-lang-pad);
    bottom: var(--cy-lang-pad);
    left: var(--cy-lang-pad);
    width: calc(50% - var(--cy-lang-pad));
    border-radius: 999px;
    background: var(--primary-color, #8B4513);
    box-shadow: 0 2px 7px rgba(139, 69, 19, 0.28);
    transform: translateX(var(--cy-thumb-x, 0%));
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-switch .lang-opt:first-child {
    color: var(--cy-fg-left, #fff);
}

.lang-switch .lang-opt:last-child {
    color: var(--cy-fg-right, #8c7357);
}

/* 静止：高亮块跟着 .active 走（在最后一格 → 靠右） */
:where(.lang-switch:has(> .lang-opt:last-child.active)) {
    --cy-thumb-x: 100%;
    --cy-fg-left: #8c7357;
    --cy-fg-right: #fff;
}

/* 点击后：滑到右边 / 滑到左边 */
:where(.lang-switch.cy-slide-right) {
    --cy-thumb-x: 100%;
    --cy-fg-left: #8c7357;
    --cy-fg-right: #fff;
}

:where(.lang-switch.cy-slide-left) {
    --cy-thumb-x: 0%;
    --cy-fg-left: #fff;
    --cy-fg-right: #8c7357;
}

/* 不支持 :has() 的老浏览器：退回改动前的静态高亮，至少不会串色 */
@supports not selector(:has(*)) {
    .lang-switch::before {
        display: none;
    }

    .lang-switch .lang-opt,
    .lang-switch .lang-opt:first-child,
    .lang-switch .lang-opt:last-child {
        color: #8c7357;
    }

    .lang-switch .lang-opt.active {
        background: var(--primary-color, #8B4513);
        color: #fff;
        box-shadow: 0 2px 7px rgba(139, 69, 19, 0.28);
    }
}

/* ============================================================
   语言切换过渡动画（2026-09-20）
   点「中文 / EN」时：当前页淡出 -> 目标页淡入。
    - html.cy-leaving：由 js/lang-switch.js 在点击时加上
    - html.cy-enter  ：由页面 <head> 里的内联脚本在首次绘制前加上，
                       否则新页面会先完整显示一下再淡入（闪一下）
   只动 opacity，不用 transform，避免影响页面里 position:fixed 的元素。
   ============================================================ */

@keyframes cyLangFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes cyLangFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

html.cy-enter body {
    animation: cyLangFadeIn 0.3s ease-out both;
}

/* 放在 cy-enter 之后，保证连续操作时以「淡出」为准 */
html.cy-leaving body {
    /* 延迟 0.12s：先让高亮块滑过去（看得见），页面再开始淡出 */
    animation: cyLangFadeOut 0.24s ease-in 0.12s both;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html.cy-enter body,
    html.cy-leaving body {
        animation: none;
    }
}