@import "govuk_publishing_components/individual_component_support";
@import "govuk/components/header/header";
@import "mixins/css3";
@import "mixins/grid-helper";

$chevron-breakpoint: 360px;
$chevron-indent-spacing: 7px;

$pseudo-underline-height: 3px;

$navbar-height: 61px;

$button-pipe-colour: $govuk-blue-tint-95;

$nav-button-horizontal-padding: govuk-spacing(3);
$nav-button-horizontal-padding-chevron-breakpoint: govuk-spacing(4);

$menu-button-padding: govuk-spacing(1) $nav-button-horizontal-padding;
$menu-button-padding-chevron-breakpoint: govuk-spacing(1) $nav-button-horizontal-padding-chevron-breakpoint;

$search-button-padding: govuk-spacing(4) $nav-button-horizontal-padding;
$search-button-padding-chevron-breakpoint: govuk-spacing(4) $nav-button-horizontal-padding-chevron-breakpoint;

$search-icon-width: 21px;
$search-icon-height: 20px;

@mixin chevron($colour, $update: false) {
  @if $update == true {
    border-bottom-color: $colour;
    border-right-color: $colour;
  } @else {
    @include prefixed-transform($rotate: 45deg, $translateY: -35%);
    border-bottom: 2px solid $colour;
    border-right: 2px solid $colour;
    content: "";
    display: inline-block;
    height: 8px;
    margin: 0 10px 0 2px;
    vertical-align: middle;
    width: 8px;
  }
}

