/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */

@font-face {
  font-family: "Swiza";
  src:
    url("../assets/fonts/swiza/swiza-regular-webfont.woff2") format("woff2"),
    url("../assets/fonts/swiza/swiza-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Swiza";
  src:
    url("../assets/fonts/swiza/swiza-medium-webfont.woff2") format("woff2"),
    url("../assets/fonts/swiza/swiza-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Swiza";
  src:
    url("../assets/fonts/swiza/swiza-semibold-webfont.woff2") format("woff2"),
    url("../assets/fonts/swiza/swiza-semibold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Swiza";
  src:
    url("../assets/fonts/swiza/swiza-bold-webfont.woff2") format("woff2"),
    url("../assets/fonts/swiza/swiza-bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* Reuse bold for 800 since no extra-bold file is available. */
@font-face {
  font-family: "Swiza";
  src:
    url("../assets/fonts/swiza/swiza-bold-webfont.woff2") format("woff2"),
    url("../assets/fonts/swiza/swiza-bold-webfont.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Public Sans";
  src:
    url("../assets/fonts/public-sans/public-sans-latin-ext-400-normal.woff2")
      format("woff2"),
    url("../assets/fonts/public-sans/public-sans-latin-ext-400-normal.woff")
      format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Public Sans";
  src:
    url("../assets/fonts/public-sans/public-sans-latin-ext-500-normal.woff2")
      format("woff2"),
    url("../assets/fonts/public-sans/public-sans-latin-ext-500-normal.woff")
      format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Public Sans";
  src:
    url("../assets/fonts/public-sans/public-sans-latin-ext-600-normal.woff2")
      format("woff2"),
    url("../assets/fonts/public-sans/public-sans-latin-ext-600-normal.woff")
      format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Public Sans";
  src:
    url("../assets/fonts/public-sans/public-sans-latin-ext-700-normal.woff2")
      format("woff2"),
    url("../assets/fonts/public-sans/public-sans-latin-ext-700-normal.woff")
      format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Public Sans";
  src:
    url("../assets/fonts/public-sans/public-sans-latin-ext-800-normal.woff2")
      format("woff2"),
    url("../assets/fonts/public-sans/public-sans-latin-ext-800-normal.woff")
      format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

:root {
  /* Used for margin spacing between content text and headers */
  --typography-content-text-and-header-spacing-basis: 1.5rem;
  --typography-body-font-family: "Public Sans", sans-serif;
  --typography-header-font-family: "Swiza", sans-serif;
  --typography-header-font-weight: 400;

  --typography-page-heading-font-size: 6rem;
  --typography-page-heading-line-height: 1.2;
  --typography-page-heading-font-weight: 600;

  --typography-page-text-font-size: 2.6rem;
  --typography-page-text-line-height: 1.6;
  --typography-page-text-font-weight: 400;

  --typography-section-heading-font-size: 5.6rem;
  --typography-section-heading-line-height: 1.3;
  --typography-section-heading-font-weight: 400;

  --typography-small-form-page-heading-top-offset: 3.5rem;
  --typography-small-form-page-heading-font-size: 1.7rem;
  --typography-small-form-page-heading-font-weight: 500;
  --typography-small-form-page-heading-and-content-gap: 1.3rem;

  --typography-content-text-font-size: 2.2rem;

  --typography-content-key-info-font-size: 2.9rem;
  --typography-content-key-info-line-height: 1.4;

  --typography-small-content-text-font-size: 1.7rem;
  --typography-small-content-text-line-height: 1.4;

  --typography-content-header-text-font-size: 4rem;
  --typography-content-header-text-line-height: 1.65;
  --typography-content-header-text-font-weight: 400;

  --typography-footer-text-line-height: 1.4;
  --typography-list-padding-left: 4rem;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --typography-page-heading-font-size: 5rem;
    --typography-section-heading-font-size: 4rem;
    --typography-page-text-font-size: 2rem;
    --typography-small-form-page-heading-and-content-gap: 0.8rem;
    --typography-content-text-font-size: var(--typography-page-text-font-size);
    --typography-small-content-text-font-size: var(
      --typography-page-text-font-size
    );
    --typography-content-key-info-font-size: 2.5rem;
    --typography-content-header-text-font-size: 3.6rem;
    --typography-content-text-and-header-spacing-basis: 1.5rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    --typography-page-heading-font-size: 4rem;
    --typography-section-heading-font-size: 3rem;
    --typography-page-text-font-size: 1.8rem;
    --typography-content-header-text-font-size: 3.2rem;
    --typography-content-text-and-header-spacing-basis: 1.5rem;
    --typography-content-key-info-font-size: 2.3rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    --typography-page-text-font-size: 1.6rem;
    --typography-content-header-text-font-size: 2.8rem;
    --typography-content-text-and-header-spacing-basis: 1.2rem;
    --typography-small-form-page-heading-font-size: 1.5rem;
    --typography-small-form-page-heading-font-weight: 600;
  }
}

/*
 * M Media Query (768px)
 * Target: 1023px > 768px
 * Test Resolution: 768 x 1024
 */
@media screen and (max-width: 1023px) {
  :root {
    --typography-page-text-font-size: 1.5rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --typography-page-heading-font-size: 2.2rem;
    --typography-section-heading-font-size: 2rem;
    --typography-page-text-font-size: 1.5rem;
    --typography-page-text-line-height: 1.6;
    --typography-content-header-text-font-size: 2.4rem;
    --typography-content-key-info-font-size: 1.5rem;
    --typography-small-form-page-heading-top-offset: 2.5rem;
    --typography-list-padding-left: 3rem;
  }

  .light-box .content-header-text.no-bottom-margin-on-mobile {
    margin-bottom: 0;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
}

p {
  line-height: var(--typography-page-text-line-height);
}

body {
  font-family: var(--typography-body-font-family);
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

/* Standard text use for UI elements and 'featured pages', home, consortium */

.page-text {
  font-size: var(--typography-page-text-font-size);
  line-height: var(--typography-page-text-line-height);
  font-weight: var(--typography-page-text-font-weight);
}

/* Standard heading typography for use to label within sections */

.section-heading {
  text-align: center;
  font-family: var(--typography-header-font-family);
  font-size: var(--typography-section-heading-font-size);
  line-height: var(--typography-section-heading-line-height);
  font-weight: var(--typography-section-heading-font-weight);
  margin: 0 auto;
}

/* Standard heading typography for use within pages */

.page-heading {
  font-family: var(--typography-header-font-family);
  font-size: var(--typography-page-heading-font-size);
  line-height: var(--typography-page-heading-line-height);
  font-weight: var(--typography-page-heading-font-weight);
}

.small-form-page-heading {
  font-family: var(--typography-header-font-family);
  font-size: var(--typography-small-form-page-heading-font-size);
  font-weight: var(--typography-small-form-page-heading-font-weight);
}

.small-form-page-heading:not(:first-child) {
  margin-top: var(--typography-small-form-page-heading-top-offset);
}

.small-form-page-heading + .content-text,
.small-form-page-heading + .rich-content-text {
  margin-top: var(--typography-small-form-page-heading-and-content-gap);
}

/* Standard styling for in-text links */
.link-text,
.rich-content-text a {
  color: var(--theme-color-orange);
  text-decoration: underline;
}

/*
 * Text that represents longer form content, such as cluster descriptions,
 * article and publication content, etc.
 */

.content-text,
.rich-content-text {
  font-size: var(--typography-content-text-font-size);
  line-height: var(--typography-page-text-line-height);
  font-weight: var(--typography-page-text-font-weight);
}

.content-text.small {
  font-size: var(--typography-small-content-text-font-size);
  line-height: var(--typography-small-content-text-line-height);
}

.content-text + .content-text,
.rich-content-text * + * {
  margin-top: calc(var(--typography-content-text-and-header-spacing-basis) * 2);
}

.rich-content-text strong {
  font-weight: bolder;
}

.rich-content-text em {
  font-style: italic;
}

.rich-content-text del {
  text-decoration: line-through;
}

.rich-content-text ul,
.rich-content-text ol {
  padding-left: var(--typography-list-padding-left);
}

.rich-content-text li + li {
  margin-top: var(--typography-content-text-and-header-spacing-basis);
}

.rich-content-text ul {
  list-style-type: disc;
}

.rich-content-text ol {
  list-style-type: decimal;
}

.rich-content-text blockquote {
  padding-left: var(--typography-list-padding-left);
  border-left: 4px solid var(--theme-color-orange);
}

.rich-content-text table {
  font-size: 80%;
  width: 100%;
  table-layout: fixed;
}

.rich-content-text th,
.rich-content-text td {
  vertical-align: top;
  text-align: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.rich-content-text tr + tr > th,
.rich-content-text tr + tr > td {
  padding-top: 1rem;
}

.rich-content-text .wp-caption {
  max-width: 100%;
  margin: calc(var(--typography-content-text-and-header-spacing-basis) * 3) auto
    calc(var(--typography-content-text-and-header-spacing-basis) * 2) auto;
}

.rich-content-text .wp-caption-text {
  font-size: 80%;
  margin-top: var(--typography-content-text-and-header-spacing-basis);
  text-align: center;
}

.content-header-text {
  font-family: var(--typography-header-font-family);
  font-size: var(--typography-content-header-text-font-size);
  line-height: var(--typography-content-header-text-line-height);
  font-weight: var(--typography-content-header-text-font-weight);
  margin-bottom: var(--typography-content-text-and-header-spacing-basis);
  margin-top: calc(var(--typography-content-text-and-header-spacing-basis) * 2);
}

.content-key-info {
  font-size: var(--typography-content-key-info-font-size);
  line-height: var(--typography-content-key-info-line-height);
}

.footer-text {
  color: var(--theme-color-secondary);
}