.header-container {
  height: var(--header-height);
}

header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-iron-300);
  height: var(--header-height);
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  transition-duration: var(--transition-duration);
  transition-property: border-bottom, height;
  z-index: 10;

  .scroll-progress {
    position: absolute;
    top: 0px;
    width: 100%;

    .progress {
      background-color: var(--color-pastel-green-400);
      height: 0.25rem;
    }
  }

  >.container>.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: inherit;

    .logo {
      align-items: center;
      display: flex;
      height: inherit;
      max-width: 12rem;
      min-height: 4rem;

      svg {
        height: calc(100% - 2.15rem);
      }
    }

    >nav {
      display: none;
      column-gap: var(--space-lg);

      >.item {
        color: inherit;
        cursor: pointer;
        position: relative;
        text-decoration: none;
        user-select: none;
        white-space: nowrap;

        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-xs);

        &.active {
          font-weight: 500;
        }

        svg {
          height: 1em;
          width: 1em;
          max-height: 1em;
          max-width: 1em;
        }

        .chevron {
          rotate: 0;
          transition-duration: 250ms;
          transition-property: rotate;

          &.open {
            rotate: 180deg;
            pointer-events: all;
          }
        }

        >ul {
          background-color: var(--color-white);
          border-radius: var(--border-radius);
          border: 1px solid var(--color-iron-400);
          bottom: calc(var(--space-sm) * -1);
          box-shadow: var(--box-shadow);
          margin-top: 0px;
          min-width: max-content;
          opacity: 0;
          pointer-events: none;
          position: absolute;
          transition-duration: 250ms;
          transition-property: opacity;
          translate: 0px 100%;
          width: 100%;

          flex-direction: column;
          z-index: 10;
          margin-top: var(--baseline-sm);

          &.show {
            opacity: 1;
            pointer-events: all;
          }

          >li>a {
            border-bottom: 1px solid var(--color-iron-300);
            color: var(--color-downriver-400);
            padding-inline: var(--space-md);
            position: relative;
            display: flex;
            align-items: center;
            height: var(--space-lg);

            &:hover {
              background-color: var(--color-iron-300);
            }
          }
        }
      }
    }

    @media (min-width: 64rem) {
      nav {
        display: flex;
      }
    }

    .hamburger-open,
    .hamburger-close {
      height: 1em;
      cursor: pointer;
      font-size: var(--font-size-lg);
      display: none;

      &.show {
        display: block;
      }
    }
  }
}

@media (min-width: 64rem) {

  .hamburger-menu,
  .hamburger-open,
  .hamburger-close {
    display: none !important;
  }
}

.hamburger-menu {
  display: none;
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-iron-400);
  box-shadow: rgba(100, 100, 111, 0.15) 0px 7px 29px 0px;
  margin-top: var(--space-md);
  max-height: 30rem;
  overflow-y: scroll;
  padding-bottom: var(--space-lg);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: var(--space-lg);

  &.show {
    display: block;
  }

  >nav {
    display: flex;
    flex-direction: column;
    row-gap: var(--baseline);
    width: 100%;

    >.item {
      color: inherit;
      cursor: pointer;
      display: block;
      flex-direction: column;
      gap: var(--baseline-sm);
      position: relative;
      text-decoration: none;
      user-select: none;
      white-space: nowrap;

      >ul {
        display: flex;
        flex-direction: column;
        z-index: 10;
        margin-top: var(--baseline-sm);

        >li>a {
          color: var(--color-downriver-400);
          padding-inline: var(--space-md);
          position: relative;
          display: flex;
          align-items: center;
          height: var(--space-xxl);

          &.active {
            text-decoration-color: var(--color-pastel-green-400);
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-thickness: 1px;
            text-underline-offset: var(--space-md);
          }

          &::before {
            background-color: var(--color-pastel-green-400);
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            width: 1px;
          }
        }
      }
    }
  }
}

html {
  container-type: scroll-state;
}

@container scroll-state(scrollable: top) {
  .header {
    border-bottom: 1px solid var(--color-iron-300);
    height: var(--header-height-scrolled);
  }
}