$header-link-hover-color: setLinkHoverColor($header-link-color);
@mixin linkHoverBehavior() {
  @if ($header-link-hover-color == $header-color) {
    &, a {
      color: $header-link-color;
      transition: 0.3s ease-in-out;
      &:hover {
        transform: translateY(-4px);
      }
    }
  }
  @else {
    a {
      color: $header-link-color;
      &:hover {
        color: $header-link-hover-color;
      }
    }
  }
}

#header {
  height: calculateRem($header-height);
  box-sizing: border-box;
  padding-top: calculateRem(16);
  padding-right: calculateRem(50);
  padding-bottom: calculateRem(15);
  padding-left: calculateRem(50);

  position: relative;

  background-color: $header-color;

  z-index: 1;

  @include breakpoint(mobileonly) {
    @if ($mobile-header-height > 0) {
      height: calculateRem($mobile-header-height);
    }
  }

  &.floating {
    position: absolute;
    z-index: 5;
    width: 100%;
    background-color: rgba($header-color, $header-opacity);

    &.transparent {
      background-color: transparent;
    }
  }

  .inner-page-navigation {
    display: none;
  }

  .logo-and-text {
    height: 100%;
    display: flex;
    align-items: center;

    @include breakpoint(mobile) {
      max-width: 80%;
    }

    @include breakpoint(laptop) {
      max-width: 100%;
    }

    &.has-mobile-logo {
      .logo-link, .text-link {
        @include breakpoint(mobile) {
          display: none;
        }
        @include breakpoint(laptop) {
          display: block;
        }
      }
    }

    .text-link {
      margin-bottom: 0;

      display: flex;
      @include linkHoverBehavior();
    }

    .mobile-logo-link {
      @include breakpoint(laptop) {
        display: none;
      }
    }
  }

  .flex.row {
    padding-right: 0;
    padding-left: 0;
  }

  #header_logo, #mobile_header_logo {
    max-height: 100%;
    max-width: 100%;
  }
  .logo-link, .mobile-logo-link {
    height: 100%;
    max-width: 100%;

    @include breakpoint(mobileonly) {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
    }

    & + .text-link {
      margin-left: calculateRem(20);
    }
  }
  .header-menu {
    @include breakpoint(mobile) {
      display: none;
    }
    @include breakpoint(laptop) {
      display: block;
    }
    ul.menu {
      li.menu-item {
        display: inline-block;
        &:last-child {
          @if ($header-button-color == $null) {
            @include linkHoverBehavior();
          }
        }
        &:last-child a {
          @if ($header-button-color != $light and $header-button-color != $dark and $header-button-color != $null) {
            @include applyButtonStyles('small');
            background-color: $header-button-color;
            color: setTextColor($header-button-color);
            &:hover {
              background-color: setLinkHoverColor($header-button-color);
            }
          }
          @elseif ($header-button-color == $light) {
            @include applyButtonStyles('small ghost');
          }
          @elseif ($header-button-color == $dark) {
            @include applyButtonStyles('small dark-ghost');
          }
          @elseif ($header-button-color == $null) {
            font-size: calculateRem(14);
            text-transform: uppercase;
          }
        }
        &:not(:last-child) {
          margin-right: calculateRem(30);
          a {
            font-size: calculateRem(14);
            text-transform: uppercase;
          }
          @include linkHoverBehavior();
        }
        ul.sub-menu {
          display: none;
        }
        a {
          font-weight: 600;
          letter-spacing: setLetterSpacing($body-font-family);
        }
      }
    }
  }
}

.header-flex {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

#sub_header {

  @include breakpoint(mobile) {
    display: none;
  }
  @include breakpoint(laptop) {
    display: flex;
    display: block;
  }

  position: absolute;
  flex-flow: row nowrap;
  top: 100%;
  left: calculateRem(50);
  z-index: 12;
  overflow: hidden;


  .school-banner {
    float:left;
    box-sizing: content-box;
    max-width: calculateRem(130);
    padding-right: calculateRem(12);
    overflow: hidden;
    transition: margin-top 500ms;
    overflow: hidden;
    svg {
      margin-top: -3px;
      width: 100%;
      text {
        fill: $light;
        font-family: $body-font-family;
        font-weight: 600;
        font-size: calculateRem(12);
        text-transform: uppercase;
      }
    }
    &.holy-cross svg .color-group {
      fill: #007CAA;
    }
    &.our-lady svg .color-group {
      fill: #214492;
    }
    &.st-bernadette svg .color-group {
      fill: #E2C244;
    }
    &.peter-paul svg .color-group {
      fill: #821B1E;
    }
    &.thomas-more svg .color-group {
      fill: black;
    }
    .logo-div {
      display: flex;
      align-items: center;
      justify-content: center;

      height: calculateRem(135);
      box-sizing: border-box;
      background-color: $tertiary-color;


      padding-top: calculateRem(20);
      padding-right: calculateRem(15);
      padding-bottom: calculateRem(20);
      padding-left: calculateRem(15);
      .logo {
        max-width: 100%;
        max-height: 100%;
        flex-shrink: 0;
      }
    }
  }
}

