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

  .main-content .inner-column {
    pointer-events: none;
  }

  .main-content {
    opacity: .75;
    filter: grayscale(1);
  }
}

.header-block {
  --pad-y: 2;
  --pad-x: calc(var(--margin) - ( var(--scrollbar-size) / 2 ));

  @media screen and (min-width: 768px) {
    --pad-y: 4;
  }

  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100vw;
  padding: calc(var(--baseline) * var(--pad-y)) var(--pad-x) 0;
  transition: transform .4s;
  background-image: linear-gradient(180deg,
    var(--color-white) 0%,
    var(--color-white) calc(var(--baseline) * var(--pad-y)),
    var(--color-transparent) calc(var(--baseline) * var(--pad-y)),
    var(--color-transparent) 100%
  );

  .page-scrolled & {
    transform: translateY( calc( -1 * (100% + var(--border-radius)) ) );
  }
}
.header-block-inner-wrapper {
  margin: 0;
  padding: 0;
}
.header-block-logo {
  --wrapper-height: 8;
  --wrapper-width: 13;
  --logo-width: 8rem;
  --pad-vert: 0;
  --pad-hori: 0;

  @media screen and (min-width: 768px) {
    --wrapper-height: 10;
    --wrapper-width: 18;
    --logo-width: 10rem;
  }

  @media screen and (min-width: 1180px) {
    --wrapper-height: 13;
    --wrapper-width: 26;
    --logo-width: 13rem;
    --pad-vert: 3;
    --pad-hori: 2;
  }

  height: calc(var(--baseline) * var(--wrapper-height));
  width: calc(var(--baseline) * var(--wrapper-width));

  .main-logo-figure {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: calc(var(--baseline) * var(--pad-vert)) calc(var(--gutter) * var(--pad-hori));
  }

  .main-logo-img {
    max-width: var(--logo-width);
  }
}
.navigation-wrapper {
  display: none;

  @media screen and (min-width: 1440px) {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 var(--gutter) 0 calc( (var(--baseline) * 26) + (var(--gutter) * 2) );
    width: calc(100% - (var(--gutter) * 2));
    height: calc(var(--baseline) * 9);
    align-content: center;
    align-items: center;
    background-color: var(--color-transparent);
    backdrop-filter: blur(0);
    transition: background-color .4s, backdrop-filter .4s;

    .page-not-on-top &,
    &:hover {
      background-color: var(--color-grey-alpha);
      backdrop-filter: blur(1rem);

      .menu-item {
        filter: brightness(1) invert(0);
      }
    }
    .page-internal & {
      .menu-item {
        filter: brightness(1) invert(0);
      }
    }

    .menu-item {
      filter: brightness(0) invert(1);
      transition: filter .4s;

      .button {
        height: calc(var(--border-radius-small) * 3);
        align-items: center;
      }

      &:has(.language-switcher) {
        width: calc(var(--border-radius-small) * 3);
        height: calc(var(--border-radius-small) * 3);
      }
    }

    .navigation {
      margin: 0;
      padding: 0;

      .menu,
      .menu-item {
        align-items: center;
        margin: 0;
      }
      .menu-item + .menu-item {
        margin-left: var(--gutter);
      }
    }
    .main-navigation {
      margin-right: auto;
    }
    .services-navigation {
      margin-left: auto;
    }
  }
  @media only screen and (min-width: 1440px) and (max-width: 1525px) {
    padding: 0 0 0 calc( (var(--baseline) * 25) + (var(--gutter) * 2) );
    .navigation .menu {
      gap: 0.9rem;
      .menu-item + .menu-item {
        margin-left: 0;
      }
    }
  }
}
.submenus {
  display: none;

  @media screen and (min-width: 1440px) {
    display: block;
    z-index: 3;
    position: fixed;
    top: calc( var(--baseline) * 18 );
    margin: 0 var(--margin);
    margin-right: var(--margin);
    width: calc(100vw - (2 * var(--margin)));
    pointer-events: none;

    ul,
    li {
      margin: 0;
    }

    .submenu-navigation {
      left: 50%;
      transform: translateX(-50%);
      padding: calc( var(--baseline) * 6 ) 0;
      background-color: var(--color-grey-alpha);
      backdrop-filter: blur(1rem);
      opacity: 0;
      transition: opacity .4s;

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

      & > * {
        border-radius: 0;
      }
    }

    .submenu-header,
    .submenu-voices,
    .submenu-item {
      padding-bottom: calc( var(--baseline) * 3 );
    }

    .submenu-header {
      padding: 0 calc( var(--column) + var(--gutter) );
    }
    .submenu-voices {
      padding-right:  calc( var(--column) );
    }

    .submenu-abstract,
    .submenu-action {
      padding-top: calc( var(--baseline) * 2 );
    }

    .submenu-heading {}
    .submenu-abstract {}
    .submenu-action {}

    .submenu-highlights {
      border-top: 1px solid var(--color-grey-500);
      padding: calc( var(--baseline) * 4 ) calc( var(--column) ) 0;
    }

    .submenu-highlight-item {
      padding-top: calc( var(--baseline) * 2 );
    }
    .submenu-highlight-voice {
      align-items: center;
      overflow: hidden;
      background-color: var(--color-white);

      &:hover {
        .submenu-highlight-img {
          transform: scale(1.1);
        }
      }
    }
    .submenu-highlight-figure {
      overflow: hidden;
      border-radius: 0;
    }
    .submenu-highlight-img {
      transform-origin: 50%;
      transform: scale(1);
      transition: transform .4s;
    }
    .submenu-highlight-abstract {}
  }
}

