/**
 
Table of Contents
===================================================================================
#Variables (change font-family in base.css)
#General
#Headings
#Paragaphs
#Lists
#Block Quotes






/* ================================================================================ */
/* #Variables (change font-family in base.css)
/* ================================================================================ */

:root {
  --font-family--heading-style-a: "Jost", sans-serif;
  --font-family--heading-style-b: "Jost", sans-serif;
  --font-family--body: "Source Sans 3", sans-serif;

  --font-size--heading-xx-large: 50px; 
  --font-size--heading-x-large: 48px;
  --font-size--heading-large: 30px;
  --font-size--heading: 20px;
  --font-size--heading-small: 18px; 
  --font-size--heading-x-small: 16px;

  --font-size--blockquote: 24px;

  --font-size--body: 16px;
  --font-size--body-small: 14px;
  --font-size--body-x-small: 13px;
  --font-size--body-xx-small: 12px;

  --font-size--button: 16px;

  --line-height--x-tight: 1.1;
  --line-height--tight: 1.2;
  --line-height--normal: 1.4;
  --line-height--loose: 1.6;
  --line-height--x-loose: 1.8;

  --paragraph-margin: 8px;
}



/* @media only screen and (max-width: 767px) {
  :root {
  --font-size--heading-xx-large: 50px;
  --font-size--heading-x-large: 40px; 
  --font-size--heading-large: 40px; 
  --font-size--heading: 30px;
  
  --font-size--blockquote: 26px;

  --font-size--button: 22px;

  --line-height--normal: 1.375;
  }
}
*/


@media only screen and (max-width: 500px) {
  :root {
    /* --font-size--heading-xx-large: 36px; */
    --font-size--heading-x-large: 37px; 
    --font-size--heading-large: 27px;
    /* --font-size--heading: 22px; */
    --font-size--heading-small: 16px; 

    /* --font-size--blockquote: 23px; */

    /* --font-size--body: 15px; */
  }
}







/* ================================================================================ */
/* #General
/* ================================================================================ */

body { font-size: var(--font-size--body); }


html,
body,
h1, h2, h3, h4, h5, h6,
p,
th, td,
li { 
  font-family: var(--font-family--body);
  line-height: var(--line-height--normal);
  color: var(--color-text);
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}


#main .text-align--left { text-align: left; }
#main .text-align--center { text-align: center; }
#main .text-align--right { text-align: right; }






/* ================================================================================ */
/* #Headings
/* ================================================================================ */

#main :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-family--heading-style-a);
  font-weight: 700;
  line-height: var(--line-height--tight);
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-primary);
  margin-bottom: 0;
}


#main :where(h1, h2) { text-transform: none; }


#main h1 {
  font-size: var(--font-size--heading-xx-large);
}


#main h2 {
  font-size: var(--font-size--heading-x-large);
  color: var(--color-secondary--xx-dark);
  line-height: var(--line-height--x-tight);
  transform: scaleX(0.97);
  transform-origin: left center;
  letter-spacing: -0.03em;
  text-align: left;
}


#main h3 {
  font-size: var(--font-size--heading-large);
  color: var(--color-secondary--xx-dark);
  letter-spacing: -0.03em;
}


#main h4 {
	font-size: var(--font-size--heading-x-small);
  color: var(--color-secondary--xx-dark);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


#main h5 {
	font-size: var(--font-size--heading-small);
  color: var(--color-secondary--xx-dark);
  font-weight: 700;
}


#main h6 {
	font-size: var(--font-size--heading-x-small);
  color: var(--color-secondary--xx-dark);
}



/* Ampersand - override Enfold styling */
#main .special_amp { 
  color: inherit;
  font-style: normal;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}






/* ================================================================================ */
/* #Paragaphs
/* ================================================================================ */

#main p {
  color: var(--color-text);
  /* Margin is set below so lists can be half the space between paragraphs.  
  CSS ignores the margin-bottom between two P tags (but not between P and List) */
  margin-top: calc(var(--paragraph-margin) * 2); 
  margin-bottom: var(--paragraph-margin); 
}


/* Remove padding from first + last P (so section padding is consistent) */ 
#main p:first-of-type { margin-top: 0; }
#main p:last-of-type { margin-bottom: 0; }


/* Fix for the last P followed by a list */ 
#main p:last-of-type + ul, 
#main p:last-of-type + ol {
  margin-top: var(--paragraph-margin); 
}


/* Paragraphs - Formatting
----------------------------------------------------------------------------------- */
#main strong {
	font-weight: 700;
  color: var(--color-primary);
}


sup,
sub { font-size: var(--font-size--body-2); }


sub { padding-right: 4px; }


/* Paragraphs - Links
----------------------------------------------------------------------------------- */
#main a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-transition: all .4s ease-out;
  transition:         all .4s ease-out;
}

#top #main a:hover,
#top #main a:active,
#top #main a:focus { 
  color: var(--color-text-link--hover); 
}






/* ================================================================================ */
/* #Lists
/* ================================================================================ */

