/*
 Theme Name:   Point 6 Child
 Description:  Point 6 Child Theme
 Author:       siruss
 Author URI:   siruss
 Template:     bootscore-main
 Version:      5.3.25.1
 Text Domain:  bootscore
*/

/*
  Add all styling here, so that it correctly loads in the editing interface.
  Only use scss/_bscore_custom.scss for iteration or Bootstrap specific stuff.
*/

/* region /////////////////////////////////////////////////////////// HTML */

:root,
html,
body {
  scroll-behavior: auto !important;
}

:root :where(body), /* needed to override WordPress defaults */
html {
  /*
   * Deliberately scaled out at client's request - continue to assume that 1rem === 16px when adding more styles.
   * For `font-size`: use the --font-size--* CSS variables in defined in `inc/class-point6-global-custom-css.php`
   * Any that are added directly should be wrapped in a max() css function to ensure a legible minimum:
   * 16px for most, 14px for anything that can be in a <small> tag, 17px for headers over about 1.25rem.
   */
  font-size: 14px;
}

* {
  box-sizing: border-box;
  grid-auto-columns: minmax(0, auto);
  grid-auto-rows: minmax(0, auto);
}

td {
  font-variant-numeric: tabular-nums;
}

body {
  color: var(--wp--preset--color--body-text);
}

/* :root :where(a:where(:not(.wp-element-button))), needed to override WordPress defaults */
a {
  color: var(--wp--preset--color--text-2);
  text-decoration: none;

  &:hover, /* updated */
  &:focus-visible,
  &:focus-within {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
    text-decoration: underline;
  }
}

a:hover {
  text-decoration: underline;
}

p {
  margin-bottom: calc(var(--wp--preset--spacing--60));

  .content-inner &:last-child {
    margin-bottom: 0;
  }
}

blockquote.wp-block-quote,
blockquote {
  --quotemark--width: 5rem;
  --quotemark--height: 3.375rem;
  --quotemark--distance-h: -0.625rem;
  --quotemark--distance-v: -0.625rem;

  position: relative;
  padding: 2rem calc(var(--bs-gutter-x, 1rem) * 3) 2rem;
  border: 0.344rem solid var(--wp--preset--color--text-2);
  border-radius: 1.5rem;
  text-align: center;

  @media (min-width: 75rem) {
    max-width: none;
    padding: 4.4rem var(--quotemark--width) 4rem;
  }

  .single-post & {
    --quotemark--distance-h: -0.375rem;
    --quotemark--distance-v: -0.5rem;

    width: 100%;
    margin-top: 3rem;
    margin-bottom: 3rem;
    text-align: center;
    font-family: var(--wp--preset--font-family--circle-rounded-alt-bold);
    font-weight: normal;

    @media (min-width: 75rem) {
      width: calc(100% + (var(--bs-gutter-x, 1rem) * 4.4));
      max-width: none;
      margin-right: calc(-2.275 * (var(--bs-gutter-x, 1rem)));
      margin-left: calc(-2.275 * (var(--bs-gutter-x, 1rem)));
      padding: 4.4rem calc(2.275 * (var(--bs-gutter-x, 1rem))) 4rem;
    }
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: var(--quotemark--distance-v, -1.875rem);
    left: var(--quotemark--distance-h, -0.375rem);
    width: var(--quotemark--width);
    height: var(--quotemark--height);
    border-width: 0 5px;
    border-style: solid;
    border-color: transparent;
    background: url("img/quote.svg") no-repeat center;
    background-color: inherit;
    background-size: contain;

    .single-post & {
      @media (min-width: 75rem) {
        border-width: 0 0.438rem;
      }
    }
  }

  &[class*="--s-large"] {
    @media (min-width: 75rem) {
      --quotemark--width: 8.125rem;
      --quotemark--height: 6.388rem;
      --quotemark--distance-h: -0.825rem;
      --quotemark--distance-v: -1.125rem;
      padding-top: var(--quotemark--height);
      padding-bottom: var(--quotemark--height);
      border-width: 0.45rem;
      font-size: var(--font-size--h5-medium);
    }
  }

  &::after {
    top: auto;
    right: var(--quotemark--distance-h, -0.375rem);
    bottom: var(--quotemark--distance-v, -1.25rem);
    left: auto;
    transform: rotate(180deg);
  }

  &.quote-orchid {
    border-color: var(--wp--preset--color--purple-color-1);

    &::before,
    &::after {
      background-image: url("img/quote-orchid.svg");
    }
  }
}

/* endregion HTML */


/* region /////////////////////////////////////////////////////////// Accessibility */

@media (prefers-reduced-motion) {
  /* always show by default if OS level animation is disabled */
  [data-aos^="fade"][data-aos^="fade"] {
    opacity: 1 !important;
  }
}

/* endregion Accessibility */


/* region /////////////////////////////////////////////////////////// Classes */

.mh-unset {
  /* bootstrap compatible max-height, for images */
  max-height: unset !important;
}

.object-position-center {
  /* bootstrap compatible object position, for images */
  object-position: center !important;
}

/* Fix for border radius not properly containing its contents
 */
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-5,
.rounded-pill {
  overflow: hidden;
}

/* ================================================== */
/* region Button Styles */
/* ================================================== */

.button--podcast {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  padding: calc(0.75em + 2px) calc(1.333em + 2px);
  background-color: var(--link--background-color, var(--wp--preset--color--background)) !important;
  color: var(--link--color, var(--wp--preset--color--denim-100)) !important;
  font-size: 2rem; /* matches design across all breakpoints */
  font-weight: 700;

  @media (min-width: 48rem) {
    /* duplicate declarations required to override WordPress and Plugin styles at this breakpoint. */
    flex: 0 0 auto;
    width: auto;
    height: auto;
    background-color: var(--link--background-color, var(--wp--preset--color--background)) !important;
    color: var(--link--color, var(--wp--preset--color--denim-100)) !important;
  }
}

/* endregion Button Styles */
/* ================================================== */


/* ================================================== */
/* region Font Weight Classes */
/* ================================================== */

/* @formatter:off */
.has-100-font-weight, .has-thin-font-weight,        .thin        { font-weight: 100 !important; }
.has-200-font-weight, .has-extra-light-font-weight, .extra-light { font-weight: 200 !important; }
.has-300-font-weight, .has-light-font-weight,       .light       { font-weight: 300 !important; }
.has-400-font-weight, .has-regular-font-weight                   { font-weight: 400 !important; }
.has-500-font-weight, .has-medium-font-weight,      .medium      { font-weight: 500 !important; }
.has-600-font-weight, .has-semi-bold-font-weight,   .semi-bold   { font-weight: 600 !important; }
.has-700-font-weight, .has-bold-font-weight,        .bold        { font-weight: 700 !important; }
.has-800-font-weight, .has-extra-bold-font-weight,  .extra-bold  { font-weight: 800 !important; }
.has-900-font-weight, .has-black-font-weight,       .black       { font-weight: 900 !important; }
/* @formatter:on */

/* endregion Font Weight Classes */
/* ================================================== */


/* ================================================== */
/* region Font Style Classes */
/* ================================================== */

/* @formatter:off */
.has-normal-font-style, .normal { font-style: normal !important; }
.has-italic-font-style, .italic { font-style: italic !important; }
/* @formatter:on */

/* endregion Font Style Classes */
/* ================================================== */


/* ================================================== */
/* region Sticky Fade */
/* ================================================== */

.sticky-fade {
  --height: clamp(5rem, 20vh, 20rem);
  display: block;
  position: relative;
  z-index: 0;
  overflow: unset;
  height: 100%;
  margin-bottom: calc(var(--height) * -1); /* hides the empty space where the ::after would sit */
  transform: none;
  contain: content;

  &::after {
    content: "";
    display: block;
    position: sticky;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--height);
    margin-top: calc(var(--height) * 0);
    background: linear-gradient(transparent 0%, var(--wp--preset--color--denim-100) 100%) !important;
  }
}

.site-content {
  & .entry-content,
  & main,
  & #main {
    &:has(.sticky-fade) {
      overflow: unset; /* sticky does not work if any parent element has overflow defined. */
    }
  }
}

/* endregion Sticky Fade */
/* ================================================== */


/* ================================================== */
/* region Parallax */
/* ================================================== */

[data-parallax-direction="right"],
[data-parallax-direction="left"] {
  /*width: 100%;*/

  :has(> & ) {
    overflow: hidden;
  }
}

/* endregion Parallax */
/* ================================================== */


/* ================================================== */
/* region responsive utilities */
/* ================================================== */

/* region ------------------------------------ responsive utilities - text alignment */

/* responsive text alignment */
@media (min-width: 0rem) {
  /* @formatter:off */
  .has-text-align-center, .text-align-center { text-align: center !important; }
  .has-text-align-left  , .text-align-left   { text-align: left !important; }
  .has-text-align-right , .text-align-right  { text-align: right !important; }
  /* @formatter:on */
}

/* responsive text alignment */
@media (min-width: 32rem) {
  /* @formatter:off */
  .has-text-align-center-sm, .text-align-sm-center { text-align: center !important; }
  .has-text-align-left-sm  , .text-align-sm-left   { text-align: left !important; }
  .has-text-align-right-sm , .text-align-sm-right  { text-align: right !important; }
  /* @formatter:on */
}

@media (min-width: 48rem) {
  /* @formatter:off */
  .has-text-align-center-md, .text-align-md-center { text-align: center !important; }
  .has-text-align-left-md  , .text-align-md-left   { text-align: left !important; }
  .has-text-align-right-md , .text-align-md-right  { text-align: right !important; }
  /* @formatter:on */
}

@media (min-width: 62rem) {
  /* @formatter:off */
  .has-text-align-center-lg, .text-align-lg-center { text-align: center !important; }
  .has-text-align-left-lg  , .text-align-lg-left   { text-align: left !important; }
  .has-text-align-right-lg , .text-align-lg-right  { text-align: right !important; }
  /* @formatter:on */
}

@media (min-width: 75rem) {
  /* @formatter:off */
  .has-text-align-center-xl, .text-align-xl-center { text-align: center !important; }
  .has-text-align-left-xl  , .text-align-xl-left   { text-align: left !important; }
  .has-text-align-right-xl , .text-align-xl-right  { text-align: right !important; }
  /* @formatter:on */
}

/* endregion */


/* region ------------------------------------ responsive utilities - max-width */

/* @formatter:off */
.is-style-width-36           { &, &.container, .editor-styles-wrapper &.container { max-width: 36rem !important; /* 576  */ } }
.is-style-width-48           { &, &.container, .editor-styles-wrapper &.container { max-width: 48rem !important; /* 768  */ } }
.is-style-width-62           { &, &.container, .editor-styles-wrapper &.container { max-width: 62rem !important; /* 992  */ } }
.is-style-width-72           { &, &.container, .editor-styles-wrapper &.container { max-width: 72rem !important; /* 1152 */ } }
.is-style-width-container    { &, &.container, .editor-styles-wrapper &.container { max-width: calc(79.875rem + (var(--bs-gutter-x, 1.5rem) * 2)) !important; } }
.is-style-width-full         { &, &.container, .editor-styles-wrapper &.container { max-width: 100% !important; } }

.is-style-width-36           ,
.is-style-width-48           ,
.is-style-width-62           ,
.is-style-width-72           ,
.is-style-width-container    ,
.is-style-width-full         {
  margin-inline: auto;
}

/* container style needs some default padding - using the bootstrap gutter values for maximum compatibility*/
:where(.is-style-width-container)    { &, &.container, .editor-styles-wrapper &.container { padding-inline(--bs-gutter-x, 1.5rem); & :where([class*="is-style-width-container"]) { padding-inline: 0; } } }
/* @formatter:on */

@media (min-width: 32rem) {
  /* @formatter:off */
  .is-style-width-36-sm        { &, &.container, .editor-styles-wrapper &.container { max-width: 36rem !important; /* 576  */ } }
  .is-style-width-48-sm        { &, &.container, .editor-styles-wrapper &.container { max-width: 48rem !important; /* 768  */ } }
  .is-style-width-62-sm        { &, &.container, .editor-styles-wrapper &.container { max-width: 62rem !important; /* 992  */ } }
  .is-style-width-72-sm        { &, &.container, .editor-styles-wrapper &.container { max-width: 72rem !important; /* 1152 */ } }
  .is-style-width-container-sm { &, &.container, .editor-styles-wrapper &.container { max-width: calc(79.875rem + (var(--bs-gutter-x, 1.5rem) * 2)) !important; } }
  .is-style-width-full-sm      { &, &.container, .editor-styles-wrapper &.container { max-width: 100% !important; } }

  .is-style-width-36-sm        ,
  .is-style-width-48-sm        ,
  .is-style-width-62-sm        ,
  .is-style-width-72-sm        ,
  .is-style-width-container-sm ,
  .is-style-width-full-sm      {
    margin-inline: auto;
  }

  /* container style needs some default padding - using the bootstrap gutter values for maximum compatibility*/
  :where(.is-style-width-container-sm) { &, &.container, .editor-styles-wrapper &.container { padding-inline: var(--bs-gutter-x, 1.5rem); & :where([class*="is-style-width-container"]) { padding-inline: 0; } } }
  /* @formatter:on */
}

@media (min-width: 48rem) {
  /* @formatter:off */
  .is-style-width-36-md        { &, &.container, .editor-styles-wrapper &.container { max-width: 36rem !important; /* 576  */ } }
  .is-style-width-48-md        { &, &.container, .editor-styles-wrapper &.container { max-width: 48rem !important; /* 768  */ } }
  .is-style-width-62-md        { &, &.container, .editor-styles-wrapper &.container { max-width: 62rem !important; /* 992  */ } }
  .is-style-width-72-md        { &, &.container, .editor-styles-wrapper &.container { max-width: 72rem !important; /* 1152 */ } }
  .is-style-width-container-md { &, &.container, .editor-styles-wrapper &.container { max-width: calc(79.875rem + (var(--bs-gutter-x, 1.5rem) * 2)) !important; } }
  .is-style-width-full-md      { &, &.container, .editor-styles-wrapper &.container { max-width: 100% !important; } }

  .is-style-width-36-md        ,
  .is-style-width-48-md        ,
  .is-style-width-62-md        ,
  .is-style-width-72-md        ,
  .is-style-width-container-md ,
  .is-style-width-full-md      {
    margin-inline: auto;
  }

  /* container style needs some default padding - using the bootstrap gutter values for maximum compatibility*/
  :where(.is-style-width-container-md) { &, &.container, .editor-styles-wrapper &.container { padding-inline: var(--bs-gutter-x, 1.5rem); & :where([class*="is-style-width-container"]) { padding-inline: 0; } } }
  /* @formatter:on */
}