@mixin make-selectable-area-bigger {
  background: none;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

@mixin pseudo-underline($left: govuk-spacing(2), $right: govuk-spacing(2), $width: false) {
  background: none;
  content: "";
  height: $pseudo-underline-height;
  left: $left;
  position: absolute;
  right: $right;
  bottom: 1px;
  top: auto;
  @if $width {
    width: $width;
  }
}

// Using `:focus-visible` means that in supporting browsers the focus state won't
// be visible when a user clicks on the element, but the focus state will still be
// useful for those who use the keyboard to navigate around the page.
@mixin focus-and-focus-visible {
  &:focus {
    @content;
  }

  &:focus-visible {
    @content;
  }
}

// For browsers that don't support `:focus-visible`, this defaults to using
// `:focus` with a CSS-only fallback strategy.
//
// Undoes the :focus styles *only* for browsers that support :focus-visible.
// See https://www.tpgi.com/focus-visible-and-backwards-compatibility/
@mixin focus-not-focus-visible {
  & {
    @content;
  }

  &:focus:not(:focus-visible) {
    @content;
  }
}

// stylelint-disable max-nesting-depth
.gem-c-layout-super-navigation-header {
  background: $govuk-brand-colour;
  border-top: 1px solid $govuk-brand-colour;
  margin-top: -1px;
  position: relative;

  [hidden] {
    display: none;
  }
}

.gem-c-layout-super-navigation-header__container {
  position: relative;
  // the background color is set again on the nav container to ensure the menu buttons are still
  // visible when the text scale is increased
  // related issue: https://github.com/alphagov/govuk_publishing_components/issues/4208
  background: $govuk-brand-colour;

  // add a transparent bottom border for forced-color modes
  @media (forced-colors: active) {
    border-bottom: 1px solid transparent;
  }
}

.gem-c-layout-super-navigation-header__header-logo {
  display: inline-block;
  line-height: 1;
  padding-bottom: 12px;
  padding-top: 16px;
  flex-grow: 1;
  flex-shrink: 0;

  // remove the right margin from the govuk-logo to ensure the super nav menu buttons
  // do not wrap onto a new line when the screen width is 360px ($chevron-breakpoint)
  // govuk-frontend includes spacing to the right of the logo to offset it from the product name
  // as we do not include a product name in the super navigation menu, we can set the right margin to 0
  .govuk-header__link--homepage {
    margin-right: 0;
  }
}

.gem-c-layout-super-navigation-header__content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.gem-c-layout-super-navigation-header__navigation-item,
.gem-c-layout-super-navigation-header__search-item {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.gem-c-layout-super-navigation-header__search-item {
  margin-right: -15px;

  @include govuk-media-query($from: "tablet") {
    margin-right: 0;
  }
}

// Top level navigation links and search link, used when JavaScript is not available
.gem-c-layout-super-navigation-header__navigation-item-link,
.gem-c-layout-super-navigation-header__search-item-link {
  color: govuk-colour("white");
  display: inline-block;
  font-size: 19px;
  font-size: govuk-px-to-rem(19px);
  font-weight: bold;
  padding: govuk-spacing(4) 0;
  position: relative;
  @include govuk-link-common;
  @include govuk-link-style-no-visited-state;

  &::after {
    @include pseudo-underline;
  }

  &:hover {
    @include govuk-link-hover-decoration;

    &::after {
      background: govuk-colour("white");
    }
  }

  &,
  &:link,
  &:visited {
    color: govuk-colour("white");
    font-size: 16px;
    font-size: govuk-px-to-rem(16px);
    height: govuk-spacing(4);
    text-decoration: none;

    &:focus {
      box-shadow: none;
      color: $govuk-focus-text-colour;

      &::after {
        background: $govuk-focus-text-colour;
      }
    }
  }
}

// Specific styles for the "Menu" link
.gem-c-layout-super-navigation-header__navigation-item-link {
  .gem-c-layout-super-navigation-header__navigation-item-link-inner {
    padding: $menu-button-padding;
    border-right: 1px solid $button-pipe-colour;

    @include govuk-media-query($from: $chevron-breakpoint) {
      padding: $menu-button-padding-chevron-breakpoint;
    }
  }

  &:focus {
    .gem-c-layout-super-navigation-header__navigation-item-link-inner {
      border-right-color: $govuk-focus-colour;
    }
  }
}

// Specific styles for the "Search" link
.gem-c-layout-super-navigation-header__search-item-link {
  padding: $search-button-padding;

  @include govuk-media-query($from: $chevron-breakpoint) {
    padding: $search-button-padding-chevron-breakpoint;
  }
}

.gem-c-layout-super-navigation-header__search-item-link-icon,
.gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
  height: $search-icon-height;
  pointer-events: none;
  width: $search-icon-width;
}

.gem-c-layout-super-navigation-header__open-button .gem-c-layout-super-navigation-header__search-toggle-button-link-icon {
  display: none;
}

// JS available - target the "Menu" toggle button
.gem-c-layout-super-navigation-header__navigation-top-toggle-button {
  font-size: 16px;
  font-size: govuk-px-to-rem(16px);
  font-weight: 700;
  background: none;
  border: 0;
  box-sizing: border-box;
  color: govuk-colour("white");
  cursor: pointer;
  height: $navbar-height;
  padding: 0;
  position: relative;
  margin: 0;
  vertical-align: top;
  @include govuk-typography-common($font-family: $govuk-font-family);

  &::after {
    @include pseudo-underline;
  }

  .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
    display: inline-block;
    border-right: 1px solid $button-pipe-colour;
    margin: 0;
    padding: $menu-button-padding;

    @include govuk-media-query($from: $chevron-breakpoint) {
      padding: $menu-button-padding-chevron-breakpoint;

      &::before {
        @include chevron(govuk-colour("white"));
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      &::after {
        background: govuk-colour("white");
      }

      .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
        &::before {
          @include chevron(govuk-colour("white"), true);
        }
      }
    }
  }

  @include focus-and-focus-visible {
    // this declaration overrides govuk-focused-text but the compiler prefers @include to be last
    box-shadow: none !important; // stylelint-disable-line declaration-no-important
    @include govuk-focused-text;

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

    .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
      border-right-color: $govuk-focus-colour;

      &::before {
        @include chevron(govuk-colour("black"), true);
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        &::after {
          background-color: govuk-colour("black");
        }

        .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
          color: govuk-colour("black");

          &::before {
            @include chevron(govuk-colour("black"), true);
          }
        }
      }
    }
  }

  @include focus-not-focus-visible {
    background: none;
    box-shadow: none;
    color: govuk-colour("white");

    &::after {
      background: none;
    }

    .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
      border-right-color: $button-pipe-colour;

      @include govuk-media-query($from: $chevron-breakpoint) {
        &::before {
          @include chevron(govuk-colour("white"), true);
        }
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        &::after {
          background: govuk-colour("white");
        }

        .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
          color: govuk-colour("white");

          &::before {
            @include chevron(govuk-colour("white"), true);
          }
        }
      }
    }
  }
}

