/** All CSS related to blocks.  Based off https://hgbugz.fogbugz.com/f/cases/69670/Blog-Post-Content */


.wp-block-separator {
  border-top: none !important;
  border-bottom: none !important;
}

/** Headings **/
h1 {
  font-size: 48px;
  line-height: 60px;
  font-weight: 800;
  padding-bottom: 16px;
}

h2 {
  font-size: 34px;
  line-height: 40px;
  font-weight: 800;
  padding: 32px 0 0 0;
}

h3 {
  font-size: 28px;
  line-height: 40px; 
  font-weight: 500;
  padding: 32px 0 0 0;
}

h4, 
h5, 
h6 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0px;
  margin: 0px;
}

h2.related-posts {
  margin-top: 32px;
  margin-bottom: 32px;
}

/** Paragraphs **/
p.has-small-font-size {
  font-size: 14px; 
  line-height: 24px;
  padding-bottom: 16px;
}

p /* Normal */ {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  padding-top: 16px;
}

p.has-text-align-center {
  padding-top: 0px;
}

p.has-medium-font-size {
  font-size: 22px;
  line-height: 36px;
  padding-bottom: 16px;
}

p.has-large-font-size, 
p.has-huge-font-size {
  font-size: 28px;
  line-height: 40px;
  padding-bottom: 16px;
}

p a, p a:visited, p + ul li a, p + ul li a:visited {
color: #1a73e8 !important;
}

/** Superscript & Anchor tags **/

/** Offsets the anchor position from the top of the viewport **/
.anchor {
  padding-top: 25px;
}

sup {
  vertical-align: super;
  margin-left: 4px;
  font-size: 14px;
  line-height: 0;
  font-weight: 400;
}

/** Quotes **/
/*
Structure:
blockquote.wp-block-quote (is-style-large)
  p - Content
  cite - Author
*/

/* Override the system settings */
blockquote {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin: 32px 0 !important;
  padding-bottom: 16px !important;
}
  
blockquote.wp-block-quote {
  font-size: 22px;
  line-height: 32px; 
  font-weight: 400;
  font-style: italic;
  border-left: 4px solid black;
  padding-left: 32px !important;
}

.wp-block-quote cite, .wp-block-quote.is-large-style cite {
  font-size: 14px !important;	/* WP adds default handling here */
  line-height: 20px !important;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 32px;
  font-style: normal;
}

blockquote.is-large-style {
  font-size: 28px;
  line-height: 40px;
  font-weight: 500;
}

/** Images **/
.wp-block-image {
  margin: 32px 0 0 0 !important;
}

.wp-block-image + .wp-block-image { margin: 48px 0 0 0 !important; }

.wp-block-image figure.aligncenter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wp-block-image figure.aligncenter figcaption {
  margin-top: 24px;
}

.wp-block-image figcaption {
  margin: 8px 0 16px 0 !important;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #666;
  text-align: center;
}
  
  
/** Lists **/
ul {
  /* The "dots" should be inline with whatever container they're in */
  padding-inline-start: 1em; 
  
  /* Override list-style and supply custom bullet below */
  list-style: none;
  
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  margin: 0;
}