@media (min-width: 62rem) {
  /* @formatter:off */
  .is-style-width-36-lg        { &, &.container, .editor-styles-wrapper &.container { max-width: 36rem !important; /* 576  */ } }
  .is-style-width-48-lg        { &, &.container, .editor-styles-wrapper &.container { max-width: 48rem !important; /* 768  */ } }
  .is-style-width-62-lg        { &, &.container, .editor-styles-wrapper &.container { max-width: 62rem !important; /* 992  */ } }
  .is-style-width-72-lg        { &, &.container, .editor-styles-wrapper &.container { max-width: 72rem !important; /* 1152 */ } }
  .is-style-width-container-lg { &, &.container, .editor-styles-wrapper &.container { max-width: calc(79.875rem + (var(--bs-gutter-x, 1.5rem) * 2)) !important; } }
  .is-style-width-full-lg      { &, &.container, .editor-styles-wrapper &.container { max-width: 100% !important; } }

  .is-style-width-36-lg        ,
  .is-style-width-48-lg        ,
  .is-style-width-62-lg        ,
  .is-style-width-72-lg        ,
  .is-style-width-container-lg ,
  .is-style-width-full-lg      {
    margin-inline: auto;
  }

  /* container style needs some default padding - using the bootstrap gutter values for maximum compatibility*/
  :where(.is-style-width-container-lg) { &, &.container, .editor-styles-wrapper &.container { padding-inline: var(--bs-gutter-x, 1.5rem); & :where([class*="is-style-width-container"]) { padding-inline: 0; } } }
  /* @formatter:on */
}

@media (min-width: 75rem) {
  /* @formatter:off */
  .is-style-width-36-xl        { &, &.container, .editor-styles-wrapper &.container { max-width: 36rem !important; /* 576  */ } }
  .is-style-width-48-xl        { &, &.container, .editor-styles-wrapper &.container { max-width: 48rem !important; /* 768  */ } }
  .is-style-width-62-xl        { &, &.container, .editor-styles-wrapper &.container { max-width: 62rem !important; /* 992  */ } }
  .is-style-width-72-xl        { &, &.container, .editor-styles-wrapper &.container { max-width: 72rem !important; /* 1152 */ } }
  .is-style-width-container-xl { &, &.container, .editor-styles-wrapper &.container { max-width: calc(79.875rem + (var(--bs-gutter-x, 1.5rem) * 2)) !important; } }
  .is-style-width-full-xl      { &, &.container, .editor-styles-wrapper &.container { max-width: 100% !important; } }

  .is-style-width-36-xl        ,
  .is-style-width-48-xl        ,
  .is-style-width-62-xl        ,
  .is-style-width-72-xl        ,
  .is-style-width-container-xl ,
  .is-style-width-full-xl      {
    margin-inline: auto;
  }

  /* container style needs some default padding - using the bootstrap gutter values for maximum compatibility*/
  :where(.is-style-width-container-xl) { &, &.container, .editor-styles-wrapper &.container { padding-inline: var(--bs-gutter-x, 1.5rem); & :where([class*="is-style-width-container"]) { padding-inline: 0; } } }
  /* @formatter:on */
}

/* endregion */


/* region ------------------------------------ responsive utilities - spacing */

.wp-block-spacer {
  /* editor label is defined in editor-style.css */

  /**
   * If other styles are enabled in the editor.js file, ensure that the max-width breakpoints are updated to reflect their new values.
   */
  /* @formatter:off */
  &.is-style-spacer-50-xs         { height: var(--wp--preset--spacing--50, 0.9375rem                     ) !important; }
  &.is-style-spacer-60-xs         { height: var(--wp--preset--spacing--60, 1.875rem                      ) !important; }
  &.is-style-spacer-70-xs         { height: var(--wp--preset--spacing--70, 3.75rem                       ) !important; }
  &.is-style-spacer-75-xs         { height: var(--wp--preset--spacing--75, 5.625rem                      ) !important; }
  &.is-style-spacer-80-xs         { height: var(--wp--preset--spacing--80, 7.5rem                        ) !important; }
  &.is-style-spacer-85-xs         { height: var(--wp--preset--spacing--85, calc(7.5rem + (1.875rem * 2)) ) !important; }
  &.is-style-spacer-90-xs         { height: var(--wp--preset--spacing--90, 15rem                         ) !important; }

  @media(min-width: 48rem) {
    &.is-style-spacer-50-md       { height: var(--wp--preset--spacing--50, 0.9375rem                     ) !important; }
    &.is-style-spacer-60-md       { height: var(--wp--preset--spacing--60, 1.875rem                      ) !important; }
    &.is-style-spacer-70-md       { height: var(--wp--preset--spacing--70, 3.75rem                       ) !important; }
    &.is-style-spacer-75-md       { height: var(--wp--preset--spacing--75, 5.625rem                      ) !important; }
    &.is-style-spacer-80-md       { height: var(--wp--preset--spacing--80, 7.5rem                        ) !important; }
    &.is-style-spacer-85-md       { height: var(--wp--preset--spacing--85, calc(7.5rem + (1.875rem * 2)) ) !important; }
    &.is-style-spacer-90-md       { height: var(--wp--preset--spacing--90, 15rem                         ) !important; }
  }

  @media (min-width: 0rem) and (max-width:47.998rem) {
    &.is-style-spacer-50-xs-to-md { height: var(--wp--preset--spacing--50, 0.9375rem                     ) !important; }
    &.is-style-spacer-60-xs-to-md { height: var(--wp--preset--spacing--60, 1.875rem                      ) !important; }
    &.is-style-spacer-70-xs-to-md { height: var(--wp--preset--spacing--70, 3.75rem                       ) !important; }
    &.is-style-spacer-75-xs-to-md { height: var(--wp--preset--spacing--75, 5.625rem                      ) !important; }
    &.is-style-spacer-80-xs-to-md { height: var(--wp--preset--spacing--80, 7.5rem                        ) !important; }
    &.is-style-spacer-85-xs-to-md { height: var(--wp--preset--spacing--85, calc(7.5rem + (1.875rem * 2)) ) !important; }
    &.is-style-spacer-90-xs-to-md { height: var(--wp--preset--spacing--90, 15rem                         ) !important; }
   }
  /* @formatter:on */
}

/* endregion */

.d-contents {
  display: contents;
}

/* endregion responsive utilities */
/* ================================================== */


/* Loading fade - uncomment 'body,' to enable */
/* body, */
.loading-fade-in {
  animation: var(--loading-animation--duration, 2s) linear 0s 1 fade-in;
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.link-with-arrow {
  & span {
    margin-right: min(max(0.6rem, calc(0.5rem + (1 - 0.5) * ((100vw - 20rem) / (87.5 - 20)))), 1rem);
  }

  & svg {
    width: 0.625rem;
    height: 1.125rem;

    @media only screen and (min-width: 48rem) {
      width: min(max(0.625rem, calc(0.625rem + (1.25 - 0.625) * ((100vw - 48rem) / (87.5 - 48)))), 1.25rem);
      height: min(max(1.125rem, calc(1.125rem + (2.125 - 1.125) * ((100vw - 48rem) / (87.5 - 48)))), 2.125rem);
    }
  }
}

.link-more {
  color: var(--wp--preset--color--body-text);
  line-height: normal;
  text-decoration: none;
  font-family: var(--wp--preset--font-family--bree-serif);
  font-weight: 400;
}

.swiper-pagination {
  & .swiper-pagination-bullet {
    width: 0.765rem;
    height: 0.765rem;
    background: var(--wp--preset--color--grey-80, #6c757d);
  }

  & .swiper-pagination-bullet:hover,
  & .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--wp--preset--color--body-text);
    opacity: 1;
  }
}

.text-block-centred .wp-block-getwid-section__inner-content {
  flex-direction: column;
}

/* buttons */

.masonry-tile__link,
.blog-action .learn-more,
.like-heart {
  --transition: all 0.175s ease-in-out;
  background: var(--wp--preset--color--background);
  transition: var(--transition) !important;

  &:hover, /*updated*/
  &:focus,
  &:focus-visible {
    /*background-color: var(--bs-body-color);*/
    transition: var(--transition) !important;
    transform: scale(1.20);
  }
}

.masonry-layout .card[data-url] {
  &:focus-visible,
  &:focus-within {
    &.masonry-tile__link {
      /*background-color: var(--bs-body-color);*/
      transition: all 0.175s ease-in-out !important;
      transform: scale(1.20);
    }
  }
}

.list-post-by-team .image {
  & .open-popup {
    background-color: var(--wp--preset--color--background);

    &,
    & svg {
      transition: all 0.175s ease-in-out !important;
    }
  }

  &:hover,
  &:focus-visible,
  &:focus-within {
    & .open-popup {
      transform: scale(1.20);
    }
  }

  &:focus-visible,
  &:focus-within {
    & .open-popup {
      background-color: var(--wp--preset--color--background);
      /*background-color: var(--wp--preset--color--denim-100);*/
    }
    & svg {
      filter: unset;
      /*filter: invert(1) brightness(2);*/
    }
  }
}

/* Style guide */

.link-more {
  font-family: var(--wp--preset--font-family--bree-serif);
}

.text-fadein {
  transition-duration: 0.6s;
}

.swiper-pagination .swiper-pagination-bullet {
  background: var(--wp--preset--color--text-3);
}

.background-white {
  background: var(--wp--preset--color--background);
}

.error-404 h1 {
  @media (min-width: 62rem) {
    margin-top: 1rem;
  }

  @media (min-width: 87.5rem) {
    margin-top: 2rem;
  }
}

/* endregion */


/* region /////////////////////////////////////////////////////////// Layout */

/* region =========================================================== Layout - Page */

main,
#main {
  /* prevents horizontal scroll from horizontally overflowing blocks: */
  overflow: hidden;

  @media (min-width: 48rem) {
    /* Disable for larger screensizes, so that position sticky elements function: */
    overflow: unset;
  }
}

:root {
  --container-width: calc(31.938rem + (var(--bs-gutter-x, 1rem) * 2));
}

.container {
  max-width: var(--container-width, calc(31.938rem + (var(--bs-gutter-x, 1rem) * 2)));
  padding-right: var(--bs-gutter-x, 1rem);
  padding-left: var(--bs-gutter-x, 1rem);
}

.row {
  margin-right: calc(-1 * var(--bs-gutter-x, 1rem));
  margin-left: calc(-1 * var(--bs-gutter-x, 1rem));
}

.row > * {
  padding-right: var(--bs-gutter-x, 1rem);
  padding-left: var(--bs-gutter-x, 1rem);
}

@media (min-width: 36rem) {
  :root {
    --container-width: calc(31.938rem + (var(--bs-gutter-x, 1rem) * 2));
  }
  .container,
  .container-sm {
    max-width: var(--container-width, calc(31.938rem + (var(--bs-gutter-x, 1rem) * 2)));
  }
  .row {
    margin-right: calc(-1 * var(--bs-gutter-x, 1rem));
    margin-left: calc(-1 * var(--bs-gutter-x, 1rem));
  }
  .row > * {
    padding-right: var(--bs-gutter-x, 1rem);
    padding-left: var(--bs-gutter-x, 1rem);
  }
}

@media (min-width: 48rem) {
  :root {
    --container-width: calc(42.625rem + (var(--bs-gutter-x, 1rem) * 2));
  }
  .container,
  .container-sm,
  .container-md {
    max-width: var(--container-width, calc(42.625rem + (var(--bs-gutter-x, 1rem) * 2)));
  }
}

@media (min-width: 62rem) {
  :root {
    --container-width: calc(55rem + (var(--bs-gutter-x, 1rem) * 2));
  }
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: var(--container-width, calc(55rem + (var(--bs-gutter-x, 1rem) * 2)));
  }
}

@media (min-width: 75rem) {
  :root {
    --container-width: calc(66.563rem + (var(--bs-gutter-x, 1rem) * 2));
  }
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: var(--container-width, calc(66.563rem + (var(--bs-gutter-x, 1rem) * 2)));
  }
}

@media (min-width: 87.5rem) {
  :root {
    --container-width: calc(79.875rem + (var(--bs-gutter-x, 1rem) * 2));
  }
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: var(--container-width, calc(79.875rem + (var(--bs-gutter-x, 1rem) * 2)));
  }
}

/* endregion Layout - Page */

/* region =========================================================== Layout - Search */

.search-results {
  & > .site {
    /* some space for the menu: */
    padding-top: var(--wp--preset--spacing--75);
  }
}

/* endregion Layout - Search */

/* region =========================================================== Layout - All Post Listings */
/* These affect the blog post page and masonry tiles */
.posts-listing {
  & .card:not(.masonry-tile__field) {
    border-radius: 1.52rem;
    box-shadow: 0 0 2.188rem rgb(0 0 0 / 50%);
  }
}

/* endregion Layout - All Post Listings */

/* region =========================================================== Layout - Masonry */

.case-study-listing,
.masonry-tile {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--wp--preset--color--background);

  & .text-fadein {
    /*transition: opacity 0.3333s;*/
  }

  & .masonry-tile__anchor-actions {
    margin-top: 2rem;
  }
}

