/*!
 * JCE UI 整改层
 * 目标：统一设计令牌、修正对比度与层级、改善移动端触控与遮挡、收敛 CTA。
 * 加载位置：wp_head 末尾（mu-plugins/jce-ui-polish.php），因此可覆盖主题与区块 CSS；
 * 对页面内联 <style>（联系页等）使用提高选择器权重的写法覆盖。
 */

/* ---------------------------------------------------------------- 1. 令牌 */
:root {
  --jce-ink-900: #0b1b33;
  --jce-ink-700: #33415c;
  --jce-ink-500: #5a6b8c;   /* 白底 5.4:1 */
  --jce-line: #e5eaf3;
  --jce-surface: #ffffff;
  --jce-surface-2: #f5f8ff;
  --jce-brand: #1a56db;     /* 白字 6.2:1 */
  --jce-brand-700: #1443b0;
  --jce-accent: #ffd86b;    /* 仅深色底使用 */
  --jce-radius-sm: 6px;
  --jce-radius: 8px;
  --jce-pill: 999px;
  --jce-shadow: 0 10px 30px rgba(11, 27, 51, .12);
  --jce-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
              "Noto Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}

/* --------------------------------------------------- 2. 基础排版与焦点态 */
html { -webkit-text-size-adjust: 100%; }

body,
.layui-content,
.layui-content p,
.layui-content li,
.layui-content a,
.layui-content h1,
.layui-content h2,
.layui-content h3,
.layui-content h4,
.layui-content div,
.jce-pr,
.jce-pv2 {
  font-family: var(--jce-font);
}

a,
button,
input,
select,
textarea,
[tabindex] { -webkit-tap-highlight-color: rgba(26, 86, 219, .12); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #7db0ff;
  outline-offset: 2px;
}

/* 正文可读性：CJK 正文 16px / 1.75，小字不低于 14px */
/* 图片的 width/height 属性只提供占位比例，实际高度仍由页面 CSS 决定 */
:where(img[width][height]) { height: auto; }

.jce-pr p,
.jce-pr li,
.jce-pv2 p,
.jce-pv2 li,
.jce-pv2-lead,
.jce-pr-lead {
  font-size: 16px;
  line-height: 1.75;
}

.jce-pr .sec-sub,
.jce-pv2 .sec-sub,
.jce-pr .jce-pr-note,
.jce-pv2 .jce-pv2-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--jce-ink-500);
}

/* 仅浅色区块内的正文加深；深色区块（hero / oem / cta）保持原有浅色 */
.jce-pr-section p,
.jce-pv2-section p { color: var(--jce-ink-700); }

.the-end { color: var(--jce-ink-500) !important; }

/* 标题层级：用字号和颜色分工，字重不再全部 800 */
.jce-pr h1,
.jce-pr h2,
.jce-pr h3,
.jce-pv2 h1,
.jce-pv2 h2,
.jce-pv2 h3 { font-weight: 700; }

.jce-pr h3,
.jce-pv2 h3 { font-weight: 600; }

.layui-content .text p,
.layui-content .text li {
  font-size: 16px;
  line-height: 1.85;
  color: var(--jce-ink-700);
}

/* --------------------------------------------------------- 3. 按钮与 CTA */
/* 主 CTA 统一为品牌蓝，白字 6.2:1；取消橙→品红渐变 */
.jce-pr-btn.primary,
.jce-hero-cta .jce-cta-primary,
.jce-badge-highlight,
.jce-pv2-btn.accent {
  background: var(--jce-brand);
  background-image: none;
  color: #fff;
  box-shadow: 0 8px 20px rgba(26, 86, 219, .24);
}

.jce-pr-btn.primary:hover,
.jce-hero-cta .jce-cta-primary:hover,
.jce-pv2-btn.accent:hover {
  background: var(--jce-brand-700);
  background-image: none;
  color: #fff;
  box-shadow: 0 12px 26px rgba(26, 86, 219, .32);
}

/* 产品页：1 主（实心）+ 1 次（描边）+ 2 条文字链，取代 4 个同权重按钮 */
.jce-pv2-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* 产品页样式在模板中晚于本文件加载，关键项用 !important 保证生效 */
/* 规格表 min-width:480px 会把移动端页面整体撑宽（变成 496px 布局），
   容器允许收缩并保留横向滚动 */
.jce-pv2-grid > *,
.jce-pv2-hero > * { min-width: 0; }

