/* ═══════════════════════════════════════════════════════════
   sb-header-hero-fix.css
   Fixes the colour mismatch / padding gap between the fixed
   header and the hero section on INNER PAGES of the site.
   Homepage hero (#sbhp-hero) is NOT touched — it handles
   its own background via sbhp-premium.css.
   ═══════════════════════════════════════════════════════════ */

/* 1. Unify background across all page shells ─────────────── */
html, body, #root {
  background-color: #07080B !important;
}

/* 2. Inner-page hero (InnerPageShell) ────────────────────── */
/* Match body bg so no different-shade band shows through     */
.ip-hero {
  background: linear-gradient(
    180deg,
    #07080B 0%,
    #09101c 55%,
    #0d1428 100%
  ) !important;
  border-bottom: 1px solid rgba(49, 224, 250, 0.07) !important;
}

/* Desktop: header is ~90px tall when expanded */
.ip-hero {
  padding-top: clamp(110px, 16vw, 160px) !important;
}

/* Tablet ≤ 1024px: header collapses to 66px fixed */
@media (max-width: 1024px) {
  .ip-hero {
    padding-top: calc(66px + 40px) !important;
  }
}

/* Mobile ≤ 640px */
@media (max-width: 640px) {
  .ip-hero {
    padding-top: calc(66px + 24px) !important;
  }
}

/* NOTE: .sbhp-hero / #sbhp-hero / #sbhp-canvas are intentionally
   NOT overridden here. The homepage premium canvas hero manages
   its own background via sbhp-premium.css (background: #001224)
   and sbhp-premium.js (Three.js WebGL renderer).               */

/* 3. Remove any accidental body top padding/margin ───────── */
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 4. Consistent page-level background ─────────────────────  */
.ip-page,
.page-wrapper,
.site-content,
main,
.main-content {
  background-color: #07080B !important;
}

/* 5. .ip-section-alt — keeps slightly lighter but not jarring */
.ip-section-alt {
  background: #09101c !important;
}

/* 6. Responsive: ensure hero text is not cut on very small screens */
@media (max-width: 400px) {
  .ip-hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ip-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    word-break: break-word !important;
  }
}