/**
 * SSA - GLOBAL TYPOGRAPHY SYSTEM (ssa-typography.css)
 * ARCHITECTURE MODE: STRICT GLOBAL DESIGN SYSTEM
 * FONT FAMILY: Open Sans ONLY (Weights: 400, 700, 800)
 */

/* ==========================================================================
   1. SEMANTIC HEADING TAGS
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ssa-font-family);
  color: var(--ssa-text-heading);
  letter-spacing: -0.015em;
}

h1 {
  font-size: var(--ssa-font-h1);
  line-height: var(--ssa-lh-h1);
  font-weight: var(--ssa-fw-extrabold);
}

h2 {
  font-size: var(--ssa-font-h2);
  line-height: var(--ssa-lh-h2);
  font-weight: var(--ssa-fw-extrabold);
}

h3 {
  font-size: var(--ssa-font-h3);
  line-height: var(--ssa-lh-h3);
  font-weight: var(--ssa-fw-bold);
}

h4 {
  font-size: var(--ssa-font-h4);
  line-height: var(--ssa-lh-h4);
  font-weight: var(--ssa-fw-bold);
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY UTILITY CLASSES (.ssa-*)
   ========================================================================== */
.ssa-display {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-display);
  line-height: var(--ssa-lh-display);
  font-weight: var(--ssa-fw-extrabold);
  color: var(--ssa-text-heading);
}

.ssa-h1 {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-h1);
  line-height: var(--ssa-lh-h1);
  font-weight: var(--ssa-fw-extrabold);
  color: var(--ssa-text-heading);
}

.ssa-h2 {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-h2);
  line-height: var(--ssa-lh-h2);
  font-weight: var(--ssa-fw-extrabold);
  color: var(--ssa-text-heading);
}

.ssa-h3 {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-h3);
  line-height: var(--ssa-lh-h3);
  font-weight: var(--ssa-fw-bold);
  color: var(--ssa-text-heading);
}

.ssa-h4 {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-h4);
  line-height: var(--ssa-lh-h4);
  font-weight: var(--ssa-fw-bold);
  color: var(--ssa-text-heading);
}

.ssa-lead {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-lead);
  line-height: var(--ssa-lh-lead);
  font-weight: var(--ssa-fw-regular);
  color: var(--ssa-text-body);
}

.ssa-body-lg {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-body-lg);
  line-height: var(--ssa-lh-body-lg);
  font-weight: var(--ssa-fw-regular);
  color: var(--ssa-text-body);
}

.ssa-body {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-body);
  line-height: var(--ssa-lh-body);
  font-weight: var(--ssa-fw-regular);
  color: var(--ssa-text-body);
}

.ssa-small {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-small);
  line-height: var(--ssa-lh-small);
  font-weight: var(--ssa-fw-regular);
  color: var(--ssa-text-muted);
}

.ssa-eyebrow,
.ssa-section-tag,
.ssa-section-heading__eyebrow,
.ssa-section-header__tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-eyebrow, 13px);
  line-height: 1.3;
  font-weight: var(--ssa-fw-bold, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ssa-secondary, #007542);
  background: rgba(var(--ssa-green-rgb, 0, 117, 66), 0.08);
  border: 1px solid rgba(var(--ssa-green-rgb, 0, 117, 66), 0.22);
  padding: 0.35rem 0.95rem;
  border-radius: var(--ssa-radius-tag, 999px);
  margin-bottom: var(--ssa-space-eyebrow-title, 16px);
}

/* Eyebrow Semantic Color Modifiers */
.ssa-eyebrow--green,
.ssa-section-tag--green {
  background: rgba(var(--ssa-green-rgb, 0, 117, 66), 0.10);
  color: var(--ssa-secondary, #007542);
  border: 1px solid rgba(var(--ssa-green-rgb, 0, 117, 66), 0.22);
}

.ssa-eyebrow--navy,
.ssa-section-tag--navy {
  background: rgba(var(--ssa-navy-rgb, 11, 79, 108), 0.08);
  color: var(--ssa-primary, #0B4F6C);
  border: 1px solid rgba(var(--ssa-navy-rgb, 11, 79, 108), 0.18);
}

.ssa-eyebrow--orange,
.ssa-section-tag--orange {
  background: rgba(var(--ssa-orange-rgb, 247, 127, 0), 0.12);
  color: var(--ssa-orange-700, #C2410C);
  border: 1px solid rgba(var(--ssa-orange-rgb, 247, 127, 0), 0.28);
}

.ssa-hero .ssa-eyebrow--orange,
.ssa-section--dark .ssa-eyebrow--orange,
.ssa-hero .ssa-section-tag--orange,
.ssa-section--dark .ssa-section-tag--orange {
  color: var(--ssa-orange-300, #FDBA74);
}

.ssa-eyebrow--light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: auto;
  max-width: max-content;
  padding: 0.35rem 1.15rem;
  border-radius: var(--ssa-radius-pill, 9999px);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ==========================================================================
   3. GLOBAL SECTION HEADING COMPONENT (<SectionHeading />)
   Canonical Component: .ssa-section-heading
   Full Compatibility Aliases: .ssa-section-header, .ssa-programs-header, .ssa-resources-header
   ========================================================================== */

:where(.ssa-section-heading, .ssa-section-header, .ssa-section-header) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: var(--ssa-space-description-content, 32px);
  position: relative;
}

/* Modifiers */
:where(.ssa-section-heading--center, .ssa-section-header--center, .ssa-section-header--center) {
  align-items: center;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: var(--ssa-space-description-content, 32px);
}

:where(.ssa-section-heading--left, .ssa-section-header--left) {
  align-items: flex-start;
  text-align: left;
}

:where(.ssa-section-heading--split, .ssa-section-header--split) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--ssa-grid-gap, 24px);
  flex-wrap: wrap;
}

:where(.ssa-section-heading--split, .ssa-section-header--split) > :where(.ssa-section-heading__content, .ssa-section-header__content, .ssa-section-header__left, .ssa-programs-header__text, .ssa-resources-header__text) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 680px;
}