.masonry-layout {
  --grid-gap: min(max(1.25rem, calc(1.25rem + (1.625 - 1.25) * ((100vw - 20rem) / (48 - 20)))), 1.625rem);
  --row-height: minmax(0rem, auto);
  --masonry-field-aspect-ratio-lg: auto;
  --masonry-field-aspect-ratio-sm: 265/110;
  --masonry-field-height-lg: min(max(12.6875rem, calc(12.6875rem + (24.125 - 12.6875) * ((100vw - 48rem) / (87.5 - 48)))), 24.125rem);
  --masonry-field-height-sm: min(max(7.85rem, calc(7.85rem + (24.125 - 7.85) * ((100vw - 48rem) / (87.5 - 48)))), 7.85rem);

  display: grid;
  grid-template-columns: [begin] 1fr [finish];
  grid-auto-rows: minmax(0, auto);
  grid-gap: var(--grid-gap);

  @media only screen and (min-width: 62rem) {
    --grid-gap: min(max(1.625rem, calc(1.625rem + (3.125 - 1.625) * ((100vw - 48rem) / (87.5 - 48)))), 3.125rem);
    --row-height: var(--masonry-field-height-lg);
    grid-template-columns: [begin] 12fr 12fr [finish];
    grid-template-rows: var(--row-height);
  }

  &.gap-0 {
    --grid-gap: 0rem;
  }

  .aspect-ratio-auto &,
  .masonry-tile .container-fluid.g-0 & {
    /* if the container is full width and there is no gap, disable the enforced aspect ratio on mobile: */
    --masonry-field-aspect-ratio-sm: auto;
  }

  & ~ .masonry-layout {
    margin-top: var(--grid-gap);
    @media only screen and (min-width: 48rem) {
      margin-top: var(--grid-gap);
    }
  }
}

/*
.masonry-layout .card {
*/

.masonry-tile__field {
  --bs-card-border-radius: 1.52rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: unset; /* max-width needs unsetting for editor */
  min-height: var(--masonry-field-height-sm);
  aspect-ratio: var(--masonry-field-aspect-ratio-sm);
  padding: 0;
  border: none;

  @media (min-width: 62rem) {
    min-height: var(--masonry-field-height-lg);
    aspect-ratio: var(--masonry-field-aspect-ratio-lg);
  }

  &,
  & .card-img {
    border-radius: var(--bs-card-border-radius, 1.52rem);
  }

  .masonry-layout.rounded-0 & {
    --bs-card-border-radius: 0rem;
    --bs-card-inner-border-radius: 0rem;
  }

  & .mejs-fill-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 100%;
  }

  & .mejs-controls {
    display: none;
    height: 0;
  }


  & .wp-video-shortcode video,
  & video.wp-video-shortcode {
    transform: scale(1.09);
    object-fit: cover;
  }

  & video {
    border-radius: 1.52rem;
  }
}

.masonry-layout {
  & .card[data-url] {
    transition-duration: 0.25s;
    transition-property: height, width, color, background-color, background !important;
    /*transition-timing-function: ease-in-out;*/
    transition-timing-function: ease-in;
    cursor: pointer;

    @media (min-width: 48rem) {
      transition-property: height, width, color, background-color, background, transform !important;
    }

    &:hover, /*updated*/
    &:focus,
    &:focus-visible {

      /*@media only screen and (max-width: 63.98rem) {*/
      /*  outline: 3px solid var(--wp--preset--color--aqua-80);*/
      /*}*/
      @media only screen and (min-width: 64rem) {
        position: relative;
        z-index: 1;
        transform: scale(1.05) !important;

        & .card-img,
        & .wp-video {
          box-shadow: var(--box-shadow-hover, none);
        }

        & .card-title,
        & .card-text {
          /*transform: scale(1.05);*/
        }
      }
    }
  }

  & .wp-video {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "content";
    flex-wrap: wrap;
    align-items: stretch;
    justify-items: stretch;
    flex: 1;
    width: 100% !important;
    min-height: 100%;
    box-shadow: var(--box-shadow, none);
    transition: all 0.75s;

    & > .wp-video-shortcode {
      grid-area: content;
      min-height: 100%;
    }

    & mediaelementwrapper, /* custom element, not a class */
    & mediaelementwrapper video {
      min-width: 100%;
      min-height: 100%;
      object-fit: cover;
    }
  }

  & .card-img {
    display: flex;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: initial;
    height: 100%;
    max-height: initial;
    box-shadow: var(--box-shadow, none);
    transition: all 0.75s;

    & .card-img-picture,
    & .card-img-svg,
    & .card-img-iframe {
      flex: 1;
      width: 100%;
      height: 100%;
    }

    & .card-img-picture {
      flex: 0 0 calc(100% + 2px); /* increases the size ever so slightly to deal with any stray transparency on images */
      height: 100%;
    }

    & img,
    & iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    & path[stroke*="#"] {
      stroke: currentColor;
    }

    & path[fill*="#"] {
      fill: currentColor;
    }
  }

  & .card-title,
  & .card-text {
    transition: all 0.75s;
  }

  & .card-title.h2-small,
  & .card-title {
    min-height: 0vw; /* safari responsive font size fix */

    @media (max-width: 61.98rem) {
      /* important needed to override font size classes used on desktop viewports */
      font-size: min(var(--font-size--h2-small), 3rem) !important; /* max font size of 3rem */
    }
  }

  & .card-img-overlay {
    padding-top: min(max(0.625rem, calc(0.625rem + (0.9375 - 0.625) * ((100vw - 20rem) / (48 - 20)))), 0.9375rem);
    padding-right: min(max(1.25rem, calc(1.25rem + (1.4375 - 1.25) * ((100vw - 20rem) / (48 - 20)))), 1.4375rem);
    padding-bottom: min(max(0.625rem, calc(0.625rem + (0.9375 - 0.625) * ((100vw - 20rem) / (48 - 20)))), 0.9375rem);
    padding-left: min(max(1.25rem, calc(1.25rem + (1.4375 - 1.25) * ((100vw - 20rem) / (48 - 20)))), 1.4375rem);

    @media only screen and (min-width: 62rem) {
      padding-top: min(max(0.9375rem, calc(0.9375rem + (1.75 - 0.9375) * ((100vw - 48rem) / (87.5 - 48)))), 1.75rem);
      padding-right: min(max(1.4375rem, calc(1.4375rem + (2.75 - 1.4375) * ((100vw - 48rem) / (87.5 - 48)))), 2.75rem);
      padding-bottom: min(max(0.9375rem, calc(0.9375rem + (1.75 - 0.9375) * ((100vw - 48rem) / (87.5 - 48)))), 1.75rem);
      padding-left: min(max(1.4375rem, calc(1.4375rem + (2.75 - 1.4375) * ((100vw - 48rem) / (87.5 - 48)))), 2.75rem);
    }
  }
}

/**
 * Sets videos to fill their containers when the layout is set to full width:
 */
.masonry-tile__container.container-fluid {
  & .masonry-tile__type-video {
    position: relative;

    & .card-img:has(> video) {
      position: absolute;
      top: 0;
      bottom: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;

      /*noinspection CssUnresolvedCustomProperty*/
      & video {
        /**
         * - Make video to at least 100% wide and tall
         * - Setting width & height to auto prevents the browser from stretching or squishing the video
         * - Center the video
         */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
        max-height: 100%;
        transform: unset;
        object-fit: cover;
        object-position: var(--object-position, center);
      }
    }
  }
}

.masonry-tile__link {
  display: inline-flex;
  position: absolute;
  right: 0.89375rem;
  bottom: 0.89375rem;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--wp--preset--color--background);
  border-radius: 50%;
  background-color: var(--wp--preset--color--background);
  line-height: 0;
  font-size: 0;

  @media only screen and (min-width: 62rem) {
    width: min(max(2.125rem, calc(2.125rem + (2.9375 - 2.125) * ((100vw - 48rem) / (90 - 48)))), 2.9375rem);
    height: min(max(2.125rem, calc(2.125rem + (2.9375 - 2.125) * ((100vw - 48rem) / (90 - 48)))), 2.9375rem);
  }

  & svg {
    color: var(--wp--preset--color--body-text);
  }

  & svg,
  & circle,
  & path {
    transition: all 0.75s;
  }

  &[href^="#"] svg {
    /* points the arrow downwards on links to same-page anchors */
    transform: rotate(90deg);
  }
}

.masonry-tile__link {
  /* Colour */
  --masonry-tile__link--background-color: var(--wp--preset--color--background);
  --masonry-tile__link--fill: var(--wp--preset--color--body-text);
  --masonry-tile__link--stroke: var(--wp--preset--color--body-text);
  background-color: var(--masonry-tile__link--background-color, var(--wp--preset--color--body-text)) !important;

  & circle {
    fill: var(--masonry-tile__link--fill, var(--wp--preset--color--body-text)) !important;
  }

  & path {
    stroke: var(--masonry-tile__link--stroke, var(--wp--preset--color--background)) !important;
  }

  /*&:hover,*/
  &:focus,
  &:focus-visible,
    /*.masonry-layout .card[data-url]:hover &,*/
  .masonry-layout .card[data-url]:focus &,
  .masonry-layout .card[data-url]:focus-within &,
  .masonry-layout .card[data-url]:focus-visible & {
    --masonry-tile__link--background-color: var(--wp--preset--color--body-text);
    --masonry-tile__link--fill: var(--wp--preset--color--body-text);
    --masonry-tile__link--stroke: var(--wp--preset--color--background);
  }
}

.masonry-tile__block-title {
  margin-bottom: 1.2rem !important;
  & + .posts-listing {
    margin-top: calc(var(--wp--preset--spacing--70) + var(--wp--preset--spacing--50));
  }
}

.masonry-tile__teaser-text {
  margin-right: auto;
  margin-bottom: min(max(3.125rem, calc(3.125rem + (5.8 - 3.125) * ((100vw - 20rem) / (87.5 - 20)))), 5.8rem);
  margin-left: auto;

  @media only screen and (min-width: 62rem) {
    max-width: min(max(30rem, calc(30rem + (57.75 - 30) * ((100vw - 48rem) / (87.5 - 48)))), 57.75rem);
  }
}

.masonry-tile__type-quote {
  max-height: unset;
  border-radius: 0;

  &.has-background-color {
    padding: 0.5rem;
    border-radius: calc(var(--bs-card-border-radius) * 1.25); /* 1.25 gives a consistent padding all around */
  }

  & .card-img {
    position: absolute;
    z-index: 2; /* positive z-index required to place over text because of background colour support.*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
  }

  /* blockquote */
  & .card-img-overlay {
    display: grid;
    position: relative;
    grid-template-columns: none;
    gap: 0;
    align-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--quotemark--height, 4.4rem) var(--quotemark--width, 5rem);
    border-radius: var(--bs-card-border-radius);
    background-color: inherit;

    @media (min-width: 48rem) and (max-width: 61.998rem) {
      /* Ensures the height and size isn't too huge, and the text aligns inside the visual border */
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }
  }

  & .card-title {
    margin-bottom: min(max(1rem, calc(1rem + (3.6 - 1) * ((100vw - 20rem) / (87.5 - 20)))), 3.6rem);
  }

  & .card-title:first-child:last-child {
    margin-bottom: 0;
  }

  & .break-line {
    display: block;
    line-height: 0.25;
  }

  & .masonry-tile__quote-name,
  & .masonry-tile__quote-position {
    line-height: 1.07;
  }

  & .masonry-tile__quote-name {
    font-weight: 500;
  }
}

.masonry-tile__more-link {
  display: inline-block;
  vertical-align: middle;
  color: var(--wp--preset--color--body-text);
  text-decoration: none;
  font-family: var(--wp--preset--font-family--bree-serif);
  & svg {
    max-width: min(max(0.625rem, calc(0.625rem + (1.2569 - 0.625) * ((100vw - 20rem) / (87.5 - 20)))), 1.2569rem);
  }
}

.masonry-tile__more-link--down svg {
  transform: rotate(90deg);
}

/* Layouts */

.masonry-layout-1-1,
.masonry-layout-2-1,
.masonry-layout-2-2,
.masonry-layout-2-3,
.masonry-layout-2-4,
.masonry-layout-2-5,
.masonry-layout-2-6,
.masonry-layout-2-7,
.masonry-layout-2-8,
.masonry-layout-2-9,
.masonry-layout-2-0,
.masonry-layout-3-1,
.masonry-layout-3-2,
.masonry-layout-3-3,
.masonry-layout-3-4,
.masonry-layout-3-5,
.masonry-layout-3-6,
.masonry-layout-3-7,
.masonry-layout-3-8,
.masonry-layout-3-9,
.masonry-layout-3-0,
.masonry-layout-4-1,
.masonry-layout-4-2,
.masonry-layout-4-3,
.masonry-layout-4-4,
.masonry-layout-4-5,
.masonry-layout-4-6,
.masonry-layout-4-7,
.masonry-layout-4-8,
.masonry-layout-4-9,
.masonry-layout-4-0,
.masonry-layout-6-1, /* note(rl): .masonry-layout-6-* classes are a continuation of .masonry-layout-3-* classes. */
.masonry-layout-6-2,
.masonry-layout-6-3,
.masonry-layout-6-4,
.masonry-layout-6-5,
.masonry-layout-6-6,
.masonry-layout-6-7,
.masonry-layout-6-8,
.masonry-layout-6-9,
.masonry-layout-6-0 {
  /* some of these class names are speculative and currently not used - they are here for future expansion */
  grid-auto-rows: minmax(0, auto);

  > * {
    /*max-height: 12rem;*/

    @media (min-width: 62rem) {
      /*max-height: unset;*/
    }
  }

  > .masonry-tile__type-quote {
    max-height: unset;
  }

  & .card-title {
    /* ensure all masonry cards have the same font size on smaller screens: */
    @media (max-width: 47.998rem) {
      font-size: var(--font-size--h2);
    }
  }

  & > div:first-child {
    grid-area: item-1;
  }

  & > div:nth-child(2) {
    grid-area: item-2;
  }

  & > div:nth-child(3) {
    grid-area: item-3;
  }

  & > div:nth-child(4) {
    grid-area: item-4;
  }

  & > div:nth-child(4) ~ div {
    /* any additional items should rely on auto positioning */
    grid-area: unset;
    grid-column: begin / finish;
  }
}

