@use "../../objects/width-container" as *;
@use "../../vendor/govuk-frontend" as *;

/* ==========================================================================
   #HEADER
   ========================================================================== */

.moj-header {
  padding-top: govuk-spacing(3);
  border-bottom: 10px solid $govuk-brand-colour;
  background-color: govuk-colour("black");
}

.moj-header__container {
  position: relative;
  @include moj-width-container;
  @include govuk-clearfix;
}

.moj-header__logo {
  padding-bottom: govuk-spacing(1);

  @include govuk-media-query($from: desktop) {
    float: left;
  }
}

.moj-header__logotype-crown {
  position: relative;
  top: -4px;
  margin-right: govuk-spacing(1);
  vertical-align: top;
}

.moj-header__logotype-crest {
  position: relative;
  top: -8px;
  margin-right: govuk-spacing(1);
  vertical-align: top;
}

.moj-header__content {
  padding-bottom: govuk-spacing(2);

  @include govuk-media-query($from: desktop) {
    float: right;
  }
}

.moj-header__link,
.moj-header__link > a {
  display: inline-block;
  margin-bottom: -1px;
  overflow: hidden; // Fixes focus gaps in background colour
  border-bottom: 1px solid transparent;
  color: govuk-colour("white");
  line-height: 25px; // Override due to alignment issue in Chrome
  vertical-align: middle;
  @include govuk-link-common;
  @include govuk-link-style-default;

  &:link,
  &:visited,
  &:hover,
  &:active {
    color: govuk-colour("white");
    text-decoration: none;
  }

  &:hover {
    border-color: govuk-colour("white");
  }

  &:focus {
    border-color: transparent;
    color: govuk-colour("black");
  }

  &--organisation-name {
    vertical-align: middle;
    @include govuk-font($size: 24, $weight: "bold");

    &:hover {
      border-color: transparent;
    }

    @include govuk-media-query($until: tablet) {
      margin-top: govuk-spacing(1);
    }
  }

  &--service-name {
    vertical-align: middle;
    @include govuk-font($size: 24, $weight: "normal");

    @include govuk-media-query($until: desktop) {
      display: block;
    }
    @include govuk-media-query($from: desktop) {
      margin-left: govuk-spacing(1);
    }

    &:hover {
      border-color: transparent;
    }
  }
}

.moj-header__link a {
  margin-bottom: 1px;
  vertical-align: text-bottom;

  &:hover {
    border-color: govuk-colour("white");
  }

  @include govuk-media-query($until: desktop) {
    margin-bottom: -1px;
    vertical-align: middle;
  }
}
// stylelint-disable-next-line selector-no-qualifying-type
span.moj-header__link {
  &:hover {
    border-color: transparent;
  }
}

// Navigation
.moj-header__navigation {
  margin-top: govuk-spacing(1) - 2px;
  color: govuk-colour("white");
}

.moj-header__navigation-list {
  margin: 0;
  padding: 0;
  font-size: 0; // Removes white space when using inline-block on child element.
  list-style: none;
}

.moj-header__navigation-item {
  display: inline-block;
  margin-right: govuk-spacing(4);
  @include govuk-font(19);

  &:last-child {
    margin-right: 0;
  }
}

.moj-header__navigation-link {
  @include govuk-link-common;
  @include govuk-link-style-default;

  &:link,
  &:visited,
  &:active {
    color: inherit;
    text-decoration: none;
  }

  &:hover {
    // stylelint-disable-next-line declaration-no-important
    text-decoration: underline !important;
  }

  &:focus {
    color: govuk-colour("black");
  }
}

.moj-header__navigation-link[aria-current="page"] {
  text-decoration: none;
}

/*# sourceMappingURL=_header.scss.map */