// JS available - targets the "Menu" toggle button
// Styles the "Menu" open state
.gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__open-button {
  @include focus-and-focus-visible {
    // this declaration overrides govuk-focused-text because the compiler prefers @include to be last
    box-shadow: none !important; // stylelint-disable-line declaration-no-important
    @include govuk-focused-text;

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

    .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
      color: govuk-colour("black");
      border-right-color: $govuk-focus-colour;

      &::before {
        @include chevron(govuk-colour("black"), true);
        @include prefixed-transform($rotate: 225deg, $translateY: 1px);
      }
    }
  }

  @include focus-not-focus-visible {
    background: $govuk-rebrand-template-background-colour;

    &::after {
      background-color: $govuk-link-colour;
    }

    .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
      color: $govuk-link-colour;
      border-right-color: $button-pipe-colour;

      @include govuk-media-query($from: $chevron-breakpoint) {
        &::before {
          @include chevron($govuk-link-colour, true);
          @include prefixed-transform($rotate: 225deg, $translateY: 1px);
        }
      }
    }
  }
}

// JS available - targets the search toggle button
.gem-c-layout-super-navigation-header__search-toggle-button {
  background: none;
  border: 0;
  color: govuk-colour("white");
  cursor: pointer;
  height: $navbar-height;
  padding: $search-button-padding;
  position: relative;
  width: calc(($nav-button-horizontal-padding * 2) + $search-icon-width); // width = button container left and right padding + icon width
  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);

  @include govuk-media-query($from: $chevron-breakpoint) {
    padding: $search-button-padding-chevron-breakpoint;
    width: calc(($nav-button-horizontal-padding-chevron-breakpoint * 2) + $search-icon-width);  // width = button container left and right padding + icon width
  }

  &::after {
    @include pseudo-underline;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      &::after {
        background: govuk-colour("white");
      }
    }
  }

  @include focus-and-focus-visible {
    z-index: 11;
    // these declarations override govuk-focused-text because the compiler prefers @include to be last
    border-color: $govuk-focus-colour !important; // stylelint-disable-line declaration-no-important
    box-shadow: none !important; // stylelint-disable-line declaration-no-important
    @include govuk-focused-text;

    &::after {
      background: govuk-colour("black");
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: govuk-colour("black");

        &::after {
          background: govuk-colour("black");
        }
      }
    }
  }

  @include focus-not-focus-visible {
    background: none;
    box-shadow: none;
    color: govuk-colour("white");

    &::after {
      background: none;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: govuk-colour("white");

        &::after {
          background: govuk-colour("white");
        }
      }
    }
  }

  // Open button modifier
  &.gem-c-layout-super-navigation-header__open-button {
    color: govuk-colour("blue");

    @include focus-and-focus-visible {
      // these declarations override govuk-focused-text because the compiler prefers @include to be last
      border-color: $govuk-focus-colour !important; // stylelint-disable-line declaration-no-important
      box-shadow: none !important; // stylelint-disable-line declaration-no-important
      @include govuk-focused-text;

      &::after {
        background: govuk-colour("black");
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          &::after {
            background: govuk-colour("black");
          }
        }
      }
    }

    @include focus-not-focus-visible {
      background: $govuk-rebrand-template-background-colour;
      outline: 1px solid $govuk-rebrand-template-background-colour; // overlap the border of the nav menu so it won't appear when menu open

      color: govuk-colour("blue");

      &::after {
        background: govuk-colour("blue");
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          &::after {
            background: govuk-colour("blue");
          }
        }
      }
    }
  }
}

// JS available - styles the close icon, used when the search menu is in the open state
.gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon {
  display: none;
  font-size: 36px;
  font-weight: normal;
  left: 0;
  line-height: 22px;
  pointer-events: none;
  right: 0;
  text-align: center;
  top: 0;
}

.gem-c-layout-super-navigation-header__open-button {
  .gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon {
    display: block;
  }
}

.gem-c-layout-super-navigation-header__search-container {
  padding-bottom: govuk-spacing(7);
}

// JS available - dropdown menu
.gem-c-layout-super-navigation-header__navigation-dropdown-menu {
  width: 100%;
  order: 1; // Ensure the dropdown menu appears after the super navigation buttons which have a default order of 0
  background: $govuk-rebrand-template-background-colour;
  padding-top: govuk-spacing(6);

  @include govuk-media-query($from: "desktop") {
    padding-top: govuk-spacing(8);
  }
}

// Ensure the dropdown menu background is offset from the menu height and
// takes up the full screen width
.govuk-frontend-supported .gem-c-layout-super-navigation-header {
  &::before {
    content: "";
    position: absolute;
    top: $navbar-height;
    bottom: 0;
    width: 100%;
    background: $govuk-rebrand-template-background-colour;
    box-shadow: 0 1px govuk-colour("mid-grey");
  }
}