.mobile-menu-opener {
  --pad-y: 4;
  --pad-x: var(--margin);

  @media screen and (min-width: 768px) {
    --pad-y: 6;
  }

  @media screen and (min-width: 1440px) {
    display: none !important;
    pointer-events: none;
  }
  pointer-events: all;
  position: fixed;
  top: calc(var(--baseline) * var(--pad-y));
  right: calc(var(--pad-x) * 2);
  z-index: 5;

  .mobile-opener-inner-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-small);
    width: calc(var(--border-radius-small) * 2);
    height: calc(var(--border-radius-small) * 2);
    background-color: var(--color-white);
  }

  .mobile-menu-toggle {
    --bg: var(--color-orange-400);
    position: relative;
    border: 0 none;
    border-radius: 0;
    width: calc(2 * (var(--border-radius) / 3));
    height: .3rem;
    background-color: var(--bg);
    transition: background .4s;

    &::before,
    &::after {
      content: '';
      display: block;
      width: calc(2 * (var(--border-radius) / 3));
      height: .3rem;
      background-color: var(--bg);
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: 50%;
      transition: transform .4s;
    }

    &::before {
      transform: translateY( calc(-1 * (100% + .3rem) ) );
    }
    &::after {
      transform: translateY( calc(1 * (100% + .3rem) ) );
    }

    .mobile-menu-opened & {
      background-color: var(--color-transparent);

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

.mobile-menu {
  @media screen and (min-width: 1440px) {
    display: none !important;
  }

  display: none;

  .mobile-menu-opened & {
    display: block;
  }

  z-index: 3;
  height: 100dvh;
  width: 100dvw;
  padding-top: calc(var(--baseline) * 10);
  padding-bottom: calc(var(--baseline) * 5);
  background-color: var(--color-grey-alpha);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  overflow-x: hidden;
  overflow-y: auto;

  .mobile-menu-items {
    margin: 0;
  }
  .mobile-main-menu {}
  .mobile-services-menu {}
  .mobile-menu-item {
    margin: 0;
    padding-top: calc(var(--baseline) * 1);
    padding-bottom: calc(var(--baseline) * 1);
    border-bottom: 1px solid var(--color-grey);

    .voice-toogle {
      transform-origin: 50%;
      transition: transform .4s;
      transform: rotate(90deg);
    }

    &.opened {
      .voice-toogle {
        transform: rotate(-90deg);
      }
      .mobile-submenu {}
    }

    &.languages-list {
      padding-top: calc(var(--baseline) * 2);
      border-bottom: 0 none;
    }
  }
  .mobile-menu-voice {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
  .mobile-submenu {
    list-style: outside none;
    margin: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: height .4s, margin-top .4s;
  }
  .mobile-submenu-item {
    margin: calc(var(--baseline) * 1) 0 0;
  }
  .mobile-submenu-voice {}
}

.search-button {
  aspect-ratio: 1/1;
  padding: 0 0;
  justify-content: center;
  background: transparent;
  color: inherit;
  a:hover {
    color: var(--color-white);
    background: var(--color-black);
  }
  /* border-color: var(--color-white); */
}
.page-internal .search-button {
  /* border-color: var(--color-black);
  color: var(--color-black); */
}
:is(.navigation-wrapper):hover .search-button {
  filter: brightness(1) invert(0);
}
.language-switcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc(var(--border-radius-small) * 3);
  height: calc(var(--border-radius-small) * 3);
  border: 1px solid var(--color-black);
  border-radius: var(--border-radius);
  color: var(--color-black);
  background-color: var(--color-transparent);
  padding: 0 .9em;
  overflow: hidden;
  cursor: pointer;
  transition: height .4s, color .4s, background-color .4s;

  @media screen and (min-width: 1181px) {
    &:hover {
      color: var(--color-white);
      background-color: var(--color-black);
    }
  }

  .current-language {
    line-height: calc((var(--border-radius-small) * 3));
  }
  .languages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    top: calc(var(--border-radius-small) * 3);
    padding-bottom: calc(var(--baseline) * 2);
  }
  .language-switch {
    margin-top: calc(var(--baseline) * 2);
    color: var(--color-white);
    transition: color .4s;

    &.current {
      color: var(--color-orange-400);
      pointer-events: none;
      cursor: default;
    }

    @media screen and (min-width: 1181px) {
      &:hover {
        color: var(--color-orange-400);
      }
    }
  }
}

.mobile-language-switcher {
  .mobile-languages {}
  .mobile-language-switch {
    &.current {
      color: var(--color-orange-400);
    }

    & + .mobile-language-switch {
      margin-left: 1em;
    }
  }
}
@media screen and (max-width: 992px) {
  .search-button {
    aspect-ratio: unset;
  }
}