/* 

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(800px - (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: 1600px) {
    :root {
      --responsive--aligndefault-width: calc(1200px - (2 * var(--global--spacing-horizontal)));;
      --responsive--alignwide-width: calc(1600px - (2 * var(--global--spacing-horizontal)));
    }
  }
  
  .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):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;
  }
  
  .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;
  }
  
  .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: auto;
    }
  
  .entry-content > .alignright {
    margin-left: auto;
    margin-right: var(--responsive--alignright-margin);
  }
  
  /*
  
  Setting vertical margins and responsive widths on top-level wrappers and content wrappers.
  
  */
  
  .site-header,
  .widget-area,
  .site-footer {
    padding-top: var(--global--spacing-vertical);
    padding-bottom: var(--global--spacing-vertical);
    margin-left: auto;
    margin-right: auto;
  }

  .site-main {
    padding-top: 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);
  }
  
  @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);
    }
  }
  
  @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 .has-background {
    padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
  }