html:has(body.submenu-opened),
html:has(body.language-switcher-opened),
html:has(body.mobile-menu-opened) {
  overflow: hidden !important;

  .main-content {
    filter: blur(4px);
  }
}

.header-block {
  --line-height: calc(var(--baseline) * .25);
  --header-padding: 3;
  --display-mobile: flex;
  --display-desktop: none;
  --logo-margin: 0;
  --primary-pad-top: 0;
  --primary-pad-bottom: 0;
  --primary-gap-y: 0;
  --primary-gap-x: 0;
  --secondary-pad-top: 0;
  --secondary-pad-bottom: 0;
  --secondary-gap-y: 0;
  --secondary-gap-x: 0;

  @media screen and (min-width: 480px) {}
  @media screen and (min-width: 960px) {
    --logo-margin: 5;
    --primary-pad-top: 2;
    --primary-pad-bottom: 2;
    --primary-gap-y: 0;
    --primary-gap-x: 3;
    --secondary-pad-top: 1;
    --secondary-pad-bottom: 1;
    --secondary-gap-y: 0;
    --secondary-gap-x: 2;
  }
  @media screen and (min-width: 1040px) {}
  @media screen and (min-width: 1181px) {}

  @media (hover: hover) and (pointer: fine) and (min-width: 1440px) {
    --display-desktop: flex;
    --display-mobile: none;
  }

  position: fixed;
  top: 0;
  z-index: 5;
  transition: all .4s;

  .page-scrolled & {
    transform: translateY( calc( -1 * (100%) ) );
  }
  .submenu-opened &,
  .page-not-on-top & {
    background-color: var(--color-white);
  }

  .header-mobile {
    display: var(--display-mobile);
    flex-direction: column;

    .inner-wrapper {
      justify-content: space-between;
      align-items: center;
      max-width: unset;
      padding-top: calc(var(--baseline) * var(--header-padding));
      padding-bottom: calc(var(--baseline) * var(--header-padding));
    }

    .mobile-menu-toggle {
      margin-left: auto;
      position: relative;
      border: 0 none;
      border-radius: 50%;
      width: calc(var(--baseline) * 3);
      height: calc(var(--baseline) * 3);
      background-color: var(--transparent);
      padding: 0;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      transition: all .4s;

      &::before,
      &::after {
        content: '';
        display: block;
        width: calc(var(--baseline) * 3);
        height: var(--line-height);
        background-color: var(--primary-500);
        position: absolute;
        left: 0;
        transform-origin: 50%;
        transition: all .4s;
      }

      &::before {
        transform: translateY( calc(-2 * (100% + var(--line-height)) ) );
      }
      &::after {
        transform: translateY( calc(2 * (100% + var(--line-height)) ) );
      }

      .line {
        display: block;
        width: calc(var(--baseline) * 2);
        height: var(--line-height);
        background-color: var(--primary-500);
        transition: all .4s;
      }

      .mobile-menu-opened & {

        &::before,
        &::after {}
        &::before {
          transform: translateY(0) rotate(45deg);
        }
        &::after {
          transform: translateY(0) rotate(-45deg);
        }

        .line {
          background-color: var(--color-transparent);
        }
      }
    }

    .menu-mobile {
      opacity: 0;
      pointer-events: none;
      height: 0;
      overflow: hidden;
      scrollbar-width: none;

      transition: all .4s;

      .button {
        border-radius: 0;
      }

      .mobile-menu-opened & {
        height: calc(100dvh - var(--header-height));
        overflow: auto;
        opacity: 1;
        pointer-events: all;

        &:has(.active) {
          overflow: hidden;
        }
      }
    }

    .primary-navigation {
      padding-top: calc(var(--baseline) * 2);
    }
    .primary-menu {
      margin: 0;

      .menu-item {
        margin: 0;

        .menu-voice {
          justify-content: space-between;
          padding-top: calc(var(--baseline) * 2);
          padding-bottom: calc(var(--baseline) * 2);
        }

        &:not(:first-child) {
          border-top: 1px solid var(--carbon-black-op-40);
        }
      }
    }

    .secondary-navigation {
      padding-top: calc(var(--baseline) * 8);
      padding-bottom: calc(var(--baseline) * 6);
    }
    .secondary-menu {
      flex-direction: column;
      gap: calc(var(--baseline) * 2);
      margin: 0;

      .menu-item {
        margin: 0;

        &:first-child {
          border-top: 1px solid var(--carbon-black-op-40);
          padding-top: calc(var(--baseline) * 2);
        }
      }
    }
  }
  .header-desktop {
    display: var(--display-desktop);
    flex-direction: column;
    max-width: calc( 100% - (var(--column-14) * 1) );

    .header-logo {
      margin-right: calc(var(--baseline) * var(--logo-margin));
    }

    .primary-row {
      align-items: center;
      padding-top: calc(var(--baseline) * var(--primary-pad-top));
      padding-bottom: calc(var(--baseline) * var(--primary-pad-bottom));
    }
    .secondary-row {
      align-items: center;
      padding-top: calc(var(--baseline) * var(--secondary-pad-top));
      padding-bottom: calc(var(--baseline) * var(--secondary-pad-bottom));
    }

    .primary-menu,
    .secondary-menu {
      margin: 0;
    }

    .primary-navigation {
      margin-right: auto;
    }
    .primary-menu {
      gap: calc(var(--baseline) * var(--primary-gap-y)) calc(var(--baseline) * var(--primary-gap-x));
    }

    .secondary-navigation {}
    .secondary-menu {
      justify-content: flex-end;
      gap: calc(var(--baseline) * var(--secondary-gap-y)) calc(var(--baseline) * var(--secondary-gap-x));
    }

    .menu-item {
      margin: 0;
      width: fit-content;

      .menu-voice {
        @media (hover: hover) and (pointer: fine) {
          &:hover {
            .link-icon {
              transform: none;
            }
          }

          &.active,
          &.active:hover {
            .link-icon {
              transform: rotate(180deg);
            }
          }
        }
      }
    }

  }
  .cta-wrapper {
    .hs-web-interactive-inline {
      opacity: 0;

      a {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .cta-wrapper:has(:hover) {
      .cta-button {
        border-color: var(--primary-400);
        background-color: var(--primary-400);
      }
    }
  }
}

.submenus {
  --display-mobile: block;
  --display-desktop: none;
  --block-pad-top: 4;
  --block-pad-bottom: 7;
  --header-radius: 1;
  --header-padding: 3;
  --heading-pad-top: 0;
  --heading-pad-bottom: 0;
  --abstract-pad-top: 3;
  --abstract-pad-bottom: 0;
  --actions-pad-top: 1;
  --actions-pad-bottom: 0;
  --item-pad-bottom: .5;
  --voice-pad-top: 1;
  --voice-pad-bottom: 1;

  @media screen and (min-width: 480px) {}
  @media screen and (min-width: 960px) {}
  @media screen and (min-width: 1040px) {}
  @media screen and (min-width: 1181px) {}

  @media (hover: hover) and (pointer: fine) and (min-width: 1440px) {
    --display-desktop: block;
    --display-mobile: none;
    --abstract-pad-bottom: 4;
  }

  &.submenus-mobile {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 4;
    display: var(--display-mobile);

    .submenu {
      z-index: 1;
      position: relative;
      top: 0;

      display: none;
      pointer-events: none;

      &.active {
        display: block;
        pointer-events: all;
      }

      .inner-wrapper {
        position: relative;
        margin: 0 auto;
        // max-width: calc(100% - var(--column-14) * 2);
        height: calc(100dvh - var(--header-height));
        padding-top: 0;
        overflow: auto;
        scrollbar-width: none;
      }
    }

    .submenu-column {
      margin: 0;
    }
    .submenu-item {
      margin: 0;
    }

    .submenu-action {
      padding-top: calc(var(--baseline) * 2);
      padding-bottom: calc(var(--baseline) * 2);
    }
    .submenu-voice {
      padding-top: calc(var(--baseline) * 1);
      padding-bottom: calc(var(--baseline) * 1);
    }

    .submenu-close {
      position: sticky;
      top: 0;
      z-index: 2;
      justify-content: center;
      padding-top: calc(var(--baseline) * 2);
      padding-bottom: calc(var(--baseline) * 2);
      background: var(--grey-50);

      .link-icon {
        transform: rotate(180deg);
      }
    }
  }

  &.submenus-desktop {
    position: fixed;
    top: 0;
    pointer-events: none;
    z-index: 4;
    display: var(--display-desktop);

    .submenu {
      position: absolute;
      z-index: 1;
      padding-top: calc(var(--header-height) + (var(--baseline) * var(--block-pad-top)));
      padding-bottom: calc(var(--baseline) * var(--block-pad-bottom));
      opacity: 0;
      pointer-events: none;
      background-color: var(--color-white);

      transition: all .4s;

      &.active {
        opacity: 1;
        pointer-events: all;
      }

      .inner-wrapper {
        display: grid;
        gap: calc(var(--baseline) * 4);
        grid-template-columns: repeat(5, 1fr);
        max-width: calc( 100% - (var(--column-14) * 1) );

        .submenu-wrapper,
        .clinics-wrapper {
          grid-column: span 4;
          display: grid;
          gap: calc(var(--baseline) * 4);
          grid-template-columns: repeat(4, 1fr);

          .submenu-item {
            padding-right: calc(var(--baseline) * 4);
          }
        }
        .clinics-wrapper {

          &:not(.active) {
            display: none;
          }
        }
      }

      .submenu-column,
      .submenu-item {
        margin: 0;
      }
      .submenu-column {
        &:not(:last-child) {
          border-right: 1px solid var(--carbon-black-op-30);
        }
      }
      .submenu-header {
        display: flex;
        flex-direction: column;
        border-radius: calc(var(--baseline) * var(--header-radius));
        padding: calc(var(--baseline) * var(--header-padding));
        background-color: var(--beige-50);
      }
      .submenu-heading {
        padding-top: calc(var(--baseline) * var(--heading-pad-top));
        padding-bottom: calc(var(--baseline) * var(--heading-pad-bottom));
      }
      .submenu-abstract {
        padding-top: calc(var(--baseline) * var(--abstract-pad-top));
        padding-bottom: calc(var(--baseline) * var(--abstract-pad-bottom));
      }
      .submenu-actions {
        margin-top: auto;
        border-top: 1px solid var(--carbon-black-op-30);
        padding-top: calc(var(--baseline) * var(--actions-pad-top));
        padding-bottom: calc(var(--baseline) * var(--actions-pad-bottom));
      }
      .submenu-action {}

      .submenu-item {
        &:not(:last-child) {
          margin-bottom: calc(var(--baseline) * var(--item-pad-bottom));
        }
      }

      .clinics-submenu-header {
        border-radius: 0;
        border-right: 1px solid var(--carbon-black-op-30);
        padding-top: 0;
        padding-bottom: 0;
        background-color: var(--transparent);
      }
      .submenu-voice,
      .region-voice,
      .clinic-voice {
        justify-content: flex-start;
        border-color: var(--transparent);
        padding: calc(var(--baseline) * 2);
        color: var(--color-black);
        background-color: var(--transparent);

        &.current,
        &.active {
          border-color: var(--grey-50);
          color: var(--primary-500);
          background-color: var(--grey-50);
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            border-color: var(--grey-50);
            color: var(--primary-500);
            background-color: var(--grey-50);
          }
        }

      }
      .region-voice {
        &:last-of-type {
          margin-bottom: calc(var(--baseline) * 4);
        }
      }
      .clinic-voice {
        .button-label {
          em {
            font-style: normal;
            font-weight: var(--weight-normal)
          }
        }
      }

      .submenu-voice {
        padding-top: calc(var(--baseline) * var(--voice-pad-top));
        padding-bottom: calc(var(--baseline) * var(--voice-pad-bottom));
      }
    }
  }
}