/* 1. Eyebrow Tag: .ssa-section-heading__eyebrow, .ssa-section-header__tag, .ssa-section-tag */
:where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__eyebrow, .ssa-section-header__tag, .ssa-section-tag) {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-eyebrow, 13px);
  font-weight: var(--ssa-fw-bold, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ssa-secondary, #007542);
  background: rgba(var(--ssa-green-rgb, 0, 117, 66), 0.08);
  border: 1px solid rgba(var(--ssa-green-rgb, 0, 117, 66), 0.22);
  padding: 0.35rem 0.95rem;
  border-radius: var(--ssa-radius-tag, 999px);
  margin-bottom: var(--ssa-space-eyebrow-title, 12px);
  line-height: 1.3;
}

/* 2. Heading Title: .ssa-section-heading__title, .ssa-section-header__title */
:where(.ssa-section-heading__title, .ssa-section-header__title),
:where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__title, .ssa-section-header__title) {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-h2, clamp(32px, 3.4vw, 44px));
  line-height: var(--ssa-lh-h2, 1.22);
  font-weight: var(--ssa-fw-extrabold, 800);
  color: var(--ssa-navy-900, #072F41);
  letter-spacing: -0.015em;
  margin: 0;
}

:where(.ssa-section-heading__title, .ssa-section-header__title) .ssa-highlight-green,
:where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__title, .ssa-section-header__title) .ssa-highlight-green {
  color: var(--ssa-secondary, #007542);
}

/* When Title is immediately followed by Description: enforce exact 12px gap */
:where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__title, .ssa-section-header__title) + :where(.ssa-section-heading__description, .ssa-section-header__desc, .ssa-section-header__lead, .ssa-section-desc) {
  margin-top: var(--ssa-space-title-description, 12px);
}

/* 3. Description / Lead: .ssa-section-heading__description, .ssa-section-header__desc, .ssa-section-header__lead */
:where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__description, .ssa-section-header__desc, .ssa-section-header__lead, .ssa-section-desc) {
  font-family: var(--ssa-font-family);
  font-size: var(--ssa-font-lead, clamp(16px, 1.3vw, 18px));
  line-height: var(--ssa-lh-lead, 1.6);
  color: var(--ssa-text-muted, #5F7079);
  max-width: 680px;
  margin-bottom: 0;
}

/* Sibling paragraph descriptions (e.g. p1 + p2 in about) */
:where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-header__desc) + :where(.ssa-section-header__desc) {
  margin-top: var(--ssa-space-3, 12px);
}

/* Center alignment inherits down to description */
:where(.ssa-section-heading--center, .ssa-section-header--center, .ssa-section-header--center) :where(.ssa-section-heading__description, .ssa-section-header__desc, .ssa-section-header__lead, .ssa-section-desc) {
  margin-inline: auto;
}

/* High-Contrast / On-Dark Variants */
:where(.ssa-section-heading--on-dark, .ssa-section-header--on-dark),
.ssa-section--brand :where(.ssa-section-heading, .ssa-section-header),
.ssa-section--navy :where(.ssa-section-heading, .ssa-section-header) {
  color: #ffffff;
}

:where(.ssa-section-heading--on-dark, .ssa-section-header--on-dark) :where(.ssa-section-heading__eyebrow, .ssa-section-header__tag, .ssa-section-tag),
.ssa-section--brand :where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__eyebrow, .ssa-section-header__tag, .ssa-section-tag),
.ssa-section--navy :where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__eyebrow, .ssa-section-header__tag, .ssa-section-tag) {
  color: var(--ssa-orange, #F77F00);
  background: rgba(247, 127, 0, 0.12);
  border-color: rgba(247, 127, 0, 0.32);
}

:where(.ssa-section-heading--on-dark, .ssa-section-header--on-dark) :where(.ssa-section-heading__title, .ssa-section-header__title),
.ssa-section--brand :where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__title, .ssa-section-header__title),
.ssa-section--navy :where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__title, .ssa-section-header__title) {
  color: #ffffff;
}

:where(.ssa-section-heading--on-dark, .ssa-section-header--on-dark) :where(.ssa-section-heading__description, .ssa-section-header__desc, .ssa-section-header__lead, .ssa-section-desc),
.ssa-section--brand :where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__description, .ssa-section-header__desc, .ssa-section-header__lead, .ssa-section-desc),
.ssa-section--navy :where(.ssa-section-heading, .ssa-section-header) :where(.ssa-section-heading__description, .ssa-section-header__desc, .ssa-section-header__lead, .ssa-section-desc) {
  color: rgba(255, 255, 255, 0.85);
}