/*
 * ═══════════════════════════════════════════════════════════════
 *  SWEDBANG — HOMEPAGE FONT SHARPNESS LAYER v1.0
 *  Purpose : Enforce Inter (body) + Merriweather (headings) on
 *            the homepage, overriding Satoshi/Cormorant fallbacks.
 *  Cascade : Loaded LAST — wins all specificity battles.
 *  Safe    : Scoped to body[data-route="/"] + #sbhp-*
 *            Does NOT touch hero canvas, video, or animations.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── 0. FONT TOKENS (homepage-scoped re-declarations) ──────────── */
body[data-route="/"] {
  --sbhp-font     : 'Inter', system-ui, -apple-system, sans-serif;
  --sbhp-font-head: 'Merriweather', Georgia, serif;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  text-rendering          : optimizeLegibility;
}

/* ─── 1. GLOBAL BODY COPY — swap Satoshi → Inter ─────────────────── */
#sbhp-premium-wrapper,
#sbhp-premium-wrapper p,
#sbhp-premium-wrapper li,
#sbhp-premium-wrapper span:not([class*="icon"]):not([class*="badge"]) {
  font-family            : 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing : antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering         : optimizeLegibility !important;
}

/* ─── 2. SECTION TITLE HEADINGS — Merriweather serif ─────────────── */

/* Replaces 'Cormorant Garamond','Satoshi' across all sbhp sections */
body[data-route="/"] .sbhp-section-title,
body[data-route="/"] .sbhp-headline,
body[data-route="/"] h1,
body[data-route="/"] h2,
body[data-route="/"] h3,
body[data-route="/"] h4,
#sbhp-supply  .sbhp-section-title,
#sbhp-why     .sbhp-section-title,
#sbhp-process .sbhp-section-title,
#sbhp-global  .sbhp-section-title,
#sbhp-contact .sbhp-section-title,
#sbhp-global-reach .sbhp-headline,
#sbhp-brand-film   .sbhp-section-title {
  font-family            : 'Merriweather', Georgia, serif !important;
  -webkit-font-smoothing : antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering         : geometricPrecision !important;
}

/* ─── 3. HERO HEADLINE — sharp Merriweather, keep shimmer gradient ── */

/* The hero headline gradient is applied via background-clip text.
   We keep all its colour/animation, only swap the font-family.       */
#sbhp-hero .sbhp-headline,
body[data-route="/"] .hero-headline {
  font-family            : 'Merriweather', Georgia, serif !important;
  font-weight            : 900 !important;
  letter-spacing         : -0.038em !important;
  line-height            : 1.07 !important;
  -webkit-font-smoothing : antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering         : geometricPrecision !important;
  /* Crisp sub-pixel at large sizes on hi-DPI */
  font-variant-ligatures : no-common-ligatures !important;
}

/* ─── 4. HERO SUBHEADLINE — Inter, slightly larger + sharper ─────── */
#sbhp-hero .sbhp-subheadline,
body[data-route="/"] .hero-sub {
  font-family  : 'Inter', system-ui, sans-serif !important;
  font-size    : clamp(15px, 1.4vw, 18px) !important;
  font-weight  : 400 !important;
  line-height  : 1.78 !important;
  letter-spacing: 0.005em !important;
  color        : rgba(190, 215, 245, 0.92) !important;
  -webkit-font-smoothing : antialiased !important;
}

/* ─── 5. CARD TITLES (h3 inside cards) — Merriweather ───────────── */
.sbhp-supply-card h3,
.sbhp-feature-card h3,
.sbhp-step h3,
.sbhp-stat-card h4,
.ent-card-title {
  font-family            : 'Merriweather', Georgia, serif !important;
  font-weight            : 700 !important;
  letter-spacing         : -0.02em !important;
  -webkit-font-smoothing : antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering         : geometricPrecision !important;
}

/* Card body paragraphs → Inter */
.sbhp-supply-card p,
.sbhp-feature-card p,
.sbhp-step p {
  font-family   : 'Inter', system-ui, sans-serif !important;
  font-weight   : 400 !important;
  letter-spacing: 0.002em !important;
}

/* ─── 6. SECTION BODY TEXT — Inter medium weight, sharper ────────── */
body[data-route="/"] .sbhp-section-text,
body[data-route="/"] .sbhp-subheadline:not(.hero-sub),
body[data-route="/"] .ip-section-text {
  font-family   : 'Inter', system-ui, sans-serif !important;
  font-weight   : 400 !important;
  font-size     : clamp(15.5px, 1.5vw, 17px) !important;
  line-height   : 1.82 !important;
  letter-spacing: 0.003em !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ─── 7. EYEBROW LABELS — Inter uppercase, crisp tracking ────────── */
body[data-route="/"] .sbhp-eyebrow,
body[data-route="/"] [class*="eyebrow"] {
  font-family   : 'Inter', system-ui, sans-serif !important;
  font-weight   : 800 !important;
  font-size     : 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ─── 8. STAT NUMBERS — keep gradient, sharpen rendering ─────────── */
.sbhp-stat-number {
  font-family   : 'Inter', system-ui, sans-serif !important;
  font-weight   : 900 !important;
  -webkit-font-smoothing : antialiased !important;
  text-rendering: geometricPrecision !important;
  letter-spacing: -0.03em !important;
}

.sbhp-stat-label {
  font-family   : 'Inter', system-ui, sans-serif !important;
  font-weight   : 700 !important;
  letter-spacing: 0.06em !important;
}

/* ─── 9. LOGO TILE LABELS ────────────────────────────────────────── */
.sbhp-tile-label {
  font-family   : 'Inter', system-ui, sans-serif !important;
  font-weight   : 700 !important;
  letter-spacing: 0.08em !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ─── 10. SECTION TITLE GRADIENT SHARP FIX ───────────────────────── */
/*
  When -webkit-text-fill-color: transparent is used (gradient text),
  the font-family override above still applies — Merriweather renders
  crisply even through the gradient clip. No extra rules needed.
  
  Only ensure the drop-shadow filter doesn't blur sub-pixel edges:
*/
#sbhp-supply  .sbhp-section-title,
#sbhp-why     .sbhp-section-title,
#sbhp-process .sbhp-section-title {
  filter: drop-shadow(0 1px 18px rgba(0,200,255,0.14)) !important;
}

/* ─── 11. HI-DPI CRISPNESS BOOST ─────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body[data-route="/"] .sbhp-section-title,
  body[data-route="/"] .sbhp-headline,
  body[data-route="/"] h1,
  body[data-route="/"] h2 {
    -webkit-font-smoothing : subpixel-antialiased !important;
  }
}

/* ─── 12. SECTION TITLE RESPONSIVE FINE-TUNE ─────────────────────── */
@media (min-width: 1200px) {
  body[data-route="/"] .sbhp-section-title {
    letter-spacing: -0.028em !important;
  }
  #sbhp-hero .sbhp-headline {
    letter-spacing: -0.045em !important;
  }
}
@media (max-width: 640px) {
  body[data-route="/"] .sbhp-section-title {
    letter-spacing: -0.018em !important;
    line-height    : 1.15 !important;
  }
  #sbhp-hero .sbhp-headline {
    letter-spacing: -0.025em !important;
    line-height    : 1.1 !important;
  }
}