/* ============================================================================
   mobile-header.css —— 移动端顶栏（≤992px），视觉对齐 problem/nav.jpg
   深色底 + 仅 CLW 徽标 + 语言胶囊 / WhatsApp / 汉堡 三键。
   桌面端（>992px）零影响：.mobile-actions 默认 display:none。
   由 header.jsp 在 <header> 前加载，加载顺序晚于 style.css / rtl.css。
   ============================================================================ */

/* Poppins：仅移动端抽屉菜单使用（@font-face 声明本身不下载字体，用到才取） */
@font-face {
    font-family: 'CLW Poppins';
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url('../font/poppins-semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'CLW Poppins';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('../font/Poppins-Bold.woff2') format('woff2');
}

.mobile-actions {
    display: none;
}

@media only screen and (max-width: 992px) {

    /* ---------- 顶栏底色与高度（2026-10-20 改白底，深色底仅保留在下拉浮层） ---------- */
    header.large,
    header.small {
        background: #ffffff !important;
        height: 64px !important;
        box-shadow: 0 1px 0 #e9eef4, 0 2px 12px rgba(16, 36, 64, .045) !important;
    }

    header.large .header {
        background: transparent !important;
        height: 64px !important;
        display: block !important;
    }

    .height {
        padding-top: 64px !important;
    }

    /* 移动端不再需要桌面蓝色导航条容器 */
    header.large .header_bottom {
        display: none !important;
    }

    header.large .container {
        width: 100% !important;
        max-width: none !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    header.large .container::before,
    header.large .container::after {
        display: none !important;
        content: none !important;
    }

    /* ---------- 徽标：只保留 CLW（文字版 logo 由 <picture> 切换掉） ---------- */
    header.large #logo {
        float: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto;
        line-height: 0;
        z-index: 2;
    }

    header.large #logo picture {
        display: block;
    }

    header.large #logo img {
        height: 36px !important;
        width: auto !important;
        max-width: 132px !important;
        display: block;
    }

    /* ---------- 右侧操作区 ---------- */
    .mobile-actions {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin-inline-start: auto;
        flex: 0 0 auto;
    }

    /* 三键统一 40px 高：无描边、柔和浅灰底 + 12px 圆角（现代 App 控件观感） */
    .mobile-lang-switch,
    .mobile-wa,
    header.large .toggle {
        height: 40px;
        border: 0;
        border-radius: 12px;
        background: #f3f6fa;
        box-sizing: border-box;
        transition: background .2s ease, color .2s ease;
    }

    .mobile-lang-switch:active,
    .mobile-wa:active,
    header.large .toggle:active {
        background: #e5edf6;
    }

    .mobile-lang-switch:focus-visible,
    .mobile-wa:focus-visible,
    header.large .toggle:focus-visible {
        outline: 2px solid #0b75be;
        outline-offset: 2px;
    }

    /* ---------- 语言胶囊：地球 + 当前语言 + 箭头 ---------- */
    .mobile-lang-switch {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: inline-flex !important;
        align-items: center;
        gap: 7px;
        padding: 0 12px;
        color: #12263a;
        cursor: pointer;
        z-index: 100;
        line-height: 1;
    }

    /* 展开时整颗胶囊切到品牌蓝浅底，作为清晰的选中反馈 */
    .mobile-lang-switch.open {
        background: #e7f2fc;
        color: #0b75be;
    }

    .mobile-lang-switch .mls-globe {
        width: 18px;
        height: 18px;
        display: block;
        flex: 0 0 auto;
    }

    .mobile-lang-switch .mobile-lang-code {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        color: inherit;
        font-family: 'CLW Poppins', 'Inter', Arial, sans-serif;
        text-transform: uppercase;
        line-height: 1;
        transition: color .2s ease;
    }

    .mobile-lang-switch .mls-caret {
        width: 12px;
        height: 12px;
        display: block;
        flex: 0 0 auto;
        transition: transform .2s ease;
    }

    .mobile-lang-switch.open .mls-caret {
        transform: rotate(180deg);
    }

    /* ---------- 语言下拉：白色浮层卡片（与白色顶栏同色系） ---------- */
    .mobile-lang-switch .mobile-lang-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: auto;
        left: auto;
        inset-inline-end: 0;
        min-width: 184px;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #e7edf5;
        border-radius: 14px;
        box-shadow: 0 18px 44px rgba(16, 36, 64, .16);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
        z-index: 1000;
    }

    .mobile-lang-switch.open .mobile-lang-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-lang-switch .mobile-lang-dropdown li {
        border-bottom: 0;
    }

    .mobile-lang-switch .mobile-lang-dropdown li a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 9px;
        color: #223349;
        font-size: 14px;
        font-weight: 600;
        font-family: 'CLW Poppins', 'Inter', 'Segoe UI', Arial, sans-serif;
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
    }

    .mobile-lang-switch .mobile-lang-dropdown li a:hover,
    .mobile-lang-switch .mobile-lang-dropdown li a:focus {
        background: #f4f8fc;
        color: #0b75be;
    }

    .mobile-lang-switch .mobile-lang-dropdown li.on a {
        background: #e7f2fc;
        color: #0b75be;
    }

    .mobile-lang-switch .mobile-lang-dropdown li img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #e1e7ef;
        flex: 0 0 auto;
    }

    /* RTL：胶囊与下拉都跟随 flex 排布，清掉旧规则的绝对定位偏移 */
    [dir="rtl"] .mobile-lang-switch {
        right: auto !important;
        left: auto !important;
    }

    [dir="rtl"] .mobile-lang-switch .mobile-lang-dropdown {
        right: auto !important;
        left: auto !important;
        inset-inline-end: 0;
    }

    /* ---------- WhatsApp ---------- */
    .mobile-wa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        flex: 0 0 40px;
        color: #1da851;
        background: #e9f8ef;
        text-decoration: none;
    }

    .mobile-wa .fa {
        font-size: 20px;
        line-height: 1;
    }

    .mobile-wa:hover {
        color: #148c41;
        background: #ddf4e6;
    }

    /* ---------- 汉堡：两横线，展开变 X ---------- */
    header.large .toggle {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 40px;
        min-height: 0;
        flex: 0 0 40px;
        margin: 0;
        padding: 0;
        display: block;
        cursor: pointer;
        z-index: 100;
        font-size: 0;
        line-height: 0;
    }

    /* 精确几何居中：translate 以自身体积为基准，不受边框/行高影响 */
    header.large .toggle span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 18px;
        height: 2px;
        margin: 0;
        transform: translate(-50%, -50%);
        background: transparent;
        border-radius: 2px;
    }

    header.large .toggle span::before,
    header.large .toggle span::after {
        content: "";
        position: absolute;
        left: 0;
        /* style.css 旧规则残留 margin-left:-10px（0,1,2 特异性），会把这
           两条线整体左移 10px，看起来像没居中；必须显式清零。 */
        margin: 0;
        width: 18px;
        height: 2px;
        background: #12263a;
        border-radius: 2px;
        transition: transform .2s ease, top .2s ease;
    }

    header.large .toggle span::before {
        top: -4px;
    }

    header.large .toggle span::after {
        top: 4px;
        bottom: auto;
    }

    /* 抽屉展开时：汉堡键轻染品牌蓝，X 线也转蓝，状态一目了然 */
    header.large .toggle.toggle-open {
        background: #e7f2fc;
    }

    header.large .toggle.toggle-open span {
        background: transparent;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    header.large .toggle.toggle-open span::before,
    header.large .toggle.toggle-open span::after {
        background: #0b75be;
    }

    header.large .toggle.toggle-open span::before {
        top: 0;
        transform: rotate(-90deg);
    }

    header.large .toggle.toggle-open span::after {
        top: 0;
        transform: none;
    }

    /* ---------- 抽屉菜单字体：Poppins 加粗（比 Inter 更圆润、更有力量感） ----------
       仅作用于 hcMobileNav 克隆出的抽屉；语言列表已从抽屉移除（顶部胶囊切换）。
       俄语/阿拉伯语等 Poppins 不含的字形由 Inter / 系统字体自动兜底。 */
    .hc-mobile-nav a,
    .hc-mobile-nav li.nav-close a,
    .hc-mobile-nav li.nav-back a {
        font-family: 'CLW Poppins', 'Inter', 'Segoe UI', Arial, sans-serif !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        letter-spacing: .01em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* 一级栏目更大更醒目，二级保持加粗但略小 */
    .hc-mobile-nav .nav-wrapper-1 > ul > li > a {
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: .02em;
    }

    .hc-mobile-nav .nav-wrapper-1 ul ul a {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .hc-mobile-nav li.nav-close a,
    .hc-mobile-nav li.nav-back a {
        font-size: 13px !important;
        letter-spacing: .08em;
    }
}

/* 极窄屏（320/360）再压缩一点，保证三键 + 徽标同行不挤 */
@media only screen and (max-width: 360px) {
    header.large .container {
        padding: 0 12px !important;
    }

    .mobile-actions {
        gap: 6px;
    }

    header.large #logo img {
        height: 34px !important;
    }

    .mobile-lang-switch {
        padding: 0 9px;
    }
}