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

/**
 * The behaviour with regards to responsiveness is as follow:
 *
 * - Mobile to tablet view
 *   Menu toggle button visible and navigation links hidden, search toggle
     button visible and search form hidden
 *
 * - Tablet to desktop view
 *   Menu toggle button visible and navigation links hidden, search toggle
 *   button hidden and search form visible
 *
 * - Desktop+ view
 *   Menu toggle button hidden and navigation links visible, search toggle
 *   button hidden and search form visible
 *
 * 1. Custom height and width of the logo
 * 2. Custom height and width of form items
 * 3. Custom height and width of svg icons
 * 4. Remove inner border on buttons for Firefox, see
 *    https://github.com/necolas/normalize.css/issues/393
 * 5. Proprietary extension so form field looks the same in Safari
 * 6. Custom margin to move menu toggle past the search toggle button
 * 7. Custom border value between expanded search and expanded menu if both open at the same time
 * 8. Don't display the link address for the logo anchor, see
 *     core/elements/_links.scss
 * 9. Remove random top margin in Safari
 * 10. Align close icon with nav item arrow icons
 * 11. Add dfe-spacing(9) to align right and left main nav with header
 */

.dfe-header {
  @include clearfix();
  background-color: $color_dfe-blue;
}

.dfe-header__container {
  @include clearfix();
  padding-top: dfe-spacing(4);

  @include mq($until: tablet) {
    margin: 0;
    padding-top: dfe-spacing(2);
  }
}

.dfe-header__logo {
  float: left;

  @include mq($until: tablet) {
    position: relative;
    z-index: 1;
  }

  .dfe-logo__background {
    fill: $color_dfe-white;

    @include mq($media-type: print) {
      fill: $color_dfe-blue;
    }
  }

  .dfe-logo__text {
    fill: $color_dfe-blue;

    @include mq($media-type: print) {
      fill: $color_dfe-white;
    }
  }

  .dfe-logo {
    @include dfe-logo-size;
    /* [1] */
    border: 0;
  }

  @include mq($until: desktop) {
    max-width: 60%;
  }

  @media (max-width: 450px) {
    max-width: 50%;
  }

}

.dfe-header__link {
  @include dfe-logo-size;
  /* [1] */
  display: block;

  .dfe-logo-hover {
    display: none;
  }

  .dfe-logo {

    width: 136px !important;
    height: 80px !important;
  }


  &:focus {


    .dfe-logo-hover {
      display: none;
    }

    .dfe-logo {
      display: none;
    }

    .dfe-logo+.dfe-logo-hover {
      display: inline-block;
      width: 136px !important;
      height: 80px !important;
    }
  }

  &:focus {
    box-shadow: none;

    .dfe-logo {
      box-shadow: 0 0 0 $dfe-focus-width $dfe-focus-color, 0 $dfe-focus-width 0 $dfe-focus-width $dfe-focus-text-color;
    }
  }

  @include mq($media-type: print) {
    &:after {
      content: '';
      /* [8] */
    }
  }

  // &:hover,
  // &:active,
  // &:focus {
  //   background-color: transparent;
  // }
}

.dfe-header__content {
  @include clearfix();
  @include print-hide();

  position: relative;

  &.js-show {
    border-bottom: dfe-spacing(1) solid $color_dfe-grey-5;
    /* [7] */
  }

  @include mq($from: tablet) {
    float: right;

    &.js-show {
      border-bottom: 0;
    }

  }

}