.masonry-layout-1-1 {
  --masonry-field-height-lg: min(max(12.6875rem, calc(12.6875rem + (24.125 - 12.6875) * ((100vw - 48rem) / (87.5 - 48)))), 24.125rem);
  grid-template-areas:
    "item-1";
}

.masonry-layout-2-1,
.masonry-layout-2-2,
.masonry-layout-2-3,
.masonry-layout-2-4,
.masonry-layout-2-5,
.masonry-layout-2-6,
.masonry-layout-2-7,
.masonry-layout-2-8,
.masonry-layout-2-9,
.masonry-layout-2-0 {
  grid-template-areas:
    "item-1"
    "item-2";
}

.masonry-layout-3-1,
.masonry-layout-3-2,
.masonry-layout-3-3,
.masonry-layout-3-4,
.masonry-layout-3-5,
.masonry-layout-3-6,
.masonry-layout-3-7,
.masonry-layout-3-8,
.masonry-layout-3-9,
.masonry-layout-3-0,
.masonry-layout-6-1,
.masonry-layout-6-2,
.masonry-layout-6-3,
.masonry-layout-6-4,
.masonry-layout-6-5,
.masonry-layout-6-6,
.masonry-layout-6-7,
.masonry-layout-6-8,
.masonry-layout-6-9,
.masonry-layout-6-0 {
  grid-template-areas:
    "item-1"
    "item-2"
    "item-3";
}

.masonry-layout-4-1,
.masonry-layout-4-2,
.masonry-layout-4-3,
.masonry-layout-4-4,
.masonry-layout-4-5,
.masonry-layout-4-6,
.masonry-layout-4-7,
.masonry-layout-4-8,
.masonry-layout-4-9,
.masonry-layout-4-0 {
  grid-template-areas:
    "item-1"
    "item-2"
    "item-3"
    "item-4";
}


/* 1 items */
.masonry-layout-1-1 {
  grid-template-columns: [begin] 1fr [finish];
  grid-template-rows: 1fr;
  grid-template-areas:
      "item-1";
}

/* 2 items */
.masonry-layout-2-1,
.masonry-layout-2-8 {
  @media only screen and (min-width: 62rem) {
    /* note(rl): uses default 12fr 12fr column definition */
    grid-template-columns: [begin] minmax(0, 12fr) minmax(0, 12fr) [finish];
    grid-template-rows: 1fr;
    grid-template-areas:
      "item-1 item-2";
  }
}

.masonry-layout-2-2,
.masonry-layout-2-4 {
  @media only screen and (min-width: 62rem) {
    grid-template-columns: [begin] minmax(0, 10fr) minmax(0, 14fr) [finish];
    grid-template-rows: 1fr;
    grid-template-areas:
      "item-1 item-2";
  }
}

.masonry-layout-2-3,
.masonry-layout-2-5 {
  @media only screen and (min-width: 62rem) {
    grid-template-columns: [begin] minmax(0, 14fr) minmax(0, 10fr) [finish] ;
    grid-template-rows: 1fr;
    grid-template-areas:
      "item-1 item-2";
  }
}

.masonry-layout-2-2,
.masonry-layout-2-3 {
  @media only screen and (min-width: 62rem) {
    grid-template-rows: var(--row-height);
  }
}

.masonry-layout-2-4,
.masonry-layout-2-5 {
  @media only screen and (min-width: 62rem) {
    grid-template-rows: calc(var(--row-height) * 2);
  }
}

.masonry-layout-2-8,
.masonry-layout-2-9 {
  --row-height: calc(var(--masonry-field-height-sm) * 2);
  --masonry-field-aspect-ratio-lg: 265/220;
  --masonry-field-aspect-ratio-sm: auto;

  @media (min-width: 62rem) {
    --row-height: calc(var(--masonry-field-height-lg) * 2);
  }
}

.masonry-layout-2-8 {
  grid-template-rows: var(--row-height);

  @media only screen and (max-width: 61.998rem) {
    --row-height: repeat(2, clamp(10rem, 80vw, 30rem));
  }

  @media only screen and (min-width: 62rem) {
    grid-template-rows: var(--row-height);
  }
}

.masonry-layout-2-9 {
  /* note(rl): always side-by-side, including on smaller viewports */
  --row-height: var(--masonry-field-height-sm);
  --masonry-field-height-lg: clamp(20rem, calc(20rem + (24.125 - 20) * ((100vw - 48rem) / (87.5 - 48))), 24.125rem);
  --masonry-field-height-sm: clamp(10rem, 50svw, 50svh);

  grid-template-columns: [begin] 12fr 12fr [finish];
  grid-template-rows: var(--row-height);
  grid-template-areas:
    "item-1 item-2";

  @media (min-width: 48rem) {
    --row-height: minmax(0rem, auto);
  }
}

/* 3 items */
.masonry-layout-3-1 {
  @media only screen and (min-width: 62rem) {
    grid-template-columns: [begin] 1fr 1fr 1fr [finish];
    grid-template-rows: 1fr;
    grid-template-areas:
      "item-1 item-2 item-3";
  }
}

.masonry-layout-3-2,
.masonry-layout-3-4,
.masonry-layout-3-6 {
  @media only screen and (min-width: 62rem) {
    grid-template-columns:  [begin]  minmax(0, 14fr) minmax(0, 10fr) [finish];
    grid-template-areas:
      "item-1 item-2"
      "item-1 item-3";
  }
}

.masonry-layout-3-3,
.masonry-layout-3-5,
.masonry-layout-3-7 {
  @media only screen and (min-width: 62rem) {
    grid-template-columns:  [begin] minmax(0, 10fr) minmax(0, 14fr) [finish];
    grid-template-areas:
      "item-1 item-3"
      "item-2 item-3";
  }
}

@media only screen and (min-width: 62rem) {
  .masonry-layout-3-2,
  .masonry-layout-3-3 {
    grid-template-rows: var(--row-height) var(--row-height);
  }
  .masonry-layout-3-4,
  .masonry-layout-3-5 {
    grid-template-rows: calc(var(--row-height) * 2) var(--row-height);
  }
  .masonry-layout-3-6,
  .masonry-layout-3-7 {
    grid-template-rows: var(--row-height) calc(var(--row-height) * 2);
  }
}

.masonry-layout-3-3,
.masonry-layout-3-4,
.masonry-layout-3-5,
.masonry-layout-3-6,
.masonry-layout-3-7 {
  & > div:nth-child(2):not(.masonry-tile__type-quote) .card-img-overlay {
    display: flex;
    flex-wrap: wrap;
    align-content: start;

    & .card-title,
    & .card-text {
      flex: 1;
      width: 100%;
    }
  }
}

.masonry-layout-6-1,
.masonry-layout-6-2,
.masonry-layout-6-3,
.masonry-layout-6-4 {
  /* note(rl) all layout 6-* items have the same layout on mobile and desktop */
  --row-height: calc(var(--masonry-field-height-sm) * 2); /* ensures the items take the height of the smallest for their size */
  --masonry-field-aspect-ratio-lg: unset;
  --masonry-field-aspect-ratio-sm: unset;
  grid-template-columns: [begin] 1fr 1fr [finish];
  grid-template-rows: var(--row-height) var(--row-height);

  @media (min-width: 62rem) {
    --row-height: calc(var(--masonry-field-height-lg) * 2);
  }
}

.masonry-layout-6-1 {
  grid-template-areas:
    "item-1 item-2"
    "item-3 item-2";
}

.masonry-layout-6-2 {
  grid-template-areas:
    "item-1 item-2"
    "item-1 item-3";
}

.masonry-layout-6-3 {
  grid-template-areas:
    "item-1 item-1"
    "item-2 item-3";
}

.masonry-layout-6-4 {
  grid-template-areas:
    "item-1 item-2"
    "item-3 item-3";
}

/* 4 items */

.masonry-layout-4-1 {
  @media only screen and (min-width: 62rem) {
    grid-template-columns:  [begin]  minmax(0, 10fr) minmax(0, 14fr)  [finish];
    grid-template-rows: var(--row-height) var(--row-height) var(--row-height);
    grid-template-areas:
      "item-1 item-3"
      "item-2 item-3"
      "item-2 item-4";
  }
}

.masonry-layout-4-2 {
  @media only screen and (min-width: 62rem) {
    grid-template-columns:  [begin]  minmax(0, 14fr) minmax(0, 10fr)[finish];
    grid-template-rows: var(--row-height) var(--row-height) var(--row-height);
    grid-template-areas:
      "item-1 item-3"
      "item-1 item-4"
      "item-2 item-4";
  }
}

.masonry-layout-4-3 {
  @media only screen and (min-width: 62rem) {
    grid-template-columns: [begin]  minmax(0, 10fr) minmax(0, 14fr) [finish];
    grid-template-rows: var(--row-height) var(--row-height) var(--row-height);
    grid-template-areas:
      "item-1 item-3"
      "item-1 item-4"
      "item-2 item-4";
  }
}

.masonry-layout-4-4 {
  grid-template-rows: minmax(0, auto);
  grid-template-areas:
    "item-1" "item-2" "item-3" "item-4";

  @media only screen and (min-width: 48rem) {
    grid-template-columns: [begin]  minmax(0, 12fr) minmax(0, 12fr) [finish];
    grid-template-rows: minmax(0, auto) minmax(0, auto);
    grid-template-areas:
      "item-1 item-4"
      "item-2 item-3";
  }

  @media only screen and (min-width: 62rem) {
    grid-template-columns: [begin]  minmax(0, 7fr) minmax(0, 7fr) minmax(0, 10fr)[finish] ;
    grid-template-rows: var(--row-height) var(--row-height);
    grid-template-areas:
      "item-1 item-1 item-4"
      "item-2 item-3 item-4";
  }
}

:root,
.masonry-layout {
  --row-height--grid: clamp(
    var(--row-height--grid--min, 10rem),
    var(--row-height--grid--minmax, max(90svh, 100svw)),
    var(--row-height--grid--max, 70rem)
  );
  --row-height--grid--max: 70rem;
  --row-height--grid--min: 10rem;
  --row-height--grid--minmax: min(90svh, 100svw);
}

/* 0-gap, aka "Grid" layout: */
.masonry-layout.gap-0 {
  --row-height: var(--row-height--grid);
  --masonry-field-aspect-ratio-lg: auto;
  --masonry-field-aspect-ratio-sm: auto;
  --masonry-field-height-lg: 100%;
  grid-auto-rows: var(--row-height);

  .masonry-layout-2-1,
  .masonry-layout-2-2,
  .masonry-layout-2-3,
  .masonry-layout-2-4,
  .masonry-layout-2-5,
  .masonry-layout-2-6,
  .masonry-layout-2-7,
  .masonry-layout-2-0,
  .masonry-layout-3-1,
  .masonry-layout-3-2,
  .masonry-layout-3-3,
  .masonry-layout-3-4,
  .masonry-layout-3-5,
  .masonry-layout-3-6,
  .masonry-layout-3-7,
  .masonry-layout-3-8,
  .masonry-layout-3-9,
  .masonry-layout-3-0,
  .masonry-layout-4-1,
  .masonry-layout-4-2,
  .masonry-layout-4-3,
  .masonry-layout-4-4,
  .masonry-layout-4-5,
  .masonry-layout-4-6,
  .masonry-layout-4-7,
  .masonry-layout-4-8,
  .masonry-layout-4-9,
  .masonry-layout-4-0 {
    /* nothing yet */
  }

  &.masonry-layout-2-8 {
    --row-height: var(--row-height--grid);
    --masonry-field-aspect-ratio-lg: auto;
    --masonry-field-aspect-ratio-sm: auto;
    grid-template-rows: repeat(2, var(--row-height));

    @media only screen and (min-width: 62rem) {
      /*--row-height: var(--row-height--grid);*/
      /* 50% width by default gives a square aspect ratio */
      --row-height: minmax(50svw, auto);
      grid-template-rows: var(--row-height);
    }
  }

  &.masonry-layout-2-9 {
    --row-height: clamp(
      var(--row-height--grid--min, 10rem),
      var(--row-height--grid--minmax, min(50svh, 50svw)),
      var(--row-height--grid--max, 70rem)
    );
    --masonry-field-aspect-ratio-lg: auto;
    --masonry-field-aspect-ratio-sm: auto;
    --row-height--grid--minmax: min(50svh, 50svw);

    @media only screen and (min-width: 62rem) {
      --row-height: minmax(50svw, auto);
      grid-template-rows: var(--row-height);
    }
  }

  &.masonry-layout-6-1,
  &.masonry-layout-6-2,
  &.masonry-layout-6-3,
  &.masonry-layout-6-4 {
    --row-height: minmax(calc(var(--row-height--grid) / 2), min(50svw, 50svh));
    --masonry-field-aspect-ratio-lg: auto;
    --masonry-field-aspect-ratio-sm: auto;

    @media (min-width: 62rem) {
      --row-height: minmax(calc(var(--row-height--grid) / 2), min(60svw, 60svh));
    }
  }
}

/* ------ */

.masonry-layout-y-12 {
  @media (min-width: 62rem) {
    grid-template-rows: calc(var(--row-height) * 1) !important;
  }
}

.masonry-layout-y-24 {
  @media (min-width: 62rem) {
    grid-template-rows: calc(var(--row-height) * 2) !important;
  }
}

.masonry-layout-y-0-auto {
  @media (min-width: 62rem) {
    grid-template-rows: minmax(0, auto) !important;
  }
}

.masonry-layout-y-12-12 {
  @media (min-width: 62rem) {
    grid-template-rows: calc(var(--row-height) * 1) calc(var(--row-height) * 1) !important;
  }
}

.masonry-layout-y-12-24 {
  @media (min-width: 62rem) {
    grid-template-rows: calc(var(--row-height) * 1) calc(var(--row-height) * 2) !important;
  }
}

.masonry-layout-y-24-12 {
  @media (min-width: 62rem) {
    grid-template-rows: calc(var(--row-height) * 2) calc(var(--row-height) * 1) !important;
  }
}