.jce-pv2-table-wrap { max-width: 100%; }

.jce-pv2-btn.accent {
  background: var(--jce-brand) !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(26, 86, 219, .24) !important;
}

.jce-pv2-btn.accent:hover {
  background: var(--jce-brand-700) !important;
  background-image: none !important;
  color: #fff !important;
}

.jce-pv2-btn.primary {
  background: #fff !important;
  background-image: none !important;
  color: var(--jce-brand) !important;
  border: 1.5px solid var(--jce-brand) !important;
  box-shadow: none !important;
}

.jce-pv2-btn.primary:hover {
  background: #f2f6ff !important;
  color: var(--jce-brand-700) !important;
  box-shadow: none !important;
}

.jce-pv2-btn.ghost {
  min-height: 44px;
  padding: 8px 2px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--jce-brand) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none !important;
}

.jce-pv2-btn.ghost:hover {
  background: transparent !important;
  color: var(--jce-brand-700) !important;
}

/* 深色 CTA 区域里的文字链需要反白，蓝色在深蓝底上不可读 */
.jce-pv2-cta .jce-pv2-btn.ghost {
  color: #fff !important;
  text-decoration-color: rgba(255, 255, 255, .7);
}

.jce-pv2-cta .jce-pv2-btn.ghost:hover {
  color: var(--jce-accent) !important;
}

/* 面包屑当前项 */
.jce-pv2-breadcrumb .item-current,
.jce-pv2-breadcrumb .item-current a {
  color: var(--jce-ink-500) !important;
}

/* 相关产品文字链：12.5px 浅灰仅 4.3:1，提深到 5.4:1 */
.jce-pv2-related a {
  color: var(--jce-ink-500) !important;
  font-size: 13.5px;
}

.jce-pv2 h1,
.jce-pv2 h2 { font-weight: 700 !important; }

.jce-pv2 h3 { font-weight: 600 !important; }

.jce-pv2 .jce-pv2-note,
.jce-pv2 .sec-sub {
  font-size: 14px !important;
  color: var(--jce-ink-500) !important;
}

/* 顶部导航、面包屑、分页：触控热区（顶栏高度与 www.jcecable.com 对齐为 36px） */
.jce-top-bar,
.jce-top-bar-inner {
  height: 36px;
  min-height: 36px;
  line-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}

.jce-top-bar a {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0;
  margin: 0 2px;
  vertical-align: top;
}

/* 语言胶囊保持 .com 的 19px 按钮高度，不撑高顶栏 */
.jce-lang-capsule .jce-lang-capsule-btn {
  display: block;
  height: auto;
  min-width: 0;
  min-height: 0;
  line-height: 13px;
  padding: 3px 12px;
}

/* 小屏允许换行，并隐藏次要文案，避免固定 36px 造成横向溢出 */
@media screen and (max-width: 768px) {
  .jce-top-bar,
  .jce-top-bar-inner {
    height: auto;
    min-height: 0;
    line-height: 1.9;
  }

  .jce-top-bar a {
    display: inline;
    height: auto;
    line-height: 1.9;
  }

  .jce-top-hide-sm { display: none; }
}

@media screen and (max-width: 400px) {
  .jce-top-email { display: none; }
}

.jce-pv2-breadcrumb a,
.jce-pv2-breadcrumb span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 2px;
}

.layui-laypage a,
.layui-laypage span {
  min-width: 44px;
  min-height: 44px;
  line-height: 44px;
  display: inline-block;
  text-align: center;
}

/* 顶级导航文字继承父级颜色，去掉残留的暖灰色；
   不要把这条规则作用到下拉菜单，否则黑色文字会落在深色下拉底上 */
.head-menu .layui-nav > li > a > span,
.layui-side .layui-nav > li > a > span,
.jce-top-bar .jce-top-right { color: inherit; }

/* 下拉菜单：深色实底 + 白字，悬停高亮 */
.head-menu .layui-nav-child {
  background: var(--jce-ink-900) !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--jce-radius);
  box-shadow: var(--jce-shadow);
  padding: 6px 0;
  min-width: 176px;
}

.head-menu .layui-nav-child a,
.head-menu .layui-nav-child a span {
  color: #fff !important;
  font-size: 14px;
}

.head-menu .layui-nav-child a {
  display: block;
  padding: 10px 16px;
  line-height: 1.45;
}