ul, ol {
  margin: 0;
  /* margin-bottom: calc(var(--paragraph-margin) * 3 );  */
}


ol { margin-left: 3px; }


.entry-content-wrapper li { 
  line-height: var(--line-height--normal);
  padding: 0; 
  margin-bottom: var(--paragraph-margin); 
}


.entry-content-wrapper ol li {
  padding-left: 8px;
}


.entry-content-wrapper ul li::marker {
  color: var(--color-primary);
}


@media only screen and (max-width: 500px) {
  .entry-content-wrapper li { 
    margin-bottom: 4px; 
  }
}






/* ================================================================================ */
/* #Block Quotes
/* ================================================================================ */

blockquote { 
  border-left-width: 2px;
  margin-top: 24px;
  margin-bottom: 24px;
}


#main blockquote p { 
  font-family: var(--font-family--heading-style-a);
  font-size: var(--font-size--blockquote);
  line-height: var(--line-height--tight);
  color: var(--color-primary);
}






/* ================================================================================ */
/* #Margins
/* ================================================================================ */

/* Heading + Paragraph Margins
----------------------------------------------------------------------------------- */
#main h1 + p:first-of-type,
#main h1 + p { margin-top: calc(var(--paragraph-margin) * 5 ); }

#main h2 + p:first-of-type,
#main h2 + p { margin-top: calc(var(--paragraph-margin) * 4 ); }

#main h3 + p:first-of-type,
#main h3 + p { 
  margin-top: calc(var(--paragraph-margin) * 2 ); 
}

#main h4 + p:first-of-type,
#main h4 + p { 
  margin-top: calc(var(--paragraph-margin) * 2 ); 
}

#main h5 + p:first-of-type,
#main h5 + p { 
  margin-top: var(--paragraph-margin); 
}

#main h6 + p:first-of-type,
#main h6 + p { 
  margin-top: calc(var(--paragraph-margin) / 2 ); 
}


/* Paragraph + Heading Margins
----------------------------------------------------------------------------------- */
#main p + :where(h1, h2) { margin-top: calc(var(--paragraph-margin) * 9 ); }
#main p + h3 { margin-top: calc(var(--paragraph-margin) * 7 ); }
#main p + h4 { margin-top: calc(var(--paragraph-margin) * 6 ); }
#main p + h5 { margin-top: calc(var(--paragraph-margin) * 4 ); }
#main p + h6 { margin-top: calc(var(--paragraph-margin) * 4 ); }


/* Heading + Heading Margins
----------------------------------------------------------------------------------- */
/* Large + Small */
div h1 + :where(h2, h3, h4, h5, h6) { margin-top: calc(var(--paragraph-margin) * 5 ); }
div h2 + :where(h3, h4, h5, h6) { margin-top: calc(var(--paragraph-margin) * 4 ); }
div h3 + :where(h4, h5, h6) { margin-top: calc(var(--paragraph-margin) * 3 ); }
div h4 + :where(h5, h6) { margin-top: calc(var(--paragraph-margin) * 2 ); }
div h5 + h6 { margin-top: var(--paragraph-margin); }


/* Small + Large */
div h2 + h1 { margin-top: calc(var(--paragraph-margin) * 6 ); }
div h3 + :where(h1, h2) { margin-top: calc(var(--paragraph-margin) * 6 ); }
div h4 + :where(h1, h2, h3) { margin-top: calc(var(--paragraph-margin) * 6 ); }
div h5 + :where(h1, h2, h3, h4) { margin-top: calc(var(--paragraph-margin) * 6 ); }
div h6 + :where(h1, h2, h3, h4, h5) { margin-top: calc(var(--paragraph-margin) * 6 ); }


/* Heading + Lists
----------------------------------------------------------------------------------- */
h1 + :where(ul, ol) { margin-top: calc(var(--paragraph-margin) * 2 ); } 
h2 + :where(ul, ol) { margin-top: calc(var(--paragraph-margin) * 2 ); } 
h3 + :where(ul, ol) { margin-top: calc(var(--paragraph-margin) * 2 ); } 
h4 + :where(ul, ol) { margin-top: calc(var(--paragraph-margin) * 2 ); } 
h5 + :where(ul, ol) { margin-top: calc(var(--paragraph-margin) * 2 ); } 
h6 + :where(ul, ol) { margin-top: calc(var(--paragraph-margin) * 1 ); } 


:where(ul, ol) + h1 { margin-top: calc(var(--paragraph-margin) * 3 ); } 
:where(ul, ol) + h2 { margin-top: calc(var(--paragraph-margin) * 3 ); } 
:where(ul, ol) + h3 { margin-top: calc(var(--paragraph-margin) * 3 ); } 
:where(ul, ol) + h4 { margin-top: calc(var(--paragraph-margin) * 3 ); } 
:where(ul, ol) + h5 { margin-top: calc(var(--paragraph-margin) * 3 ); } 
:where(ul, ol) + h6 { margin-top: calc(var(--paragraph-margin) * 3 ); }