/* 站点补充样式（在原有 style.css 之后加载，仅做少量增强，不改变版式） */

/* 底部版权区容纳友情链接 */
.bottom_bg { height: auto; line-height: 24px; padding: 7px 0; }
.footer-links { margin-top: 2px; }
.footer-links a { color: #2361aa; text-decoration: none; margin: 0 6px; }
.footer-links a:hover { color: #aa4323; text-decoration: underline; }

/* 地理位置地图容器 */
#dituContent { position: relative; overflow: hidden; background: #eef2f5; }
.map-fallback {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #eaf1f7 0%, #dde7ef 100%);
    color: #2361aa; text-align: center; text-decoration: none;
    display: block; padding-top: 120px; box-sizing: border-box;
}
.map-fallback .map-pin {
    width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50% 50% 50% 0;
    background: #2361aa; transform: rotate(-45deg);
}
.map-fallback .map-pin i {
    display: block; width: 14px; height: 14px; background: #fff; border-radius: 50%;
    margin: 14px auto 0;
}
.map-fallback .map-name { font-size: 16px; font-weight: bold; margin-bottom: 8px; }
.map-fallback .map-addr { font-size: 13px; color: #4a5a66; line-height: 22px; }
.map-fallback .map-tip {
    display: inline-block; margin-top: 16px; padding: 6px 18px; border: 1px solid #2361aa;
    border-radius: 3px; font-size: 13px;
}
.map-fallback:hover .map-tip { background: #2361aa; color: #fff; }

/* ---------- 主导航单行 + 垂直居中（中英文站共用） ----------
   单行：语言旗帜 .head_r_top 是右浮动、占导航行右侧 60px，
   导航 ul.menu 的浮动项在剩余宽度里排不下 6 项，最后一项被挤到第二行。
   改为 flex 后导航项不参与浮动换行，旗帜自然让到最右侧同行。

   垂直居中：.header_bg 高 82px，原来旗帜(37px)+菜单(32px)都贴顶排列，
   菜单中心落在 16px，蓝色条下半部空一大片。这里把 .head_r 变成整条高度的
   flex 容器并 align-items:center，菜单与旗帜都按 82px 的中线（41px）对齐：
   菜单 32px → top 25px，旗帜 17px → top 33px，两者中线都在 41px。
   注：.head_r 是浮动元素，其高度不会改变 .head 的排版（.clear 会把 .head
   撑到 82px，正好等于 .header_bg 的高度，不会溢出）。 */
.menu { display: flex; flex-wrap: nowrap; }
.menu li { float: none; flex: 0 0 auto; }

.head_r { display: flex; align-items: center; justify-content: flex-end; height: 82px; }
.head_r_top {
    order: 2;              /* 顺序：菜单在左、语言旗帜在右（与原来视觉一致） */
    float: none;
    height: 17px;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 12px;
}
.menu { order: 1; }

/* ---------- 导航“当前页”高亮 ----------
   模板把 class="here" 写死在“公司首页 / HOME”上，导致所有内页都亮着首页。
   内页都有面包屑 .page_r_top、首页有轮播 .focus 没有面包屑，据此区分。 */
body:has(.page_r_top) .menu li.here { background: transparent; }

/* 中文内页：面包屑第一项就是当前栏目，链接与菜单一一对应，据此高亮 */
body:has(.page_r_top a[href="/cn/about/"])     .menu li:has(a[href="/cn/about/"])     { background: #0097e0; }
body:has(.page_r_top a[href="/cn/products/"])  .menu li:has(a[href="/cn/products/"])  { background: #0097e0; }
body:has(.page_r_top a[href="/cn/equipment/"]) .menu li:has(a[href="/cn/equipment/"]) { background: #0097e0; }
body:has(.page_r_top a[href="/cn/zixun/"])     .menu li:has(a[href="/cn/zixun/"])     { background: #0097e0; }
body:has(.page_r_top a[href="/cn/contact/"])   .menu li:has(a[href="/cn/contact/"])   { background: #0097e0; }

/* ---------- 左侧栏目导航：宽度不够时自动增高，文字不重叠 ----------
   style.css 原样式：.page_l_ul li{ height:36px; line-height:36px; }
   左栏固定 218px，链接左侧留 40px 图标内间距，文字可用宽度约 172px。
   英文栏目名较长（如 "A2/A4 Bugle Batten Type 17 screws"）会折成两行，
   而 li 高度被锁死在 36px，第二行直接压到下一项文字上 —— 就是正文里
   看到的"文字重叠"。
   改法（只改"高度能否增长"，颜色/字号/图标位置一律不动）：
     1) li 高度改为自适应，min-height 保留 36px 的原节奏；
     2) a 统一 display:block（原来只有 hover/当前项是 block），
        这样折行后第二行从 40px 处起排，不会顶到最左边；
     3) 22px 行高 + 上下各 7px 内边距：单行时总高仍是 36px，
        文字基线与改动前逐像素一致（已用真实页面截图比对验证）；
     4) 折成两行时整项自动增高到 58px，行与行之间不再互相压字；
     5) 图标背景固定 10px 10px，始终对齐第一行文字。
   中文站同名类共用这套规则；全部单行，版式与改动前完全一致。 */
.page_l_ul li {
    height: auto;
    min-height: 36px;
}

.page_l_ul li a,
.page_l_ul li a:link,
.page_l_ul li a:visited,
.page_l_ul li a:hover,
.page_l_ul li a:active,
.page_l_ul li a.here2 {
    display: block;
    height: auto;
    min-height: 36px;
    line-height: 22px;
    padding: 7px 6px 7px 40px;   /* 右侧只留 6px：再多 2px 就会把本来单行的 "Bugle Batten TY17 screws" 也挤成两行 */
    box-sizing: border-box;
    background-position: 10px 10px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 左栏标题（ABOUT US / PRODUCTS…）只让高度可以增长，其余不动：
   p 仍是 line-height:60px，单行时容器就是 60px，与原来一模一样；
   万一标题过长折行，容器会跟着变高，不会压到下面的栏目列表。 */
.page_l_top {
    height: auto;
    min-height: 60px;
}

/* 列表页空状态：栏目下没有已发布内容时不至于只剩一条分页条 */
.product_empty {
    padding: 60px 0;
    text-align: center;
    color: #888;
    font-size: 14px;
    line-height: 24px;
}

/* 英文首页页脚 More：按钮整体靠右，
   图标右端与栏目右边界齐平。 */
.more.more_c {
    width: 100px;
    float: right;              /* 非 flex 环境下的旧行为 */
    align-self: flex-end;      /* flex 子项中 float 无效，改用交叉轴靠右 */
    text-align: right;
    background: none;
}
.more.more_c > a {
    display: inline-block;
    padding-right: 40px;
    background: url(../images/icon03.png) no-repeat right center;
}

/* 英文首页页脚：三栏等高，More 贴底，
   使 NEWS / ABOUT US / CONTACT 三个按钮落在同一水平线 */
.footer_en {
    display: flex;
    flex-direction: row-reverse;   /* 保持 CONTACT 在右 / NEWS 在左的原有视觉顺序 */
    align-items: stretch;
}
.footer_en > .footer_r,
.footer_en > .footer_m,
.footer_en > .footer_l {
    float: none;
    display: flex;
    flex-direction: column;
}
.footer_en > .footer_l > .footer_news {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.footer_en .more.more_c {
    margin-top: auto;              /* 推到所属栏目最底部 */
}