/* Renamed Variables
   Grove fonts, colors, and font-sizes are set with CSS Custom Properties.
   If these Custom Properties are renamed, any of our CSS that uses them will break.
   Format: [Original Property]: var([Renamed Property]);

   8/1/2022: --secondaryHeadlineFont renamed to --secHlFont.
   8/1/2022: --secondaryColor[N] renamed to --secC[N].
*/

:root {
  --secondaryHeadlineFont: var(--secHlFont);
  --secondaryColor1: var(--secC1);
  --secondaryColor2: var(--secC2);
  --secondaryColor3: var(--secC3);
  --secondaryColor4: var(--secC4);
  --secondaryColor5: var(--secC5);
}



/* Custom Fonts
   Grove fonts are themed using CSS Custom Properties.
   1. Replace these fonts in the root to re-theme the entire site.
   2. Set individual elements to these properties to change its font.
   3. Set fallback values for IE and other older browsers.

   7/7/2022: --liveBlogBodyFont added.
   8/1/2022: --secondaryHeadlineFont renamed to --secHlFont.
*/

html.fonts-loaded {
  --primaryHeadlineFont: 'utopia-std-display', Georgia, serif;
  --secHlFont: 'utopia-std', Georgia, serif;
  --bodyFont: 'acumin-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --liveBlogBodyFont: var(--bodyFont);
}

[class*='-pageHeading'],
.AuthorPage-name,
.BrightspotPersistentPlayer-programName,
.HtmlModule h1,
.HtmlModule h2,
.HtmlModule h3,
.HtmlModule .text-family\(headline\) {
  font-family: 'utopia-std-display', Georgia, serif;
  font-family: var(--primaryHeadlineFont);
}

[class*='-authorName'],
[class*='-category'],
[class*='-contributors']
[class*='-pageSubHeading'],
.ListC .PromoXSmall-title,
.HtmlModule h4,
.HtmlModule h5,
.HtmlModule h6,
.HtmlModule small,
.HtmlModule .text-family\(headline2\) {
  font-family: 'utopia-std', Georgia, serif;
  font-family: var(--secHlFont);
}

body,
[class*='-dateModified'],
[class*='-datePublished'],
[class*='-tags'] .Link,
[class*='-timestamp'],
.Figure-caption,
.NavI .NavigationLink,
.PromoAudioShowA-title,
.HtmlModule ul,
.HtmlModule ol
.HtmlModule pre > label:first-child,
.HtmlModule .text-family\(body\) {
  font-family: 'acumin-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-family: var(--bodyFont);
}



/* Bugfixes */

/* Make bulletpoints appear in post bodies */

[class*="-articleBody"] ul {
  list-style-type: disc;
}

[class*="-articleBody"] li {
  margin-bottom: 1rem;
}