/* ==========================================================================
   custom.css — 首页排版修复
   在 css/style.css（主题样式）之后加载，只针对首页中影响整齐度的问题做最小修正。
   ========================================================================== */

/* ---------- 锚点导航（单页模式） ---------- */
html {
  scroll-behavior: smooth;
}
/* 滚动定位时为吸顶导航预留空间，避免标题被遮挡 */
#top, #feature, #offer {
  scroll-margin-top: 85px;
}

/* ---------- 顶部导航 ---------- */
/* 导航悬浮在深色 Banner 之上，移动端汉堡按钮改为白色，保证可见 */
.navbar-toggler .icon-bar {
  background-color: #fff;
}

/* ---------- Hero Banner ---------- */
/* 主题在 1200px+ 将内边距放大到 265/275px，导致 Banner 上下出现大片空白，收敛到合理范围 */
.hero-banner { padding: 130px 0 90px; }
@media (min-width: 600px)  { .hero-banner { padding: 155px 0 105px; } }
@media (min-width: 991px)  { .hero-banner { padding: 170px 0 115px; } }
@media (min-width: 1200px) { .hero-banner { padding: 180px 0 125px; } }

/* 主题在 1200px+ 把 Banner 主图设为 absolute/left:-110px，脱离文档流导致左右失衡，改回正常流 */
@media (min-width: 1200px) {
  .hero-banner__img img {
    position: static;
    left: auto;
  }
}

/* 中文标题字宽比英文大，适当减小字号避免换行过多 */
@media (min-width: 600px) {
  .hero-banner__content h1 { font-size: 36px; }
}

/* 首页 Banner 没有按钮，去掉副标题多余的下边距 */
.hero-banner__content p { margin-bottom: 0; }

/* ---------- 服务卡片（我们有能力服务各类产品） ---------- */
/* 图标是内联 span，margin-bottom 对内联元素不生效，改为块级使图标与标题间距生效 */
.card-feature__icon {
  display: block;
  margin-bottom: 12px;
}

/* ---------- 功能介绍（我们提供的功能） ---------- */
/* 主题把右侧主图设为 absolute（top/left 偏移），超出容器造成页面横向滚动，改回正常流并居中 */
@media (min-width: 991px) {
  .offer-single__img {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    max-width: 100%;
    transform: none;
    margin: 0 auto;
  }
}

/* ---------- 页脚（首页只保留版权栏） ---------- */
/* 主题的页脚上下留白 120px + footer-bottom 上边距 70px，只剩一行文字时形成大片空白，收敛留白 */
.footer--slim {
  padding: 30px 0;
}
.footer--slim .footer-bottom {
  margin-top: 0;
}
/* 版权文字与备案号颜色在深色底上保证可读性 */
.footer--slim .footer-bottom .footer-text {
  color: #9aa3b2;
  font-size: 14px;
}
.footer--slim .footer-bottom .footer-text a {
  color: #dfe3ea;
}
.footer--slim .footer-bottom .footer-text a:hover {
  color: #fff;
}