.masonry-layout-y-24-24 {
  @media (min-width: 62rem) {
    grid-template-rows: calc(var(--row-height) * 2) calc(var(--row-height) * 2) !important;
  }
}

.masonry-layout-y-0-auto-0-auto {
  @media (min-width: 62rem) {
    grid-template-rows: minmax(0, auto) minmax(0, auto) !important;
  }
}

/* endregion Layout - Masonry */

/* region =========================================================== Layout - Pagination */

.pagination {
  --bs-pagination-padding-y: 0;
  --bs-pagination-padding-x: 0.625rem;
  --bs-pagination-active-border-color: var(--bs-pagination-border-color);
  --bs-pagination-border-color: var(--wp--preset--color--background);

  --bs-pagination-disabled-border-color: var(--bs-pagination-border-color);

  --bs-pagination-hover-border-color: var(--bs-pagination-border-color);
  --bs-pagination-border-radius: 0;
  --bs-pagination-active-bg: var(--bs-pagination-bg);
  --bs-pagination-bg: var(--wp--preset--color--background);
  --bs-pagination-disabled-bg: var(--bs-pagination-bg);

  --bs-pagination-focus-bg: var(--wp--preset--color--denim-20);

  --bs-pagination-hover-bg: var(--bs-pagination-bg);
  --bs-pagination-active-color: var(--bs-pagination-color);
  --bs-pagination-color: var(--wp--preset--color--denim-100);
  --bs-pagination-disabled-color: var(--wp--preset--color--denim-20);
  --bs-pagination-focus-color: var(--bs-pagination-color);

  --bs-pagination-hover-color: var(--bs-pagination-color);
  --bs-pagination-font-size: min(max(1.5rem, calc(1.5rem + (2.0394 - 1.5) * ((100vw - 48rem) / (100 - 48)))), 2.0394rem);

  & .page-item {
    line-height: 1;
  }

  & .page-item.active {
    font-family: var(--wp--preset--font-family--circle-rounded-extra-bold);
    font-weight: 700;
  }
}

/* endregion Layout - Pagination */

/* endregion Layout */


/* region /////////////////////////////////////////////////////////// Page Regions */

/* region =================================================== Page Regions - Header */

.site-header {
  --header-element--transition-duration: 0.25s;
  --header-element--transition-property: outline;
  --header-element--transition-timing-function: ease;
  --header-element--outline--default: 2px solid var(--wp--preset--color--transparent);
  --header-element--outline--focus: 2px solid var(--wp--preset--color--background-40);
}

#nav-main {
  --navbar--height: min(max(1.625rem, calc(1.625rem + (2.25 - 1.625) * ((100vw - 48rem) / (62 - 48)))), 2.25rem);

  @media (min-width: 62rem) {
    --navbar--height: 2.25rem;
  }

  & .container {
    margin: 0 !important;
  }
}

.site-header .navbar-brand {
  position: relative;
  z-index: 1042;
  width: 100%;
  min-width: 7.5rem;
  max-width: 10rem;
  height: var(--navbar--height, 2.25rem);
  padding: 0;
  outline: var(--header-element--outline--default) !important;
  transition: var(--header-element--transition-property) var(--header-element--transition-duration) var(--header-element--transition-timing-function);

  @media (min-width: 48rem) {
    min-width: 8.25rem;
    height: var(--navbar--height, 2.25rem);
    max-height: 100%;
  }

  &:focus,
  &:focus-visible {
    outline: var(--header-element--outline--focus) !important;
  }

  & img {
    color: var(--wp--preset--color--transparent);
  }

  & dotlottie-player, /* custom tag, not a class */
  & .logo {
    @media only screen and (min-width: 48rem) {
      width: auto;
      min-width: 8.25rem;
      max-width: none; /* The width needs to be able to expand so images and animation align */
      height: var(--navbar--height, 2.25rem);
      max-height: none; /* The height needs to be able to expand so images and animation align */
      aspect-ratio: 825 / 200;
      opacity: 1;
      pointer-events: none;
      object-fit: contain;
    }
  }

  & .logo {
    vertical-align: top;
    width: auto;
    height: var(--navbar--height, 2rem);

    &.hide {
      @media only screen and (min-width: 48rem) {
        display: none !important;
        opacity: 0;
      }
    }
  }

  .menu-open & {
    visibility: hidden;
    opacity: 0;

    @media (min-width: 36rem) {
      visibility: visible;
      opacity: 1;
    }

    & .logo,
    & .logo-animation {
      @media (min-width: 36rem) {
        filter: brightness(0) invert(1);
      }
    }
  }
}

body.menu-open {
  overflow: hidden;

  & footer {
    /* prevents hidden elements causing overflow: */
    overflow: hidden;
    max-width: 100vw;
  }
}

.logo-animation {
  display: none;

  @media only screen and (min-width: 48rem) {
    display: inline-block;
  }
}

.logo-animation:not(.show) {
  @media only screen and (min-width: 48rem) {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
  }
}


.offcanvas-backdrop {
  top: -1.875rem;
  bottom: 0;
  /*   background: rgb(118 122 158 / 70%);*/
  left: 50%;
  height: auto;
  border-radius: 0;
  background: transparent;
  background: rgb(0 60 107 / 100%);
  opacity: 0.5;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.menu-overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  background: rgb(0 60 107 / 100%);
  opacity: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  &.show {
    visibility: visible;
    opacity: 0.5;
  }
}

