/* ──────────────────────────────────────────────────────────────────────────
   PER-TENANT THEME OVERRIDE (thin layer — NOT a rewrite of the legacy CSS).

   The legacy bundles hard-code the 微鹏 brand blue (#009FE8 / #00a0e8) in many
   places. Rather than editing every bundle, this thin layer re-points only the
   MOST VISIBLE brand spots to `var(--brand-color)`, which the root layout sets
   per request from the tenant's theme_color (see app/layout.tsx).

   Default + weipeng theme_color is #009FE8, so the fallback makes this a
   NO-OP-equivalent for 微鹏 (identical pixels). For the wpshare demo tenant the
   var resolves to #E8540A, recoloring these spots orange.

   Loaded AFTER the page bundles (linked last) so it wins; `!important` is used
   only against the high-specificity legacy rules it shadows.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --brand-color: #009fe8;
}

/* ── header: service-hotline number + active/hover nav ── */
.head .hea-rig .rig-top i {
  color: var(--brand-color) !important;
}
.head .hea-rig ul li:hover a,
.head .hea-rig ul li.cur a {
  color: var(--brand-color) !important;
}

/* ── Two-level dropdown nav (items with children only) ───────────────────────
   Additive: only <li class="has-sub"> (rendered when a top-level nav item has
   second-level children) becomes a positioning context for a hidden .sub-nav
   panel that fades in on hover. The panel sits flush under the 61px-tall parent
   li (no gap), so the cursor stays within the parent's :hover region while
   moving into it. WEIPENG IS UNAFFECTED: its nav items carry no children, so no
   .has-sub / .sub-nav markup is emitted and these rules never match. */
.head .hea-rig ul li.has-sub {
  position: relative;
}
.head .hea-rig ul li.has-sub > .sub-nav {
  position: absolute;
  top: 61px;
  left: 50%;
  min-width: 150px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 100;
}
.head .hea-rig ul li.has-sub:hover > .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.head .hea-rig ul li.has-sub > .sub-nav li {
  height: auto;
  line-height: 1.4;
  text-align: center;
}
.head .hea-rig ul li.has-sub > .sub-nav li a {
  display: block;
  padding: 9px 18px;
  font-size: 0.85rem;
  /* !important + higher specificity beats the `li:hover a { color: brand
     !important }` above so non-hovered children stay dark while the parent is
     hovered; only the individually-hovered child (rule below) goes brand. */
  color: #333 !important;
  white-space: nowrap;
  font-weight: 400;
}
.head .hea-rig ul li.has-sub > .sub-nav li:hover a {
  color: var(--brand-color) !important;
  background: rgba(0, 0, 0, 0.035);
  font-weight: 400;
}

/* ── generic brand links / hovers used across inner pages (search, crumbs) ── */
.p102-search-1 p a:hover,
.p102-curmbs-1 a:hover,
.xl-xgzx-tys-03-list2:hover a,
.qccdz ul li em a:hover {
  color: var(--brand-color) !important;
}

/* ── homepage marketing accents (.ppbj / .solu) ── */
.ppbj b,
.ppbj span,
.solu .sol-tit b {
  background: var(--brand-color) !important;
}

/* ── carousel / pagination dots ── */
.solu .solu-list .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
}
.slick-dots li button {
  background-color: var(--brand-color) !important;
}

/* ── homepage news tab + ebike hover + auto-charger hover ── */
.news .news-tit strong a.cur {
  background: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
  color: #fff !important;
}
.dpcdz ul li:hover i,
.qccdz ul li b:hover {
  background: var(--brand-color) !important;
}

/* ── primary buttons / submit (leaveword) ── */
.p4-order-form-1-con .p4-order-form-1-b1 {
  background: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
}

/* ── i18n language switcher (header .rig-top) ──
   Only rendered when the tenant has >1 enabled locale, so it is absent (and thus
   pixel-neutral) on the single-locale zh chrome. Inline-block, sits after the
   hotline number; the active locale is highlighted in the brand color. */
