////
/// Header
////

.region-header {
  @include top-bottom(padding, rem-calc(20));
  position: relative;
  z-index: 2;
  @include breakpoint(medium) {
    @include top-bottom(padding, rem-calc(32));
  }

  body:not(.is-home-banner) & {
    border-bottom: 1px solid $color-gray-300;
    background-color: $color-white;
  }

  .content {
    @include content-width(default);
    display: flex;
    justify-content: space-between;
    align-items: center;

    @include breakpoint(small down) {
      justify-content: flex-end;
    }
  }

  .navigation-wrapper {
    .search-wrapper {
      @include breakpoint(medium) {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
      }
    }

    @include breakpoint(small down) {
      position: fixed;
      top: var(--gin-toolbar-y-offset, 0px);
      right: 0;
      display: flex;
      flex-direction: column;
      width: rem-calc(326);
      height: 100vh;
      max-width: 90vw;
      padding: rem-calc(152) rem-calc(32) rem-calc(32);
      background-color: $color-primary-600;
      color: $color-white;
      transform: translate3d(100%, 0, 0);
      z-index: z(menu, block);
      @include global-transition(transform);

      .block-themekit-language-switcher {
        grid-row: 1;
      }
    }

    @include breakpoint(medium) {
      display: grid;
      grid-template-columns: 1fr auto;
      row-gap: 8px;
      column-gap: 24px;

      .block-themekit-language-switcher {
        grid-column: 1 / span 2;
        grid-row: 1;
        margin-left: 24px;
      }

      .menu--main {
        grid-column: 1;
        grid-row: 2;
      }
    }

    @include breakpoint(large) {
      .block-themekit-language-switcher {
        margin-left: 0;
      }

      .menu--main {
        grid-column: 1;
        grid-row: 2;
      }
    }

    &.is-active {
      @include breakpoint(small down) {
        transform: translate3d(0, 0, 0);
      }
    }
  }

  .navigation-toggle {
    @include replace-text-with-icon(menu, rem-calc(24));
    cursor: pointer;
    @include breakpoint(medium) {
      display: none;
    }

    &[aria-expanded="true"] {
      @include replace-text-with-icon(close, rem-calc(24));
      z-index: z(menu, icon);
      color: $color-white;
    }

    body:has(.is-search-open) & {
      display: none;
    }
  }

  .block--system-branding-block {
    @include breakpoint(small down) {
      margin-right: auto;
    }

    a {
      display: inline-block;
      position: relative;

      @at-root body.logo-type--light & {
        img {
          opacity: 0;
        }

        &::after {
          position: absolute;
          top: 0;
          left: 0;
          width: rem-calc(128.8);
          height: rem-calc(32);
          background: url(../../../logo-white.svg) 0 0 no-repeat;
          background-size: contain;
          content: '';
          @include breakpoint(medium) {
            width: rem-calc(161);
            height: rem-calc(40);
            max-width: 100%;
          }
        }
      }
    }

    img {
      height: rem-calc(32);
      @include breakpoint(medium) {
        height: rem-calc(40);
      }
    }
  }
}
