/* stylelint-disable selector-pseudo-element-colon-notation */
/* stylelint-disable no-descending-specificity */

/* The linter really doesnt seem to be handling large complicated nesting very well, needed to disable a few things */

.header {
  /* Utility */
  --nav-utility-background-color: var(--gray-80);

  /* Navigation */
  --nav-navigation-background-color: var(--gray-90);
  --nav-item-focus-color: var(--core-color-white);
  --nav-dropdown-background: var(--core-color-white);
  --nav-dropdown-background-hover: var(--gray-10);
  --nav-dropdown-link-border: 0.5px solid var(--gray-70);
  --nav-hamburger-color: var(--core-color-white);
  --nav-focus-visible-outline: dashed 1px var(--nav-item-focus-color);

  /* Mobile */
  --nav-link-color-mobile: var(--gray-90);
  --nav-link-color-active-mobile: var(--gray-90);
  --nav-link-background-mobile: var(--gray-10);
  --nav-link-background-active-mobile: var(--gray-30);
  --nav-mobile-search-height: 60px;

  /* Desktop */
  --nav-dropdown-width: 240px;
  --nav-link-color-desktop: var(--core-color-white);
  --nav-link-color-active-desktop: var(--gray-90);
  --nav-link-background-desktop: transparent;
  --nav-link-background-active-desktop: var(--core-color-white);

  nav {
    position: fixed;
    z-index: 2;
    width: 100%;

    /* Expanded mobile nav */
    &[aria-expanded="true"] {
      .nav-navigation-wrap {
        .nav-search {
          display: block;
          margin: 0;
          padding: 10px 15px;
          border-top: 1px solid var(--gray-20);

          @media (width >=664px) {
            display: none;
          }

          .search-trigger {
            display: none;
          }

          .search-block {
            display: block;
          }

          .search-container {
            visibility: visible;
          }

          .search-input{
             box-shadow: 0 0 0 1000px var(--gray-90) inset;
          }
        }

        .nav-navigation {
          display: block;
        }
      }
    }
  }

  /* Utilities Bar (Logo, Search, User, Hamburger) */
  .nav-utilities-wrap {
    background-color: var(--nav-navigation-background-color);
    transition: 0.3s ease background-color;

    .content {
      margin: 0 auto;
      display: grid;
      justify-content: space-between;
      align-items: center;
      max-width: var(--content-max-width);
      grid-template:
        "skip logo . . user hamburger" var(--nav-height) / auto auto 1fr 1fr auto auto;
    }

    /* This is the desktop search, hide on mobile */
    .nav-search {
      display: none;
    }
  }

  /* Navigation Bar (Nav) */
  .nav-navigation-wrap {
    background-color: var(--nav-navigation-background-color);

    .content {
      margin: 0 auto;
      display: grid;
      justify-content: space-between;
      align-items: center;
      max-width: var(--content-max-width);
      grid-template:
        "." 0
        "search" auto
        "navigation" 1fr
        / 1fr;
    }

    .search-input {
        margin-left: 0.6rem;
       -webkit-text-fill-color: var(--gray-10);
        caret-color: var(--gray-10);
      }
  }

  /* Skip */
  .skip-to-main {
    grid-area: skip;
    position: fixed;
    left: var(--inner-spacing-s);
    top: 6px;
    background: var(--core-color-white);
    color: var(--brand-color-blue);
    padding: var(--inner-spacing-xs) var(--inner-spacing-m);
    border-radius: var(--inner-spacing-s);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    text-decoration: none;

    &:focus-visible,
    &:active {
      opacity: 1;
      pointer-events: auto;
    }
  }

  /* Logo */
  .nav-logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 164px;
    height: var(--nav-height);
    margin-left: 16px;
    padding: 0;

    a {
      display: block;

      &:focus-visible {
        outline: var(--nav-focus-visible-outline);
      }
    }

    .block.image picture {
      display: flex;

      img {
        width: 100%;
      }
    }
  }

  /* Navigation */
  .nav-navigation {
    grid-area: navigation;
    margin: 0;
    padding: 0;
    width: 100%;
    display: none;
    background-color: var(--nav-dropdown-background);
    height: calc(100dvh - var(--nav-utility-height));
    overflow: hidden auto;
  }

  /* Top Level Ul */
  .nav-menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;

    &.active {
      .nav-item-link,
      .nav-item-trigger {
        background-color: var(--nav-link-background-active-mobile);
      }
    }
  }

  /* Top Level Lis */
  .nav-item {
    position: relative;

    /* Top Level Li Buttons */
    .nav-item-link,
    .nav-item-trigger {
      display: flex;
      gap: 10px;
      align-items: center;
      color: var(--nav-link-color-mobile);
      height: var(--nav-navigation-height);
      padding: 0 15px;
      width: 100%;
      line-height: 21px;
      background: var(--gray-10);
      border: none;
      border-bottom: 1px solid var(--core-color-white);
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }

      &:focus-visible {
        outline-offset: -8px;
        outline: var(--nav-focus-visible-outline);
        outline-color: currentcolor;
        text-decoration: underline;
      }

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

      svg {
        fill: currentcolor;
      }
    }

    /* Dropdown Specific Trigger */
    .nav-item-trigger {
      &[aria-expanded="true"] {
        font-weight: 700;
        color: var(--nav-link-color-active-mobile);

        &:focus-visible {
          outline-color: currentcolor;
        }

        &:active {
          outline-width: 0;
        }

        svg {
          fill: currentcolor;
        }
      }

      &:after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-right: 1px solid currentcolor;
        border-bottom: 1px solid currentcolor;
        transform: rotate(45deg);
        transition: 0.3s ease;
      }
    }
  }

  /* Show Dropdown on Expanded */
  .nav-item-trigger {
    &[aria-expanded="true"] {
      &:after {
        content: "";
        margin-top: 3px;
        transform: rotate(225deg);
      }

      &+.dropdown {
        display: block;
      }
    }
  }

  /* Dropdown Menus */
  .dropdown {
    display: none;
    margin: 0;
    padding: 0;
    background-color: var(--nav-dropdown-background);
    box-shadow: 0 4px 5px 2px rgb(0 0 0 / 10%);

    li {
      list-style: none;
      margin: 0;
      color: var(--nav-link-color-mobile);
    }

    .d-link {
      a {
        display: block;
        padding: 13px;
        color: var(--nav-link-color-mobile);
        text-decoration: none;
        border-bottom: var(--nav-dropdown-link-border);

        &:hover {
          background-color: var(--nav-dropdown-background-hover);
          text-decoration: underline;
        }

        &:focus-visible {
          outline-offset: -8px;
        }
      }

      strong > a, 
      a > strong {
        font-weight: 700;
        color: var(--brand-color-blue);
        text-transform: uppercase;
        letter-spacing: 1px;
      }
    }

    .d-text {
      padding: 13px;
    }
  }

  /* Overlay */
  .overlay {
    display: none;
    height: 100%;
    width: 100%;
    background-color: rgb(0 0 0 / 25%);
    position: fixed;
    z-index: 0;

    &.show {
      display: block;
    }
  }

  /* Mobile Hamburger Button */
  .hamburger {
    grid-area: hamburger;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 16px 0 10px;
    min-height: 19px;
    padding-left: 0;
    padding-right: 0;
    border: none;
    background-color: transparent;
    color: var(--nav-hamburger-color);
    cursor: pointer;
    transition: 0.3s ease transform;

    &:focus-visible {
      outline: var(--nav-focus-visible-outline);
      outline-offset: 5px;
    }

    .bars {
      display: block;
      position: relative;
      width: 25px;
      height: 2px;
      background-color: var(--nav-hamburger-color);
      transition: 0.3s;

      &:before,
      &:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--nav-hamburger-color);
        transition: 0.3s;
      }

      &:before {
        transform: translate(0, -8px);
      }

      &:after {
        transform: translate(0, 8px);
      }
    }

    &[aria-expanded="true"] {
      .bars {
        background-color: transparent;

        &:before {
          transform: rotate(45deg);
        }

        &:after {
          transform: rotate(-45deg);
        }
      }
    }
  }

  /* Search Overrides */
  .nav-search {
    grid-area: search;
    position: relative;
    margin: 16px 0;
    padding: 0;
    display: none;

    .search-trigger {
      position: absolute;
      top: 2px;
      right: 7px;
      width: 30px;
      height: 24px;
      color: var(--core-color-white);
      background: transparent;
      border: none;
      overflow: hidden;

      &:focus-visible {
        outline: var(--nav-focus-visible-outline);
      }

      .search-trigger-icon {
        display: block;
        cursor: pointer;

        svg {
          width: 21px;
          height: 21px;
          fill: currentcolor;
        }
      }

      &[aria-expanded="true"] {
        visibility: hidden;

        &+div .search-block {
          .search-container {
            visibility: visible;
          }

          .search-input-wrapper {
            width: 230px;
            transition-delay: 50ms;
          }
        }
      }
    }

    .search-block {
      padding: 0;
      height: 26px;

      .search-container {
        visibility: hidden;
        padding: 0;
      }

      .search-form {
        margin: 0 0 0 auto;
        border: 1px solid var(--core-color-white);
        border-radius: 80px;
      }

      .search-input-wrapper {
        width: 0;
        transition: 0.3s ease;
        transition-delay: 50ms;
      }

      .search-input,
      .search-submit {
        height: 20px;
        color: var(--core-color-white);
        font-size: var(--body-medium-font-size);
        background: transparent;
        border: none;
      }

      .search-input {
        padding-right: 0;
        margin-left: 0.6rem;
        -webkit-text-fill-color: var(--gray-10);
        caret-color: var(--gray-10);
      }

      .search-submit {
        width: auto;
        margin-right: 2px;
        padding: 0 7px;
        border-radius: 0 80px 80px 0;

        .search-icon {
          width: 21px;
          height: 21px;
        }

        &:hover,
        &:focus-visible,
        &:active {
          color: var(--nav-link-color-desktop);
          background: var(--core-color-white);
          outline: none;

          svg {
            fill: var(--nav-link-color-active-desktop);
          }
        }
      }

      .search-close {
        display: none;
      }
    }
  }

  /* Tracking Overrides */
  .tracking {
    .tracking-content {
      margin: 0;
      padding: 13px;
      max-width:100%;
      border-bottom: var(--nav-dropdown-link-border);

        .tracking-row {
          flex-direction: column;

          .tracking-input-text, 
          .tracking-input, 
          .tracking-btn {
            width: 100%;
            max-width: 100%;
          }

          .tracking-btn {
            margin-top: 10px;
          }
        }
    }
  }

  /* User Overrides */
  .nav-user-wrapper {
    grid-area: user;
  }

  .nav-logged-out,
  .nav-logged-in {
    margin: 0;
    padding: 0;

    &.hidden {
      display: none;
    }

    .nav-item {
      position: initial;
    }

    .nav-item-trigger {
      height: var(--nav-height);
      background: transparent;
      border: none;

      .nav-item-label {
        display: none;
      }

      &:focus-visible {
        outline: var(--nav-focus-visible-outline);
      }

      &:after {
        display: none;
      }

      &[aria-expanded="true"] {
        color: var(--nav-link-color-active-desktop);
        background-color: var(--nav-link-background-active-desktop);

        svg {
          fill: currentcolor;
        }
      }
    }

    .profile-icon {
      padding-top: 4px;

      svg {
        width: 24px;
        height: 24px;
        fill: var(--core-color-white);
      }
    }

    .dropdown {
      position: fixed;
      top: var(--nav-height);
      right: 0;
      z-index: 3;
    }
  }

  /* Tablet Layout */
  @media (width >=664px) {
    .nav-utilities-wrap {
      .content {
        grid-template:
          "skip logo . search user hamburger" var(--nav-height) / auto auto 1fr auto auto auto;
      }

      .nav-search {
        display: block;
      }

      .search-input{
        box-shadow: 0 0 0 1000px var(--gray-90) inset;
      }
    }

    .nav-navigation-wrap {
      /* This is the mobile search, hide on tablet and desktop */
      .nav-search {
        display: none;
      }
    }

    .nav-navigation {
      position: absolute;
      z-index: 3;
      top: var(--nav-height);
      right: 0;
      width: var(--nav-dropdown-width);
      background-color: transparent;
      height: auto;
    }

    .nav-item {
      .nav-item-link,
      .nav-item-trigger {
        &:focus-visible {
          outline: var(--nav-focus-visible-outline);
          outline-color: currentcolor;
        }
      }
    }

    .nav-logged-out,
    .nav-logged-in {
      .nav-item-trigger {
        color: var(--core-color-white);

        &[aria-expanded="true"] {
          color: var(--nav-link-color-active-mobile);
        }

        .nav-item-label {
          display: inline-block;
        }
      }

      .dropdown {
        width: var(--nav-dropdown-width);
        right: 0;
      }
    }
  }

  /* Desktop Layout */
  @media (width >=1024px) {
    .nav-utilities-wrap {
      background-color: var(--nav-utility-background-color);

       .content {
        grid-template:
          "skip logo . search user hamburger" var(--nav-utility-height) / auto auto 1fr auto auto auto;
      }

      .search-input{
        box-shadow: 0 0 0 1000px var(--gray-80) inset;
      }
    }

    .nav-navigation-wrap {
      .content {
        grid-template:
          "search . navigation" var(--nav-navigation-height) / auto 1fr auto;
      }
    }

    .nav-navigation {
      position: unset;
      display: block;
      color: var(--nav-link-color-desktop);
      background-color: var(--nav-navigation-background-color-desktop);
      height: auto;
      width: auto;
      overflow: visible;
    }

    .nav-logo {
      position: absolute;
      top: var(--nav-utility-height);
      height: var(--nav-navigation-height);

      .block.image picture {
        img {
          max-height: 38px;
          width: 164px;
        }
      }

    }

    .nav-menu {
      flex-direction: row;

      &.active {
        .nav-item-link,
        .nav-item-trigger {
          background-color: unset;
        }
      }
    }

    .nav-item {
      .nav-item-link,
      .nav-item-trigger {
        color: var(--nav-link-color-desktop);
        background: none;
        border: none;
      }

      .nav-item-link a,
      .nav-item-trigger[aria-expanded="false"] a {
        color: var(--nav-link-color-desktop);
        text-decoration: none;

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

      .nav-item-trigger {
        &[aria-expanded="true"] {
          font-weight: 400;
          color: var(--nav-link-color-active-desktop);
          background-color: var(--nav-link-background-active-desktop);

          svg {
            fill: currentcolor;
          }
        }
      }
    }

    .dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 3;
      width: var(--nav-dropdown-width);
    }

    .hamburger {
      display: none;
    }

    .nav-logged-out,
    .nav-logged-in {
      .nav-item {
        position: relative;
      }

      .nav-item-trigger {
        height: var(--nav-utility-height);
      }

      .dropdown {
        position: absolute;
        z-index:4;
        top: var(--nav-utility-height);
        left: -70px;
      }
    }
  }
}

/* A body level class to manage mobile nav open state */
body.mobile-nav-open {
  overflow-y: hidden;

  .header .overlay {
    display: block;
  }

  .nav-navigation {
    max-height: calc(100dvh - var(--nav-utility-height));
    overflow-y: scroll;
  }

  @media (width >=1024px) {
    overflow-y: auto;
  }
}