/**
 * Weblytic Labs — typography enforcement (loads LATE so it wins over page CSS)
 * Tokens live in wbl-font.css; this file applies the shared heading/body scale.
 */

/* ── Document defaults ── */
body {
  font-size: var(--wbl-text-base, 15px) !important;
  line-height: var(--wbl-leading-body, 1.65) !important;
  font-weight: var(--wbl-weight-regular, 400) !important;
  color: var(--wbl-ink, #0f172a);
}

/* ── Headings: one scale store-wide ── */
body h1,
body .h1,
body .page-header h1,
body .page-heading,
body .wbl-pp-title,
body .wbl-cat-hero h1,
body .wbl-search-title h1,
body .wbl-cms-hero h1,
body .wbl-contact-hero h1,
body .wbl-confirm-hero__copy h1,
body .wbl-checkout-heading h1 {
  font-family: var(--wbl-font) !important;
  font-size: var(--wbl-h1-size) !important;
  font-weight: var(--wbl-weight-bold) !important;
  line-height: var(--wbl-leading-display) !important;
  letter-spacing: var(--wbl-tracking-tight) !important;
  color: var(--wbl-ink, #0f172a);
}

body h2,
body .h2,
body .wbl-cms-section__head h2,
body .wbl-sh-section-head h2,
body .wbl-section-header h2,
body .wbl-section-header-inline h2,
body .wbl-services-intro h2,
body .wbl-sh-services-intro h2,
body .wbl-pp-overview__copy h2,
body .wbl-pp-sec-head h2,
body .wbl-cat-panel h2,
body .wbl-cform-head h2,
body .wbl-contact-location-panel h2,
body .wbl-confirm-card > h2,
body .wbl-confirm-summary > h2,
body .ce-product-description h2.elementor-heading-title,
body .elementor-heading-title.elementor-size-default {
  font-family: var(--wbl-font) !important;
  font-size: var(--wbl-h2-size) !important;
  font-weight: var(--wbl-weight-bold) !important;
  line-height: var(--wbl-leading-heading) !important;
  letter-spacing: var(--wbl-tracking-tight) !important;
  color: var(--wbl-ink, #0f172a);
}

body h3,
body .h3,
body .wbl-cms-section__body h3 {
  font-family: var(--wbl-font) !important;
  font-size: var(--wbl-h3-size) !important;
  font-weight: var(--wbl-weight-bold) !important;
  line-height: var(--wbl-leading-heading) !important;
  letter-spacing: var(--wbl-tracking-normal) !important;
  color: var(--wbl-ink, #0f172a);
}

body h4,
body .h4,
body .wbl-cms-section__body h4 {
  font-family: var(--wbl-font) !important;
  font-size: var(--wbl-h4-size) !important;
  font-weight: var(--wbl-weight-semibold) !important;
  line-height: var(--wbl-leading-heading) !important;
  letter-spacing: var(--wbl-tracking-normal) !important;
  color: var(--wbl-ink, #0f172a);
}

body h5,
body .h5,
body h6,
body .h6 {
  font-family: var(--wbl-font) !important;
  font-size: var(--wbl-h5-size) !important;
  font-weight: var(--wbl-weight-semibold) !important;
  line-height: var(--wbl-leading-ui) !important;
  letter-spacing: var(--wbl-tracking-normal) !important;
  color: var(--wbl-ink, #0f172a);
}

/* ── Body copy: p / div text / spans inherit one rhythm ── */
body p,
body .wbl-cms-section__body p,
body .wbl-cms-hero__lead,
body .wbl-pp-short,
body .wbl-pp-short p,
body .ce-product-description p,
body .elementor-text-editor p,
body .wbl-sh-section-head p,
body article p {
  font-family: var(--wbl-font) !important;
  font-size: var(--wbl-text-base) !important;
  line-height: var(--wbl-leading-body) !important;
  font-weight: var(--wbl-weight-regular) !important;
  color: var(--wbl-ink-muted, #475569);
}

body li,
body .wbl-cms-section__body li,
body .ce-product-description li,
body .elementor-text-editor li {
  font-family: var(--wbl-font) !important;
  font-size: var(--wbl-text-base) !important;
  line-height: var(--wbl-leading-body) !important;
  font-weight: var(--wbl-weight-regular) !important;
}

body strong,
body b {
  font-weight: var(--wbl-weight-semibold) !important;
}

body small {
  font-size: var(--wbl-text-sm) !important;
  line-height: var(--wbl-leading-ui) !important;
}

/* UI chrome text (nav labels, meta, breadcrumbs) */
body .wbl-cms-breadcrumb,
body .wbl-pp-breadcrumb,
body .wbl-cms-meta,
body .wbl-cms-kicker,
body .wbl-cms-nav a,
body .wbl-cms-nav > strong {
  font-family: var(--wbl-font) !important;
  letter-spacing: var(--wbl-tracking-normal);
}

body .wbl-cms-breadcrumb,
body .wbl-pp-breadcrumb,
body .wbl-cms-meta {
  font-size: var(--wbl-text-xs) !important;
  font-weight: var(--wbl-weight-medium) !important;
  line-height: var(--wbl-leading-ui) !important;
}

body .wbl-cms-kicker {
  font-size: var(--wbl-text-2xs) !important;
  font-weight: var(--wbl-weight-bold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

body .wbl-cms-nav a {
  font-size: var(--wbl-text-xs) !important;
  font-weight: var(--wbl-weight-medium) !important;
  line-height: var(--wbl-leading-ui) !important;
}

body .wbl-cms-nav > strong,
body .wbl-cms-nav a.is-active {
  font-weight: var(--wbl-weight-semibold) !important;
}

/* Lead paragraph under page titles */
body .wbl-cms-hero__lead,
body .wbl-cat-hero p,
body .wbl-contact-hero p,
body .wbl-search-title p {
  font-size: var(--wbl-text-md) !important;
  line-height: var(--wbl-leading-body) !important;
  font-weight: var(--wbl-weight-regular) !important;
  color: var(--wbl-ink-muted, #475569) !important;
}

/* Display / hero titles — larger than page h1, still from the same system */
body .wbl-display,
body .wbl-sh-hero-title,
body.wbl-static-home-page .wbl-sh-hero-title {
  font-family: var(--wbl-font) !important;
  font-size: var(--wbl-display-size) !important;
  font-weight: var(--wbl-weight-bold) !important;
  line-height: var(--wbl-leading-display) !important;
  letter-spacing: var(--wbl-tracking-display) !important;
}

/* Soften ultra-heavy legacy 800 weights toward the shared bold */
body .wbl-cms-page,
body .wbl-product-page,
body .wbl-category-page,
body.wbl-static-home-page {
  --wbl-legacy-extrabold: var(--wbl-weight-bold);
}

@media (max-width: 720px) {
  body h1,
  body .h1,
  body .wbl-pp-title,
  body .wbl-cms-hero h1,
  body .wbl-cat-hero h1,
  body .wbl-contact-hero h1 {
    font-size: clamp(24px, 5vw, 30px) !important;
  }

  body h2,
  body .h2,
  body .wbl-sh-section-head h2,
  body .wbl-cms-section__head h2 {
    font-size: clamp(20px, 4vw, 24px) !important;
  }

  body .wbl-sh-hero-title,
  body.wbl-static-home-page .wbl-sh-hero-title {
    font-size: clamp(28px, 7vw, 36px) !important;
  }
}
