/*
 * Digitrix locked website typography system
 * Applies to all current and future PHP pages loaded through includes/head.php.
 *
 * Desktop and tablet:
 *   Hero H1: 52px
 *   Section H2: 40px
 *   Body copy: 16px
 *
 * Mobile (767px and below):
 *   Hero H1: 34px
 *   Section H2: 32px
 *   Body copy: 16px
 */

:root {
  --digitrix-hero-heading-size: 52px;
  --digitrix-section-heading-size: 40px;
  --digitrix-body-size: 16px;
}

html,
body {
  font-size: var(--digitrix-body-size);
}

/* Every page's primary heading is its hero heading. */
body main h1,
body main .hero-title,
body main .service-hero-title,
body main [class*="hero"] h1 {
  font-size: var(--digitrix-hero-heading-size) !important;
  line-height: 1.08 !important;
}

/* Every H2 in main content follows the locked section-heading scale. */
body main h2,
body main .section-title,
body main .sec-head h2 {
  font-size: var(--digitrix-section-heading-size) !important;
  line-height: 1.15 !important;
}

/* Main descriptive copy remains consistent across every page. */
body main p,
body main li,
body main blockquote,
body main .body-copy,
body main .hero-sub,
body main .section-intro {
  font-size: var(--digitrix-body-size) !important;
}

@media (max-width: 767px) {
  :root {
    --digitrix-hero-heading-size: 34px;
    --digitrix-section-heading-size: 32px;
  }

  body main h1,
  body main .hero-title,
  body main .service-hero-title,
  body main [class*="hero"] h1 {
    font-size: var(--digitrix-hero-heading-size) !important;
    line-height: 1.1 !important;
  }

  body main h2,
  body main .section-title,
  body main .sec-head h2 {
    font-size: var(--digitrix-section-heading-size) !important;
    line-height: 1.18 !important;
  }
}