/**
 * @file
 * Typography Utility Classes for SEO & CMS Content Editing.
 * Decouples semantic HTML heading tags (h1-h6, p, div) from visual typography styling.
 * Applies ONLY to elements with utility classes (.h1-style - .h6-style).
 * Does NOT touch bare h1-h6 tags to avoid any frontend layout regression.
 */

/* General Typography Utility Classes */
.h1-style {
  font-size: 32px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-bottom: 16px;
  color: #002245 !important;
}

.h2-style {
  font-size: 26px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin-bottom: 16px;
  color: #002245 !important;
}

.h3-style {
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  margin-bottom: 16px;
  color: #002245 !important;
}

.h4-style {
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  margin-bottom: 16px;
  color: #002245 !important;
}

.h5-style {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  margin-bottom: 16px;
  color: #002245 !important;
}

.h6-style {
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  margin-bottom: 16px;
  color: #002245 !important;
}

.lead-text {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin-bottom: 16px;
  color: #484848;
}

/* Scoped Overrides within .dynamic-content containers */
.dynamic-content .h1-style {
  font-size: 42px !important;
  line-height: 1.19048 !important;
  font-weight: 700 !important;
  color: #002245 !important;
}

.dynamic-content .h2-style {
  font-size: 32px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #002245 !important;
}

.dynamic-content .h3-style {
  font-size: 28px !important;
  line-height: 1.21429 !important;
  font-weight: 700 !important;
  color: #002245 !important;
}

.dynamic-content .h4-style {
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: #002245 !important;
}

.dynamic-content .h5-style {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: #002245 !important;
}

.dynamic-content .h6-style {
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #002245 !important;
}

.dynamic-content .lead-text {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #484848 !important;
}

/* Ensure strong and b always render bold (700) across frontend & CKEditor,
   even when nested inside or wrapping heading utility styles (.h1-style - .h6-style, .lead-text) */
.dynamic-content strong,
.dynamic-content b,
.dynamic-content strong *,
.dynamic-content b *,
.dynamic-content strong [class*="-style"],
.dynamic-content b [class*="-style"],
.dynamic-content strong .lead-text,
.dynamic-content b .lead-text,
.dynamic-content [class*="-style"] strong,
.dynamic-content [class*="-style"] b,
.dynamic-content .lead-text strong,
.dynamic-content .lead-text b,
.dynamic-content strong[class*="-style"],
.dynamic-content b[class*="-style"],
.dynamic-content strong.lead-text,
.dynamic-content b.lead-text,
.dynamic-content strong .h1-style, .dynamic-content b .h1-style,
.dynamic-content strong .h2-style, .dynamic-content b .h2-style,
.dynamic-content strong .h3-style, .dynamic-content b .h3-style,
.dynamic-content strong .h4-style, .dynamic-content b .h4-style,
.dynamic-content strong .h5-style, .dynamic-content b .h5-style,
.dynamic-content strong .h6-style, .dynamic-content b .h6-style,
.dynamic-content .h1-style strong, .dynamic-content .h1-style b,
.dynamic-content .h2-style strong, .dynamic-content .h2-style b,
.dynamic-content .h3-style strong, .dynamic-content .h3-style b,
.dynamic-content .h4-style strong, .dynamic-content .h4-style b,
.dynamic-content .h5-style strong, .dynamic-content .h5-style b,
.dynamic-content .h6-style strong, .dynamic-content .h6-style b,
strong [class*="-style"],
b [class*="-style"],
strong .lead-text,
b .lead-text,
[class*="-style"] strong,
[class*="-style"] b,
.lead-text strong,
.lead-text b,
strong[class*="-style"],
b[class*="-style"],
strong.lead-text,
b.lead-text,
strong .h1-style, b .h1-style,
strong .h2-style, b .h2-style,
strong .h3-style, b .h3-style,
strong .h4-style, b .h4-style,
strong .h5-style, b .h5-style,
strong .h6-style, b .h6-style,
.h1-style strong, .h1-style b,
.h2-style strong, .h2-style b,
.h3-style strong, .h3-style b,
.h4-style strong, .h4-style b,
.h5-style strong, .h5-style b,
.h6-style strong, .h6-style b,
strong.h1-style, b.h1-style,
strong.h2-style, b.h2-style,
strong.h3-style, b.h3-style,
strong.h4-style, b.h4-style,
strong.h5-style, b.h5-style,
strong.h6-style, b.h6-style {
  font-weight: 700 !important;
}