:root {
  --check-icon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"%3E%3Ccircle cx="10" cy="10" r="10" fill="rgb(193,226,51)"/%3E%3Cpath d="m3.7 11.3 3.8 3.5 8.7-8.6" stroke="%2300182B" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7px"/%3E%3C/svg%3E');
  --chip-padding: 0.2em 0.75em 0.15em;
}

/* hide js */

.js .hide--js {
  display: none;
}

/* typography */

.jumbo, .h1 {
  text-wrap: pretty;
}

/* icons */

a .icon-external {
  display: inline-block;
  padding: 2px;
  margin: 0 0 0.25em 0.25em;
}

/* nav */

.nav {
  @media (max-width: 1230px) {
    --nav-spacing-x: clamp(1.75em, 0.01rem + 3vw, var(--nav-spacing-x\@lg,2.75em))!important;
  }

  & .navbar-actions {
    .button {
      white-space: nowrap;
    
      @media (max-width: 1230px) {
        --btn-spacing-x: 1.2rem;
      }
    }

    .button--unstyled {
      position: relative;
      color: var(--nav-font-color);
      font-family: var(--nav-font-family);
      font-size: 1em;
      font-weight: var(--nav-font-weight);
      padding: 3px calc(var(--nav-spacing-x) / 2);
      text-decoration: none;

      &:is(:hover, :focus) {
        color: var(--nav-font-color);
        text-decoration: none;
      }

      &::after {
        background-color: currentColor;
        bottom: -3px;
        content: '';
        display: block;
        height: 2px;
        left: calc(var(--nav-spacing-x) / 2);
        position: absolute;
        transform: scaleX(0);
        transition: 0.15s transform;
        width: calc(100% - var(--nav-spacing-x));
      }

      &:is(:hover, :focus)::after {
        transform: scaleX(1);
      }
    }
  }
}

/* megamenu */

body .megamenu {
  max-width: calc(var(--site-width) - var(--site-gutter) - var(--site-gutter));
  margin-inline: var(--site-gutter-calculated);
  border-radius: var(--card-radius);
  overflow: hidden;
  
  & .dnd-section,
  & .dnd-section > .row-fluid {
    padding: 0;
  }
}

/* eyebrow text */

.text-eyebrow .chip {
  --chip-background: var(--color-tertiary);
  --chip-foreground: var(--color-tertiary-contrast);
  --font-size: 14px;
  box-shadow: none;
  display: inline-block;
  font: var(--font-style) var(--font-weight) var(--font-size) / var(--line-height) var(--font-family);
  padding: 0.2em 0.75em 0.15em;
}

/* chips */

.chip {
  --chip-background: var(--color-tertiary);
  --chip-foreground: var(--color-tertiary-contrast);
  --font-size: 14px;
  box-shadow: none;
  padding: var(--chip-padding);
}

.breadcrumbs.chip {
  --chip-background: var(--color-tertiary), .4;
  --chip-padding: .4em 1em .45em;
}

/* buttons */

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 105deg;
  inherits: false;
}

@keyframes rotation {
  0% {
    --gradient-angle: 105deg;
  }
  100% {
    --gradient-angle: 465deg;
  }
}

