/* 

Setting global spacing variables as equal to the --two-spacer variable as that's what's used in the header and footer currently;
this can change to match any desired general spacing/margins.

Default width is set as 800px with a global horiz. spacing margin on each side;
for screens above 1600px, this is instead set to 1200px with the same guaranteed margins.

Wide widths, 'alignfull' elements, are given full-width minus a standard horiz. margin on each side;
for screens above 1600px, this is changed to assign a width of 1600px while maintaining the same margins.

*/

:root {
  --global--spacing-horizontal: var(--two-spacer);
  --global--spacing-vertical: var(--two-spacer);
  --responsive--aligndefault-width: calc(600px - (2 * var(--global--spacing-horizontal)));;
  --responsive--alignwide-width: calc(100vw - (2 * var(--global--spacing-horizontal)));
  --responsive--alignfull-width: 100%;
  --responsive--alignright-margin: var(--global--spacing-horizontal);
  --responsive--alignleft-margin: var(--global--spacing-horizontal);
}

@media only screen and (min-width: 1300px) {
  :root {
    --responsive--aligndefault-width: calc(800px - (2 * var(--global--spacing-horizontal)));;
    --responsive--alignwide-width: calc(1300px - (2 * var(--global--spacing-horizontal)));
  }
}

main {
  min-height: 65vh;
}

.wp-block-image img {
  height: auto;
}

.wp-block-image img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

.entry-content .alignleft {
  margin-top: 1rem;
  padding-top: 1rem;
  float: left;
  margin-left: -16.66666%;
  max-width: 50%;
  margin-right: 1.5rem;
}

.wp-block-image .alignleft {
  float: left;
  margin: 0.5em 1em 0.5em 0;
}

.entry-content .alignright {
  margin-top: 1rem;
  padding-top: 1rem;
  float: right;
  margin-right: -16.66666%;
  max-width: 50%;
  margin-left: 1.5rem;
}

.wp-block-image .alignright {
  float: right;
  margin: 0.5em 0 0.5em 1em;
}

.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content > *:not(.alignwide):not(.is-style-section):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.default-max-width {
  max-width: var(--responsive--aligndefault-width);
  width: var(--responsive--aligndefault-width);
  margin-left: auto;
  margin-right: auto;
}

.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content > figure:not(.alignwide):not(.is-style-section):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.default-max-width {
  max-width: var(--responsive--aligndefault-width);
  width: var(--responsive--aligndefault-width);
  margin-left: auto;
  margin-right: auto;
}

.widget-area,
.pagination,
.comments-pagination,
.post-navigation,
.site-footer,
.site-header,
.alignwide,
.is-style-alignwide,
.wide-max-width {
  max-width: var(--responsive--alignwide-width);
  width: var(--responsive--alignwide-width);
  margin-left: auto;
  margin-right: auto;
}

.has-background {
  position: relative;
  z-index: 1;
}

.has-background > .is-style-section, .has-background > .is-style-section.has-background {
  position: absolute;
}

.alignfull,
.wp-block-group .wp-block-group__inner-container > *.alignfull,
.full-max-width {
  max-width: var(--responsive--alignfull-width);
  width: var(--responsive--alignfull-width);
  margin-left: auto;
  margin-right: auto;
}

.is-style-section,
.wp-block-group .wp-block-group__inner-container > *.is-style-section {
  display: inline-block;
  margin-right: auto;
  margin-left: 2rem;
  text-align: left;
  top: -1px;
  transform: translateY(-43px);
  padding: .75rem 1.5rem !important;
}

.alignfull > .alignwide > .is-style-section {
  transform: translate(0px, -106px);
}

.nav-line {
  display: block;
  height: 1px;
  border: 0;
  padding: 0;
  margin: 0;
  border-top: 1px solid currentColor;
  position: relative;
  z-index: 0;
}

.is-style-top-border {
  border-top: 1px solid currentColor;
  padding-top: 0rem !important;
  padding-bottom: 3rem !important;
  display: block;
}

.is-style-border-top {
  border-top: 1px solid currentColor;
  padding-top: 4rem !important;
  padding-bottom: .01rem !important;
}

