.site-header {
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 11;
  width: 100vw;
  max-width: rem(1600);
  margin: 0 auto;
  @include media-breakpoint-up(xl) {
    width: auto;
  }
  > * {
    pointer-events: initial;
  }
  // headroom styles
  &.headroom--unpinned,
  &.headroom--pinned {
    position: fixed;
  }
}

.site-header__logo {
  display: block;
  max-width: rem(224);
  width: 100%;
  position: absolute;
  left: rem(36);
  top: rem(18);
  text-decoration: none;
  z-index: 1;
  transition: 0.2s top ease-in-out, 0.2s filter ease-in-out;
  @include media-breakpoint-up(lg) {
    width: 25%;
    max-width: rem(293);
  }
  @include media-breakpoint-up(xl) {
    top: rem(37);
    left: rem(32);
  }
  @include media-breakpoint-up(xxl) {
    max-width: rem(346);
    left: rem(82);
  }
  .headroom--unpinned & {
    @include media-breakpoint-up(xl) {
      top: rem(27);
    }
  }
  .home & {
    filter: brightness(0) invert(1);
  }
  .site-header-open & {
    .home & {
      filter: none;
    }
  }
  .headroom--not-top & {
    .home & {
      filter: none;
    }
  }
  .site-header--ecosystem & {
    @include media-breakpoint-up(lg) {
      max-width: rem(224);
    }
    @include media-breakpoint-up(xl) {
      position: static;
      width: 100%;
    }
  }

  img {
    display: block;
    width: 100%;
  }

  .site-header__logo-mobile {
    @include media-breakpoint-up(xl) {
      display: none;
    }
  }

  .site-header__logo-desktop {
    display: none;
    @include media-breakpoint-up(xl) {
      display: block;
    }
  }
  &.site-header__logo-no-parent-unit {
    transition: 0.2s top ease-in-out, 0.2s filter ease-in-out, 0.2s transform ease-in-out;
    .site-header--ecosystem.headroom--unpinned & {
      @include media-breakpoint-up(xl) {
        transform: translateY(-100%);
      }
    }
  }
}

.site-header__top {
  align-items: center;
  background-color: rgba($white, 0.95);
  display: flex;
  height: rem(38);
  padding-right: rem(58);
  padding-bottom: rem(54);
  justify-content: flex-end;
  border-bottom: rem(1) solid $grey4;
  transition: 0.2s height ease-in-out;
  @include media-breakpoint-up(xl) {
    padding: 0 rem(32) 0;
    height: rem(117);
    align-items: flex-start;
  }
  @include media-breakpoint-up(xxl) {
    padding: 0 rem(60) 0;
    position: relative;
    background-color: transparent;
  }
  .headroom--unpinned & {
    @include media-breakpoint-up(xl) {
      height: rem(93);
    }
  }
  .site-header--ecosystem & {
    @include media-breakpoint-up(xl) {
      justify-content: space-between;
      align-items: center;
      transition: 0.2s height ease-in-out, 0.2s opacity ease-in-out;
    }
    @include media-breakpoint-up(xxl) {
      padding: 0 rem(64) 0 rem(83);
    }
  }
  .site-header--ecosystem.site-header-open & {
    &:before {
      content: "";
      background-color: rgba($white, 0.95);
      position: absolute;
      top: rem(54);
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
      @include media-breakpoint-up(xl) {
        display: none;
      }
    }
  }

  // different background for homepage
  .home & {
    background-color: transparent;
    border-bottom: none;
    transition: 0.2s height ease-in-out, 0.2s background-color ease-in-out;
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: rem(-200);
      right: rem(-200);
      background: transparent linear-gradient(180deg, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box;
      height: rem(165);
      opacity: 1;
      transition: 0.2s opacity ease-in-out;
      visibility: visible;
      pointer-events: none;
    }
  }
  .headroom--not-top & {
    .home & {
      background-color: rgba($white, 0.95);
      border-bottom: rem(1) solid $grey4;
      @include media-breakpoint-up(xxl) {
        background-color: transparent;
      }
      &:after {
        display: none;
        @include media-breakpoint-up(xxl) {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: rem(-1);
          left: -50vw;
          width: 150vw;
          height: auto;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1;
          background: rgba($white, 0.95);
          border-bottom: rem(1) solid $grey4;
          pointer-events: none;
        }
      }
    }
  }
  .site-header-open & {
    .home & {
      background-color: rgba($white, 0.95);
      border-bottom: rem(1) solid $grey4;
      &:after {
        opacity: 0;
        visibility: hidden;
      }
    }
  }
  .site-header--ecosystem & {
    flex-wrap: wrap;
    border-bottom: none;
  }
  // extend header background-color on wider monitors
  &:before {
    @include media-breakpoint-up(xxl) {
      content: "";
      position: absolute;
      top: 0;
      bottom: rem(-1);
      left: -50vw;
      width: 150vw;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
      background-color: rgba($white, 0.95);
      border-bottom: rem(1) solid $grey4;
      pointer-events: none;
    }
    .home & {
      background-color: transparent;
      border-bottom: none;
    }
    .headroom--not-top & {
      .home & {
        border-bottom: rem(1) solid $grey4;
      }
    }
  }
  ul {
    display: flex;
  }
  li {
    padding-top: rem(2);
    @include media-breakpoint-up(lg) {
      padding-top: 0;
      padding-right: rem(18);
    }
    @include media-breakpoint-up(xl) {
      padding-right: rem(18);
    }
    @include media-breakpoint-up(xxl) {
      padding-right: rem(24);
    }
    &:last-child {
      @include media-breakpoint-up(xl) {
        padding-right: 0;
      }
    }
  }
}

