/* 

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 675px with a global horiz. spacing margin on each side.
Image blocks (not otherwise aligned) get their own, wider default of 910px max.

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(--six-spacer);
  --responsive--aligndefault-width: calc(675px - (2 * var(--global--spacing-horizontal)));
  --responsive--image-default-width: calc(950px - (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--alignwide-width: calc(1600px - (2 * var(--global--spacing-horizontal)));
  }
}

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.alignnarrow):not(.wp-block-separator):not(.woocommerce):not(.wp-block-image):not(.people-block),
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.alignnarrow):not(.wp-block-separator):not(.woocommerce):not(.wp-block-image):not(.people-block) {
  max-width: var(--responsive--aligndefault-width);
  width: var(--responsive--aligndefault-width);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
*[class*=inner-container] > .wp-block-image:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
  max-width: var(--responsive--image-default-width);
  width: var(--responsive--image-default-width);
  margin-left: auto;
  margin-right: auto;
}

/* People block (alignnone/default) matches the image block's default width. */
.entry-content > .people-block:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
*[class*=inner-container] > .people-block:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
  max-width: var(--responsive--image-default-width);
  width: var(--responsive--image-default-width);
  margin-left: auto;
  margin-right: auto;
}

.alignwide,
.is-style-alignwide {
  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 {
  max-width: var(--responsive--alignfull-width);
  width: var(--responsive--alignfull-width);
  margin-left: auto;
  margin-right: auto;
}

/* Full-width image captions otherwise sit flush against the browser edge -- pull them in slightly. */
.wp-block-image.alignfull figcaption {
  padding-left: var(--two-spacer);
}

.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 default vertical spacing */

.entry-content > *,
[class*=inner-container] > *
.entry-content > *:first-child:not(.has-background) {
  margin-top: var(--global--spacing-vertical);
}

.entry-content > p.wp-block-paragraph,
[class*=inner-container] > p.wp-block-paragraph {
  margin-top: calc(var(--global--spacing-vertical) / 2);
}

.entry-content .has-background + .has-background {
  margin-top: 0;
}

.entry-content > *:first-child,
[class*=inner-container] > *:first-child {
  margin-top: 0;
}

.entry-content > p.wp-block-paragraph:first-child,
[class*=inner-container] > p.wp-block-paragraph:first-child {
  margin-top: 0;
}

.entry-content > *:last-child {
  margin-bottom: var(--global--spacing-vertical);;
}

@media screen and (max-width: 991px) {
  /* This selector's :not() list has to match the base rule's above exactly (same class count),
     otherwise the base rule (being more specific) keeps winning below the breakpoint. */
  .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.alignnarrow):not(.wp-block-separator):not(.woocommerce):not(.wp-block-image):not(.people-block),
  *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.alignnarrow):not(.wp-block-separator):not(.woocommerce):not(.wp-block-image):not(.people-block) {
    max-width: 100%;
    width: auto;
    margin-left: var(--global--spacing-horizontal);
    margin-right: var(--global--spacing-horizontal);
  }

  .entry-content > .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
  *[class*=inner-container] > .wp-block-image: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);
  }

  .entry-content > .people-block:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
  *[class*=inner-container] > .people-block: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);
  }

  /* Catches p/heading tags nested deeper than a direct child, so the fixed 675px default can't push them past the viewport.
     Excludes align classes so alignwide/alignfull headings (e.g. is-style-section-with-margin) keep their own
     responsive width/margin instead of being forced flush to the edge. */
  .entry-content p:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
  .entry-content h1:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
  .entry-content h2:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
  .entry-content h3:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
  .entry-content h4:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
  .entry-content h5:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
  .entry-content h6: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);
  }
}

.entry-content .has-background {
  padding: var(--three-spacer);
}