.lang-switch {
  display: inline-block;
  margin-left: 12px;
}
.lang-switch a {
  display: inline-block;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
  text-decoration: none;
}
.lang-switch a + a {
  border-left: 1px solid #ccc;
}
.lang-switch a:hover,
.lang-switch a.lang-cur {
  color: var(--brand-color) !important;
}

/* Floating side-rail WeChat QR popup. The legacy CSS hides .my-kefu-weixin-pic
   with display:none and the original site revealed it via JS on hover; our React
   port didn't, so the popup never appeared. Reveal it on hover here (the higher
   specificity beats the base display:none). */
.client-2 .my-kefu-weixin:hover .my-kefu-weixin-pic {
  display: block;
}

/* Solutions scenario cards (SolutionsCarousel): subtle lift on hover. */
.solu-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.solu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

/* ── Per-tenant inner banner fit (NON-default tenants only) ──────────────────
   The legacy `.ty-banner-1 img` is absolutely positioned by raw pixels (assumes
   the exact 1920×480 banner weipeng ships). Other tenants' banners can be any
   size/ratio (e.g. wkmip's 3024×1296), so InnerBanner tags them `.banner-fit`
   (+ `.banner-fit-box` on the container). Here we give the container a fixed
   responsive height and let the image cover it — so any banner fills the strip
   cleanly without overflowing or stretching the page. WEIPENG IS UNAFFECTED:
   its banners carry no `.banner-fit` class, so the legacy rules still apply. */
.ty-banner-1.banner-fit-box {
  width: 100%;
  height: 480px;
}
.ty-banner-1 img.banner-fit {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Scale the banner height down on narrower viewports (keeps the 4:1-ish feel). */
@media screen and (max-width: 1440px) {
  .ty-banner-1.banner-fit-box { height: 360px; }
}
@media screen and (max-width: 1024px) {
  .ty-banner-1.banner-fit-box { height: 280px; }
}
@media screen and (max-width: 768px) {
  .ty-banner-1.banner-fit-box { height: 180px; }
}

/* ── DemoHome (non-default tenant homepage) hero strip ──
   Full-bleed visual under the header, same fixed-height cover treatment as the
   inner banner so any hero image fills the strip cleanly. Only present on the
   data-driven DemoHome (other tenants), never on the weipeng homepage. */
.dh-hero {
  width: 100%;
  height: 520px;
  overflow: hidden;
  line-height: 0;
}
.dh-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media screen and (max-width: 1440px) {
  .dh-hero { height: 420px; }
}
@media screen and (max-width: 1024px) {
  .dh-hero { height: 320px; }
}
@media screen and (max-width: 768px) {
  .dh-hero { height: 200px; }
}

/* ── Homepage 实力(.super) section width alignment (default-tenant home only) ──
   The original 单仁牛商 markup gives .super ~96% near-full-width content
   (padding:0 1.8%), while every other card section sits in .content (84%
   centered). That made the 实力/相信品牌 cards stick out noticeably wider than
   解决方案 / 客户案例 etc. Pull the .super content into the SAME 84% centered
   column so all content sections align; the full-bleed background band (super.jpg)
   is untouched. This block renders only on the weipeng homepage (page.tsx) — no
   other tenant/page has .super — so nothing else is affected. */
.super {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.super > h2,
.super > ul.clearfix {
  width: 84%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   SEO/GEO 语义 <h1>: 列表页/首页的页面主题标题。这些页型的主题体现在 banner 图
   / 分类导航里，没有可见的文本主标题元素；旧站因此把 logo 当 h1（反模式）。
   我们改为:logo 降级为普通链接(见 SiteHeader/InnerHeader),并给这些页各放一个
   承载"页面主题"的语义 <h1class="seo-h1">。视觉上完全隐藏(不改变任何可见像素,
   对默认租户 weipeng 也是视觉零变化),但对搜索引擎/AI 是明确的页面主题信号。
   详情页(文章/产品)有可见真标题、已直接用作可见 <h1>,不需要本 class。
   ────────────────────────────────────────────────────────────────────────── */
.seo-h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}