.is-style-border-top-no-spacing {
  border-top: 1px solid currentColor;
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.is-style-border-bottom {
  border-bottom: 1px solid currentColor;
  padding-top: 2.5rem !important;
  padding-bottom: 0rem !important;
  margin-bottom: 5rem !important;
}

.hide-line {
  padding-top: 2.5rem !important;
  padding-bottom: 0rem !important;
  margin-bottom: 8rem !important;
}

.entry-header .post-thumbnail,
.singular .post-thumbnail,
.alignfull [class*=inner-container] > .alignwide,
.alignwide [class*=inner-container] > .alignwide {
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignfull-width);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > .alignleft {
  margin-left: var(--responsive--alignleft-margin);
  margin-right: var(--responsive--alignleft-margin);
  }

.entry-content > .alignright {
  margin-left: var(--responsive--alignright-margin);
  margin-right: var(--responsive--alignright-margin);
}

.entry-content figure.alignright {
  width: var(--responsive--aligndefault-width);
}

.entry-content figure.alignleft {
  width: var(--responsive--aligndefault-width);
}

/*

Setting vertical margins and responsive widths on top-level wrappers and content wrappers.

*/

.site-header,
.site-main,
.widget-area,
.site-footer {
  padding-top: var(--global--spacing-vertical);
  padding-bottom: var(--global--spacing-vertical);
  margin-left: auto;
  margin-right: auto;
}

/*

'Main' children margin exceptions

*/

.site-main > *:first-child {
  margin-top: 0;
}
.site-main > *:last-child {
  margin-bottom: 0;
}

/*

Setting default vertical spacing

*/

.site-main > article > *,
.site-main > .not-found > *,
.entry-content > *,
[class*=inner-container] > *,
.wp-block-template-part > *,
.site-footer > *,
.widget-area > *,
.entry-header > *,
.post-thumbnail > *,
.page-content > *,
.comment-content > *,
.widget > *  {
  margin-top: var(--global--spacing-vertical);
  margin-bottom: var(--global--spacing-vertical);
}

.site-main > article > *:first-child,
.site-main > .not-found > *:first-child,
.entry-content > *:first-child,
[class*=inner-container] > *:first-child,
.wp-block-template-part > *:first-child,
.entry-header > *:first-child,
.post-thumbnail > *:first-child,
.page-content > *:first-child,
.comment-content > *:first-child,
.widget > *:first-child {
  margin-top: 0;
}

.site-main > article > *:last-child,
.site-main > .not-found > *:last-child,
.entry-content > *:last-child,
[class*=inner-container] > *:last-child,
.wp-block-template-part > *:last-child,
.entry-header > *:last-child,
.post-thumbnail > *:last-child,
.page-content > *:last-child,
.comment-content > *:last-child,
.widget > *:last-child {
  margin-bottom: 0;
}

/*

Adds special margin overrides for alignment utility classes.

*/

.entry-content > *.alignleft,
.entry-content > *.alignright,
.entry-content > *.alignleft:first-child + *,
.entry-content > *.alignright:first-child + *,
.entry-content > *.alignfull.has-background {
  margin-top: 0;
}
.entry-content > *:last-child,
.entry-content > *.alignfull.has-background {
  margin-bottom: 0;
}
.entry-content > *.alignfull + .alignleft,
.entry-content > *.alignfull + .alignright {
  margin-top: var(--global--spacing-vertical);
}

.wp-block-columns.alignfull {
  margin: 0 var(--global--spacing-horizontal);
}

.wp-block-column {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 1200px) {
  .widget-area, .pagination, .comments-pagination, .post-navigation, .site-footer, .site-header, .alignwide, .wide-max-width {
      max-width: 100%;
      width: auto;
      margin-left: var(--global--spacing-horizontal);
      margin-right: var(--global--spacing-horizontal);
  }

  body .is-layout-constrained > .alignwide {
    padding-left: var(--global--spacing-horizontal);
    padding-right: var(--global--spacing-horizontal);
  }

}

@media screen and (max-width: 991px) {
  .post-thumbnail,
  .entry-content .wp-audio-shortcode, 
  .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
  *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
    max-width: 100%;
    width: auto;
    margin-left: var(--global--spacing-horizontal);
    margin-right: var(--global--spacing-horizontal);
  }

  .wp-block-cover, .wp-block-cover-image {
    width: inherit;
  }

  .wp-block-columns.alignfull {
    margin: 0;
  }

  .entry-content figure.alignright, .entry-content figure.alignleft {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .entry-content figure.alignright img, .entry-content figure.alignleft img {
    padding-left: var(--global--spacing-horizontal);
    padding-right: var(--global--spacing-horizontal);
  }
}

@media screen and (max-width: 640px) {
  .entry-content > *:not(.alignwide):not(.is-style-section):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    max-width: 100%;
    width: 100%;
    padding-left: var(--global--spacing-horizontal);
    padding-right: var(--global--spacing-horizontal);
  }

  blockquote.wp-block-quote {
    margin-left: var(--global--spacing-horizontal) !important;
    padding-right: calc(var(--global--spacing-horizontal) * 2) !important;
  }
}

.entry-content .has-background {
  padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
}