@charset "UTF-8";
/* Use the Group block to combine meaningful units.
 * A group has a white background and rounded corners by default and must be
 * changed to a different variation if the default shall be overwritten.
 * The 'main' node defines the content of a page, between header, navigation and footer.
*/
/* --- SCSS Variables --- */
/* These are the default WordPress Breakpoints */
/* Custom Breakpoints */
/* Set a padding for the containing group.
 * We only apply this to the first group to have a propper container visual.
*/
.entry-content > .wp-block-group,
.wp-admin .is-root-container > .wp-block-group {
  padding: var(--wp--preset--spacing--50);
}

/* Styling options for all groups.
*/
main .wp-block-group.has-background,
.wp-admin .is-root-container .wp-block-group.has-background {
  border-radius: var(--htgf--preset--border-radius--1);
}
@media (min-width: 781px) {
  main .wp-block-group.is-style-narrow-content,
  .wp-admin .is-root-container .wp-block-group.is-style-narrow-content {
    padding-left: var(--extended-padding);
    padding-right: var(--extended-padding);
  }
}
main .wp-block-group > .wp-block-group,
.wp-admin .is-root-container .wp-block-group > .wp-block-group {
  border-radius: var(--htgf--preset--border-radius--2);
  /* Okay, this seems to have been removed from one design iteration to the other. I wonder if it will come back.
  @media (max-width: $sm) {
    padding: 0 !important;
    &.has-background {
      background: none !important;
    }
  }
  */
}

/* Mobile layout changes
 * The design makes a difference between groups at desktop size but not at mobile size.
 * We adapt to that on smaller breakpoints.
*/
@media (max-width: 600px) {
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-group.has-background:has(+ .wp-block-group.has-background),
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-group.has-background:has(+ .wp-block-columns .wp-block-column.has-background),
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-columns:has(+ .wp-block-group.has-background) > .wp-block-column.has-background {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0 !important;
  }
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-group.has-background + .wp-block-group.has-background,
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-columns:has(.wp-block-column.has-background) + .wp-block-group.has-background,
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-columns:has(.wp-block-column.has-background) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0 !important;
  }
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-group.has-background + .wp-block-group.has-background > .wp-block-column.has-background,
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-columns:has(.wp-block-column.has-background) + .wp-block-group.has-background > .wp-block-column.has-background,
  main > div:not(.is-style-seperate-on-mobile) > .wp-block-columns:has(.wp-block-column.has-background) > .wp-block-column.has-background {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  main .entry-content > .wp-block-group.has-background:last-of-type {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@media (max-width: 781px) {
  .entry-content > .wp-block-group,
  .wp-admin .is-root-container > .wp-block-group {
    padding-top: var(--htgf--preset--mobile-design--extra-padding-y, 5rem);
    padding-bottom: var(--htgf--preset--mobile-design--extra-padding-y, 5rem);
  }
  main .wp-block-group.is-nowrap {
    flex-wrap: wrap !important;
  }
}
/* Special cases */
.is-page-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: max(100vh, 42rem);
}

.wp-block-group.is-style-accordion {
  max-height: min(100vw, 50vh);
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease-in-out;
  /* Gradient mask the last 3rem of the group. */
}
.wp-block-group.is-style-accordion::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), white);
  z-index: 1;
}
.wp-block-group.is-style-accordion.with-no-gradient::after {
  display: none !important;
}
.wp-block-group.is-style-accordion.is-active {
  max-height: 200rem !important;
  /* Remove the gradient mask. */
}
.wp-block-group.is-style-accordion.is-active::after {
  display: none;
}

.is-style-accordion-toggle.is-active {
  line-height: 0;
}
.is-style-accordion-toggle.is-active a {
  font-size: 0;
  position: relative;
}
.is-style-accordion-toggle.is-active a::before {
  content: "×";
  font-size: var(--wp--preset--font-size--medium);
  z-index: 1;
  margin: 0.5rem 0.7rem;
  display: block;
}

/* CTAs need more padding on mobile. */
@media (max-width: 781px) {
  .wp-block-group.has-accent-2-background-color[style*="padding-top:var(--wp--preset--spacing--50)"] {
    padding-top: calc(var(--wp--preset--spacing--50) * 2) !important;
    padding-bottom: calc(var(--wp--preset--spacing--50) * 2) !important;
  }
}

/* Full width groups */
.entry-content.has-global-padding > .wp-block-group.alignfull {
  border-radius: 0;
  /* And then there's the case where this full width group is the topmost on the page. */
}
@media (min-width: 601px) {
  .entry-content.has-global-padding > .wp-block-group.alignfull {
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    width: calc(100% + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
  }
}
@media (min-width: calc(89.125rem + 75px)) {
  .entry-content.has-global-padding > .wp-block-group.alignfull {
    width: 100vw;
    margin-left: calc((100vw - var(--wp--style--global--content-size)) * -0.5);
  }
}
.entry-content.has-global-padding > .wp-block-group.alignfull:first-of-type {
  margin-top: calc(var(--wp--preset--spacing--60) * -1);
}