﻿/*
 * ═══════════════════════════════════════════════════════════════
 *  SWEDBANG — HOMEPAGE FONT SHARPNESS LAYER v2.0
 *  Purpose : Enforce Inter (body) + Merriweather (headings).
 *            Max sharpness, luxurious sizing, crisp edges.
 *  Cascade : Loaded LAST in head — beats all previous !important.
 *  Safe    : Scoped to body[data-route="/"] and #sbhp-*
 *            Does NOT touch hero canvas, video, globe, or map.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── 0. ROOT — reset font token & global rendering ──────────── */
body[data-route="/"] {
  --sbhp-font      : 'Inter', system-ui, -apple-system, sans-serif;
  --sbhp-font-head : 'Merriweather', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing   : antialiased;
  -moz-osx-font-smoothing  : grayscale;
  text-rendering           : optimizeLegibility;
  font-feature-settings    : "kern" 1, "liga" 1, "calt" 1;
}

/* ─── 1. ENTIRE WRAPPER — Inter replaces Satoshi ─────────────── */
#sbhp-premium-wrapper,
#sbhp-premium-wrapper p,
#sbhp-premium-wrapper li,
#sbhp-premium-wrapper span:not([class*="icon"]):not([class*="badge"]):not(.sbhp-stat-number) {
  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. ALL SECTION HEADING TITLES — Merriweather Black ──────── */
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;
  font-feature-settings   : "kern" 1, "liga" 0 !important;
}

/* Luxury size scale for section titles */
body[data-route="/"] .sbhp-section-title {
  font-size      : clamp(28px, 3.8vw, 54px) !important;
  font-weight    : 900 !important;
  letter-spacing : -0.032em !important;
  line-height    : 1.08 !important;
}

/* ─── 3. HERO HEADLINE — ultra-sharp, keep shimmer ───────────── */
#sbhp-hero .sbhp-headline,
body[data-route="/"] .hero-headline {
  font-family             : 'Merriweather', Georgia, serif !important;
  font-size               : clamp(40px, 5.2vw, 74px) !important;
  font-weight             : 900 !important;
  letter-spacing          : -0.042em !important;
  line-height             : 1.04 !important;
  -webkit-font-smoothing  : antialiased !important;
  -moz-osx-font-smoothing : grayscale !important;
  text-rendering          : geometricPrecision !important;
  font-variant-ligatures  : no-common-ligatures !important;
}

/* ─── 4. HERO SUBHEADLINE — Inter Light, airy ─────────────────── */
#sbhp-hero .sbhp-subheadline,
body[data-route="/"] .hero-sub {
  font-family    : 'Inter', system-ui, sans-serif !important;
  font-size      : clamp(15px, 1.5vw, 19px) !important;
  font-weight    : 300 !important;
  line-height    : 1.80 !important;
  letter-spacing : 0.008em !important;
  color          : rgba(195, 218, 248, 0.93) !important;
  -webkit-font-smoothing : antialiased !important;
}

/* ─── 5. CARD HEADINGS (h3) — Merriweather Bold ──────────────── */
.sbhp-supply-card h3,
.sbhp-feature-card h3,
.sbhp-step h3,
.ent-card-title {
  font-family             : 'Merriweather', Georgia, serif !important;
  font-size               : clamp(17px, 1.8vw, 22px) !important;
  font-weight             : 700 !important;
  letter-spacing          : -0.022em !important;
  line-height             : 1.22 !important;
  -webkit-font-smoothing  : antialiased !important;
  -moz-osx-font-smoothing : grayscale !important;
  text-rendering          : geometricPrecision !important;
}

/* Card paragraphs — Inter Regular */
.sbhp-supply-card p,
.sbhp-feature-card p,
.sbhp-step p {
  font-family    : 'Inter', system-ui, sans-serif !important;
  font-size      : clamp(14.5px, 1.3vw, 16px) !important;
  font-weight    : 400 !important;
  line-height    : 1.78 !important;
  letter-spacing : 0.003em !important;
  color          : rgba(158, 180, 212, 0.95) !important;
}

/* ─── 6. SECTION BODY TEXT — Inter, generous size ─────────────── */
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-size      : clamp(15.5px, 1.5vw, 18px) !important;
  font-weight    : 400 !important;
  line-height    : 1.85 !important;
  letter-spacing : 0.004em !important;
  color          : rgba(185, 205, 235, 0.93) !important;
  -webkit-font-smoothing : antialiased !important;
}

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

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

/* ─── 9. LOGO TILE LABELS & PROCESS STEP NUMS ────────────────── */
.sbhp-tile-label {
  font-family    : 'Inter', system-ui, sans-serif !important;
  font-weight    : 700 !important;
  letter-spacing : 0.09em !important;
  -webkit-font-smoothing : antialiased !important;
}
.sbhp-step-num {
  font-family    : 'Inter', system-ui, sans-serif !important;
  font-weight    : 900 !important;
}

/* ─── 10. CAPTION TEXT ────────────────────────────────────────── */
body[data-route="/"] .sbhp-caption {
  font-family    : 'Inter', system-ui, sans-serif !important;
  font-size      : 13px !important;
  font-weight    : 400 !important;
  letter-spacing : 0.01em !important;
  color          : rgba(120, 145, 185, 0.85) !important;
  font-style     : italic !important;
}

/* ─── 11. SECTION TITLE GRADIENT CRISPNESS ───────────────────── */
#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 {
  filter: drop-shadow(0 1px 14px rgba(0,210,255,0.12)) !important;
}

/* ─── 12. HI-DPI / RETINA ─────────────────────────────────────── */
@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;
  }
}

/* ─── 13. LARGE DESKTOP — tightest optical spacing ───────────── */
@media (min-width: 1280px) {
  body[data-route="/"] .sbhp-section-title {
    letter-spacing : -0.038em !important;
  }
  #sbhp-hero .sbhp-headline,
  body[data-route="/"] .hero-headline {
    letter-spacing : -0.050em !important;
    font-size      : clamp(52px, 5.5vw, 80px) !important;
  }
}

/* ─── 14. MOBILE — readable, less tight ─────────────────────── */
@media (max-width: 640px) {
  body[data-route="/"] .sbhp-section-title {
    letter-spacing : -0.018em !important;
    line-height    : 1.15 !important;
  }
  #sbhp-hero .sbhp-headline,
  body[data-route="/"] .hero-headline {
    letter-spacing : -0.022em !important;
    line-height    : 1.10 !important;
  }
}
