/* LAST UPDATED: 06.20.2024 - SM */

/* Base size for desktop for EVMS websites is 18px, 16px for mobile */
/* Headings are taken from the base font and multiplied using the minor thirds (1.200) scale: https://type-scale.com/ */


body {
  font-family: var(--primary-font-family);
  font-size: var(--base-font-size);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-display: swap;
  font-family: var(--heading-font-family);
  font-stretch: normal;
  font-style: normal;
  font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
  line-height: 1.5;
  margin-top: 0;
}

h1 {
  font-size: 3em;
}

h2 {
  color: var(--primary-color);
  font-size: 2.5em;
  letter-spacing: 0;
}

h3 {
  color: var(--primary-accent);
  font-size: 2em;
}

h4 {
  color: var(--primary-color);
  font-size: 1.73em;
  font-weight: 200;
  text-transform: uppercase;
}

h5 {
  font-size: 1.44em;
}

h6 {
  font-size: 1.2em;
}

p,
ul,
li,
address {
  font-display: swap;
  font-family: var(--primary-font-family);
  font-size: 1.125em;
  font-stretch: normal;
  font-style: normal;
  font-weight: 400;
}

strong {
  font-display: swap;
  font-family: var(--primary-font-family);
  font-stretch: normal;
  font-style: normal;
  font-weight: 700;
}

em {
  font-display: swap;
  font-family: var(--primary-font-family);
  font-stretch: normal;
  font-style: italic;
  font-weight: 300;
}

p {
  margin-bottom: 1.75em;
}

/* 06.14.2024 - On Codepen at least, having the "list-style-type" meant only standard squares were used, not the outlined ones */
ul {
  /* Fallback to original square */
  list-style: " \2752 ";
  /* list-style-type: square; */
  margin: 1em;
}

li {
  padding-left: 15px;
}

/* Color the fallback squares */
li::marker {
  color: var(--primary-accent);
}

/* For ul's inside of li's */
/* On Codepen, the unordered lists inside of lists had a larger text size */
li~ul {
  font-size: 1em;
  margin-top: 0;
}

a {
  color: var(--primary-accent);
  text-decoration: none;
}

a:focus,
a:hover {
  color: var(--primary-color);
  text-decoration: underline !important;
  /* !important added to override any component styling that says "text-decoration: none" */
}

/* The second element that uses the secondary font on the site (first is h2.lede) */
blockquote {
  color: var(--primary-color);
  font-family: var(--secondary-font-family) !important;
  font-size: 2em;
  font-weight: 700;
  max-width: 100%;
  text-align: center;
}





/***** MEDIA QUERIES *****/
@media print {
  blockquote,
  pre {
    border: 1px solid var(--primary-accent);
    page-break-inside: avoid;
  }
}

@media screen and (max-width: 1080px) {
  body {
    font-size: var(--med-font-size);
  }
}