/* 

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 - (4 * var(--global--spacing-horizontal)));;
  --responsive--alignwide-width: calc(100vw - (4 * 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)));
  }
}

figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.wp-block-gallery .wp-block-image { 
  display: flex;
}

.wp-block-gallery {
  flex-wrap: wrap;
  --wp--style--unstable-gallery-gap: var(--two-spacer) !important; /* Adjust this value to your desired gap */
  gap: var(--two-spacer) !important; /* Adjust this value to your desired gap */
}

.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
  height: auto !important;
}

.wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image {
  max-width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px)/2);
}

.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image {
  max-width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px)*.66667);
}

.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image {
  max-width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px)*.75);
}

.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image {
  max-width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px)*.8);
}

.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image {
  max-width: calc(16.66666% - var(--wp--style--unstable-gallery-gap, 16px)*.66667);
}

.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image {
  max-width: calc(14.28571% - var(--wp--style--unstable-gallery-gap, 16px)*.85714);
}


.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: relative;
  display: block;
  background: none;
  color: inherit;
  text-align: left;
  padding: 0;
}

.wp-block-group:empty { 
  padding: 0px !important;
}

.wp-block-group:has(div.no-events) { 
  padding: 0px;
}

.wp-block-group:has(div.no-projects) { 
  padding: 0px;
}

.wp-block-group:has(div.no-working-groups) { 
  padding: 0px;
}

.wp-block-group:has(div.no-posts) { 
  padding: 0px;
}

.wp-block-group:has(div.no-ongoing-events) { 
  padding: 0px;
}

.wp-block-group:has(div.no-opportunities) { 
  padding: 0px;
}

.wp-block-group:has(div.no-results) { 
  padding: 0px;
}

.wp-block-group:has(div.no-series) { 
  padding: 0px;
}

.wp-block-group:has(div.no-people) { 
  padding: 0px;
}

.wp-block-group:has(div.no-products) { 
  padding: 0px;
}

.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.content-area):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(--wp--style--global--content-size);
  width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
}

.wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container {
  width: 100%;
}

.is-style-visible-toc.wp-block-cover .wp-block-cover__inner-container {
  width: auto !important;
}

.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;
}

.content-area {
  max-width: var(--responsive--alignwide-width);
  width: var(--responsive--alignwide-width);
  margin-left: auto;
  margin-right: auto;
}

.entry-content iframe {
  margin: 0 auto !important;
}

.content-area main {
  padding-top: 0;
}

.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);
}

.wp-block-image.alignright {
  max-width: 55%;
  float: right;
  clear: none;
  margin-left: var(--three-spacer);
}

.wp-block-image.alignleft {
  max-width: 55%;
  float: left;
  clear: none;
  margin-right: var(--three-spacer);
}

.wp-block-image.alignright figcaption, .wp-block-image.alignleft figcaption {
  text-align: left;
}

.wp-block-image.alignright img, .wp-block-image.alignleft img {
  display: block;
  max-width: 600px;
  float: left;
}

/*

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;
}

/* 
Overhauling spacing to rely only on margin-top
in order to enable more dynamic layout control with just CSS 
*/
.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(--four-spacer);
}

.entry-content > p,
.entry-content > ul  {
  margin-top: var(--two-spacer);
}

/* Slightly tighter spacing w/in groups and columns */
.entry-content .wp-block-column > *:not(.wp-block-columns):not(:first-child),
.wp-block-cover__inner-container > *:not(:first-child),
.entry-content .wp-block-group > *:not(:first-child) {
  margin-top: var(--two-spacer);
}

/* Slightly  */
.entry-content .wp-block-group .wp-block-image:not(:first-child) {
  margin-top: 0;
}

/* No top margin if the first element in the 'entry-content' container has a background */
.entry-content > *:first-child.has-background,
.entry-content > *:first-child.has-custom-background {
  margin-top: 0 !important;
}

/*
No gap if two consecutive elements have a background color
Added 'has-custom-background so that bespoke blocks
don't inherit all of the core styles that come with 'has-background'
*/
.entry-content > .has-background + .has-background,
.entry-content > .has-custom-background + .has-background,
.entry-content > .has-background + .has-custom-background,
.entry-content > .has-custom-background + .has-custom-background,
.entry-content > .has-background + .wp-block-cover,
.entry-content > .wp-block-cover + .has-background {
  margin-top: 0 !important;
}

/* 
Managing 'Cover' block spacing
*/
.entry-content > .has-background + .wp-block-cover,
.wp-block-cover__inner-container *:first-child {
  margin-top: 0 !important;
}

.entry-content > .has-background + .wp-block-cover:first-child,
.wp-block-cover__inner-container .hero:first-child {
  margin-top: 200px !important;
}

@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);
  }

  .post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.content-area):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: 100%;
    width: auto;
    margin-left: var(--global--spacing-horizontal);
    margin-right: var(--global--spacing-horizontal);
  }

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

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

  .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 100%;
  }

  .wp-block-image.alignright img, .wp-block-image.alignright img {
    max-width: 100%;
    width: 100% !important;
  }

  .wp-block-image.alignleft img, .wp-block-image.alignleft img {
    max-width: 100%;
    width: 100% !important;
  }
}

@media screen and (max-width: 768px) {

  .wp-block-image.alignright {
    max-width: 100%;
    width: 100%;
    padding-left: var(--global--spacing-horizontal);
    padding-right: var(--global--spacing-horizontal);
    margin-bottom: var(--global--spacing-vertical);
    margin-left: 0;
    margin-right: 0;
  }

  .wp-block-image.alignright figcaption, .wp-block-image.alignleft figcaption {
    padding-left: var(--global--spacing-horizontal);
  }
  
  .wp-block-image.alignleft {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    padding-left: var(--global--spacing-horizontal);
    padding-right: var(--global--spacing-horizontal);
    margin-bottom: var(--global--spacing-vertical);
  }

}

.entry-content .has-background,
.entry-content .has-border-color {
  padding: calc(2 * var(--global--spacing-vertical)) calc(2 * var(--global--spacing-horizontal));
}

.wp-block-button__link.has-background {
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

.has-text-color {
  border-color: currentColor;
}

/* Effectively getting rid of 'alignwide' and 'alignfull' on Person detail pages */
.entry-content.narrow > * {
  width: 100% !important;
  max-width: 100% !important;
}