.navbar-expand-lg {
  & .navbar-nav {
    overflow: auto;
    flex-direction: column !important;
    width: 100%;
    height: 100%;

    @media (min-width: 62rem) {
      flex-direction: column;
    }
  }

  & #id-for-specificity,
  & .nav-link.active,
  & .nav-link.show {
    --bs-navbar-active-color: var(--wp--preset--color--denim-100);
    color: var(--wp--preset--color--denim-100);
  }

  & .navbar-nav li {
    --bs-nav-link-padding-y: 1.5rem;
    --bs-nav-link-padding-x: 0;
    padding: var(--bs-nav-link-padding-x) var(--bs-nav-link-padding-y);

    @media (min-width: 48rem) {
      --bs-nav-link-padding-y: 2.2rem;
    }
  }

  & .navbar-nav .nav-link {
    display: inline-block;
    padding: 0;
    color: var(--wp--preset--color--body-text);
    white-space: pre; /* prevents inappropriate word-wrap on hover */
    font-family: var(--wp--preset--font-family--bree-serif);
    font-size: max(16px, 4rem); /* max() ensures a minimum font size */
    font-weight: 300;
    transition: all .3s;
    filter: drop-shadow(0.3535625rem 0.3535625rem 0.625rem #ffffff43);
  }

  & .offcanvas {
    visibility: hidden !important;
    position: fixed;
    z-index: 9999;
    top: 1.875rem;
    right: calc(1 * var(--bs-gutter-x, 1rem));
    left: calc(1 * var(--bs-gutter-x, 1rem));
    width: auto;
    min-width: 0;
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    border-radius: 1.25rem;
    background: var(--wp--preset--color--bg-header) !important;
    background-color: var(--bs-offcanvas-bg) !important;
    transition: all .3s !important;
    transform: translateX(100%) !important;

    @media (min-width: 36rem) {
      left: auto;
      width: 26.875rem !important;
    }

    @media (min-width: 48rem) {
      /*
          right: calc((100% - 682px)/2);
    */
    }
  }

  /*& .offcanvas.show,
  & .offcanvas.showing,
  & .offcanvas.show:not(.hiding) {
   transform: none !important;
   visibility: visible !important;
}*/

  & .offcanvas.showing,
  & .offcanvas.hiding,
  & .offcanvas.show {
    visibility: visible !important;
  }

  & .offcanvas.showing,
  & .offcanvas.show:not(.hiding) {
    transform: none !important;
  }

  & .offcanvas .offcanvas-body {
    height: 100%;
  }

  & .offcanvas .offcanvas-header {
    display: block;
    padding: 0;
  }

}

.single-post .navbar-nav .menu-item:nth-child(3) .nav-link,
.single-case-study .navbar-nav .menu-item:nth-child(2) .nav-link,
.navbar-expand-lg .navbar-nav .current-menu-item .nav-link,
.navbar-expand-lg .navbar-nav .nav-link:hover, /*updated*/
.navbar-expand-lg .navbar-nav .nav-link:focus,
.navbar-expand-lg .navbar-nav .nav-link:focus-visible {
  text-decoration: none;
  text-indent: 0.5rem;
  font-weight: 700;
}

body[style*="overflow"] {
  & .navbar-brand {
    opacity: 0;

    @media (min-width: 36rem) {
      opacity: 1;
    }
  }

  & .navbar-brand .logo {
    @media (min-width: 36rem) {
      filter: brightness(0) invert(1);
    }
  }

  & .site-header nav.navbar {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  & .header-actions {
    opacity: 0;
  }

  & .site-content,
  & footer {
    filter: blur(8px);
    -webkit-filter: blur(8px);
  }
}

.site-header nav.navbar {
  /* background: var(--wp--preset--color--bg-header);*/
  /* margin: 0 auto;*/
  --nav-bar--padding: 0.7rem 0 0.6rem;
  margin: 0;
  padding: var(--nav-bar--padding);
  border-radius: 1rem;
  box-shadow: 0 0 0.625rem rgb(0 0 0 / 19%);
  transition: all .5s;
  transition-delay: .5s;

  @media (min-width: 36rem) {
    margin-right: calc(-0.5 * var(--bs-gutter-x, 1rem));
    margin-left: calc(-0.5 * var(--bs-gutter-x, 1rem));
  }

  @media (min-width: 87.5rem) {
    --nav-bar--padding: 1.08rem 0 1.08rem;
  }
}

.site-header nav.navbar::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background: var(--wp--preset--color--bg-header);
  transition: all .5s;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  /*    transition-delay: .5s;*/
}

body.menu-open {
  & .site-header nav.navbar {
    background: transparent;
    box-shadow: none;
    transition-delay: 0s;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    &::before {
      background: transparent;
      transition-delay: 0s;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  & .site-content,
  & footer {
    filter: blur(8px);
    -webkit-filter: blur(8px);
  }
}

.site-header .fixed-top {
  transition: transform .5s ease, opacity .5s linear;
}

.site-header .fixed-top.bg-body-tertiary {
  margin-top: 1.063rem;
  background: transparent !important;

  @media (min-width: 62rem) {
    margin-top: 2.063rem;
  }
}

.site-header.scroll-down .fixed-top.bg-body-tertiary {
  transform: translateY(-6.875rem);
}

.site-header.scroll-up .fixed-top.bg-body-tertiary {
  transform: none !important;
}

.offcanvas-header .btn-close {
  position: absolute;
  z-index: 9;
  top: 1rem;
  right: 1rem;
  width: auto;
  height: auto;
  padding: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  transition: all .3s;
}

.offcanvas-title {
  display: none;
}

.header-menu {
  --fallback: 0.75rem 0;
  position: absolute;
  z-index: 1041;
  top: 0;
  right: 0;
  overflow: auto;
  width: 100%;
  max-height: calc(100vh - 5rem);
  padding: var(--nav-bar--padding, var(--fallback));
  padding-right: calc(var(--bs-gutter-x, 1rem) * 0.5);
  border-radius: 1.25rem;
  transition: background .3s;
  transition-delay: .4s;

  @media (min-width: 36rem) {
    width: 26.875rem;
  }

  @media (min-width: 48rem) {
    padding-right: var(--bs-gutter-x, 1rem);
  }

  @media (min-width: 87.5rem) {
    padding: var(--nav-bar--padding, var(--fallback));
    padding-right: var(--bs-gutter-x, 1rem);
  }
}

.header-menu::-webkit-scrollbar {
  display: none;
}

body.menu-open .header-menu {
  min-height: calc(80vh - 5rem) !important;
  padding-top: calc(var(--bs-gutter-x) * 0.666666);
  padding-right: var(--bs-gutter-x, 1rem);
  background: var(--wp--preset--color--bg-header);
  transition: none;

  @media (min-width: 62rem) {
    padding-top: 1rem;
    padding-right: calc(var(--bs-gutter-x, 1rem) * 1.2);
  }
}

.menu-dropdown {
  display: none;
  margin-top: -2rem;
}

.header-actions {
  height: var(--navbar--height, 2.25rem);

  :is(body[style*="overflow"]) & {
    opacity: 0;
  }

  & button {
    position: relative;
    z-index: 99;
    outline: 0 !important;
    border: 0 !important;

    & svg {
      vertical-align: top;
      width: 1.625rem;

      @media (min-width: 87.5rem) {
        width: 2.139rem;
      }
    }
  }

  /* Closed state - when menu is closed: */

  & .nav-toggle {
    position: relative;
    width: var(--navbar--height, 2.25rem);
    height: var(--navbar--height, 2.25rem);
    padding: 1px;
    /*  margin: 50px auto;*/
    border-radius: 0;
    transition: .5s ease-in-out;
    transform: rotate(0deg);
    cursor: pointer;

    & span {
      outline: var(--header-element--outline--default);
      transition: var(--header-element--transition-property) var(--header-element--transition-duration) var(--header-element--transition-timing-function);
    }
  }

  & .nav-toggle:focus:not(:active),
  & .nav-toggle:focus-visible:not(:active) {
    & span {
      outline: var(--header-element--outline--focus);
      background: var(--wp--preset--color--body-text);
    }
  }

  /* Active state - when menu is open: */

  & .nav-toggle.active {
    --active-background-height: calc(var(--navbar--height, 1.625) * 1.30);
    --active-background-spacing: calc(var(--active-background-height) - var(--navbar--height));
    top: 0.625rem;
    opacity: var(--bs-btn-close-opacity, 0.9);

    &::before {
      content: "";
      position: absolute;
      top: calc(var(--active-background-spacing) * -0.5);
      right: calc(var(--active-background-spacing) * -0.5);
      bottom: calc(var(--active-background-spacing) * -0.5);
      left: calc(var(--active-background-spacing) * -0.5);
      width: var(--active-background-height);
      height: var(--active-background-height);
      border-radius: 50%;
      background: var(--wp--preset--color--background);
      box-shadow: 0 0 0.938rem rgb(0 60 107 / 30%);
      transition: all .3s;

      @media (min-width: 87.5rem) {
        left: -0.325rem;
      }
    }

    & span {
      outline: none;
      transform-origin: center;
    }
  }

  & .nav-toggle.active:hover, /*updated*/
  & .nav-toggle.active:focus,
  & .nav-toggle.active:focus-visible {
    opacity: var(--bs-btn-close-hover-opacity, 1);

    &::before {
      background: var(--wp--preset--color--brand-2);
    }

    & span {
      outline: none;
      background: var(--wp--preset--color--background);
    }
  }

  & .nav-toggle {
    --toggle-bar--height: 3px;

    & span {
      display: block;
      position: absolute;
      right: 0.5px; /* fixes a visual alignment issue in FF */
      width: 100%;
      height: var(--toggle-bar--height, 0.1875rem);
      border-radius: 0.188rem;
      background: var(--wp--preset--color--body-text);
      opacity: 1;
      transition: .25s ease-in-out;
      transform: rotate(0deg);
      -webkit-transform-origin: left center;
      transform-origin: left center;
    }

    & span:nth-child(1) {
      top: 0;
      width: calc(var(--navbar--height) * (0.938 / 2.25)); /* ratio of width from original desktop value*/
    }

    & span:nth-child(2) {
      top: calc(50% - (var(--toggle-bar--height) / 2));
      width: calc(var(--navbar--height) * (1.438 / 2.25)); /* ratio of width from original desktop value*/
    }

    & span:nth-child(3) {
      top: calc(100% - (var(--toggle-bar--height) * 1.25)); /* ensures that the bar aligns visually */
      width: var(--navbar--height);
    }
  }

  & .nav-toggle.active {
    & span:nth-child(1),
    & span:nth-child(3) {
      top: calc(50% - 1px) !important;
      right: 0 !important;
      width: 100% !important;
    }

    & span:nth-child(2) {
      width: 0% !important;
      opacity: 0 !important;
    }

    & span:nth-child(1) {
      transform: rotate(45deg) !important;
    }

    & span:nth-child(3) {
      transform: rotate(-45deg) !important;
    }
  }
}

/* endregion */

/* region =================================================== Page Regions - Footer */

.bootscore-footer {
  --footer--background-color: var(--wp--preset--color--denim-100);
  /*--footer--font-size: var(--wp--preset--font-size--small);*/
  /*--footer--font-size: max(16px, min(max(0.996rem, calc(0.996rem + (1.496 - 0.996) * ((100vw - 62rem) / (100 - 62)))), 1.496rem)); !* same as --small with a larger minimum *!*/
  --footer--link--font-size: max(16px, min(max(1.5rem, calc(1.5rem + (2 - 1.5) * ((100vw - 22.5rem) / (62 - 22.5)))), 2rem));
  --footer--li-spacing: var(--wp--preset--spacing--50);

  position: relative;
  z-index: 2;
  min-height: 0vw; /* safari fix */
  background: var(--footer--background-color);
  color: var(--wp--preset--color--background);
  /*noinspection CssUnresolvedCustomProperty*/
  font-size: var(--footer--font-size, var(--footer--link--font-size, 1.5rem));

  /*noinspection CssUnresolvedCustomProperty*/
  & h2 {
    margin-top: 0.8rem;
    margin-bottom: 2.2rem;
    color: var(--wp--preset--color--background);
    font-family: var(--wp--preset--font-family--bree-serif), sans-serif;
  }

  /*noinspection CssUnresolvedCustomProperty*/
  & .contact-social__list {
    gap: var(--bs--gutter-x, 1.25rem);

    @media (min-width: 48rem) {
      gap: 0;
    }
  }

  /*noinspection CssUnresolvedCustomProperty*/
  & .contact-social__list {
    gap: var(--bs--gutter-x, 1.25rem);

    @media (min-width: 48rem) {
      gap: 0;
    }
  }

  & .contact-social__list-item,
  & ul li {
    /*display: flex;*/
    /*flex: 0 0 100%;*/
    align-items: center;
    padding: var(--footer--li-spacing) 0;
    line-height: 1;
  }

  /*noinspection CssUnresolvedCustomProperty*/
  & #id-for-specificity,
  & .contact-social__link {
    --shadow-width: 2px;
    --item-color: var(--wp--preset--color--aqua-100);
    --transition: all 0.2s ease-in-out;
    --icon-scale-factor: 2; /* multiplication of font size */
    --shadow-blur: 0.5px;
    --stroke: var(--wp--preset--color--aqua-100);

    display: inline-flex;
    position: relative;
    gap: 0.25em;
    align-items: center;
    justify-content: center;
    margin-right: 0.325rem;
    color: var(--wp--preset--color--text-3);
    line-height: 1em;
    text-decoration: underline;
    font-family: var(--wp--preset--font-family--circle-rounded-light), sans-serif;
    font-size: var(--footer--link--font-size, 1.5rem);
    transition: var(--transition);
    text-decoration-color: #01010101;

    @media (min-width: 48rem) {
      --icon-scale-factor: 1.0625; /* multiplication of font size */
    }

    &[class*="--phone"] {
      --item-color: var(--wp--preset--color--brick-100);
      --stroke: var(--wp--preset--color--brick-100);
    }

    &[class*="--email"] {
      --item-color: var(--wp--preset--color--honey-100);
      --stroke: var(--wp--preset--color--honey-100);
    }

    &[class*="--address"] {
      --item-color: var(--wp--preset--color--aqua-100);
      --stroke: var(--wp--preset--color--aqua-100);
    }

    &[class*="--social_1"] {
      --item-color: var(--wp--preset--color--orchid-100);
      --stroke: var(--wp--preset--color--orchid-100);
    }

    &[class*="--social_2"] {
      --item-color: var(--wp--preset--color--grey-20);
      --stroke: var(--wp--preset--color--grey-20);
    }

    & svg {
      position: relative;
      z-index: 1;
      min-width: calc(var(--footer--link--font-size, 1.5rem) * var(--icon-scale-factor));
      height: calc(var(--footer--link--font-size, 1.5rem) * var(--icon-scale-factor));
      aspect-ratio: 1/1;
      transition: var(--transition);
    }

    & circle,
    & line,
    & path {
      stroke: var(--stroke) !important;

      &.cls-2 {
        fill: var(--stroke) !important;
      }
    }

    &::before {
      content: "" !important;
      display: none;
    }

    /*
    &::before {
      content: flex !important;
      display: inline-flex;
      position: relative;
      z-index: 1;
      height: calc(var(--footer--font-size, 1.5rem) * 1.0625);
      aspect-ratio: 1/1;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      color: var(--footer--background-color);
      text-shadow: calc(var(--shadow-width) * 1) calc(var(--shadow-width) * 1) var(--shadow-blur) var(--item-color),
      calc(var(--shadow-width) * -1) calc(var(--shadow-width) * 1) var(--shadow-blur) var(--item-color),
      calc(var(--shadow-width) * 1) calc(var(--shadow-width) * -1) var(--shadow-blur) var(--item-color),
      calc(var(--shadow-width) * -1) calc(var(--shadow-width) * -1) var(--shadow-blur) var(--item-color);
    }

    &[href*="mailto:"]::before {
      background-image: url("/wp-content/themes/point6-bootscore/img/p6cd-icon--envelope.svg");
    }
    &[href*="tel:"]::before {
      background-image: url("/wp-content/themes/point6-bootscore/img/p6cd-icon--phone.svg");
    }
    &[href*="linkedin.com"]::before {
      background-image: url("/wp-content/themes/point6-bootscore/img/p6cd-icon--instagram.svg");
    }
    &[href*="instagram.com"]::before {
      background-image: url("/wp-content/themes/point6-bootscore/img/p6cd-icon--linkedin.svg");
    }
    /**/


    &::after {
      content: "";
      display: none; /* change to display: block; for fontawesome */
      position: absolute;
      z-index: 0;
      top: 0.25em;
      bottom: 0.25em;
      left: 0.25em;
      width: 0.5em;
      background-color: var(--item-color);
    }
  }

  & a.contact-social__link {
    &:hover, /*updated*/
    &:focus,
    &:focus-visible {
      text-decoration: underline;
      opacity: 0.8;
      transition: var(--transition);
      text-decoration-color: var(--stroke) !important;

      @media (min-width: 48rem) {
        opacity: 1;
      }

      &::before,
      &::after {
        --item-color: var(--wp--preset--color--aqua-80);
      }
    }
  }

  & .contact-social__list-item__label {
    display: none;

    @media (min-width: 48rem) {
      display: inline;
    }
  }

  & .footer-social__link--address .contact-social__list-item__label {
    display: inline;
  }

  & .footer-left {
    padding-top: 3.125rem;
  }

  & .footer-left__inner {
    display: flex;
  }

  & .footer-address__title,
  & .footer-contact__title,
  & .footer-social__title,
  & .footer-left__inner :where(h6) {
    margin-bottom: 0;
    padding: var(--footer--li-spacing) 0 0;
    color: var(--wp--preset--color--background);
    font-family: var(--wp--preset--font-family--circle-rounded-light), sans-serif;
    font-size: var(--footer--link--font-size, 1.5rem);
  }

  & .certification-logos {
    display: flex;
    gap: var(--wp--preset--spacing--60);
    align-items: center;
    justify-content: start;
  }

  & .certification_logo img {
    width: min-content;
    height: 4rem;
    min-height: 100%;
    max-height: 100%;

    @media (min-width: 75rem) {
      height: 5.375rem;
    }

    @media (min-width: 87.5rem) {
      height: 6.0rem;
    }
  }

  & .footer-address {
    color: var(--wp--preset--color--text-3);
    line-height: 1.25;
    font-family: var(--wp--preset--font-family--circle-rounded-light), sans-serif;
    font-size: var(--footer--link--font-size, 1.5rem);

    @media (max-width: 47.998rem) {
      font-size: max(16px, 1rem) !important;
    }
  }

  & .footer-image {
    @media (min-width: 48rem) {
      transform: translateY(calc(var(--wp--preset--spacing--60) * -1));
    }

    @media (min-width: 90rem) {
      transform: translateY(calc(var(--wp--preset--spacing--70) * -1));
    }

    & img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 1rem;
      object-fit: cover;
    }

    & .image-shadow {
      display: inline-block;
      position: relative;
      width: 100%;

      @media (min-width: 87.5rem) {
        float: right;
        max-width: 94.8%;
      }
    }

    & .image-shadow::after {
      content: "";
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: 5%;
      width: 90%;
      height: 61.5%;
      background: rgb(0 0 0 / 50%);
      filter: blur(1.5rem);
      -webkit-filter: blur(1.5rem);
    }
  }
}

@keyframes intro-text-gradient-anim {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

footer .footer-left h2 span.ready {
  background-image: linear-gradient(130deg, var(--wp--preset--color--background) 35%, var(--wp--preset--color--lightblue) 45%, var(--wp--preset--color--lightgreen) 95%);
  background-size: 300% 100%;
  -webkit-animation: intro-text-gradient-anim 1.5s ease-in-out infinite;
  animation: intro-text-gradient-anim 1.5s ease-in-out infinite;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

footer .footer-left h2 span {
  background-color: var(--wp--preset--color--background);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-text-fill-color: transparent;
}


/* endregion */

/* region =================================================== Page Regions - Content */

.site-content.no-custom-blocks {
  padding-bottom: 5rem;
}

figure.wp-block-image,
[class*="wp-block"] figure.wp-block-image {
  /* no margin needed on figures inside a block */
  margin-bottom: 0;
}

.site-content .entry-content {
  overflow: hidden;
}

.entry-content > section {
  /* Visual fix for sections sometimes randomly having a pixel of space between each other, showing the fixed hero: */
  margin-top: -1px;
}

main {
  & > .entry-content {
    & > .background-white {
      position: relative;
    }

    & > .background-white::before {
      content: '';
      position: absolute;
      z-index: 0;
      top: 0;
      left: 50%;
      width: 100vw;
      height: 100%;
      background-color: var(--wp--preset--color--background);
      transform: translateX(-50%);
    }

    & > .background-white > * {
      position: relative;
      z-index: 2;
    }
  }

  .single & > .entry-content > .background-white.wysiwyg-content,
  .single & > .entry-content > .background-white.news-slider-block {
    background: var(--wp--preset--color--mist-100, #e9eff6);
  }

  & .background-transparent {
    position: relative;
    background-color: transparent;
  }

  & .background-transparent::after,
  & .background-transparent::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: #ffffff;
  }
}

/* region ------------------------------------------- Page Regions - Content - Hero */

main {
  position: relative;

  &::before {
    content: "";
    display: block;
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    bottom: 0;
    left: unset;
    width: var(--fancybox-scrollbar-compensate, 0);
    height: unset;
    background: var(--wp--preset--color--background);
  }

  .fancybox-show &::before {
    right: calc(-1 * var(--fancybox-scrollbar-compensate, 0));
  }

  & section[class*="hero"] {
    position: relative;
    overflow: hidden;
  }

  & section[class*="hero"] video,
  & section[class*="hero"] img,
  & section[class*="hero"] picture {
    position: fixed !important;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    right: unset !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100%;
  }

  & section[class*="hero"] video,
  & section[class*="hero"] img {

  }

  & section[class*="hero"].is-sticky video,
  & section[class*="hero"].is-sticky img,
  & section[class*="hero"].is-sticky picture {
    opacity: 0 !important;
  }
}

.hero-video,
.hero-video--large,
.hero-video .hero-video-inner,
.inner-page-hero,
main section[class*="hero"] video,
main section[class*="hero"] img,
main section[class*="hero"] picture {
  /* prevents the hero from being too tall on mobile devices: */
  --hero--height: 87.5vh;
  height: auto !important;
  min-height: var(--hero--height);
  transition: 0.001s height;

  @media (min-width: 48rem) {
    /* take up all of the room on larger viewports: */
    --hero--height: 95vh;
    height: var(--hero--height) !important;
    min-height: var(--hero--height);

    .admin-bar & {
      height: calc(var(--hero--height) - var(--wp-admin--admin-bar--height, 0px)) !important;
      min-height: calc(var(--hero--height) - var(--wp-admin--admin-bar--height, 0px));
    }

    .admin-bar.menu-open & {
      /* a reset is needed for some reason when the menu is open to prevent a layout shift. */
      top: 0 !important;
    }
  }

  /* This is duplicated from above because a @media (max-height: *), (min-width: *) query seems buggy */
  @media (max-height: 35rem) {
    /* If the height of the viewport is small, use all the viewport: */
    --hero--height: 100vh;
    height: var(--hero--height) !important;
    min-height: var(--hero--height);

    .admin-bar & {
      height: calc(var(--hero--height) - var(--wp-admin--admin-bar--height, 0px)) !important;
      min-height: calc(var(--hero--height) - var(--wp-admin--admin-bar--height, 0px));
    }

    .admin-bar.menu-open & {
      /* a reset is needed for some reason when the menu is open to prevent a layout shift. */
      top: 0 !important;
    }
  }
}

/* endregion */

/* endregion Page Regions - Content */

/* endregion Page Regions */


/* region /////////////////////////////////////////////////////////// Post Filters */

.taxonomy-filter__terms-wrapper {
  --taxonomy-filter--transition: all 0.2s ease-in-out;
}

.taxonomy-filter__terms-wrapper {
  /* link icon defaults: */
  --taxonomy-filter--link-icon--active--border-color: var(--taxonomy-filter--link-icon--active--color);
  --taxonomy-filter--link-icon--active-hover--border-color: var(--taxonomy-filter--link-icon--active-hover--color);
  --taxonomy-filter--link-icon--border-color: var(--taxonomy-filter--link-icon--color);
  --taxonomy-filter--link-icon--hover--border-color: var(--taxonomy-filter--link-icon--hover--color);
  --taxonomy-filter--link-icon--active--color: var(--taxonomy-filter--link--active--color);
  --taxonomy-filter--link-icon--active-hover--color: var(--taxonomy-filter--link--active-hover--color);
  --taxonomy-filter--link-icon--color: transparent;
  --taxonomy-filter--link-icon--hover--color: var(--taxonomy-filter--link--hover--color);
}

.taxonomy-filter__terms-wrapper {
  /* link defaults: */
  --taxonomy-filter--link--active--color: var(--taxonomy-filter--link--color);
  --taxonomy-filter--link--active-hover--color: var(--taxonomy-filter--link--color);
  --taxonomy-filter--link--hover--color: var(--taxonomy-filter--link--color);
  --taxonomy-filter--link--active--font-weight: 400;
  --taxonomy-filter--link--font-weight: 400;

  @media (min-width: 48rem) {
    --taxonomy-filter--link--active--font-weight: 700;
    --taxonomy-filter--link--font-weight: 400;
  }
}

.taxonomy-filter__terms-wrapper {
  .blog & {
    --taxonomy-filter--link-icon--border-color: var(--taxonomy-filter--link--color);
    --taxonomy-filter--label--color: var(--wp--preset--color--aqua-100);
    --taxonomy-filter--label--hover--color: var(--wp--preset--color--aqua-80);
    --taxonomy-filter--label-current--color: var(--taxonomy-filter--label--hover--color);
    --taxonomy-filter--label-current--hover--color: var(--wp--preset--color--aqua-60);
    --taxonomy-filter--label-highlight--color: var(--taxonomy-filter--label--color);
    --taxonomy-filter--label-highlight--hover--color: var(--taxonomy-filter--label--hover--color);
    --taxonomy-filter--label-line--color: transparent;
    --taxonomy-filter--link--color: var(--wp--preset--color--background);

    @media (min-width: 48rem) {
      --taxonomy-filter--link-icon--active--color: var(--taxonomy-filter--link-icon--color);
      --taxonomy-filter--link-icon--active-hover--color: var(--taxonomy-filter--link-icon--color);
      --taxonomy-filter--link-icon--color: var(--wp--preset--color--mist-100);
      --taxonomy-filter--link-icon--hover--color: var(--taxonomy-filter--link-icon--color);
    }
  }

  .case-study-listing & {
    --taxonomy-filter--link-icon--border-color: var(--wp--preset--color--denim-20);
    --taxonomy-filter--label--color: var(--wp--preset--color--denim-100);
    --taxonomy-filter--label--hover--color: color-mix(in srgb, var(--wp--preset--color--aqua-100), var(--taxonomy-filter--label--color));
    --taxonomy-filter--label-current--color: var(--wp--preset--color--denim-80);
    --taxonomy-filter--label-current--hover--color: color-mix(in srgb, var(--wp--preset--color--aqua-60), var(--wp--preset--color--denim-60));
    --taxonomy-filter--label-highlight--color: var(--taxonomy-filter--label--color);
    --taxonomy-filter--label-highlight--hover--color: color-mix(in srgb, var(--wp--preset--color--aqua-100), var(--taxonomy-filter--label--color));
    --taxonomy-filter--label-line--color: transparent;
    --taxonomy-filter--link--color: var(--taxonomy-filter--label--color);

    @media (min-width: 48rem) {
      --taxonomy-filter--link--active--color: var(--wp--preset--color--denim-100);
      --taxonomy-filter--link--color: var(--wp--preset--color--denim-20);
      --taxonomy-filter--link-icon--active--color: var(--taxonomy-filter--link--color);
      --taxonomy-filter--link-icon--active-hover--color: var(--taxonomy-filter--link--color);
      --taxonomy-filter--link-icon--color: var(--taxonomy-filter--link--color);
      --taxonomy-filter--link-icon--hover--color: var(--taxonomy-filter--link--color);
    }
  }
}

.taxonomy-filter__terms-container {
  overflow: hidden;
  height: auto;
  max-height: 0 !important;
  transition: var(--taxonomy-filter--transition, var(--transition));
}

.taxonomy-filter__terms-label {
  display: flex;
  gap: 0.25em;
  align-items: baseline;
  justify-content: end;
  line-height: 1;
  font-size: var(--font-size--h6-large);
  font-weight: 600;

  @media (min-width: 48rem) {
    display: flex;
    /* todo: Change to none when the rest of the styling is ready */
  }

  &::before,
  &::after {
    display: block;
    align-self: center;
  }

  &::before {
    content: '';
    order: 2;
    flex: 1;
    border-bottom: 0.125rem solid var(--taxonomy-filter--label-line--color); /* var(--wp--preset--color--aqua-20);*/
  }

  &::after {
    --taxonomy-filter--icon--font-family: 'FontAwesome', 'Font Awesome 5', 'Font Awesome 5 Pro';
    content: '\f078';
    order: 1;
    flex: 0 0 auto;
    font-family: var(--taxonomy-filter--icon--font-family);
  }

  &:hover {
    cursor: pointer;
  }
}

.taxonomy-filter__terms-label__current {
  display: inline-flex;
  align-items: baseline;
  color: var(--taxonomy-filter--label-current--color); /* var(--wp--preset--color--denim-80);*/
  line-height: 1;
  font-size: var(--font-size--body-small);
  font-weight: 400;
  transition: var(--taxonomy-filter--transition, var(--transition));
}

.taxonomy-filter__terms-label__highlight {
  align-self: baseline;
  padding-left: 0.25em;
  color: var(--taxonomy-filter--label-highlight--color); /* var(--wp--preset--color--denim-100);*/
  font-size: var(--font-size--body);
  font-weight: 400;
  transition: var(--taxonomy-filter--transition, var(--transition));
}

.taxonomy-filter__terms-input {
  & ~ label {
    padding-bottom: 1rem;
    color: var(--taxonomy-filter--label--color); /* var(--wp--preset--color--denim-100);*/
    transition: var(--taxonomy-filter--transition, var(--transition));
    user-select: none;

    @media (min-width: 48rem) {
      display: none;
    }
  }

  & ~ label:hover,
  & ~ label:focus-within,
  & ~ label:focus-visible,
  &:focus-within ~ label,
  &:focus-visible ~ label {
    & {
      color: var(--taxonomy-filter--label--hover--color);
    }
    & .taxonomy-filter__terms-label__highlight {
      color: var(--taxonomy-filter--label-highlight--hover--color); /* color-mix(in srgb, var(--wp--preset--color--aqua-100), var(--wp--preset--color--denim-100));*/
    }
    & .taxonomy-filter__terms-label__current {
      color: var(--taxonomy-filter--label-current--hover--color); /* color-mix(in srgb, var(--wp--preset--color--aqua-60), var(--wp--preset--color--denim-60));*/
    }
  }

  &:checked ~ label::after {
    content: '\f077';
  }

  &:checked ~ .taxonomy-filter__terms-container {
    height: auto;
    max-height: 1000px !important;
  }

  & ~ .taxonomy-filter__terms-container {
    @media (min-width: 48rem) {
      height: auto;
      max-height: 1000px !important;
    }
  }
}

.taxonomy-filter__term::after {
  display: none;
}

.taxonomy-filter__link {
  display: inline-flex;
  gap: 1em;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--taxonomy-filter--link--color); /* var(--wp--preset--color--denim-60);*/
  line-height: 1;
  text-decoration: none;
  font-family: var(--wp--preset--font-family--circle-rounded-light);
  font-size: var(--font-size--h6-large);
  font-style: normal;
  font-weight: var(--taxonomy-filter--link--font-weight);
  opacity: 1;
  transition: var(--taxonomy-filter--transition);
  text-decoration-color: transparent;

  @media (min-width: 48rem) {
    gap: 0;
    font-size: var(--font-size--body-small);
  }

  &::before {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 47.998rem) {
    &::before {
      --taxonomy-filter--link-icon--border-width: 1px;
      --size: max(0.5em, 0.875rem);
      --taxonomy-filter--link-icon--border-offset: 2px;
      content: '';
      width: var(--size, 0.875rem); /* size required because safari cannot into aspect-ratio */
      height: var(--size, 0.875rem); /* size required because safari cannot into aspect-ratio */
      margin: calc(var(--taxonomy-filter--link-icon--border-offset) + var(--taxonomy-filter--link-icon--border-width));
      outline-width: var(--taxonomy-filter--link-icon--border-width);
      outline-style: solid;
      outline-color: var(--taxonomy-filter--link-icon--border-color);
      outline-offset: var(--taxonomy-filter--link-icon--border-offset);
      border-radius: 50%;
      background-color: var(--taxonomy-filter--link-icon--color);
      opacity: 1;
      transition: var(--taxonomy-filter--transition);
    }

    &:hover,
    &:focus-within,
    &:focus-visible {
      color: var(--taxonomy-filter--link--hover--color); /* var(--wp--preset--color--denim-100);*/
      text-decoration-color: transparent;

      &::before {
        outline-color: var(--taxonomy-filter--link-icon--hover--border-color);
        background-color: var(--taxonomy-filter--link-icon--hover--color);
        color: var(--taxonomy-filter--link-icon--hover--color);
      }
    }
  }

  @media (min-width: 48rem) {
    &::before {
      content: "";
      align-self: center;
      width: 1px;
      height: 0.875em;
      margin: 0 0.5em;
      background: var(--taxonomy-filter--link--color);
    }
  }

  &.active {
    color: var(--taxonomy-filter--link--active--color); /* var(--wp--preset--color--denim-100);*/
    font-weight: var(--taxonomy-filter--link--active--font-weight);

    @media (max-width: 47.998rem) {
      &::before {
        content: '';
        outline-color: var(--taxonomy-filter--link-icon--active--border-color);
        background-color: var(--taxonomy-filter--link-icon--active--color);
        color: var(--taxonomy-filter--link-icon--active--color);
        opacity: 1;
      }

      &:hover,
      &:focus-within,
      &:focus-visible {
        color: var(--taxonomy-filter--link--active-hover--color); /* var(--wp--preset--color--denim-80);*/

        &::before {
          outline-color: var(--taxonomy-filter--link-icon--active-hover--border-color);
          background-color: var(--taxonomy-filter--link-icon--active-hover--color);
          color: var(--taxonomy-filter--link-icon--active-hover--color);
        }
      }
    }
  }
}

.taxonomy-filter__term:first-of-type {
  @media (min-width: 48rem) {
    #id-for-specificity,
    & .taxonomy-filter__link.active::before,
    & .taxonomy-filter__link::before {
      display: none !important;
    }
  }
}

/* endregion Post Filters */


/* region /////////////////////////////////////////////////////////// Post Types */

/* region =================================================== Modal Boxes */

.boxzilla-container {

  & > .boxzilla {
    /* prevents the modal from butting up against the sides of the screen on smaller viewports: */
    margin-right: 1rem;
    margin-left: 1rem;
  }

  & .boxzilla-center {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-radius: var(--button--border-radius, 1.5rem);
  }

  & .boxzilla-close-icon {
    --position: calc(var(--button--border-radius, 1.5rem) / 2);
    --transition-fallback: "0.3s all ease-in-out";
    --size: 2rem;
    box-sizing: border-box;
    display: flex;
    position: absolute;
    top: var(--position);
    right: var(--position);
    align-items: center;
    justify-content: center;
    width: var(--size, 2rem);
    height: var(--size, 2rem);
    padding: 0;
    border-radius: 50%;
    background-color: var(--wp--preset--color--denim-40);
    color: var(--wp--preset--color--denim-100) !important;
    line-height: 1;
    font-size: 0;
    opacity: 1;
    transition: var(--transition, var(--transition-fallback));

    &::before {
      content: " ";
      display: flex;
      width: var(--size, 2rem);
      height: var(--size, 2rem);
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 36 36' tabindex='-1'%3E%3Cpath d='M20 20L4 4m16 0L4 20' stroke='%23003773' stroke-width='2px' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E");
      transition: var(--transition, var(--transition-fallback));
    }

    &:hover,
    &:focus {
      background-color: var(--wp--preset--color--denim-100);

      &::before {
        filter: invert(1) brightness(2.5);
      }
    }
  }

  & .mc4wp-response {
    padding-right: var(--wp--preset--spacing--60);
    padding-left: var(--wp--preset--spacing--60);
    font-size: var(--wp--preset--font-size--small) !important;
  }

  & .mc4wp-alert {
    margin: 0;
    padding: 0;
    border: 1px solid var(--wp--preset--color--denim-20);
    border-radius: var(--button--border-radius, 1.5rem);

    & p {
      margin: var(--wp--preset--spacing--40);
    }
  }

  & .mc4wp-alert.mc4wp-success {
    border-color: var(--wp--preset--color--green-40);
  }

  & .mc4wp-alert.mc4wp-error {
    border-color: var(--wp--preset--color--brick-80);
  }
}

/* endregion Modal Boxes */

/* endregion Post Types */


/* region /////////////////////////////////////////////////////////// Blocks */

/* region =============================================== WordPress Blocks */

:where([class*="wp-block-"]):not(.has-background) {
  /* Add a default background colour, to ensure that the hero image / video is appropriately hidden */
  /* :where() has 0 specificity, so will always be overriden */
  background-color: var(--wp--preset--color--background);
}

:where([class*="wp-block-getwid"]):not(.has-background) {
  /* don't provide a default colour for getwid sections, as the background colour is applied to a child element: */
  background-color: transparent;
}

:is([class*="wp-block-"]) {
  .has-background &,
  .has-background-color & {
    /* Override the default background colour when a block is inside another block: */
    background-color: inherit;
  }

  & > p,
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    &:first-child:last-child {
      margin-bottom: 0;
    }
  }
}

figure.wp-block-video,
figure.wp-block-image {
  &,
  [class*="wp-block"] & {
    /* no margin needed on figures inside a block */
    margin-bottom: 0;
  }
}

.entry-content .wp-block-video {
  /* Fix z-index issue on video blocks */
  box-sizing: border-box;
  position: relative;
  margin: 0;
}

.entry-content .inner-page-hero ~ [class*="wp-block-"] {
  /* Lift all blocks that come after the hero z-upwards slightly to avoid clipping any position:fixed images or videos */
  position: relative;
  z-index: 1;
}

.wp-block-image.is-style-rounded img {
  border-radius: 1.25rem;
}

.wp-block-group.text-fadein,
.wp-block-columns.text-fadein,
.wp-block-column.text-fadein {
  /*
  Disable animation fade on groups and columns, as they will often provide the background colour to hide the
  hero image / video on a page and therefor must be visible at all times.
  */
  opacity: 1 !important;
}

/* endregion */

/* region =============================================== Paragraph and Heading blocks */

.entry-content {
  overflow: hidden;

  /* & > .wp-block-getwid-section, */
  & > p,
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 2.25rem;
    position: relative;
    z-index: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding-right: var(--bs-gutter-x, 1rem);
    padding-left: var(--bs-gutter-x, 1rem);

    &.has-background-background-color + .wp-block-getwid-section.has-background-background-color,
    &.has-background-background-color + p.has-background-background-color,
    &.has-background-background-color + h1.has-background-background-color,
    &.has-background-background-color + h2.has-background-background-color,
    &.has-background-background-color + h3.has-background-background-color,
    &.has-background-background-color + h4.has-background-background-color,
    &.has-background-background-color + h5.has-background-background-color,
    &.has-background-background-color + h6.has-background-background-color {
      margin-top: calc(-1 * var(--bs-gutter-y));
    }
  }

  & > .wp-block-getwid-section {
    max-width: 100%;
  }

  & > .wp-block-getwid-section__wrapper {
    max-width: var(--container-width, calc(79.875rem + (var(--bs-gutter-x, 1rem) * 2)));
  }

  & > p,
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {
    max-width: var(--container-width, calc(79.875rem + (var(--bs-gutter-x, 1rem) * 2)));
  }

  & > p,
  & > h1,
  & > h2,
  & > h3,
  & > h4,
  & > h5,
  & > h6 {

    /* Psuedo-elements are used to provide full-width background colour */
    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      width: 50%;
      height: 100%;
      background-color: inherit;
    }

    &::before {
      left: 50%;
      margin-left: -50vw;
    }

    &::after {
      right: 50%;
      margin-right: -50vw;
    }

    &.has-background {
      padding-top: var(--bs-gutter-y);
      padding-bottom: var(--bs-gutter-y);
    }
  }

  .wp-block-paragraph__inner,
  .wp-block-heading__inner {
    display: block;
    max-width: var(--container-width); /* var(--container-width, calc(79.875rem + (var(--bs-gutter-x, 1rem) * 2))); */
    margin: 0 auto;
  }
}