.mobile-menu {
  @include breakpoint(mobile) {
    display: block;
  }
  @include breakpoint(laptop) {
    display: none;
  }
  transition: all 0.2s ease-out;
  .icon-container {
    &.menu-button {
      i {
        color: $header-link-color;
      }
    }
    i {
      cursor: pointer;
    }
  }
  .nav {
    position: fixed;

    margin-right: calculateRem(-250);

    background-color: setContrastGray($header-link-color);

    width: calculateRem(250);

    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    overflow-y: auto;


    transition: all 0.2s ease-out;
    &.active {
      margin-right: 0;
      box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.30);
    }
    &.user-logged-in {
      .title {
        padding-top: calculateRem(62);
      }
    }
    .title {
      display: flex;
      justify-content: space-between;

      padding-top: calculateRem(16);
      padding-right: calculateRem(20);
      padding-bottom: calculateRem(16);
      padding-left: calculateRem(20);

      background-color: $primary-color;
      color: setTextColor($primary-color);

      font-weight: 700;
      font-size: calculateRem(16);
    }
    .title + div {
      padding-left: calculateRem(20);
    }
    ul.menu {
      display: flex;
      flex-flow: column nowrap;
      padding-left: 0;

      & > li.menu-item {
        display: block;

        margin-top: calculateRem(8);
        margin-bottom: calculateRem(8);

        .item-title {
          display: flex;
          justify-content: space-between;
        }

        &:last-child {
          @if ($header-button-color != $null) {
            &.menu-item-has-children {
              .icon-container {
                display: none;
              }
              ul.sub-menu {
                display: none;
              }
            }
            a {
              @include applyButtonStyles('small');
              background-color: $header-button-color;
              color: setTextColor($header-button-color);
              &:hover {
                background-color: setLinkHoverColor($header-button-color);
              }
            }
          }
          @else {
            a {
              font-size: 14px;
              color: $header-link-color;
              text-transform: uppercase;
              &:hover {
                color: $header-link-hover-color;
              }
            }
            &.menu-item-has-children {
              .icon-container {
                padding-right: calculateRem(16);
                padding-left: calculateRem(16);

                color: $header-link-color;
              }
              ul.sub-menu {
                display: none;
                padding-left: calculateRem(24);
                li.menu-item {
                  display: block;
                  margin-top: calculateRem(8);
                  margin-bottom: calculateRem(8);
                }
              }
            }
          }
        }
        &:not(:last-child) {
          a {
            font-size: 14px;
            color: $header-link-color;
            text-transform: uppercase;
            &:hover {
              color: $header-link-hover-color;
            }
          }
          &.menu-item-has-children {
            .icon-container {
              padding-right: calculateRem(16);
              padding-left: calculateRem(16);

              color: $header-link-color;
            }
            ul.sub-menu {
              display: none;
              padding-left: calculateRem(24);
              li.menu-item {
                display: block;
                margin-top: calculateRem(8);
                margin-bottom: calculateRem(8);
              }
            }
          }
        }
        a {
          font-weight: 600;
          letter-spacing: setLetterSpacing($body-font-family);
        }
      }
    }
  }
}

.sub-header-nav {
  @include breakpoint(mobile) {
    display: none;
  }
  @include breakpoint(laptop) {
    display: flex;
  }
  flex-flow: column nowrap;
  align-items: flex-end;

  background-color: $header-subnav-color;


  ul.sub-menu {
    width: max-content;

    padding-right: calculateRem(50);
    padding-left: calculateRem(50);

    li.menu-item {
      display: inline-block;

      &:not(:last-child) {
        margin-right: calculateRem(30);
      }

      a {
        color: $header-subnav-link-color;
        font-size: calculateRem(14);
        text-transform: uppercase;
        &:hover {
          color: $header-subnav-accent-color;
        }
      }
    }
  }
}

.fixed-sub-nav {
  @include breakpoint(mobile) {
    display: none;
  }
  @include breakpoint(laptop) {
    display: block;
  }

  position: fixed;
  top: calc(50px + #{calculateRem($header-height)});
  right: 0;

  &.collapsed {
    .icon-container {
      transform: rotate(180deg);
    }
    .sub-nav-list {
      width: 0;
      padding: 0;
    }
  }

  .icon-container {
    position: absolute;
    top: 0;
    left: -37px;

    width: 37px;

    padding-top: calculateRem(20);
    padding-right: calculateRem(15);
    padding-bottom: calculateRem(20);
    padding-left: calculateRem(15);

    background-color: $header-subnav-accent-color;

    color: setTextColor($header-subnav-accent-color);

    cursor: pointer;
  }

  .sub-nav-list {
    position: relative;

    padding-top: calculateRem(40);
    padding-right: calculateRem(40);
    padding-bottom: calculateRem(40);
    padding-left: calculateRem(40);

    background-color: rgba($header-subnav-color, 0.8);

    ul.sub-menu {
      width: max-content;

      margin-top: 0;
      margin-bottom: 0;

      padding-left: 0;

      li.menu-item {
        display: block;

        a {
          color: $header-subnav-link-color;
          font-size: calculateRem(14);
          text-transform: uppercase;
          &:hover {
            @if ($header-subnav-accent-color == $header-subnav-color) {
              @if ($header-subnav-accent-color != $primary-color) {
                color: $primary-color;
              }
              @else {
                color: $secondary-color;
              }
            }
            @else {
              color: $header-subnav-accent-color;
            }
          }
        }
      }
    }
  }

}
