/* ------------------------------ */
/* Groups with Background Colors
/* Applied in the Block Editor
/* ------------------------------ */

/* Inside the content of a page/post, groups with background colors applied
should have padding between the bg-color edge and content, regardless of layout
or alignment status. */
.entry-content .wp-block-group.has-background,
.entry-content.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding.wp-block-group.has-background:not(.wp-block-block, .alignfull)),
.block-editor-iframe__body .wp-block-post-content .wp-block-group.has-background {
  padding: var(--wp--preset--spacing--small);
}

/* Color bar groups with background colors must add padding clearance for the
color bar. */
.entry-content .wp-block-group.has-background.is-style-color-bar-top,
.block-editor-iframe__body .wp-block-post-content .wp-block-group.has-background.is-style-color-bar-top {
  padding-top: calc(var(--wp--preset--spacing--small) + var(--wp--custom--color-bar--height));
}
.entry-content .wp-block-group.has-background.is-style-color-bar-bottom,
.block-editor-iframe__body .wp-block-post-content .wp-block-group.has-background.is-style-color-bar-bottom {
  padding-bottom: calc(var(--wp--preset--spacing--small) + var(--wp--custom--color-bar--height));
}

/* --------------------------------------- */
/* Variation: Circle BG Texture:
/* Left, Right, or Both Sides
/* --------------------------------------- */