/* endregion Paragraph and Heading blocks */

/* region =============================================== Image Blocks */

.wp-block-image {

  /* Image style */
  &.is-style-d-none-d-md-block {
    display: none !important;
    @media (min-width: 48rem) {
      display: block !important
    }
  }

  /* Image style */
  &.is-style-d-block-d-md-none {
    display: block !important;
    @media (min-width: 48rem) {
      display: none !important
    }
  }

  /* fixes for issues with the resizer and visual positioning in the editor: */
  & .aligncenter,
  & .alignleft,
  & .alignright,
  &.aligncenter,
  &.alignleft,
  &.alignright {
    & > figcaption {
      display: block;
    }
  }

  &.aligncenter > .components-resizable-box__container,
  & .aligncenter > .components-resizable-box__container {
    /* fixes image not appearing in the correct place */
    margin-right: auto !important;
    margin-left: auto !important;
  }

  &.alignleft > .components-resizable-box__container,
  & .alignleft > .components-resizable-box__container {
    /* fixes image not appearing in the correct place */
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  &.alignright > .components-resizable-box__container,
  & .alignright > .components-resizable-box__container {
    /* fixes image not appearing in the correct place */
    margin-right: 0 !important;
    margin-left: auto !important;
  }
}

/* endregion Image Blocks */

/* region =============================================== Getwid Blocks */

.wp-block-getwid-images-slider .slick-slider {
  --slider-max-width: calc(
    /* @formatter:off */
    100% - (
      /* x2 === one button on each side */
      ( var(--nav-arrow-size) + var(--nav-padding-size) ) * 2
    )
    /* @formatter:on */
  );
  --nav-arrow-size: 1.25rem;
  --nav-padding-size: 2rem; /* total padding, not each side */
  max-width: var(--slider-max-width) !important;
  margin: 0 auto;

  @media (min-width: 48rem) {
    --nav-padding-size: 3rem;
  }

  @media (min-width: 48rem) {
    --nav-padding-size: 4rem;
  }

  /* Slider styles to attain some consistency with Point 6 block sliders. */
  & .slick-list {
    border-radius: 1.5625rem;
  }

  & .slick-slide {
    overflow: hidden;
    height: auto;
    border-radius: 1.5625rem;
    /* -- disabled because slick does not correctly handle the overflow state from slide 1 to ending slide: box-shadow: 0px 0px 35px #003c6b4d; */
    transition: all .3s;
    /* -- disabled because slick does not correctly handle the overflow state from slide 1 to ending slide: transform: scale(0.9); */

    &.slick-active {
      margin: 0;
      /* -- disabled because slick does not correctly handle the overflow state from slide 1 to ending slide: transform: scale(0.1); */
    }
  }

  & .slick-dots {
    position: static;
    height: 0.765rem;
    margin-top: 3.125rem;
    background-color: inherit;

    & button::before,
    & button,
    & li {
      position: static;
      width: 0.765rem;
      height: 0.765rem;
      padding: 0;
      background-color: inherit;
    }
    & button::before {
      content: " ";
      display: flex;
      width: 0.765rem;
      height: 0.765rem;
      border-radius: 50%;
      background-color: currentcolor;
    }
  }

  & .slick-arrow {
    display: flex;
    position: absolute;
    top: 0;
    align-items: center;
    width: max(
      calc(
        /* @formatter:off */
        (100vw - var(--slider-max-width, 100%)) / 2 +
        (var(--nav-arrow-size) + var(--nav-padding-size)) /* button width */
        /* @formatter:on */
      ),
      10rem
    );
    height: 100%;
    margin: 0;
    border-radius: 1.5rem;
    background-color: #fefeff01;
    color: transparent !important;
    transition: var(--transition);
    transform: none;

    &::before {
      display: flex;
      align-items: center;
      padding: calc(var(--nav-padding-size, 2.75rem) / 2);
      font-size: var(--nav-arrow-size, 1.25rem) !important;
    }

    &.slick-prev {
      right: 100%;
      left: auto;
      justify-content: end;
    }

    &.slick-next {
      right: auto;
      left: 100%;
    }
  }
}

/* endregion Getwid Blocks */

/* endregion Blocks */


/* region /////////////////////////////////////////////////////////// Fancybox */

.fancybox__container {
  transition-duration: 0.4s;
}

.fancybox__track {
  margin-left: 0;
}

html.with-fancybox {
  & body.hide-scrollbar {
    overflow: auto !important;
    width: 100%;
    margin-right: 0;
    overscroll-behavior-y: auto;
  }

  & body.hide-scrollbar.fancybox-show {
    overflow: hidden !important;
    width: auto;
    margin-right: calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));
    overscroll-behavior-y: none;
  }
}