.dfe-header__action-links {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.dfe-header__action-links li {
  list-style: none;
  color: $color_dfe-white;
  font-size: 16px;
}

.dfe-header__search {
  @include clearfix();

  position: relative;
  text-align: right;

  @include mq($from: tablet) {
    float: left;
    margin-left: dfe-spacing(2);
  }

}

.dfe-header__search-toggle {
  @include toggle-button();
  min-height: dfe-spacing(6);
  /* [2] */
  padding: dfe-spacing(1) dfe-spacing(2) 0;
  position: absolute;
  right: 0;
  top: 0;

  .dfe-icon__search {
    fill: $color_dfe-white;
    height: 21px;
    /* [3] */
    width: 21px;
    /* [3] */
  }

  &:focus {
    @include dfe-focused-button();
    box-shadow: 0 0 0 2px $dfe-focus-color, 0 $dfe-focus-width 0 2px $dfe-focus-text-color;
  }

  @include mq($from: tablet) {
    display: none;
  }
}

.dfe-header__search-form {
  height: 100%;
  overflow: visible;

  @include mq($until: tablet) {
    background-color: $color_dfe-white;
    display: flex;
    padding: dfe-spacing(3);
    width: 100%;
  }
}

.dfe-header__search-wrap {
  @include mq($until: tablet) {
    display: none;

    &.js-show {
      clear: both;
      display: flex;
      margin-bottom: -20px;
      margin-left: -16px;
      margin-right: -16px;
      padding-top: 16px;
      text-align: left;
    }
  }

  @include mq($from: tablet) {
    display: block;
    line-height: 0;
  }
}

.dfe-search__input {
  -webkit-appearance: listbox;
  /* [5] */

  padding: 0 dfe-spacing(3);

  &:focus {
    border: 4px solid $dfe-focus-text-color;
    box-shadow: 0 0 0 $dfe-focus-width $dfe-focus-color;
    outline: $dfe-focus-width solid transparent;
    outline-offset: $dfe-focus-width;
    padding: 0 9px;
  }

  &::placeholder {
    color: $color_dfe-grey-1;
    font-size: $dfe-base-font-size;
  }

  &:-ms-input-placeholder {
    color: $color_dfe-grey-1;
    font-size: $dfe-base-font-size;
  }

  &::-webkit-input-placeholder {
    color: $color_dfe-grey-1;
    font-size: $dfe-base-font-size;
  }

  @include mq($until: tablet) {
    border-bottom: 1px solid $color_dfe-grey-3;
    border-left: 1px solid $color_dfe-grey-3;
    border-right: 0;
    border-top: 1px solid $color_dfe-grey-3;
    flex-grow: 2;
    -ms-flex-positive: 2;
    font-size: inherit;
    height: 52px;
    /* [4] */
    margin: 0;
    outline: none;
    width: 100%;
    /* [4] */
    z-index: 1;
  }

  @include mq($from: tablet) {
    border: 1px solid $color_dfe-white;
    font-size: $dfe-base-font-size;
    height: dfe-spacing(6);
    /* [2] */
    width: 200px;
    /* [2] */
  }

  @include mq($from: desktop) {
    width: 235px;
  }
}

.dfe-search__submit {
  border: 0;
  float: right;
  font-size: inherit;
  line-height: inherit;
  outline: none;
  padding: 0;

  &::-moz-focus-inner {
    border: 0;
    /* [4] */
  }

  &:hover {
    cursor: pointer;
  }

  @include mq($until: tablet) {
    background-color: $color_dfe-blue;
    height: 52px;
    /* [2] */
    margin: 0;
    padding: dfe-spacing(2) dfe-spacing(2) 0;

    .dfe-icon__search {
      fill: $color_dfe-white;
      height: 38px;
      /* [3] */
      width: 38px;
      /* [3] */
    }

    &:hover {
      background-color: $color_shade_dfe-blue-35;
    }

    &:focus {
      background-color: $dfe-focus-color;
      box-shadow: 0 -4px $dfe-focus-color, 0 $dfe-focus-width $dfe-focus-text-color;
      outline: $dfe-focus-width solid transparent;
      outline-offset: $dfe-focus-width;

      &:hover {
        background-color: $dfe-focus-color;

        .dfe-icon {
          fill: $dfe-focus-text-color;
        }
      }

      .dfe-icon {
        fill: $dfe-focus-text-color;
      }
    }
  }

  @include mq($from: tablet) {
    background-color: $color_dfe-grey-5;
    display: block;
    height: dfe-spacing(6);
    /* [2] */
    width: 44px;
    /* [2] */

    .dfe-icon__search {
      height: 27px;
      /* [3] */
      width: 27px;
      /* [3] */
    }

    &:hover {
      background-color: $color_shade_dfe-blue-35;
      border: 1px solid $color_dfe-white;

      .dfe-icon__search {
        fill: $color_dfe-white;
      }
    }

    &:focus {
      @include dfe-focused-button();
      box-shadow: 0 -2px $dfe-focus-color, 0 $dfe-focus-width $dfe-focus-text-color;
    }

    &:active {
      background-color: $color_shade_dfe-blue-50;
      border: 0;

      .dfe-icon__search {
        fill: $color_dfe-white;
      }
    }
  }
}

.dfe-search__close {
  @include mq($until: tablet) {
    @include close-button();

    margin-left: dfe-spacing(2);
    margin-right: - dfe-spacing(2);
    /* [10] */
    margin-top: dfe-spacing(2);

    &:focus {
      .dfe-icon__close {
        fill: $dfe-focus-text-color;
      }
    }
  }

  @include mq($from: tablet) {
    display: none;
  }
}

/* Main navigation
 *
 * Appears below the header strip
   ====================================================================== */

.dfe-header__menu {
  float: right;

  @include mq($from: tablet) {
    float: left;
  }
}

.dfe-header__menu-toggle {
  @include toggle-button();

  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: $dfe-base-line-height;
  margin-right: 0;
  /* [6] */
  padding: 7px dfe-spacing(3);
  position: relative;
  text-decoration: none;
  z-index: 1;

  @include mq($until: tablet) {
    right: 48px;
  }

  @include mq($from: tablet, $until: large-desktop) {
    margin-top: 0;
    /* [9] */
  }

  @include mq($from: large-desktop) {
    display: none;
  }

  &:focus {
    @include dfe-focused-button;

    box-shadow: 0 0 0 2px $dfe-focus-color, 0 $dfe-focus-width 0 2px $dfe-focus-text-color;
  }

}

/* 'only' modifier for when there is only the menu in the header, no search
   ====================================================================== */

.dfe-header__menu--only {
  .dfe-header__menu-toggle {
    @include mq($until: tablet) {
      position: relative;
      right: auto;
      top: auto;
    }
  }
}

.dfe-header__navigation {
  @include print-hide();
  background-color: $color_dfe-white;
  clear: both;
  display: none;
  overflow: hidden;

  &.js-show {
    display: block;

    @include mq($until: large-desktop) {
      border-bottom: dfe-spacing(1) solid $color_dfe-grey-5;
      /* [7] */
      border-top: dfe-spacing(1) solid $color_dfe-grey-5;
      /* [7] */

      .dfe-width-container {
        margin: 0 dfe-spacing(3);
      }
    }

    @include mq($until: desktop) {
      .dfe-width-container {
        margin: 0;
      }
    }
  }

  @include mq($from: large-desktop) {
    background-color: $color_dfe-blue;
    display: block;
    margin: 0 auto;
    max-width: $dfe-page-width + dfe-spacing(9);
    /* [11] */
  }
}

.dfe-header__navigation-title {
  font-weight: $dfe-font-bold;
  margin-bottom: 0;
  padding: dfe-spacing(3);
  position: relative;

  @include mq($from: large-desktop) {
    display: none;
  }
}

.dfe-header__navigation-close {
  @include close-button();
  overflow: hidden;
  position: absolute;
  right: dfe-spacing(2);
  top: dfe-spacing(2);
  white-space: nowrap;

  &:focus {
    .dfe-icon__close {
      fill: $dfe-focus-text-color;
    }
  }
}

.dfe-header__navigation-list {
  list-style: none;
  margin: 0;
  padding-left: 0;

  @include mq($from: large-desktop) {
    border-top: 1px solid $dfe-secondary-border-color;
    display: flex;
    justify-content: flex-start;
    padding: 0;
    width: 100%;
  }
}

.dfe-header__navigation-item {
  border-top: 1px solid $color_dfe-grey-5;
  margin-bottom: 0;
  position: relative;

  &.dfe-header__navigation-item--current {
    border-bottom: 6px solid $color_dfe-secondary-blue;
    box-shadow: none !important;

    a {
      font-weight: $dfe-font-bold;
      color: $color_dfe-white;
    }

  }

  @include mq($from: large-desktop) {
    border-top: 0;
    margin: 0;
    text-align: center;

    a {
      color: $color_dfe-white;
    }

    .dfe-icon__chevron-right {
      display: none;
    }
  }
}

.dfe-header__navigation-link {


  @include dfe-font(16);
  border-bottom: dfe-spacing(1) solid transparent;
  border-top: dfe-spacing(1) solid transparent;
  color: $color_dfe-blue;
  display: block;
  padding: 12px 15px;
  text-decoration: none;


  @include mq($from: large-desktop) {
    color: $color_dfe-white;
    line-height: normal;
  }

  .dfe-icon__chevron-right {
    fill: $color_dfe-grey-3;
    position: absolute;
    right: dfe-spacing(1);
    top: 11px;
  }

  &:visited {
    color: $color_dfe-blue;

    @include mq($from: large-desktop) {
      color: $color_dfe-white;
    }
  }

  &:hover {
    box-shadow: none;
    color: $color_dfe-blue;
    text-decoration: underline;

    @include mq($from: large-desktop) {
      color: $color_dfe-white;
    }

    .dfe-icon__chevron-right {
      fill: $color_dfe-blue;
    }

  }

  &:active,
  &:focus {
    background-color: $dfe-focus-color;
    border-bottom: $dfe-focus-width solid $dfe-focus-text-color;
    box-shadow: none;
    color: $dfe-focus-text-color;
    outline: $dfe-focus-width solid transparent;
    outline-offset: $dfe-focus-width;
    text-decoration: none;

    &:hover {
      background-color: $dfe-focus-color;
      color: $dfe-focus-text-color;

      .dfe-icon__chevron-right {
        fill: $dfe-focus-text-color;
      }
    }

    &:visited {
      background-color: $dfe-focus-color;
      color: $dfe-focus-text-color;
    }
  }
}

.dfe-header__navigation-item--for-mobile {
  @include mq($from: large-desktop) {
    display: none;
  }
}

.dfe-header__navigation-list--small {
  @include mq($from: large-desktop) {
    justify-content: flex-start;
  }
}


/**
 * Transactional Header with service name
**/

.dfe-header__transactional-service-name {
  float: left;
  padding-left: dfe-spacing(3);
  padding-top: 3px;

  @include mq($until: large-desktop) {
    padding-left: 0;
    padding-top: dfe-spacing(2);
    width: 100%;
  }
}

.dfe-header__transactional-service-name--link {
  @include dfe-link-style-white;
  @include dfe-font(19);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.dfe-header--transactional {

  .dfe-header__link {
    @include dfe-logo-size-small;
    display: block;
  }

  .dfe-logo {
    @include dfe-logo-size-small;
  }

  .dfe-header__transactional-service-name {
    float: left;
  }

}

.dfe-header__service-name {

  margin-bottom: 12px;
  margin-bottom: 12px;

}

a.dfe-header__link--service {

  @include dfe-font(22);
  text-decoration: none;
  text-decoration: none;
  color: $color_dfe-white;

  &:visited{
  color: $color_dfe-white;
  }

  &:hover {
    background: none;
    text-decoration: underline;
  }

  &:focus {
    background: #fd0;
    box-shadow: 0 0 0 4px #fd0, 0 4px 0 4px #0b0c0c;
    color: $dfe-focus-text-color;
  }

}

.dfe-header__service-name {

  display: block;
  padding-left: 0;
  padding-right: 0;
  color: $color_dfe-white;
  margin-bottom: dfe-spacing(3);


  @include mq($until: large-desktop) {
    max-width: 100%;
  }

}

.dfe-header__logo--only {
  max-width: 100%;

  @include mq($from: tablet) {

    .dfe-header__link--service {
      align-items: center;
      display: flex;
      -ms-flex-align: center;
      margin-bottom: 0;
      width: auto;

    }

    .dfe-header__service-name {
      margin-top: dfe-spacing(3);
      margin-bottom: dfe-spacing(3);
    }
  }
}


/**
 * Top right username or other action if link
**/

.dfeuk-header__username {
  padding-bottom: 20px;
  margin: 0px;
  text-align: right;
  color: $color_dfe-white;

  a {
    color: $color_dfe-white;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

@include govuk-media-query($until: tablet) {
  .dfe-header {
    padding: 15px;

    .dfe-header__service-name {
      margin-left: 0px;
    }

    .dfe-header__navigation-item--current .dfe-header__navigation-link {
      color: $color_dfe-black;
    }
  }

}