.button--primary:not(.button--unstyled) {
  --btn-glow-width: 4px;
  --btn-accent-color: var(--color-black);
  --btn-accent-contrast-color: var(--color-white);
  animation: rotation 2.5s linear infinite paused;
  background-image: linear-gradient(rgb(var(--btn-accent-color)), rgb(var(--btn-accent-color))),
    conic-gradient(from var(--gradient-angle), #0074ff, #5bc9ff, #9ddfff, #89d8ff, #0074ff);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border: var(--btn-glow-width) solid transparent;
  box-shadow: 0 10px 6px -5px inset rgba(137, 216, 255, 0.56), 0 0 1rem rgba(89, 216, 255, 0);
  padding-block: calc(var(--btn-spacing-y) - (var(--btn-glow-width) / 2));
  position: relative;
  transition: all 0.2s ease-in-out;

  &:hover,
  &[hovering] {
    animation-play-state: running;
    box-shadow: 0 10px 6px -5px inset rgba(137, 216, 255, 0.56), 0 0 2rem rgba(89, 216, 255, 0.75);
    outline: none;
  }

  &.button--outlined {
    background-image: linear-gradient(rgb(var(--color-background)), rgb(var(--color-background))),
      conic-gradient(from var(--gradient-angle), #0074ff, #5bc9ff, #9ddfff, #89d8ff, #0074ff);

    &:hover,
    &[hovering] {
      box-shadow: 0 0 2rem rgba(89, 216, 255, 0.75);
      color: rgb(var(--btn-accent-color));
    }
  }
}

/* media border util classes */

.media-border {
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(145deg, rgb(0, 43, 119) 4.44%, rgb(var(--color-primary)) 34.56%, rgb(var(--color-tertiary)) 82.98%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border: 0.8rem solid transparent;
  border-radius: var(--media-radius);

  & .adv-img__inner,
  & .adv-img__picture,
  & .adv-img__image,
  & img,
  & video {
    border-radius: calc(var(--media-radius) * 0.75);
  }
}

.hs_cos_wrapper_type_module:has(>.border-glass),
.media-border--glass {
  background-image: linear-gradient(transparent, transparent),
    linear-gradient(
      145deg,
      rgb(var(--color-light), 0.2) 4.44%,
      rgb(var(--color-primary), 0.2) 34.56%,
      rgb(var(--color-tertiary), 0.2) 82.98%
    );
  backdrop-filter: blur(5px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.2);
}

.hs_cos_wrapper_type_module:has(>.border-glass) {
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border: 0.8rem solid transparent;
  border-radius: calc(var(--card-radius) * 1.2);
}

/* adv image */

.adv-img:has(a) {
  tranform-origin: center center;
  transition: all 0.2s ease-in-out;
  
  &:hover,
  &:has(a[hovering]),
  &:has(a:focus-visible) {
    box-shadow: 0 0 1.5em rgb(137, 216, 255);
    transform: scale(1.03);

    &.media-border--glass {
      box-shadow: box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.2), 0 0 1.5em rgb(137, 216, 255);
    }
  }

  & a:hover {
    opacity: 1;
  }
}

/* cards and cards modifier classes */

.cards--alternate .card:nth-child(even) {
  --background: var(--theme-black-background);
  --color-background-base: var(--theme-black-background-base);
  --color-accent: var(--theme-black-accent);
  --color-foreground: var(--theme-black-foreground);

  &:is(:hover, :focus) {
    --background: var(--theme-dark-background);
    --color-background-base: var(--theme-dark-background-base);
    --color-accent: var(--theme-dark-accent);
    --color-foreground: var(--theme-dark-foreground);
  }

  & .card__image {
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    margin-block: var(--card-padding) calc(var(--card-padding) * -1);
    order: 100;
  }
}

.cards--checklist .card__text ul {
  margin-bottom: 1.5em;
  padding-left: 0;
}

.cards--checklist .card__text li {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  list-style: none;
}

.cards--checklist .card__text li::before {
  background-image: var(--check-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: '';
  flex-shrink: 0;
  height: var(--check-icon-size, 1em);
  width: var(--check-icon-size, 1em);

  margin-top: calc(((var(--line-height, 1)) * var(--font-size, 1em) - var(--check-icon-size, 1em)) / 2);
}

.cards {
  --icon-size: 40px;
}

.card__image--padded {
  border-radius: calc(var(--card-radius) * 0.5);
}

/* cta card */

body .cta-card:not(.ct-black,.ct-dark) {
  --padding: clamp(1rem, 0.01rem + 4vw, 5rem);
  padding: var(--padding) var(--padding) calc(var(--padding) + 1.5rem);

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1.5rem;
    inset: auto 0 0;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
    pointer-events: none;
    background: linear-gradient(158deg, #9ddfff 0, #0074ff 22%, #89d8ff 57%, #94cdff 87%, #0074ff 100%);
  }
}

/* dnd columns */

.dnd-section:has(.mh-section) > .row-fluid > .dnd-column[class*='background'] {
  border-radius: var(--column-radius, var(--card-radius, 0));
  box-shadow: var(--column-shadow, var(--card-shadow, none));
  overflow: hidden; /* this could cause issues with section extra settings, monitor this */
}

/* blog dnd header */

.blog-header-dnd .hs-menu-flow-horizontal ul {
  display: flex;
  gap: clamp(1rem, 0.01rem + 8vw, 2rem);
  overflow-x: auto;

  & .hs-menu-depth-1:before {
    display: none;
  }

  & li > a {
    padding: 0.75em 0;
  }
}

/* blog listings */

body .blog-posts--card {
  --card-padding-sm: 0.875rem;
  --card-padding-lg: 0.875rem;
}

body .blog-post--card .blog-post__image-wrapper {
  margin: 0 0 var(--bp-element-spacing-y);
  border-radius: calc((var(--card-radius) + var(--card-padding)) / 2);
}

/* blog hero */


.blog-hero--list:not(.blog-hero--overlapped),
.blog-hero--list-reverse:not(.blog-hero--overlapped) {
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: var(--card-shadow);

  @media (max-width: 767px) {
    --color-background-base: var(--theme-black-background-base);
    --color-foreground: var(--theme-black-foreground);
    --color-accent: var(--theme-black-accent);
    align-content: end;
    background: var(--theme-black-background);
    color: rgb(var(--theme-black-foreground));
    min-height: clamp(350px, 0.01rem + 40vw, 400px);
    padding: 1rem;
    position: relative;

    &::before {
      height: 100%;
    }

    & .blog-hero__teaser {
      display: none;
    }

    & .blog-hero__image-wrapper  {
      height: 100%;
      margin: 0;
      position: absolute;
      width: 100%;

      &::before {
        background: rgb(var(--color-black), 0.75);
        content: '';
        height: 100%;
        inset: 0;
        position: absolute;
        width: 100%;
      }

      & img {
        aspect-ratio: auto;
        border-radius: 0;
        height: 100%;
        width: 100%;
      }
    }

    & .button {
      display: none;
    }
  }

  @media (min-width: 768px) {
    --color-background-base: var(--theme-card-background-base);
    --color-foreground: var(--theme-card-foreground);
    --color-accent: var(--theme-card-accent);
    background: var(--theme-card-background);
    color: rgb(var(--theme-card-foreground));
    
    & img {
      aspect-ratio: var(--bh-media-aspect-ratio, auto);
      border-radius: 0;
      height: 100%;
      width: 100%;
    }
  }
}

/* blog post */

body .post-header {
  --post-header-container-width: 1000px;
}

body .post__container {
  max-width: 1000px!important;
}

/* for markup import with dupe class name as ours, e.g. "post__body" */
.post__body .post__body {
  padding-block: 1em;
}

/* filter utils */

.filter-grayscale {
  filter: grayscale(100%);
}

.filter-inverted {
  filter: invert(100%);
}

/* accordion */

.accordion {
  --accordion-gap: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--_gap, var(--accordion-gap));

  & .accordion__section {
    border-radius: var(--card-radius);
    overflow: hidden;
  }

  & .accordion__toggler,
  & .accordion__panel {
    padding-inline: var(--_toggler-padding-inline, 1.25rem);
  }
}

/* radio button group */

.radio-btn-group {
  background: rgb(var(--color-background-alt), 1);
  border: 1px solid rgb(var(--input-border-color), .5);
  border-radius: var(--btn-radius);
  display: inline-flex;
  gap: 1px;
  padding: 0.25rem;

  &:has(> :focus-visible) {
    outline: 2px solid rgb(var(--color-accent));
    outline-offset: 2px;
  }

  & label {
    border: var(--btn-border-width) solid transparent;
    border-radius: var(--btn-radius);
    color: rgb(var(--color-foreground));
    cursor: pointer;
    display: inline-block;
    font: var(--btn-font);
    margin: 0;
    padding: calc(var(--btn-spacing-y) - 0.25rem) calc(var(--btn-spacing-x) - 0.25rem);
  
    &:is(:hover, :focus) {
      border-color: rgb(var(--color-accent), .5);
      color: rgb(var(--color-accent));
    }
  }

  & input:checked + label {
    background: rgb(var(--color-accent));
    border-color: rgb(var(--color-accent), 1);
    /* box-shadow: 0 3px 6px -3px rgb(var(--color-foreground), .5); */
    color: rgb(var(--color-accent-contrast));
  }
}

.radio-btn-group--small {
  & label {
    font-size: var(--btn-sm-font-size, 0.85rem);
    padding: calc(var(--btn-sm-spacing-y) - 0.25rem) calc(var(--btn-sm-spacing-x) - 0.25rem);
  }
}

/* events */

.card .event__image img {
  border-radius: calc(var(--card-radius) * 0.25);
  object-fit: cover;
}