/* ==================================================================
 * bvmc 主题结构层样式
 *
 * legacy.css  = 原站视觉基线（index.css + app.css + main.css，未改动）
 * main.css    = 本主题新增/修正：WordPress 特有的结构类、CPT 页布局、
 *               legacy 未覆盖的交互状态
 * responsive.css = 响应式断点（1440/1280/1200/1100/992/990/768/480）
 * ================================================================== */

:root {
    --main-theme-color: #014F9A;
    --sub-theme-color:  #0D73FC;
    --mid-blue:         #2866a6;
    --accent-red:       #ba2324;
    --section-bg:       #eeeeee;
    --header-bg:        #efefef;
    --text-main:        #333333;
    --text-sub:         #666666;
    --text-foot:        #888888;
}

/* 主体区域最小高度，避免页脚上浮 */
.site-main { min-height: 400px; }

/* ------------------------------------------------------------------
 * 列表页 / 详情页左侧栏
 * 盒模型与字号全部沿用 legacy.css（.left-title / .cate-list），
 * 这里只补原站「当前分类」高亮（.list-title.active）这一条 legacy 没有的规则。
 * ------------------------------------------------------------------ */
#page-wrap .cate-list .list-title.active { color: var(--main-theme-color); }


/* 正文富文本
 * 排版（字号/行高）以 legacy.css 与原站内联样式为准，这里不再覆盖，
 * 只补图片/表格这两个 legacy 没管的基础约束。 */
.tab-content .tab-pane img { max-width: 100%; height: auto; display: block; margin: 10px auto; }
.tab-content .tab-pane table { width: 100%; border-collapse: collapse; margin: 15px 0; }
.tab-content .tab-pane table td,
.tab-content .tab-pane table th { border: 1px solid #ddd; padding: 8px 12px; font-size: 14px; }

/* 标签 / 上下页：retina 样式全部交回 legacy.css（.tags-list-detail / #page-next-prev），
 * 这里曾自定义过 margin + 药丸标签，导致产品页比原站高 80px，已删除。 */

/* 产品相关推荐 */

/* ------------------------------------------------------------------
 * 列表页（产品中心 / 案例 / 新闻）
 * ------------------------------------------------------------------ */
.archive-grid { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.archive-grid .item { width: 25%; padding: 0 15px 30px; }
.archive-grid .item .thumb { position: relative; overflow: hidden; background: #f5f5f5; }
.archive-grid .item .thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.archive-grid .item h2 { font-size: 16px; margin: 12px 0 6px; color: #333; }
.archive-grid .item .meta { font-size: 13px; color: #999; }

/* 新闻列表 */
.news-list .news-item {
    display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid #eee;
}
.news-list .news-item .thumb { width: 260px; flex: none; }
.news-list .news-item .thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.news-list .news-item h2 { font-size: 18px; margin: 0 0 8px; }
.news-list .news-item .date { font-size: 13px; color: #999; margin-bottom: 8px; }
.news-list .news-item p { font-size: 14px; color: #666; }

/* ------------------------------------------------------------------
 * 表单（首页询盘 / 产品页留言）
 * ------------------------------------------------------------------ */
/* 说明：首页留言区与产品页表单的输入框样式一律以 legacy.css（原站 CSS）为准，
   这里不再覆盖 height / font-size / margin —— 之前多出的 margin-bottom:15px
   会让每个表单行比原站高 15px，整段留言区因此偏高 30px。 */
.inquiry-submit {
    width: 100%; height: 45px; background: var(--sub-theme-color); color: #fff;
    border: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: .25s;
}
.inquiry-submit:hover { background: #fff; color: var(--main-theme-color); }

/* Fluent Forms 与主题视觉对齐 */
.fluentform .ff-el-input--content input,
.fluentform .ff-el-input--content textarea { border-radius: 0; }

/* ------------------------------------------------------------------
 * 修正 legacy 里没覆盖到的 WordPress 元素
 * ------------------------------------------------------------------ */
.wp-block-image img { max-width: 100%; height: auto; }
.comment-list { list-style: none; padding: 0; }
.search-form { display: flex; gap: 8px; }

/* ---------- 首页产品卡：列宽完全交回 legacy.css ----------
   原站 .pp_ll li 为 calc(100%/4 - 30px) + margin 15px，容器全宽；
   之前在这里加 max-width:1300 与 !important 会让卡片变窄、与整页错位。
   现在只保留 flex 换行能力，宽度/间距沿用原站规则。 */
.box3 .pp_ll { display: flex; flex-wrap: wrap; }

/* ------------------------------------------------------------------
 * 询盘结果提示条（wp_body_open 输出，全站统一）
 * ------------------------------------------------------------------ */
.bvmc-notice {
  position: relative;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 48px 14px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  background: #2f7d3a;
}
.bvmc-notice--warn { background: #b8791a; }
.bvmc-notice--err  { background: #b02a2a; }
.bvmc-notice span { flex: 1 1 auto; }
.bvmc-notice-close {
  position: absolute;
  top: 8px;
  right: 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.bvmc-notice-close:hover { opacity: 1; }

/* ---------- 产品卡图像区：统一 3:2（与原站 750×500 一致） ---------- */
.box3 .pp_ll li .img {
  aspect-ratio: 3 / 2;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box3 .pp_ll li .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 产品卡遮罩默认应收起，只有 hover 才滑出（否则 MORE 按钮会露在卡片底部） */
.box3 .pp_ll li .dd_pp { overflow: hidden; }

/* ============================================================
   无障碍工具类：只给屏幕阅读器看，不占布局
   用途：首页补一个语义 H1（原站首页 h1 数量为 0，属于 SEO 缺陷）
   ============================================================ */
.bvmc-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;
}

/* ============================================================
   标签页 /tag/{slug} 的缩略图
   原站这两处的图片地址带 OSS 参数 resize,m_fixed,h_300,w_300 —— m_fixed 是
   「强制拉伸到 300×300」，不保持比例。所以原站标签页的缩略图其实是压扁过的方图。
   本地不做这种图片处理，用 aspect-ratio 把框定成 1:1，img 默认的 object-fit:fill
   会得到与原站完全一致的拉伸效果（框尺寸相同 -> 行高一致，画面内容也一致）。
   如果后续想改成不变形，把 aspect-ratio 换成 3/2 + object-fit:contain 即可，
   但那样标签页会比原站矮一截。
   ============================================================ */
.tag-product-list li .img img,
#page-wrap .col-xs-6.col-md-3 .thumbnail img {
    aspect-ratio: 1 / 1;
    background-color: #fff;
}