/* ============================================================ */
/* region Podcast Player in modal */
/* ============================================================ */

.modal__content,
.fancybox-show {
  & .pp-podcast {
    --max-height: clamp(
      10rem,
      calc(var(--max-dvh, 80dvh) - 3rem),
      45rem
    );
    --max-dvh: 80dvh;
    position: relative;
    overflow: auto;
    max-height: var(--max-height);
  }

  & .pp-podcast {
    transition-delay: 0.01s !important;
    transition-duration: 0.25s !important;
    transition-property: left, top !important;
    transition-timing-function: ease-in-out !important;

    .ppjs__img-wrapper {
      &,
      & * {
        --size: min(40vh, 40vw);
        max-width: var(--size);
        max-height: var(--size);

        @media (max-width: 48rem) {
          margin-right: auto;
          margin-left: auto;
        }
      }
    }

    @media (min-width: 0rem) {
      --max-dvh: 85dvh;
      top: calc(var(--wp--preset--spacing--75) * -1.125);
      left: -1.625rem;

      @media (min-height: 30rem) {
        top: calc(var(--wp--preset--spacing--75) * -1);
      }
      @media (min-height: 50rem) {
        top: calc(var(--wp--preset--spacing--75) * -0.875);
      }
      @media (min-height: 51rem) {
        top: calc(var(--wp--preset--spacing--75) * -0.75);
      }
      @media (min-height: 52rem) {
        top: calc(var(--wp--preset--spacing--75) * -0.5);
      }
      @media (min-height: 53rem) {
        top: -1.625rem;
      }
    }

    @media (min-width: 36rem) {
      --max-dvh: 85dvh;
      top: calc(var(--wp--preset--spacing--75) * -1.25);
      left: -3rem;
      &:has(.episode-single[style*="block"]) {
        /* not needed */
      }

      @media (min-height: 30rem) {
        top: calc(var(--wp--preset--spacing--75) * -1.25);
      }
      @media (min-height: 50rem) {
        top: calc(var(--wp--preset--spacing--75) * -1.125);
      }
      @media (min-height: 52rem) {
        top: calc(var(--wp--preset--spacing--75) * -1);
      }
      @media (min-height: 54rem) {
        top: calc(var(--wp--preset--spacing--75) * -0.75);
      }
      @media (min-height: 56rem) {
        top: calc(var(--wp--preset--spacing--75) * -0.5);
      }
      @media (min-height: 60rem) {
        top: -3rem;
      }
    }

    @media (min-width: 48rem) {
      top: calc(var(--wp--preset--spacing--75) * -1.5);
      left: 0;

      &:has(.episode-single[style*="block"]) {
        /* when the description is openned fully */
        top: calc(var(--wp--preset--spacing--75) * -1.5);
      }

      @media (min-height: 40rem) {
        top: calc(var(--wp--preset--spacing--75) * -1.325);
      }
      @media (min-height: 43rem) {
        top: calc(var(--wp--preset--spacing--75) * -1.25);
      }
      @media (min-height: 46rem) {
        top: calc(var(--wp--preset--spacing--75) * -0.75);
      }
      @media (min-height: 50rem) {
        top: -3rem;
      }
    }

    @media (min-width: 62rem) {
      top: calc(var(--wp--preset--spacing--75) * -1.75);

      &:has(.episode-single[style*="block"]) {
        /* when the description is openned fully */
        top: calc(var(--wp--preset--spacing--75) * -1.75);
      }

      @media (min-height: 30rem) {
        top: calc(var(--wp--preset--spacing--75) * -1.75);
      }
      @media (min-height: 40rem) {
        top: calc(var(--wp--preset--spacing--75) * -1.325);
      }
      @media (min-height: 43rem) {
        top: calc(var(--wp--preset--spacing--75) * -1.25);
      }
      @media (min-height: 46rem) {
        top: calc(var(--wp--preset--spacing--75) * -0.75);
      }
      @media (min-height: 50rem) {
        top: -3rem;
      }
    }
  }
}

/* endregion Podcast Player in modal */
/* ============================================================ */

/* endregion Fancybox */


/* region /////////////////////////////////////////////////////////// Animations */

.animation--bounce--hover {
  text-decoration-color: transparent;

  &:hover,
  &:focus,
  &:focus-visible {
    animation: bounce 2s ease infinite;
    text-decoration-color: transparent;
  }
  @media (prefers-reduced-motion) {
    opacity: 0.9;
  }
}

@keyframes bounce {
  10% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(-15%);
  }
  30% {
    transform: translateY(0%);
  }
  35% {
    transform: translateY(-7%);
  }
  37% {
    transform: translateY(0%);
  }
  39% {
    transform: translateY(-3%);
  }
  40% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion) {
  @keyframes bounce {
    /* disable on reduced-motion devices */
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(0);
    }
  }
}

/* endregion Animations */