.site-header__utility {
  position: relative;
  display: none;
  transition: 0.2s opacity ease-in-out;
  z-index: 1;
  @include media-breakpoint-up(xl) {
    display: block;
    margin-top: rem(27);
    margin-right: rem(16);
  }
  @include media-breakpoint-up(xxl) {
    margin-right: rem(53);
  }
  &.site-header__utility-search-open {
    @include media-breakpoint-up(xl) {
      transition: 0.2s margin-right ease-in-out;
      margin-right: rem(240);
    }
  }
  html:not(.js) & {
    @include media-breakpoint-up(xl) {
      margin-right: rem(240);
    }
  }
  .headroom--unpinned & {
    @include media-breakpoint-up(xl) {
      opacity: 0;
      visibility: hidden;
    }
  }
  .site-header--ecosystem & {
    @include media-breakpoint-up(xl) {
      margin-top: 0;
      margin-right: rem(5);
    }
  }
  .site-header--ecosystem & {
    + .site-header__utility-button {
      @include media-breakpoint-up(xl) {
        margin-left: rem(30);
      }
    }
  }
  a,
  .site-header__utility-dropdown-trigger {
    @include media-breakpoint-up(xl) {
      text-transform: none;
      color: $iastate-maroon;
      font-family: $typeface-sans-serif;
      font-weight: 400;
      font-size: rem(14);
      line-height: (24 / 14);
      text-decoration: none;
      transition: 0.2s color ease-in-out;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
    @include media-breakpoint-up(xxl) {
      font-size: rem(16);
      line-height: (26 / 16);
    }
    .home & {
      @include media-breakpoint-up(xl) {
        color: $white;
      }
    }
    .headroom--not-top & {
      .home & {
        @include media-breakpoint-up(xl) {
          color: $iastate-red;
        }
      }
    }
    &:hover {
      @include media-breakpoint-up(xl) {
        color: $iastate-red;
      }
      .home & {
        @include media-breakpoint-up(xl) {
          color: $iastate-gold;
        }
      }
      .headroom--not-top & {
        .home & {
          @include media-breakpoint-up(xl) {
            color: $iastate-maroon;
          }
        }
      }
    }
  }

  .site-header__utility-dropdown-trigger {
    @include media-breakpoint-up(xl) {
      position: relative;
      padding: 0;
      margin: 0;
    }
    &[aria-expanded="true"] {
      &:after {
        @include media-breakpoint-up(xl) {
          transform: rotate(225deg);
          top: rem(1);
        }
      }
    }
    &:hover {
      &:after {
        @include media-breakpoint-up(xl) {
          border-color: $iastate-red;
          .home & {
            border-color: $iastate-gold;
          }
          .headroom--not-top & {
            .home & {
              border-color: $iastate-maroon;
            }
          }
        }
      }
    }
    &:after {
      @include media-breakpoint-up(xl) {
        content: "";
        display: inline-block;
        position: relative;
        margin-left: rem(7);
        top: rem(-4);
        width: rem(8);
        height: rem(8);
        border-right: rem(2) solid $iastate-maroon;
        border-bottom: rem(2) solid $iastate-maroon;
        transform: rotate(45deg);
        transition: 0.2s transform ease-in-out, 0.2s top ease-in-out, 0.2s border-color ease-in-out;
        transform-origin: center;
        .home & {
          border-color: $white;
        }
        .headroom--not-top & {
          .home & {
            border-color: $iastate-red;
          }
        }
      }
    }
  }
}

.site-header__utility-dropdown-menu {
  @include media-breakpoint-up(xl) {
    position: absolute;
    display: flex;
    flex-direction: column;
    box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
    padding: rem(20) rem(30);
    background-color: $white;
    transform: translateX(-25%);
    transition: 0.3s transform ease-in-out, 0.3s opacity ease-in-out;
    top: rem(33);
  }
  &[aria-hidden="true"] {
    @include media-breakpoint-up(xl) {
      visibility: hidden;
      transform: translate3d(-25%, #{rem(30)}, 0);
      opacity: 0;
    }
  }
  &[aria-hidden="false"] {
    @include media-breakpoint-up(xl) {
      opacity: 1;
    }
  }
  li {
    @include media-breakpoint-up(xl) {
      margin: 0 0 rem(10);
      padding: 0;
    }
    &:last-child {
      @include media-breakpoint-up(xl) {
        margin-bottom: 0;
      }
    }
    a {
      @include media-breakpoint-up(xl) {
        white-space: nowrap;
        .home & {
          color: $iastate-maroon;
          &:hover {
            color: $iastate-red;
          }
        }
        .headroom--not-top & {
          .home & {
            color: $iastate-maroon;
            &:hover {
              color: $iastate-red;
            }
          }
        }
      }
    }
  }
}

.site-header__search {
  align-self: stretch;
  height: rem(54);
  width: rem(54);
  margin-right: rem(31);
  transition: 0.2s opacity ease-in-out;
  z-index: 1;
  @include media-breakpoint-up(xl) {
    position: relative;
    top: rem(14);
    margin-right: rem(-16);
    display: flex;
    justify-content: center;
  }
  @include media-breakpoint-up(xxl) {
    margin-right: 0;
  }
  .headroom--unpinned & {
    @include media-breakpoint-up(xl) {
      opacity: 0;
    }
  }
  .site-header--ecosystem & {
    @include media-breakpoint-up(xl) {
      top: rem(2);
      height: auto;
    }
  }
}

.site-header__search-toggle {
  display: none;
  @include media-breakpoint-up(xl) {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0 rem(16);
    font-size: rem(20);
    border: none;
    background-color: transparent;
    color: $iastate-maroon;
    display: block;
    font-size: rem(20);
    text-decoration: none;
    transition: 0.2s color ease-in-out;
    cursor: pointer;
  }
  &[aria-expanded="true"] {
    opacity: 0;
    visibility: hidden;
  }
  .home & {
    color: $white;
  }
  .headroom--not-top & {
    .home & {
      color: $iastate-red;
    }
  }
  &:hover {
    @include media-breakpoint-up(xl) {
      color: $iastate-red;
    }
    .home & {
      @include media-breakpoint-up(xl) {
        color: $iastate-gold;
      }
    }
    .headroom--not-top & {
      .home & {
        @include media-breakpoint-up(xl) {
          color: $iastate-maroon;
        }
      }
    }
  }
}

.site-header__main {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  @include media-breakpoint-up(lg) {
    background-color: transparent;
  }
  @include media-breakpoint-up(xl) {
    pointer-events: initial;
  }
  * {
    pointer-events: initial;
  }
  .site-header--ecosystem & {
    @include media-breakpoint-up(xl) {
      pointer-events: none;
    }
  }
}

.site-header__mega-menu {
  background-color: $white;
  pointer-events: none;
  position: absolute;
  top: rem(55);
  right: 0;
  bottom: 0;
  left: 0;
  transition: 0.2s transform ease-in-out;
  height: 100vh;
  @include media-breakpoint-up(lg) {
    background-color: transparent;
  }
  @include media-breakpoint-up(xl) {
    bottom: auto;
  }
  .headroom--unpinned & {
    @include media-breakpoint-up(xl) {
      transform: translateY(#{rem(-35)});
    }
  }
  html:not(.js) & {
    display: none;
    @include media-breakpoint-up(xl) {
      display: block;
    }
    &:target {
      display: block;
    }
  }
  .js & {
    opacity: 0;
    visibility: hidden;
    &[aria-hidden="false"] {
      opacity: 1;
      visibility: visible;
    }
    @include media-breakpoint-up(xl) {
      opacity: 1;
      visibility: visible;
    }
    &.transitioning {
      transition: 0.3s opacity ease-in-out, 0.3s visibility ease-in-out;
    }
  }
  .site-header--ecosystem & {
    top: rem(90);
    @include media-breakpoint-up(xl) {
      height: auto;
      position: relative;
      top: 0;
      width: 100%;
    }
  }
}

.site-header__mega-menu-inner {
  background-color: $iastate-red;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  position: relative;
  @include media-breakpoint-up(xl) {
    background-color: transparent;
  }
  .site-header--ecosystem & {
    @include media-breakpoint-up(xl) {
      overflow: visible;
    }
  }
}

.site-header__mega-menu-scroller {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  @include media-breakpoint-up(xl) {
    overflow: initial;
    pointer-events: none;
  }
}

.site-header__mega-menu-max-bound {
  margin: 0 auto;
  max-width: rem(1660);

  .site-header--ecosystem & {
    @include media-breakpoint-up(xl) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 rem(46) 0 rem(32);
    }
    @include media-breakpoint-up(xxl) {
      padding: 0 rem(83) 0 rem(83);
    }
  }
}

.site-header__mega-menu-open {
  height: rem(55);
  width: rem(58);
  top: rem(-55);
  right: rem(28);
  transition: 0.3s background-color ease-in-out;
  display: flex;
  align-items: center;
  font-size: rem(16);
  font-weight: 700;
  flex: 0 0 auto;
  letter-spacing: em(0.25, 16);
  line-height: 1;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  background-color: transparent;
  border: none;
  @include media-breakpoint-up(xl) {
    display: none;
  }
  .site-header__mega-menu-open-line-wrap {
    width: rem(30);
    span {
      display: block;
      width: 100%;
      border-bottom: rem(2) solid $iastate-red;
      margin-bottom: rem(7);
      transform-origin: center center;
      transition: 0.2s transform ease-in-out, 0.2s opacity ease-in-out, 0.2s border-color ease-in-out;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
      .home & {
        border-bottom-color: $white;
      }
      .site-header-open & {
        .home & {
          border-bottom-color: $iastate-red;
        }
      }
      .headroom--not-top & {
        .home & {
          border-bottom-color: $iastate-red;
        }
      }
    }
    &:hover {
      span {
        border-color: $iastate-maroon;
      }
      .home & {
        span {
          border-bottom-color: $white;
        }
      }
      .site-header-open & {
        .home & {
          span {
            border-bottom-color: $iastate-maroon;
          }
        }
      }
      .headroom--not-top & {
        .home & {
          span {
            border-bottom-color: $iastate-maroon;
          }
        }
      }
    }
  }
  &:hover {
    background-color: transparent;
  }
  &[aria-expanded="true"] {
    .site-header__mega-menu-open-line-wrap {
      span {
        &:nth-child(1) {
          transform: rotate(-45deg) translate(#{rem(-6)}, #{rem(6)});
        }
        &:nth-child(2) {
          opacity: 0;
        }
        &:nth-child(3) {
          transform: rotate(45deg) translate(#{rem(-6)}, #{rem(-7)});
        }
      }
    }
  }
}

.site-header__mega-menu-main {
  background-color: $iastate-red;
  padding: rem(60) rem(36);
  position: relative;
  @include media-breakpoint-up(xl) {
    background-color: transparent;
    padding: 0 rem(51) 0 0;
    margin-top: rem(13);
  }
  @include media-breakpoint-up(xxl) {
    padding: 0 rem(92) 0 0;
  }
  html:not(.js) & {
    @include media-breakpoint-up(xl) {
      margin-top: rem(-23);
    }
  }
  .site-header--ecosystem & {
    padding-top: rem(30);
    @include media-breakpoint-up(xl) {
      margin-top: rem(-5);
      padding: rem(20) 0;
      background-color: $off-white;
      &:before {
        content: "";
        position: absolute;
        background-color: $off-white;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 150vw;
        left: -50vw;
        z-index: -1;
      }
    }
  }
}

.site-header__mega-menu-main-nav {
  @include media-breakpoint-up(xl) {
    flex: 1 0 auto;
  }
  > ul {
    @include media-breakpoint-up(xl) {
      display: flex;
      justify-content: flex-end;
      width: 65%;
      margin: 0 0 0 auto;
    }
    .site-header--ecosystem & {
      @include media-breakpoint-up(xl) {
        width: 100%;
        flex-wrap: wrap;
        margin-right: rem(-40);
      }
    }
    > li {
      margin-bottom: rem(22);
      @include media-breakpoint-up(xl) {
        padding-right: rem(40);
        margin-bottom: 0;
        transition: 0.3s opacity ease-in-out;
        position: relative;
      }
      html:not(.js) & {
        &:hover {
          & > ul {
            @include media-breakpoint-up(xl) {
              display: block;
            }
          }
          & > .two-column-dropdown {
            @include media-breakpoint-up(xl) {
              display: flex;
            }
          }
        }
      }
      &.site-header__parent-link-no-subnav-wrap {
        @include media-breakpoint-up(xl) {
          padding-right: rem(30);
        }
      }
      .site-header--ecosystem & {
        @include media-breakpoint-up(xl) {
          padding: rem(7) rem(40) rem(7) 0;
        }
      }

      > a,
      > button {
        @extend %iastate22-button;
        @extend %iastate22-button--reverse;
        width: 100%;
        @include media-breakpoint-up(md) {
          display: block;
          max-width: rem(676);
        }
        @include media-breakpoint-up(xl) {
          max-width: none;
          padding: 0;
          background-color: transparent;
          border: none;
          color: $iastate-red;
          font-size: rem(14);
          line-height: (26 / 14);
          margin: 0;
          border-radius: 0;
          @include media-breakpoint-up(xxl) {
            font-size: rem(16);
            line-height: (26 / 16);
          }
        }
        &.site-header__parent-link-no-subnav {
          &:after {
            display: none;
          }
        }

        .home & {
          @include media-breakpoint-up(xl) {
            color: $white;
          }
        }
        .headroom--not-top & {
          .home & {
            @include media-breakpoint-up(xl) {
              color: $iastate-red;
            }
          }
        }

        &:after {
          content: "";
          position: absolute;
          border-right: rem(2) solid $iastate-maroon;
          border-bottom: rem(2) solid $iastate-maroon;
          width: rem(12);
          height: rem(12);
          right: rem(16);
          top: rem(14);
          transform: rotate(315deg);
          transform-origin: center;
          @include media-breakpoint-up(xl) {
            right: rem(-13);
            top: rem(7);
            width: rem(7);
            height: rem(7);
            border-right: rem(2) solid $iastate-red;
            border-bottom: rem(2) solid $iastate-red;
            transform: rotate(45deg);
            transition: 0.2s transform ease-in-out, 0.2s top ease-in-out, 0.2s border-color ease-in-out;
          }
          @include media-breakpoint-up(xxl) {
            right: rem(-16);
            top: rem(5);
            width: rem(10);
            height: rem(10);
          }
          .home & {
            @include media-breakpoint-up(xl) {
              border-color: $white;
            }
          }
          .headroom--not-top & {
            .home & {
              @include media-breakpoint-up(xl) {
                border-color: $iastate-red;
              }
            }
          }
        }

        &:hover {
          @include media-breakpoint-up(xl) {
            background-color: transparent;
            padding-right: 0;
          }
          .home & {
            @include media-breakpoint-up(xl) {
              color: $iastate-gold;
            }
          }
          .headroom--not-top & {
            .home & {
              @include media-breakpoint-up(xl) {
                color: $iastate-maroon;
              }
            }
          }
          &:after {
            @include media-breakpoint-up(xl) {
              border-color: $iastate-maroon;
            }
            .home & {
              @include media-breakpoint-up(xl) {
                border-color: $iastate-gold;
              }
            }
            .headroom--not-top & {
              .home & {
                @include media-breakpoint-up(xl) {
                  border-color: $iastate-maroon;
                }
              }
            }
          }
        }
        &[aria-expanded="true"] {
          @include media-breakpoint-up(xl) {
            border-bottom: rem(7) solid $iastate-gold;
            margin-bottom: rem(-7);
          }
          &:after {
            @include media-breakpoint-up(xl) {
              transform: rotate(225deg);
              top: rem(10);
              border-color: $iastate-maroon;
            }
            .home & {
              @include media-breakpoint-up(xl) {
                border-color: $iastate-gold;
              }
            }
            .headroom--not-top & {
              .home & {
                @include media-breakpoint-up(xl) {
                  border-color: $iastate-maroon;
                }
              }
            }
          }
        }
      }
      ul {
        background-color: $iastate-red;
        overflow-y: auto;
        padding: rem(20) rem(40);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: 0.3s opacity ease-in-out, 0.3s transform ease-in-out, 0.3s visibility ease-in-out;
        z-index: 1;
        @include media-breakpoint-up(xl) {
          background-color: $white;
          margin-top: rem(22);
          padding: rem(40) rem(52);
          top: rem(11);
          right: initial;
          left: initial;
          bottom: initial;
          box-shadow: rem(9) rem(9) rem(20) rgba($black, 0.2);
          min-width: rem(405);
          left: rem(-120);
          display: flex;
          flex-wrap: wrap;
          opacity: 0;
        }
        .site-header--ecosystem & {
          @include media-breakpoint-up(xl) {
            background-color: $off-white;
            margin-top: rem(29);
          }
        }
        &[aria-hidden="true"] {
          // opacity: 0;
          transform: translate3d(100%, 0, 0);
          visibility: hidden;
          @include media-breakpoint-up(xl) {
            transform: translate3d(0, #{rem(30)}, 0);
          }
        }
        &[aria-hidden="false"] {
          opacity: 1;
          transform: none;
          visibility: visible;
          height: 100vh;
          z-index: 2;
          @include media-breakpoint-up(xl) {
            height: auto;
          }
        }
        &.two-column-dropdown {
          @include media-breakpoint-up(xl) {
            min-width: rem(727);
            left: rem(-243);
            gap: 0 rem(40);
          }
          li {
            @include media-breakpoint-up(xl) {
              width: calc(50% - #{rem(20)});
            }
          }
        }
        html:not(.js) & {
          z-index: -1;
          @include media-breakpoint-up(xl) {
            display: none;
            padding-bottom: rem(30);
            margin-top: rem(14);
            z-index: 1;
          }
        }
        li {
          margin-bottom: rem(10);
          padding-left: rem(14);
          @include media-breakpoint-up(xl) {
            flex: 0 1 auto;
            width: 100%;
            padding-left: 0;
            margin-bottom: rem(13);
          }

          &.site-header__mega-menu-main-nav-dropdown-back-wrap {
            margin-bottom: rem(8);
          }
          &.site-header__mega-menu-main-nav-dropdown-parent-wrap {
            margin-bottom: rem(20);
            @include media-breakpoint-up(xl) {
              order: 1;
              width: 100% !important;
              border-top: rem(2) solid $iastate-gold;
              margin-top: rem(45);
              margin-bottom: rem(-15);
              padding-top: rem(25);
            }
            &.site-header__mega-menu-main-nav-dropdown-parent-wrap-no-href {
              display: none;
            }
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
        padding-right: 0;
        &.site-header__parent-link-no-subnav-wrap {
          @include media-breakpoint-up(xl) {
            margin-right: rem(-20);
          }
          .site-header--ecosystem & {
            @include media-breakpoint-up(xl) {
              margin-right: 0;
            }
          }
        }
        .site-header--ecosystem & {
          @include media-breakpoint-up(xl) {
            padding-right: rem(40);
          }
        }
      }
      &:hover {
        opacity: 1;
      }
      .user-tabbing &:focus-within {
        opacity: 1;
      }

      &:last-child,
      &:nth-last-child(2) {
        > ul {
          @include media-breakpoint-up(xl) {
            right: 0;
            left: initial;
          }
        }
      }
    }
  }
  a {
    color: $white;
    transition: 0.3s color ease-in-out, 0.3s text-decoration-color ease-in-out;
    text-decoration-color: transparent;
    font-family: $typeface-sans-serif;
    font-weight: 700;
    font-size: rem(18);
    line-height: (26 / 18);
    text-decoration: underline;
    text-decoration-color: $white;
    text-decoration-thickness: rem(1);
    text-underline-offset: rem(1);
    margin: 0;
    @include media-breakpoint-up(xl) {
      color: $iastate-maroon;
      line-height: (34 / 18);
      text-decoration-color: $iastate-maroon;
      font-size: rem(16);
      line-height: (24 / 16);
    }
    @include media-breakpoint-up(xxl) {
      font-size: rem(18);
      line-height: (26 / 18);
    }
    &.link-tertiary {
      &:hover {
        color: $white;
        @include media-breakpoint-up(xl) {
          color: $iastate-maroon;
        }
      }
    }
    .arrow {
      background-color: $white;
      @include media-breakpoint-up(xl) {
        background-color: $iastate-maroon;
      }
      &:before,
      &:after {
        background-color: $white;
        @include media-breakpoint-up(xl) {
          background-color: $iastate-maroon;
        }
      }
    }
  }
}

.site-header__mega-menu-main-nav-dropdown-back-wrap {
  @include media-breakpoint-up(xl) {
    display: none;
  }
}

.site-header__mega-menu-main-nav-dropdown-back {
  color: $white;
  border: none;
  background-color: transparent;
  display: inline-block;
  font-weight: 700;
  font-size: rem(18);
  height: rem(44);
  padding: 0 0 0 rem(16);
  position: relative;
  transition: 0.3s color ease-in-out;
  margin-left: rem(-14);
  .site-header__mega-menu-main-nav-dropdown-back-label {
    font-family: $typeface-sans-serif;
    font-weight: 700;
    font-size: rem(16);
    line-height: (26 / 16);
    letter-spacing: em(0.96, 16);
    position: relative;
    left: rem(-4);
    cursor: pointer;
  }
  &:hover,
  .user-tabbing &:focus {
    color: $white;
    .site-header__mega-menu-main-nav-dropdown-back-icon {
      color: $white;
      transform: translate3d(#{rem(-4)}, -55%, 0);
    }
  }
}

.site-header__mega-menu-main-nav-dropdown-back-icon {
  color: $white;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  font-size: rem(16);
  line-height: (26 / 16);
  letter-spacing: em(0.96, 16);
  position: absolute;
  top: rem(22);
  left: 0;
  transform: translate3d(0, -55%, 0);
  transition: 0.3s transform ease-in-out;
}

a.site-header__mega-menu-main-nav-dropdown-parent {
  font-family: $typeface-sans-serif;
  font-size: rem(21);
  line-height: (37 / 21);
  font-weight: 700;
  color: $white;
  text-decoration: none;
  margin-left: rem(-14);
  position: relative;
  @include media-breakpoint-up(xl) {
    color: $iastate-maroon;
    font-size: rem(16);
    line-height: (27 / 16);
    margin-left: 0;
  }
  @include media-breakpoint-up(xxl) {
    font-size: rem(18);
    line-height: (31 / 18);
  }
  &:hover {
    color: $white;
    @include media-breakpoint-up(xl) {
      color: $iastate-maroon;
    }
  }
  .arrow {
    background-color: $white;
    top: rem(17);
    @include media-breakpoint-up(xl) {
      background-color: $iastate-maroon;
      top: rem(14);
    }
    &:before,
    &:after {
      background-color: $white;
      @include media-breakpoint-up(xl) {
        background-color: $iastate-maroon;
      }
    }
  }
}

.site-header__mega-menu-secondary {
  background-color: $iastate-red;
  padding: 0 rem(36) rem(60);
  position: relative;
  &:before {
    content: "";
    background-color: $iastate-red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s opacity ease-in-out, 0.3s transform ease-in-out, 0.3s visibility ease-in-out;
    transform: translateX(100%);
  }
  @include media-breakpoint-up(xl) {
    display: none;
  }
  &[aria-hidden="true"] {
    &:before {
      transform: none;
      opacity: 1;
    }
  }
}

.site-header__mega-menu-utility {
  max-width: rem(676);
  margin-bottom: rem(150);
  @include media-breakpoint-up(xl) {
    max-width: none;
    margin-bottom: 0;
  }
  ul {
    column-count: 2;
    li {
      margin-bottom: rem(10);
      line-height: (26 / 18);
      &:last-child {
        margin-bottom: 0;
      }
    }
    a {
      color: $white;
      font-family: $typeface-sans-serif;
      font-size: rem(18);
      font-weight: 700;
      text-decoration: underline;
      transition: 0.3s color ease-in-out;
      &:hover,
      .user-tabbing &:focus {
        color: $white;
      }
    }
  }
}

.site-header__search-form-desktop,
.site-header__search-form-mobile {
  margin: rem(40) 0;
  position: relative;
  input {
    width: 100%;
    height: rem(48);
    border: none;
    background-color: $white;
    &::placeholder {
      color: transparent;
    }
    html:not(.js) & {
      &::placeholder {
        color: currentColor;
      }
    }
    // hide ios search icons from input
    &[type="search"]::-webkit-search-decoration,
    &[type="search"]::-webkit-search-cancel-button,
    &[type="search"]::-webkit-search-results-button,
    &[type="search"]::-webkit-search-results-decoration {
      display: none;
    }
  }

  button[type="submit"] {
    border: none;
    font-size: rem(25);
    position: absolute;
    right: rem(6);
    top: rem(8);
    color: $iastate-red;
    transition: 0.2s color ease-in-out;
    cursor: pointer;
    border-radius: 0;
    margin: 0;
    padding: 0 rem(7);
    line-height: 1.3;
    background-color: transparent;
    &:hover {
      color: $iastate-maroon;
      background-color: transparent;
      padding: 0 rem(7);
    }
  }
}

.site-header__search-form-desktop {
  display: none;
  @include media-breakpoint-up(xl) {
    display: block;
    position: absolute;
    right: 0;
    top: rem(2);
    margin: 0;
    width: 0;
    transition: 0.2s width ease-in-out;
    visibility: hidden;
  }
  .site-header--ecosystem & {
    @include media-breakpoint-up(xl) {
      top: rem(-7);
    }
  }
  &[aria-hidden="false"] {
    width: rem(270);
    visibility: visible;
    button[type="submit"] {
      display: block;
      height: rem(44);
      min-width: rem(44);
      right: rem(44);
      top: rem(2);
    }
    input {
      border: rem(2) solid $iastate-maroon;
      pointer-events: all;
      padding: rem(8) rem(15);
    }
  }
  button[type="submit"] {
    @include media-breakpoint-up(xl) {
      display: none;
      font-size: rem(20);
      top: rem(13);
      right: rem(40);
    }
  }
  input {
    border: rem(2) solid transparent;
    width: 100%;
    padding: 0;
    transition: 0.2s border-color ease-in-out;
    pointer-events: none;

    html:not(.js) & {
      @include media-breakpoint-up(xl) {
        pointer-events: all;
        border: rem(2) solid $iastate-maroon;
        padding: rem(8) rem(15);
      }
    }
  }
  html:not(.js) & {
    @include media-breakpoint-up(xl) {
      width: rem(270);
      visibility: visible;
    }
  }
}
.site-header__search-close {
  z-index: 11;
  position: relative;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: rem(26);
  color: $iastate-red;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s opacity ease-in-out;
  height: rem(44);
  min-width: rem(44);
  top: rem(4);
  left: rem(-27);
  display: none;
  &[aria-hidden="false"] {
    display: block;
    position: absolute;
    left: initial;
    opacity: 1;
    visibility: visible;
    .site-header--ecosystem & {
      top: rem(-5);
    }
  }
}

// close button for when js is disabled
.nojs-close-menu {
  html:not(.js) & {
    text-align: right;
    padding-right: 40px;
    margin-top: 10px;
    color: $white;
    display: block;
  }
}

// Styles for ecosystem site header variant only
.site-header__parent-unit-name {
  position: absolute;
  top: rem(52);
  left: rem(35);
  font-family: $typeface-sans-serif;
  font-size: rem(18);
  line-height: (23 / 18);
  color: $iastate-red;
  opacity: 0;
  transition: 0.2s opacity ease-in-out, 0.2s color ease-in-out;
  max-width: rem(275);
  display: inline-block;
  text-decoration: none;
  pointer-events: none;

  @include media-breakpoint-up(xl) {
    position: static;
    opacity: 1;
    font-size: rem(16);
    line-height: (23 / 16);
    font-weight: 700;
    margin-top: rem(6);
    pointer-events: all;
  }

  .headroom--unpinned & {
    @include media-breakpoint-up(xl) {
      opacity: 0;
    }
  }

  &:hover {
    color: $iastate-maroon;
  }

  .site-header-open & {
    opacity: 1;
    z-index: 1;
    pointer-events: all;
  }
}
.site-header__website-title {
  background-color: $off-white;
  flex: 0 1 auto;
  width: 100vw;
  margin-top: rem(54);
  margin-right: rem(-58);
  padding: rem(10) rem(38);
  font-family: $typeface-sans-serif;
  font-weight: 700;
  font-size: rem(18);
  line-height: (23 / 18);
  color: $iastate-maroon;
  transition: 0.2s opacity ease-in-out;
  @include media-breakpoint-up(xl) {
    display: none;
  }
  .site-header-open & {
    opacity: 0;
  }
  .site-header__mega-menu-main & {
    opacity: 1;
    margin: 0 0 rem(28) 0;
    background: transparent;
    width: auto;
    padding: 0;
    color: $white;
    @include media-breakpoint-up(xl) {
      max-width: rem(250);
      color: $iastate-maroon;
      display: block;
      margin: 0;
    }
    a {
      .site-header-open & {
        pointer-events: all;
      }
    }
  }
  a {
    color: currentColor;
    text-decoration: none;
    transition: 0.3s color ease-in-out;
    &:hover {
      text-decoration: underline;
      @include media-breakpoint-up(xl) {
        color: $iastate-red;
        text-decoration: none;
      }
    }
    .site-header-open & {
      pointer-events: none;
    }
  }
}

.site-header__utility-button {
  background-color: $iastate-red;
  color: $white;
  padding: rem(2) rem(30) rem(2) rem(15);
  top: rem(3);
  position: relative;
  text-decoration: none;
  font-weight: 700;
  transition: 0.2s background-color ease-in-out, 0.2s opacity ease-in-out;
  display: none;
  @include media-breakpoint-up(xl) {
    margin-left: rem(20);
    display: block;
  }
  @include media-breakpoint-up(xxl) {
    margin-left: rem(5);
  }

  .headroom--unpinned & {
    @include media-breakpoint-up(xl) {
      opacity: 0;
    }
  }
  &:hover {
    background-color: $iastate-maroon;
    color: $white;
  }
  span {
    position: relative;
    &:after {
      content: "";
      position: absolute;
      border-right: rem(2) solid $iastate-gold;
      border-bottom: rem(2) solid $iastate-gold;
      width: rem(10);
      height: rem(10);
      margin-left: rem(4);
      top: rem(7);
      transform: rotate(-45deg);
    }
  }
  .site-header__mega-menu-utility & {
    background-color: $white;
    color: $iastate-maroon;
    margin-top: rem(30);
    display: inline-block;
    position: static;
    transition: 0.2s background-color ease-in-out, 0.2s color ease-in-out;
    &:hover {
      color: $iastate-red;
      background-color: $off-white;
      span {
        &:after {
          border-color: $iastate-red;
        }
      }
    }
    span {
      &:after {
        transition: 0.2s border-color ease-in-out;
        border-color: $iastate-maroon;
      }
    }
  }
}

.site-header__utility-search-wrap {
  @include media-breakpoint-up(xl) {
    display: flex;
    align-items: flex-end;
  }
}