/*
 * Shared public-site heading system, based on the Hawkeye reference:
 * Montserrat ExtraBold headlines with compact, confident tracking.
 * Loaded only alongside the public marketing header.
 */
@font-face {
  font-family: "SPARO Montserrat";
  src: url("../fonts/montserrat-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Join the site's existing important typography layer so the reference system
   can override its legacy Inter Tight heading rules, without touching body text. */
@layer sparo-typography {
:root {
  --marketing-heading-font: "SPARO Montserrat", "Montserrat", sans-serif;
  --marketing-heading-weight: 800;
  --marketing-subheading-weight: 700;
  --marketing-hero-size: 42px;
  --marketing-section-size: 32px;
  --marketing-card-size: 22px;
}

/* Real semantic headings inside public content only; navigation and footer are excluded. */
body:has(#sparo-site-header) h1:not(:where(header *, footer *, .home-session *, #workWithUsModal *, [role="dialog"] *, .chat-widget *)),
body:has(#sparo-site-header) .hero-headline,
body:has(#sparo-site-header) .hero-title,
body:has(#sparo-site-header) .mission-statement,
body:has(#sparo-site-header) .community-title,
body:has(#sparo-site-header) .success-title {
  font-family: var(--marketing-heading-font) !important;
  font-size: var(--marketing-hero-size) !important;
  font-weight: var(--marketing-heading-weight) !important;
  font-style: normal !important;
  line-height: 1.17 !important;
  letter-spacing: -0.02em !important;
}

body:has(#sparo-site-header) h2:not(:where(header *, footer *, .home-session *, #workWithUsModal *, [role="dialog"] *, .chat-widget *)),
body:has(#sparo-site-header) .section-title-premium,
body:has(#sparo-site-header) .section-title-secondary,
body:has(#sparo-site-header) .audience-header-title,
body:has(#sparo-site-header) .editorial-central-title,
body:has(#sparo-site-header) .cta-bottom-home h2 {
  font-family: var(--marketing-heading-font) !important;
  font-size: var(--marketing-section-size) !important;
  font-weight: var(--marketing-heading-weight) !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

body:has(#sparo-site-header) h3:not(:where(header *, footer *, .home-session *, #workWithUsModal *, [role="dialog"] *, .chat-widget *)),
body:has(#sparo-site-header) .audience-title,
body:has(#sparo-site-header) .audience-card h3,
body:has(#sparo-site-header) .feature-mini-card h3,
body:has(#sparo-site-header) .editorial-central-block h3 {
  font-family: var(--marketing-heading-font) !important;
  font-size: var(--marketing-card-size) !important;
  font-weight: var(--marketing-subheading-weight) !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
}

/* Homepage hero and section-title divs do not use semantic heading tags. */
body:has(#sparo-site-header) .hero-headline > span:not([class*="fa-"]),
body:has(#sparo-site-header) .hero-title > span:not([class*="fa-"]) {
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

body:has(#sparo-site-header) :is(
  h1, h2, h3, .hero-headline, .section-title-secondary, .mission-statement
) :is(span, strong, em, b):not(:where(.fa, .fas, .far, .fab, [class*="fa-"], .bi, [class*="bi-"])) {
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Long-form legal and FAQ subheads are intentionally quieter than section titles. */
body:has(#sparo-site-header) .faq-item h2 {
  font-size: 20px !important;
  font-weight: var(--marketing-subheading-weight) !important;
  line-height: 1.35 !important;
}

body:has(#sparo-site-header) .container:not(:has(.faq-item)) h2 {
  font-size: 24px !important;
  font-weight: var(--marketing-subheading-weight) !important;
  line-height: 1.3 !important;
}

@media (max-width: 900px) {
  :root {
    --marketing-hero-size: 32px;
    --marketing-section-size: 28px;
  }
}

@media (max-width: 430px) {
  :root {
    --marketing-hero-size: 28px;
  }
}
}