.wp-block-group.is-style-circle-texture-left,
.wp-block-group.is-style-circle-texture-right,
.wp-block-group.is-style-circle-texture-two {
  position: relative;
  overflow: hidden;
  & > * {
    position: relative;
    z-index: 2;
  }
}
.wp-block-group.is-style-circle-texture-left::after,
.wp-block-group.is-style-circle-texture-right::after,
.wp-block-group.is-style-circle-texture-two::after,
.wp-block-group.is-style-circle-texture-two::before {
  content: '';
  display: inline-block;
  width: 50vw;
  height: 50vw;
  position: absolute;
  top: 0;
  z-index: 1;
  opacity: 0.5;
  background-image: url(/wp-content/themes/mdhumanities/assets/images/texture-circles-secondary_lighter.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Assign to left or right side */
.wp-block-group.is-style-circle-texture-left::after,
.wp-block-group.is-style-circle-texture-two::before {
  right: auto;
  left: -25vw;
}
.wp-block-group.is-style-circle-texture-right::after,
.wp-block-group.is-style-circle-texture-two::after {
  right: -25vw;
  left: auto;
}

/* Left/Right variants: circle texture bumps to bottom of group on small
screens. */
@media only screen and (max-width: 781px) {
  .wp-block-group.is-style-circle-texture-left,
  .wp-block-group.is-style-circle-texture-right {
    &::after {
      top: auto;
      bottom: -25vw;
    }
  }
}

/* Slightly different circles for two-circle variant */
.wp-block-group.is-style-circle-texture-two::before,
.wp-block-group.is-style-circle-texture-two::after {
  background-image: url(/wp-content/themes/mdhumanities/assets/images/texture-circles-neutral_white.svg);
  transform: scale(0.75) translateY(-50%);
  top: 50%;
}

/* Two-circle variant: on dark backgrounds, screen the texture */
.has-primary-default-background-color,
.has-primary-dark-background-color,
.has-primary-darker-background-color,
.has-primary-darkest-background-color,
.has-primary-background-color,
.has-neutral-dark-background-color,
.has-neutral-darker-background-color,
.has-neutral-darkest-background-color,
.has-contrast-background-color {
  &.wp-block-group.is-style-circle-texture-two::before,
  &.wp-block-group.is-style-circle-texture-two::after {
    mix-blend-mode: soft-light;
    opacity: 0.3;
  }
}

/* ------------------------------ */
/* Variation: Color Bar Top/Bottom
/* ------------------------------ */

/* Allow the bar to be positioned within the group. */
.wp-block-group.is-style-color-bar-top,
.wp-block-group.is-style-color-bar-bottom {
  position: relative;
}

/* Clearance for the bar at top or bottom. */
.wp-block-group.is-style-color-bar-top {
  padding-top: var(--wp--custom--color-bar--height);
}
.wp-block-group.is-style-color-bar-bottom {
  padding-bottom: var(--wp--custom--color-bar--height);
}

/* Render the bar itself. */
.wp-block-group.is-style-color-bar-top::after,
.wp-block-group.is-style-color-bar-bottom::after {
  position: absolute;
  right: 0;
  left: 0;
  content: '';
  display: inline-block;
  width: 100%;
  height: var(--wp--custom--color-bar--height);
  background-image: url(/wp-content/themes/mdhumanities/assets/images/color-bar.svg);
  background-position: center center;
  background-size: 100%;
}

/* Position to top or bottom accordingly. */
.wp-block-group.is-style-color-bar-top::after {
  top: 0;
  bottom: auto;
}
.wp-block-group.is-style-color-bar-bottom::after {
  top: auto;
  bottom: 0;
}

/* ------------------------------ */
/* Variation: Knot
/* Group with a knot pattern on the sides
/* ------------------------------ */

/* Allow the knots to be positioned within the group */
.wp-block-group.is-style-knot {
  position: relative;
}

/* Render knots */
.wp-block-group.is-style-knot::before,
.wp-block-group.is-style-knot::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  background-image: url(/wp-content/themes/mdhumanities/assets/images/knot-border-neutral_lightest.svg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.wp-block-group.is-style-knot::before {
  left: 0;
  right: auto;
  background-position: 100% 0;
}
.wp-block-group.is-style-knot::after {
  left: auto;
  right: 0;
  background-position: 0 0;
}

/* Prevent content from being overlayed by knot */
@media only screen and (min-width: 782px) {
  .wp-block-group.is-style-knot,
  .wp-block-group.is-style-knot.has-background,
  .block-editor-iframe__body .wp-block-post-content .wp-block-group.has-background.is-style-knot {
    padding-right: 6rem;
    padding-left: 6rem;
  }
}

/* Swap knot image depending on group background color */
.wp-block-group.is-style-knot.has-neutral-white-background-color {
  &::before,
  &::after {
    background-image: url(/wp-content/themes/mdhumanities/assets/images/knot-border-neutral_light.svg);
  }
}
.wp-block-group.is-style-knot.has-neutral-lightest-background-color,
.wp-block-group.is-style-knot.has-neutral-lighter-background-color,
.wp-block-group.is-style-knot.has-neutral-light-background-color,
.wp-block-group.is-style-knot.has-primary-lightest-background-color,
.wp-block-group.is-style-knot.has-primary-default-background-color {
  &::before,
  &::after {
    background-image: url(/wp-content/themes/mdhumanities/assets/images/knot-border-primary_lighter.svg);
  }
}

.wp-block-group.is-style-knot.has-primary-dark-background-color,
.wp-block-group.is-style-knot.has-primary-darker-background-color,
.wp-block-group.is-style-knot.has-primary-darkest-background-color {
  &::before,
  &::after {
    background-image: url(/wp-content/themes/mdhumanities/assets/images/knot-border-primary_default.svg);
  }
}

/* On small screens, the border switches to the group's top & bottom instead of
left/right sides */
@media only screen and (max-width: 781px) {
  .wp-block-group.is-style-knot::before,
  .wp-block-group.is-style-knot::after {
    height: 90vw;
    margin: 0;
  }

  .wp-block-group.is-style-knot::before {
    transform-origin: top left;
    transform: rotate(-90deg) translate(-4rem, 4vw);
    background-position: 0 100%;
  }

  .wp-block-group.is-style-knot::after {
    top: auto;
    right: auto;
    left: 0;
    transform-origin: bottom left;
    transform: rotate(90deg) translate(-4rem, -4vw);
    background-position: 0 100%;
  }

  .wp-block-group.is-style-knot,
  .wp-block-group.is-style-knot.has-background {
    /* Important used here to always override user settings. */
    /* Otherwise content may be overlapped by the knot design on mobile. */
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }
}

/* ------------------------------ */
/* Variation: Narrow
/* Group that constrains its content large screens.
/* ------------------------------ */
@media only screen and (min-width: 782px) {
  .wp-block-group.is-style-narrow {
    & > * {
      max-width: 40vw;
      margin-right: auto;
      margin-left: auto;
    }
  }

  /* Slightly wider when inside carousel slides */
  .wp-block-cb-carousel-v2 {
    & .wp-block-group.is-style-narrow {
      & > * {
        max-width: 55vw;
        margin-right: auto;
        margin-left: auto;
      }
    }
  }
}

/* ------------------------------ */
/* Row: Icon Superhead
/* ------------------------------ */
.wp-block-group.mdh--superhead {
  & p {
    display: inline-flex;
    align-items: center;
  }
}

/* ------------------------------ */
/* Core: Grids
/* ------------------------------ */

/* Force grids to one column on small screens */
@media only screen and (max-width: 781px) {
  .wp-block-group.is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Align Grid items vertical center: WP doesn't currently allow vertical
alignment of grid items via the editor. Add this class (mdh--grid-valign-center)
to a Grid Block in Block Settings > Advanced > Additional CSS Classes to
vertically align grid items to the center line. This has been intentionally NOT
added as a style variant for the following reasons: 1. it applies ONLY to grids,
not all groups, and adding it as a group variant may confuse editors and
discourage them from using the correct alignment tools within WP on other group
blocks, 2. WP may (should?) eventually add vertical alignment as a control
within block settings for grids, in which case this class can be deleted only
here in this one place instead of unregistering a style.  */
.wp-block-group.is-layout-grid.mdh--grid-valign-center {
  align-items: center;
}

/* ------------------------------ */
/* Basic Page Template Group +
/* Single Post / News Item
/* ------------------------------ */

/* Breadcrumbs */
.wp-block-group.mdh--breadcrumbs {
  border-bottom: 1px solid var(--wp--preset--color--neutral-lighter);
  margin-top: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.wp-block-group.mdh--breadcrumbs ol,
.wp-block-group.mdh--breadcrumbs li {
  font-size: var(--wp--preset--font-size--small);
}

.wp-block-group.mdh--breadcrumbs li .sep {
  display: inline-block;
  width: 5px;
  height: 10px;
  background-image: url(/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_dark.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-indent: -999999px;
}

.wp-block-group.mdh--breadcrumbs li a {
  color: var(--wp--preset--color--neutral-darker);
  text-decoration: none;
}

.wp-block-group.mdh--breadcrumbs li a:hover,
.wp-block-group.mdh--breadcrumbs li a:active,
.wp-block-group.mdh--breadcrumbs li a:focus {
  color: var(--wp--preset--color--primary-default);
}

/* On Dark Option */
.wp-block-boldblocks-breadcrumb-block.mdh--breadcrumbs-on-dark li a {
  color: var(--wp--preset--color--neutral-lighter);

  &:hover {
    color: var(--wp--preset--color--neutral-true-white);
  }
}

/* Sidebar Layout */

/* Main/Sidebar has airier layout than typical columns */
.wp-block-group.mdh--basic-page,
.wp-block-group.mdh--single-post,
.wp-block-group.mdh--category-archive,
.wp-block-group.mdh--tag-archive {
  & > .wp-block-columns {
    gap: var(--wp--preset--spacing--medium);
  }
}

/* When the layout is not stacked for mobile, put the sidebar first and create a
typical sidebar/main column layout */
@media only screen and (min-width: 782px) {
	.wp-block-group.mdh--basic-page,
  .wp-block-group.mdh--single-post,
  .wp-block-group.mdh--category-archive,
  .wp-block-group.mdh--tag-archive,
  .wp-block-group.mdh--search-template {
    & > .wp-block-columns > .wp-block-column:first-child {
      order: 2;
    }
	}
	.wp-block-group.mdh--basic-page,
  .wp-block-group.mdh--single-post,
  .wp-block-group.mdh--category-archive,
  .wp-block-group.mdh--tag-archive,
  .wp-block-group.mdh--search-template {
    & > .wp-block-columns > .wp-block-column:nth-child(2) {
      order: 1;
      max-width: 26%;
    }
	}
}

/* Separate sidebar items with a border */
.mdh--sidebar > * {
  border-top: 1px solid var(--wp--preset--color--neutral-darker);
  padding-top: 2rem;
  &:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* Instances to NOT border-separate sidebar items... */
.mdh--search-template .mdh--sidebar > .wp-block-search {
  border-top: 0;
  padding-top: 0;
}

/* Scale headers down if in the sidebar */
.mdh--sidebar h2,
.mdh--sidebar h3,
.mdh--sidebar h4,
.mdh--sidebar h5,
.mdh--sidebar h6 {
  font-family: var(--wp--preset--font-family--primary);
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--line-height--body);
  font-weight: var(--wp--custom--font-weight--semi-bold);
}

/* Entry Title on Pages with Sidebars */
.wp-block-group.mdh--basic-page,
.wp-block-group.mdh--single-post,
.wp-block-group.mdh--category-archive,
.wp-block-group.mdh--tag-archive,
.wp-block-group.mdh--search-template {
  & header.entry-header,
  & header.archive-header {
    border-bottom: 1px var(--wp--preset--color--neutral-darker) solid;
    padding-bottom: var(--wp--preset--spacing--small);
  }

  & header.entry-header h1,
  & header.archive-header h1 {
    font-size: var(--wp--preset--font-size--heading-2);
  }

  /* Flower icon above Entry Title */
  & header.entry-header::before,
  & header.archive-header::before {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(/wp-content/themes/mdhumanities/assets/images/icon-flower-secondary_default.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
}

/* No border on Search Results header */
.wp-block-group.mdh--search-template header.archive-header {
  border: 0;
  padding-bottom: 0;
}

/* ------------------------------ */
/* MDH Landing Page Template Group
/* ------------------------------ */

.wp-block-group.mdh--landing,
.wp-block-group.mdh--landing-no-title,
.wp-block-group.mdh--fancy-detail__header {
  margin-top: 0;
}

.wp-block-group.mdh--landing__header,
.wp-block-group.mdh--fancy-detail__header {
  overflow: hidden;
  position: relative;
  background-color: var(--wp--preset--color--primary-dark);
  background-image: linear-gradient(to right, rgba(172, 180, 241, 0), rgba(172, 180, 241, 0.2));
  background-blend-mode: normal, color-dodge;
  color: var(--wp--preset--color--neutral-true-white);
  padding-top: var(--wp--preset--spacing--x-large);
  padding-bottom: var(--wp--preset--spacing--x-large);
}

/* Keep content above textures */
.wp-block-group.mdh--landing__header > *,
.wp-block-group.mdh--fancy-detail__header > * {
  position: relative;
  z-index: 2;
}

/* Paintbrush Texture */
.wp-block-group.mdh--landing__header::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 85%;
  background-image: url(/wp-content/themes/mdhumanities/assets/images/texture3.png);
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: soft-light;
}

/* Overall Background Grain Texture */
.wp-block-group.mdh--landing__header::after,
.wp-block-group.mdh--fancy-detail__header::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-image: url(/wp-content/themes/mdhumanities/assets/images/texture1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.35;
  mix-blend-mode: plus-lighter;
}

@media only screen and (min-width: 782px) {
  /* Overlapping texture on image/right side on large screens */
  .wp-block-group.mdh--landing__header > .wp-block-columns::before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 60vh;
    top: calc(var(--wp--preset--spacing--x-large) * -1);
    right: calc(var(--wp--preset--spacing--x-large) * -1);
    bottom: calc(var(--wp--preset--spacing--x-large) * -1);
    left: auto;
    z-index: 1;
    background-image: url(/wp-content/themes/mdhumanities/assets/images/texture2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    mix-blend-mode: color-burn;
  }

  /* Column Layout specific to Page Title */
  @media only screen and (min-width: 72rem) {
    .wp-block-group.mdh--landing__header > .wp-block-columns {
      gap: var(--wp--preset--spacing--x-large);
    }
  }
  .wp-block-group.mdh--landing__header > .wp-block-columns > .wp-block-column:first-child {
    max-width: 41%;
  }
}

/* Keep content in title columns centered vertically. */
.wp-block-group.mdh--landing__header > .wp-block-columns > .wp-block-column,
.wp-block-group.mdh--fancy-detail__header > .wp-block-columns > .wp-block-column {
  align-self: center;
}

/* Title block containing H1/Entry Title and Excerpt */
.wp-block-group.mdh--landing__title,
.wp-block-group.mdh--fancy-detail__title {
  position: relative;
  background-color: var(--wp--preset--color--primary-darker);
  justify-self: flex-start;
  padding: var(--wp--preset--spacing--small);
}

/* Three curved arrow icon above title */
.wp-block-group.mdh--landing__title::before,
.wp-block-group.mdh--fancy-detail__title::before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 4.625rem;
  height: 2.313rem;
  top: -2.313rem;
  left: 0;
  background-color: var(--wp--preset--color--neutral-true-white);
  background-image: url(/wp-content/themes/mdhumanities/assets/images/icon-curved-arrow-right-three-secondary_default.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
}

/* Content of Title Columns */
.wp-block-group.mdh--landing__header h1,
.wp-block-group.mdh--fancy-detail__header h1 {
  color: var(--wp--preset--color--neutral-true-white);
}
.wp-block-group.mdh--landing__header .wp-block-post-excerpt,
.wp-block-group.mdh--fancy-detail__header .wp-block-post-excerpt  {
  margin-top: 0;
}
.wp-block-group.mdh--landing__header .wp-block-post-excerpt__excerpt {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: var(--wp--custom--font-weight--semi-bold);
}
/* Larger font for H1 on large screens */
@media only screen and (min-width: 782px) {
  .wp-block-group.mdh--landing__header h1 {
    font-size: var(--wp--preset--font-size--heading-1-large);
  }
}

/* Landing Page Title Adjustments for Small Screens */
@media only screen and (max-width: 84rem) {
  .wp-block-group.mdh--landing__header,
  .wp-block-group.mdh--fancy-detail__header > .wp-block-columns {
    padding-right: var(--wp--preset--spacing--medium);
    padding-left: var(--wp--preset--spacing--medium);
  }
}

@media only screen and (max-width: 781px) {
  .wp-block-group.mdh--landing__header,
  .wp-block-group.mdh--fancy-detail__header > .wp-block-columns {
    padding-right: var(--wp--preset--spacing--small);
    padding-left: var(--wp--preset--spacing--small);
  }

  /* Rotate the Paintbrush Texture */
  .wp-block-group.mdh--landing__header::before {
    transform: rotate(-90deg) translate(-40px, 0);
    transform-origin: top left;
  }

  /* Image comes before title on small screens */
  .wp-block-group.mdh--landing__header > .wp-block-columns > .wp-block-column:first-child,
  .wp-block-group.mdh--fancy-detail__header > .wp-block-columns > .wp-block-column:first-child {
    order: 2;
    /* clearance for icon */
    margin-top: 2rem;
  }

  .wp-block-group.mdh--landing__title,
  .wp-block-group.mdh--fancy-detail__title {
    background-color: var(--wp--preset--color--primary-darkest);
  }
}

/* Fancy Detail Page Header Adjustments */
.wp-block-group.mdh--fancy-detail__header {
  padding-top: 0;
  padding-bottom: var(--wp--preset--spacing--medium);
  margin-bottom: var(--wp--preset--spacing--medium);
}

/* Breadcrumbs INSIDE Fancy Detail Page Header */
.wp-block-group.mdh--fancy-detail__header .mdh--breadcrumbs {
  max-width: none;
  margin-bottom: var(--wp--preset--spacing--medium);
  border: 0;
  background-color: rgba(0,0,0,0.3);
}

.wp-block-group.mdh--fancy-detail__header .wp-block-group.mdh--breadcrumbs li {
  font-size: var(--wp--preset--font-size--medium);
}

.wp-block-group.mdh--fancy-detail__header .wp-block-group.mdh--breadcrumbs li a {
  color: var(--wp--preset--color--primary-lightest);
  &:hover,
  &:active,
  &:focus {
    color: var(--wp--preset--color--neutral-true-white);
  }
}

.wp-block-group.mdh--fancy-detail__header .wp-block-group.mdh--breadcrumbs li .sep {
  background-image: url(/wp-content/themes/mdhumanities/assets/images/icon-chevron-right-neutral_true_white.svg);
}

@media only screen and (max-width: 1376px) {
  .wp-block-group.mdh--fancy-detail__header .mdh--breadcrumbs {
    padding-left: var(--wp--preset--spacing--small);
    padding-right: var(--wp--preset--spacing--small);
  }
}

@media only screen and (max-width: 781px) {
  .wp-block-group.mdh--fancy-detail__header .mdh--breadcrumbs {
    padding-left: var(--wp--preset--spacing--x-small);
    padding-right: var(--wp--preset--spacing--x-small);
  }
}

/* No auto-margin between top-level blocks on landing pages and homepage */
.mdh--landing .entry-content,
.mdh--landing .entry-content > *,
.page-template-no-title .entry-content > * {
  margin-block-start: 0;
}

/* ------------------------------ */
/* Variations on Landing for News
/* ------------------------------ */

/* Swap texture image */
.mdh--landing-simple .wp-block-group.mdh--landing__header > .wp-block-columns::before {
  background-image: url(/wp-content/themes/mdhumanities/assets/images/texture-circles-primary_darker.svg);
  z-index: 0;
  opacity: 0.2;
  mix-blend-mode: screen;
  right: calc((100vw / 4) * -1);
}

/* Slightly different column ratio and typography */
@media only screen and (min-width: 782px) {
  .mdh--landing-simple .wp-block-group.mdh--landing__header > .wp-block-columns > .wp-block-column:first-child {
    max-width: 51%;
  }

  .mdh--landing-simple .wp-block-group.mdh--landing__header h1 {
    font-size: var(--wp--preset--font-size--heading-2);
  }
}