ul li::before {
  content: "\2022";
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

ul li {
  padding-top: 0px;
}

ul.no-top-padding li {
  padding-top: 0px;
}

ul.no-bullet li::before {
  content: " ";
}

ul.bullet li::before {
  content: "\2022";
}

ol li::before {
    content: " ";
}

/** Code **/

code {
  color: #d22477;
  }
  
p code {
  border: 1px solid #EBEBEB;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 6px;
  }

/* Override browser defaults */
pre {
  display: block;
  white-space: pre;
  border-radius: 5px;
  margin: 16px 0 24px 0;
  padding: 30px;
}

pre code {
  font-family: 'Gotham A', 'Gotham B', Helvetica, sans-serif;
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
}


/** Videos **/
figure {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
figure.wp-block-embed {
  width: 100%;
  margin: 32px 0 0 0;
}

figure.wp-block-embed + figure.wp-block-embed {
  margin: 48px 0 0 0;
}

figure.is-type-video .wp-block-embed__wrapper {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 0px;
  height: 0;
}

figure.wp-block-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

figure.wp-block-embed figcaption {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}


/** Separators **/
hr {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  border: none;
}

hr.list-break {
  margin-top: 16px;
}

hr.wp-block-separator {
  margin-top: 32px;
  height: 2px;
}

hr.wp-block-separator-hidden {
  margin-top: 32px;
  background-color: #ebebeb00;
  height: 2px;
}

hr.wp-block-separator.is-style-wide {
  width: 100%;
}

hr.wp-block-separator.is-style-dots::before {
  font-size: 30px;
  letter-spacing: 1em !important;
  padding-left: 1em !important;
}

hr.wp-block-separator.is-style-dots {
  margin: 32px 0 0 0;
}


/** Groups **/
div.wp-block-group {
  margin-top: 0;
}


/** Buttons **/

div.wp-block-column .wp-block-button a {
  width: 100%;
}


div.wp-block-button a {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  margin: 16px 0;
  padding: 24px 32px 24px 32px;
  text-align: center;
  background-color: #6CC72B;
  line-height: 1.2em;
  text-transform: uppercase;
}

div.wp-block-button a, div.wp-block-button a:visited, div.wp-block-button a:active {
  position: relative;
  overflow: hidden;
  border-style: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #000;
  letter-spacing: 0.2em;
  font-weight: 700;
  
}

div.wp-block-button a:hover {
  color: #000;
}

div.wp-block-button a::before, div.wp-block-button a:visited::before {
   content: ' ';
   display: block;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   z-index: 1;
   background-color: #000;
   opacity: 0;
   transition: opacity 500ms;
}
div.wp-block-button a:hover::before, div.wp-block-button a:visited:hover::before {
	 opacity: 0.1;
}


/** Twitter Embeds **/
.wp-block-embed-twitter.aligncenter twitter-widget {
	margin-left: auto;
  margin-right: auto;
}

/** Mobile overrides **/
@media (max-width: 768px) {
 
  /** Headings **/
  h1 { font-size: 34px; }
  h2 { font-size: 26px; line-height: 32px; padding-top: 32px; }
    hr + h2 { padding-top: 32px !important; }
  h3 { font-size: 22px; line-height: 28px; }
 
  h2.related-posts {
    margin-top: 64px;
    margin-bottom: 32px;
  }
  
  /** Paragraphs **/
  p { font-size: 16px; line-height: 28px; }
  p.has-medium-font-size { font-size: 18px; line-height: 30px; }
  p.has-large-font-size, p.has-huge-font-size { font-size: 22px; line-height: 34px; }
  
  /** Quotes **/
  blockquote { margin: 32px 0 16px 0 !important; }
  blockquote.wp-block-quote { font-size: 16px; line-height: 28px; }
  
  /** Lists **/
  ul { font-size: 16px; line-height: 28px; }
  
  /** Separators **/
  hr.wp-block-separator { margin: 32px 0 0 0; }
  
  hr.wp-block-separator.is-style-dots { margin: 32px 0 0 0; }
  
  /** Code **/
  pre { margin: 40px 0; } 
  pre code { font-size: 16px; line-height: 28px; }
  
  /** Groups **/
  div.wp-block-group { margin-top: 0; }
  
  /** Buttons **/
  div.wp-block-button a { width: 100%; }
  
    /** Images **/
  .wp-block-image + .wp-block-image { margin: 32px 0 0 0 !important; }
 
  /** Videos **/
  figure.wp-block-embed + figure.wp-block-embed { margin: 32px 0 0 0; }
}

@media (prefers-color-scheme: light) {
  h1,
  h2,
  h3,
  h4,
  h5,
  p { 
    color: black; 
  }

  figure.wp-block-embed figcaption {
    color: #666;
  }

  .wp-block-image figcaption {
    color: #666;
  }

  hr.wp-block-separator {
    background-color: #EBEBEB;
  }

  hr.wp-block-separator.is-style-dots::before {
    font-size: 30px;
  }

  pre {
    border: 1px solid #EBEBEB;
    background-color: #F9F9F9;
  }

  blockquote.wp-block-quote {
    border-left: 4px solid black;
  }
  
}

@media (prefers-color-scheme: dark) {
  h1,
  h2,
  h3,
  h4,
  h5,
  p { 
    color: #e6e6e6; 
  }
  
  code {
  color: #e55c9b;
  }
  
  p code {
  border: 1px solid #363b3c;
  background-color: #1c2229;
  }
  
  p a, p a:visited, p + ul li a, p + ul li a:visited {
  color: #8ab4f8 !important;
  }

  hr.wp-block-separator {
    background-color: #35383a;
  }

  figure.wp-block-embed figcaption {
    color: #e6e6e6;
  }

  .wp-block-image figcaption {
    color: #e6e6e6;
  }

  pre {
    border: solid 1px #363b3c;
    background-color: #1c2229;
    color: #e6e6e6;
  }

  blockquote.wp-block-quote {
    border-left: 4px solid #f9f9f9;
    color: #e6e6e6;
  }
  
  hr.wp-block-separator.is-style-dots::before {
    color: #35383a;
  }

  ul li {
    color: #e6e6e6;
  }

  ol li {
    color: #e6e6e6;
  }
}