.head-menu .layui-nav-child a:hover,
.head-menu .layui-nav-child a:hover span {
  color: var(--jce-accent) !important;
  background: rgba(255, 255, 255, .08);
}

/* --------------------------------------------- 4. 浮动栏与 Cookie 不重叠 */
#jce-cookie-bar { font-size: 14px; }

#jce-cookie-bar button {
  min-height: 44px;
  padding: 0 20px;
  font-size: 14px;
}

#jce-cookie-bar button[onclick*="all"] {
  background: var(--jce-brand) !important;
  background-image: none !important;
}

@media screen and (max-width: 768px) {
  body:has(#jce-cookie-bar) .jce-float-cta { bottom: 168px; }
}

/* 浮动栏统一色系，去掉橙/红/绿三色 */
.jce-float-quote,
.jce-float-1688,
.jce-float-chat {
  background: linear-gradient(135deg, #1e55d6, #0c1a3a);
}

.jce-float-btn:hover { color: var(--jce-accent); }

/* --------------------------------------------------------- 5. 联系页 */
/* H1 回到 40px 层级，与其他页面一致 */
.title-article h1 {
  font-size: 40px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--jce-ink-900);
  margin: 6px 0 14px;
}

.title-article .title-msg { font-size: 14px; color: var(--jce-ink-500); }

.layui-content > .layui-container {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.layui-content .layui-row.main { margin-left: 0; margin-right: 0; }

/* 联系卡片：品红链接 → 品牌蓝；正文 15px */
.jce-contact-card a,
.jce-factory-info a {
  color: var(--jce-brand) !important;
  font-size: 15px !important;
}

.jce-contact-card a:hover,
.jce-factory-info a:hover { color: var(--jce-brand-700) !important; }

.jce-contact-card p,
.jce-factory-info li { font-size: 15px !important; line-height: 1.75; }

/* 表单：16px 输入避免 iOS 聚焦缩放，标签 14px，提交按钮实心蓝 */
.jce-form label { font-size: 14px !important; }

.jce-form input,
.jce-form select,
.jce-form textarea {
  font-size: 16px !important;
  min-height: 46px;
}

.jce-form textarea { min-height: 130px; }

#jce_submit_btn,
.jce-form button[type="submit"] {
  background: var(--jce-brand) !important;
  background-image: none !important;
  color: #fff !important;
  min-height: 50px;
  border-radius: var(--jce-radius) !important;
  box-shadow: 0 8px 20px rgba(26, 86, 219, .24) !important;
}

#jce_submit_btn:hover,
.jce-form button[type="submit"]:hover {
  background: var(--jce-brand-700) !important;
  box-shadow: 0 12px 26px rgba(26, 86, 219, .32) !important;
}

/* --------------------------------------------- 6. 新闻页：蒙版与可读性 */
.ys_ban_imgbox { position: relative; }

.ys_ban_imgbox::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 38, .62), rgba(6, 16, 38, .38));
  z-index: 1;
  pointer-events: none;
}

.ybli_tit,
.ybli_info { position: relative; z-index: 2; }

.nrru_li_time,
.nrru_li_time p,
.news_date,
.jce-news-date {
  color: var(--jce-ink-500) !important;
}

/* --------------------------------------------------- 7. 无障碍工具类 */
.jce-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 10px 16px;
  background: var(--jce-ink-900);
  color: #fff;
  font-size: 14px;
  border-radius: 0 0 var(--jce-radius) 0;
  text-decoration: none;
}

.jce-skip-link:focus {
  left: 0;
}

.jce-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------- 8. 移动端细节 */
@media screen and (max-width: 768px) {
  /* 移动端菜单按钮实际渲染宽度只有 20px，扩到 44px 触控区 */
  .site-tree-mobile {
    width: 44px;
    min-width: 44px;
    height: 44px;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-tree-mobile .layui-icon {
    height: auto;
    font-size: 22px;
  }

  .title-article h1 { font-size: 28px !important; line-height: 1.3 !important; }

  .jce-pv2-actions .jce-pv2-btn.ghost {
    width: auto;
    min-height: 40px;
    padding: 6px 2px !important;
  }

  #jce_submit_btn,
  .jce-pr-btn {
    min-height: 48px;
  }

  /* 移动端表单提交按钮吸底，减少长页面滚动成本 */
  #jce_submit_btn {
    position: sticky;
    bottom: 12px;
    z-index: 5;
  }
}