@use "sass:color";
@use 'responsive';
@use 'colours';
@use 'typography';
@use 'fontawesome';

header {
  display: flex;
  flex-direction: column;
  user-select: none;

  nav#top-menu, nav.top-menu {
    display: flex;
    flex-direction: row;
    padding: 0 20px;
    background-color: colours.$colour-bg-header;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    position: relative;
    z-index: 1001;
    @include responsive.not-desktop {
      height: 30px;
      line-height: 30px;
      padding: 0 18px;
    }

    span {
      flex-grow: 1;
      display: block;
      text-align: left;

      img {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        height: 75%;
        width: auto;
      }
    }

    a, span {
      display: flex;
      font-size: 14px;
      color: colours.$colour-admiralty-blue;
      font-weight: typography.$font-weight-medium;
      text-decoration: none;
      line-height: inherit;
    }

    .header-links-wrap {
      display: flex;
      align-items: center;
      width: 33%;
      justify-content: space-between;
      @include responsive.not-desktop {
        display: none;
      }
    }

  }

  > h1 {
    z-index: 1002;
    line-height: 90px;
    padding-left: 20px;
    position: absolute;
    font-weight: normal;
    vertical-align: middle;
    font-size: 34px;
    margin: 0;
    color: colours.$colour-admiralty-blue;
    @include responsive.not-desktop {
      display: block;
      padding-left: 18px;
      font-size: 24px;
      line-height: 60px;
    }

    a {
      font-size: inherit;
      font-weight: inherit;
      color: inherit;
      text-decoration: none;
    }
  }

  nav#main-menu, nav.main-menu {
    position: relative;
    z-index: 1001;
    pointer-events: none;
    display: flex;
    border-bottom: 1px solid colours.$colour-divider;
    background-color: colours.$colour-bg;
    padding: 0 20px;
    min-height: 90px;
    @include responsive.not-desktop {
      display: none;
      position: absolute;
      top: 30px;
      left: 0;
      width: 100%;
      padding: 0;
      box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.2);
      flex-direction: column;
    }

    > div {
      display: block;
      text-align: right;
      @include responsive.not-desktop {
        border-bottom: 1px solid colours.$colour-divider;
        height: 60px;
      }

      .menu-close {
        display: none;
        @include responsive.not-desktop {
          pointer-events: auto;
          display: block;
          z-index: 1001;
          padding: 0 18px;
          line-height: 60px;
        }

        span.fa {
          font-size: 20px;
          line-height: 40px;
          padding: 0 10px;
          color: colours.$colour-nav-subitem-icon;
        }
      }
    }

    & > ul {
      position: static;
      margin-left: auto;
      pointer-events: auto;
      display: inline-flex;
      justify-content: flex-end;
      vertical-align: middle;
      margin-bottom: 0;
      @include responsive.not-desktop {
        margin-left: 0;
        display: block;
        flex-grow: 1;
      }

      /* Main menu items */
      & > li {
        margin: auto 0;
        height: 90px;
        background-color: colours.$colour-bg;
        transform: unset;
        padding-right: unset;

        @include responsive.not-desktop {
          border-bottom: 1px solid colours.$colour-divider;
          border-top: 1px solid colours.$colour-bg;
          display: block;
          height: auto;
        }

        &::before {
          margin: 0;
          content: none;
          display: none;
          position: absolute;
          left: -30px;
        }


        &.active > a {
          @include responsive.not-desktop {
            height: auto;
          }
        }

        &.active {
          @include responsive.desktop-only {
            border-bottom: 5px solid colours.$colour-admiralty-blue;
          }
        }

        &:hover, &:focus {
          @include responsive.desktop-only {
            background: #EEF3F4;
          }
        }



        > a {
          outline: none;
          display: block;
          font-size: 18px;
          color: colours.$colour-admiralty-blue;
          font-weight: normal;
          text-decoration: none;
          line-height: 90px;
          padding: 0 24px;
          @include responsive.not-desktop {
            padding: 0 18px;
            line-height: 50px;
            font-size: 16px;
          }
          &::after {
            @extend .fa;
            @extend .fa-chevron-down, :before;
            display: none !important;
            @include responsive.not-desktop {
              margin: 0 10px;
              display: inline-block !important;
              float: right;
              line-height: 50px !important;
              font-size: 16px;
              color: colours.$colour-nav-subitem-icon;
            }
          }
        }

        &.active > a {
          @include responsive.not-desktop {
            border-bottom: 5px solid colours.$colour-admiralty-blue;
          }
          &::after {
            @extend .fa-chevron-up, :before;
          }
        }

        /* Sub menus */
        & > section {
          /* Sub menu headings */
          box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.2);
          border-top: 1px solid colours.$colour-divider;
          border-bottom: 1px solid colours.$colour-divider;
          display: none;
          visibility: hidden;
          opacity: 0;
          position: absolute;
          background-color: colours.$colour-bg;
          width: 100%;
          left: 0;
          /* margin-top: 5px; */
          flex-direction: row;
          justify-content: space-between;
          padding: 20px 30px;
          @include responsive.not-desktop {
            box-shadow: none;
            background-color: colours.$colour-nav-bg;
            border: none;
            flex-direction: column;
            position: static;
            padding: 0;
            margin-top: 0;
          }

          & > section {
            flex-grow: 1;
            margin: 0 10px;
            max-width: 33.33%;
            @include responsive.not-desktop {
              max-width: none;
            }

            & > h2 {
              @include responsive.not-desktop {
                margin-bottom: 6px;
              }

              > a {
                font-weight: normal;
                text-decoration: none;
                vertical-align: middle;
                font-size: 21px;
                line-height: 30px;
                color: colours.$colour-admiralty-blue;
                display: inline-block;
                width: 100%;
                padding: 12px 6px 6px;
                border-bottom: 1px solid colours.$colour-divider;
                @include responsive.not-desktop {
                  font-size: 16px;
                  color: colours.$colour-nav-subitem;
                }

                &::after {
                  @extend .fa;
                  @extend .fa-chevron-right, :before;
                  font-size: 14px;
                  margin: 0 12px;
                  display: inline-block;
                  float: right;
                  line-height: 30px !important;
                  @include responsive.not-desktop {
                    font-size: 12px;
                    color: colours.$colour-admiralty-blue;
                  }
                }
              }
            }

            & > ul {
              margin-bottom: 12px;
              position: static;

              & > li {
                transform: unset;
                padding-right: unset;

                &::before {
                  margin: 0;
                  content: none;
                  display: none;
                  position: absolute;
                  left: -30px;
                }

                min-height: 40px;
                margin-bottom: 0;
                @include responsive.not-desktop {
                  min-height: auto;
                }

                > a {
                  display: inline-block;
                  width: 100%;
                  font-weight: typography.$font-weight-light;
                  text-decoration: none;
                  color: colours.$colour-nav-item;
                  padding: 6px 6px;
                  font-size: 18px;
                  line-height: 40px;
                  @include responsive.not-desktop {
                    font-size: 14px;
                    line-height: 30px;
                  }

                  &:hover {
                    background-color: colours.$colour-nav-bg-hover;
                  }

                  &::after {
                    @extend .fa;
                    @extend .fa-chevron-right, :before;
                    font-size: 12px;
                    margin: 0 12px;
                    display: inline-block;
                    float: right;
                    line-height: 40px !important;
                    @include responsive.not-desktop {
                      line-height: 20px !important;
                    }
                  }

                }

              }

            }
          }

        }

        &.active > section {
          @include responsive.not-desktop {
            display: flex;
            visibility: visible;
            opacity: 1;
          }
        }
        &:hover > section, & > section:hover, &:focus > section, & > section:focus  {
          @include responsive.desktop-only {
            display: inline-flex;
            visibility: visible;
            opacity: 1;
          }
        }
      }

    }

    /* expand menu */
    &:target {
      display: flex;
    }
  }

  #main-menu:target + .backdrop,
  #main-menu[aria-expanded="true"] + .backdrop,
  .main-menu:target + .backdrop,
  .main-menu[aria-expanded="true"] + .backdrop
  {
    @include responsive.not-desktop {
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 998;
      background-color: colours.$colour-admiralty-blue;
      opacity: 0.75;
      cursor: default;
    }
  }

  #main-menu:hover + .backdrop,
  .main-menu:hover + .backdrop
  {
    @include responsive.desktop-only {
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: colours.$colour-admiralty-blue;
      opacity: 0.75;
      cursor: default;
    }
  }

  #main-menu:target,
  #main-menu[aria-expanded="true"],
  .main-menu:target,
  .main-menu[aria-expanded="true"]
  {
    @include responsive.not-desktop {
      display: flex;
      z-index: 1000;
    }
  }
  #main-menu[aria-expanded="false"],
  .main-menu[aria-expanded="false"]
  {
    @include responsive.not-desktop {
      display: none;
    }
  }

  #main-menu:target .menu-close,
  #main-menu[aria-expanded="true"] .menu-close,
  .main-menu:target .menu-close,
  .main-menu[aria-expanded="true"] .menu-close
  {
    @include responsive.not-desktop {
      z-index: 1001;
    }
  }

  .menu-toggle-wrapper {
    display: none;

    @include responsive.not-desktop {
      display: block;
      text-align: right;
      height: 60px;
      white-space: nowrap;
      border-bottom: 1px solid colours.$colour-divider;

      a {
        display: block;
        z-index: 1001;
        padding: 0 18px;
        line-height: 60px;

        &:hover, &:focus {
          color: color.adjust(colours.$colour-admiralty-blue, $lightness: 20%);
        }

        span.fa {
          font-size: 20px;
          line-height: 40px;
          padding: 0 10px;
          color: colours.$colour-nav-subitem-icon;
        }
      }
    }
  }

  #main-menu:target ~ .menu-toggle-wrapper,
  #main-menu[aria-expanded="true"] ~ .menu-toggle-wrapper,
  .main-menu:target ~ .menu-toggle-wrapper,
  .main-menu[aria-expanded="true"] ~ .menu-toggle-wrapper
  {
    @include responsive.not-desktop {
      display: none;
    }
  }

}