// JS available - styles the links in the dropdown menu
.gem-c-layout-super-navigation-header__dropdown-list-item {
  box-sizing: border-box;
  padding: 0 0 govuk-spacing(3) 0;
  position: relative;
  margin: 0 0 govuk-spacing(2) 0;
  @include govuk-media-query($from: "desktop") {
    padding: 0 0 govuk-spacing(3) 0;
    margin: 0 govuk-spacing(3) govuk-spacing(1) govuk-spacing(3);
  }
}

// JS available - wraps the `dropdown-list-item` navigation menu items
.gem-c-layout-super-navigation-header__navigation-second-items {
  list-style: none;
  margin: 0;
  padding: govuk-spacing(3) govuk-spacing(5) govuk-spacing(5) 0;

  @include govuk-media-query($from: "desktop") {
    margin: 0 (0 - govuk-spacing(3)) govuk-spacing(9);
    padding: govuk-spacing(2) 0 0 0;
  }
}

// JS available - styling for the "government-activity" group of links
.gem-c-layout-super-navigation-header__column--government-activity {
  position: relative;

  @include govuk-media-query($until: "desktop") {
    margin-top: govuk-spacing(6);
  }
}

// JS available - styling for the "services-and-information" group of links
.gem-c-layout-super-navigation-header__navigation-second-items--services-and-information {
  @include govuk-media-query($until: "desktop") {
    border-bottom: 1px solid govuk-colour("mid-grey");
  }

  @include govuk-media-query($from: "desktop") {
    @include columns($items: 16, $columns: 2, $selector: "li", $flow: column);
  }
}

.gem-c-layout-super-navigation-header__navigation-second-item-link {
  font-size: 16px;
  font-size: govuk-px-to-rem(16px);
  font-weight: bold;

  &::after {
    @include make-selectable-area-bigger;
  }

  @include govuk-media-query($from: "desktop") {
    padding: 0;

    &::after {
      @include make-selectable-area-bigger;
    }
  }
}

.gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
  font-size: 16px;
  font-size: govuk-px-to-rem(16px);
  font-weight: bold;

  &::after {
    @include make-selectable-area-bigger;
    height: calc(100% - 20px);
  }
}

.gem-c-layout-super-navigation-header__navigation-second-item-description {
  font-size: 16px;
  font-size: govuk-px-to-rem(16px);
  font-weight: normal;
  margin: govuk-spacing(1) 0 0 0;
  @include govuk-typography-common;
}

.gem-c-layout-super-navigation-header__search-form {
  padding: 0;

  @include govuk-media-query($from: "desktop") {
    padding-bottom: govuk-spacing(2);
  }
}

.gem-c-layout-super-navigation-header__column-header {
  font-size: 24px;
}

// Ensure the total space to the left of the logo for mobile screen sizes is 24px (margin is 15px)
@include govuk-media-query($until: tablet) {
  .gem-c-layout-super-navigation-header__header-logo--homepage {
    padding-left: 9px;
  }
}

@include govuk-media-query($until: tablet) {
  // can't disable responsive styling because using override classes
  // from govuk-frontend which are all responsive so have to supply
  // custom class to the label of the search component to turn off
  // the responsive font size
  .gem-c-layout-super-navigation-header__search-label--large-navbar {
    font-size: 24px;
    font-size: govuk-px-to-rem(24px);
  }
}

@include govuk-media-query($media-type: print) {
  .gem-c-layout-super-navigation-header {
    border-top: 0;
    border-bottom: 2pt solid $govuk-print-text-colour;
    margin: 0 0 5mm;
    background: none;

    &:has(.gem-c-layout-super-navigation-header__header-logo .govuk-visually-hidden) {
      border: 0;
      margin-left: 24px;
    }

    * {
      color: $govuk-print-text-colour;
    }

    .govuk-width-container {
      margin: 0;
    }
  }

  .gem-c-layout-super-navigation-header__header-logo {
    padding: 10px 0 !important; // stylelint-disable-line declaration-no-important
  }

  // Hide menu links, buttons and dropdown
  .gem-c-layout-super-navigation-header__navigation-item,
  .gem-c-layout-super-navigation-header__search-item,
  .gem-c-layout-super-navigation-header__navigation-dropdown-menu {
    display: none;
  }
}

// stylelint-enable max-nesting-depth
