
// Only add a border if it isn't followed by .id7-navigation
.id7-utility-masthead:not(:has(+ .id7-navigation)) when (@id7-gen-layout > 2024) {
  border-bottom: 1px solid @text-color;
}

.id7-masthead {

  .id7-masthead-contents > .clearfix {
      display: flex;
  }
  .id7-logo-column {
    flex: 1;
    // No search to the right? Add some margin.
    &:not(:has(+ .id7-search-column)) {
      margin-right: var(--w-ref-gridGutterWidth);
    }
  }

  .id7-search-column {
    max-width: 50%;
    padding-left: 0;
    padding-right: var(--w-ref-gridGutterWidth);

    @media (min-width: @screen-sm-min) {
      padding-left: var(--w-ref-gridGutterWidth);
      margin-left: 0;
      width: (100% / 3);
    }

    & when (@id7-gen-logos > 2024) {
      display: flex;
      align-items: center;
    }

    @media (max-width: @screen-sm-max) {
      .id7-search-box-container .input-lg {
        // Also make the placeholder text smaller on sm

        &::-moz-placeholder { // Firefox
          font-size: 1.15rem;
          line-height: 2.4em;
        }
        &::-webkit-input-placeholder {  // Safari and Chrome
          font-size: 1.15rem;
          line-height: 2.4em;
        }
      }
    }
  }

  .id7-search {
    flex: 1;
  }

  .id7-logo-row {
    display: flex;
    align-items: if(@id7-gen-logos = 2024, flex-end, center);
  }

  .id7-logo {
    flex-shrink: 0; // Don't shrink the logo
  }

  .id7-logo a {
    display: block;
    text-align: center;
    // Old logo
    & when (@id7-gen-logos = 2024) {
      padding: 0 var(--w-ref-gridGutterWidth);
    }
    // New layout
    & when (@id7-gen-layout > 2024) {
      padding: calc(0.5 * var(--w-ref-gridGutterWidth));
      margin: calc(0.5 * var(--w-ref-gridGutterWidth));
    }
    // New logo without new layout
    & when (@id7-gen-logos > 2024) and (@id7-gen-layout = 2024) {
      padding: calc(var(--w-ref-gridGutterWidth) / 2) var(--w-ref-gridGutterWidth);
    }

    img {
      aspect-ratio: @id7-masthead-logo-aspect;
      height: var(--w-sys-logoHeight);
    }
  }

  .id7-header-text {
    .header-colour(@text-color);
    .link-colour(@text-color);
    .link-decoration(underline);

    @media (min-width: @grid-float-breakpoint) {
      .link-decoration(none);
    }

    padding: 0 var(--w-ref-gridGutterWidth);
    position: relative;

    h1, .h1 {
      font-size: @id7-header-h1-font-size-xs;
      .text-overflow();

      @media (min-width: @grid-float-breakpoint) {
        font-size: @id7-header-h1-font-size-sm;
      }

      line-height: @id7-header-h1-height;
      margin: 0 0 0 -5px;
      padding: @id7-header-h1-padding-vertical 0 @id7-header-h1-padding-vertical 5px;
    }

    transform: translate3d(0, 0, 0); // ID-188

    &.affix {
      position: fixed;
      top: 0;
      padding: 0 var(--w-ref-gridGutterWidth);
      width: var(--w-sys-containerWidth);
      z-index: 10;
      background-color: white;

      &.headroom {
        transition: transform 100ms linear;
      }
      &.headroom--pinned {
        transform: translateY(0%);
        transform: translate3d(0, 0, 0) translateY(0%);
      }
      &.headroom--unpinned {
        transform: translateY(-100%);
        transform: translate3d(0, 0, 0) translateY(-100%);
      }
    }

    .id7-parent-site-link {
      color: @gray-light;

      &::after {
        content: '';
        @media(max-width: @screen-xs-max) {
          .triangle(right, 12px, 9px, @gray-light);
          margin-left: 4px;
          display: inline-block;
          position: relative;
        }
        @media(min-width: @screen-sm-min) {
          .triangle(right, 14px, 10px, @gray-light);
          top: -2px;
          margin-left: 8px;
          display: inline-block;
          position: relative;
        }
      }
    }
  }

  // links alongside the logo
  .id7-logo-row nav {
    display: none;
    justify-content: end;
    flex-grow: 1;
    @media (min-width: @grid-float-breakpoint) {
      display: flex;
    }

    .small();
    font-size: clamp(var(--w-ref-mastheadLinksMinSize), 1.2vw, var(--w-ref-mastheadLinksMaxSize));

    & when (@id7-gen-logos = 2024) {
      // Raise up to be in line with WARWICK -
      // negative vw to keep in line as the text resizes
      margin-bottom: calc(14px - 0.5vw);
    }

    ul {
      .horizontal-utility-links();
      & when (@id7-gen-logos >= 2025) {
        font-weight: 500;
      }
    }

    .link-colour(@gray-dark);
  }

  .id7-search-box-container when (@id7-gen-logos = 2024) {
    margin-top: @id7-masthead-search-offset-xs;

    @media (min-width: @grid-float-breakpoint) {
      margin-top: (@id7-masthead-search-offset-sm + (@line-height-computed / 2));
    }
  }
}

// Unbranded sites don't get the logo in the masthead
.id7-non-branded {
  .id7-masthead {
    background: white !important;

    @media (min-width: @screen-xs-max) {
      height: auto;
    }
  }

  .id7-logo-column,
  .id7-utility-masthead::after {
    content: none;
    display: none;
  }

  .id7-search-box-container {
    margin-top: 4.3rem !important;
  }

  @media print {
    .id7-main-content-area > header .id7-horizontal-divider {
      display: none !important; // ID-189
    }
  }
}
