header {
  --header-fg: var(--color-secondary);
  --logo-text: white;
  position: relative;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
  user-select: none;
  background: transparent;
  box-shadow: 0 0 10px transparent;
  transition:
    background-color var(--duration-200) ease-out,
    box-shadow var(--duration-200) ease-out;

  /* Disable transitions on init (only keep on scroll) */
  &:not(.is-transition-ready) {
    transition: none;
  }

  &.full {
    --header-fg: var(--color-primary);
    --logo-text: #757c8a;
    background-color: var(--color-secondary);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    & .wrap {
      background: transparent;

      & nav {
        & .right-side {
          & #contact-btn {
            & span {
              color: var(--color-secondary);
            }

            @media (hover: hover) and (pointer: fine) {
              &:hover {
                background-color: var(--color-primary-hover);
              }
            }
          }

          button.menu-button {
            background-color: hsl(216, 19%, 90%);

            @media (hover: hover) and (pointer: fine) {
              &:hover {
                background-color: hsl(216, 19%, 85%);
              }
            }
          }
        }
      }
    }
  }
}

header .wrap {
  width: 100%;
  max-width: var(--max-site-width);
  margin: auto;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));

  & nav {
    height: var(--header-height);
    width: 100%;
    max-width: var(--max-content-width);
    margin: auto;
    padding-block: 20px;
    padding-inline: var(--inline-padding);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    & > a {
      outline-offset: 8px;
    }

    & .logo {
      /* width: 289px; */
      height: 45px;
      pointer-events: none;

      & .text {
        fill: var(--logo-text);
        transition: fill var(--duration-200) ease-out;
      }
    }

    & a {
      flex-shrink: 0;
      cursor: pointer;
    }

    & .nav-links {
      display: flex;
      flex-wrap: nowrap;
      gap: 40px;

      & li {
        list-style: none;
        position: relative;
        white-space: nowrap;
        cursor: pointer;

        /* &:not(#contact-link) {
          pointer-events: none;
          } */
        pointer-events: none;

        &::after {
          pointer-events: none;
          position: absolute;
          bottom: 0;
          left: 50%;
          translate: -50% 0;
          content: "";
          height: 2px;
          border-radius: 10px;
          background-color: var(--header-fg);
          width: 0;
          opacity: 0;
          transition: var(--duration-200) ease-out;
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            &::after {
              width: 100%;
              opacity: 1;
            }
          }
        }

        &.active {
          &::after {
            width: 100%;
            opacity: 1;
          }

          & a {
            font-weight: 600;
          }
        }

        & a {
          padding-inline: 2px;
          font-weight: 400;
          color: var(--header-fg);
        }
      }
    }

    & .right-side {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 15px;

      & #contact-btn {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        height: 40px;
        border-radius: 100px;
        padding: 7px 22px;
        cursor: pointer;
        background-color: var(--header-fg);
        transition:
          background-color var(--duration-100) ease-out,
          scale var(--duration-100) cubic-bezier(0.4, 0, 0.2, 1);

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            background-color: var(--color-secondary-hover);
          }
        }

        &:active:not(:disabled) {
          scale: 0.98;
        }

        & img {
          display: none;
          width: 21px;
          height: 21px;
          flex-shrink: 0;
        }

        & span {
          line-height: 1.45;
          font-size: 18px;
          font-weight: 500;
          color: var(--color-primary);
        }
      }
    }
  }
}

header .wrap nav button.menu-button {
  display: none;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  border-radius: 100px;
  cursor: pointer;
  background-color: var(--color-secondary);
  padding: 0;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: hsl(216, 19%, 90%);
    }
  }

  & .menu-button-burger {
    width: 20px;
    height: 2px;
    border-radius: 100px;
    background-color: var(--color-primary);
    transition: background-color 100ms 100ms ease-out;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 2px;
      border-radius: 100px;
      background-color: var(--color-primary);
      transition:
        translate var(--duration-200) ease-out,
        rotate var(--duration-200) ease-out;
    }

    &::before {
      translate: -50% -5px;
    }

    &::after {
      translate: -50% 5px;
    }
  }

  &[aria-expanded="true"] .menu-button-burger {
    background-color: transparent;
    transition-delay: 0ms;

    &::before {
      translate: -50% 0;
      rotate: -45deg;
    }

    &::after {
      translate: -50% 0;
      rotate: 45deg;
    }
  }
}

header .wrap nav .menu {
  position: absolute;
  z-index: 1002;
  top: var(--header-height);
  right: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  padding-block: 50px 70px;
  background-color: var(--color-secondary);
  opacity: 0;
  overflow: auto;
  transition: opacity var(--duration-200) ease-out;

  &[aria-hidden="false"] {
    display: flex;

    & li {
      translate: 0 30%;
      opacity: 0;
      animation:
        fadeIn var(--duration-200) ease-out forwards,
        returnTranslate var(--duration-200) ease-out forwards;

      &:nth-child(1) {
        animation-delay: 0ms;
      }

      &:nth-child(2) {
        animation-delay: 50ms;
      }

      &:nth-child(3) {
        animation-delay: 100ms;
      }

      &:nth-child(4) {
        animation-delay: 150ms;
      }
    }
  }

  & li {
    list-style: none;
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;

    &::after {
      pointer-events: none;
      position: absolute;
      bottom: 0;
      left: 50%;
      translate: -50% 0;
      content: "";
      height: 2px;
      border-radius: 10px;
      background-color: var(--header-fg);
      width: 0;
      opacity: 0;
      transition: var(--duration-200) ease-out;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        &::after {
          width: 100%;
          opacity: 1;
        }
      }
    }

    &.active {
      & a {
        font-weight: 600;
      }

      &::after {
        width: 100%;
        opacity: 1;
      }
    }

    & a {
      padding-inline: 2px;
      font-weight: 400;
      color: var(--header-fg);
    }
  }
}

header .wrap nav .nav-links li a,
header .wrap nav .menu li a {
  &::before {
    content: "";
    position: absolute;
    z-index: 1;
    --focus-v-padding: 8px;
    --focus-h-padding: 12px;
    top: calc(0px - var(--focus-v-padding));
    left: calc(0px - var(--focus-h-padding));
    width: calc(100% + var(--focus-h-padding) * 2);
    height: calc(100% + var(--focus-v-padding) * 2);
    border-radius: 6px;
    outline: none;
  }

  &:focus-visible {
    outline: none;

    &::before {
      outline: 2px solid var(--color-primary);
      outline-offset: -2px;
    }
  }
}

/* Hitbox for touchscreens */
@media (any-pointer: coarse) {
  header .wrap nav .nav-links li a,
  header .wrap nav .menu li a {
    &::before {
      --focus-v-padding: 12px;
    }
  }
}

@media (max-width: 1200px) {
  :root {
    --header-height: 100px;
  }
  header .wrap nav {
    & .nav-links {
      & li a {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 1050px) {
  header .wrap nav {
    & .logo {
      width: unset;
      height: 40px;
      aspect-ratio: 289 / 45;
    }
    & .nav-links {
      gap: 30px;
    }
  }
}

@media (max-width: 1000px), (max-height: 600px) {
  :root {
    --header-height: 80px;
  }
}

@media (max-width: 1000px) {
  header .wrap nav {
    & .nav-links {
      display: none;
    }

    & .right-side {
      & #contact-btn {
        height: 35px;
        padding: 6px 18px;
        background-color: var(--color-primary);

        & span {
          font-size: 16px;
          color: var(--color-secondary);
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            background-color: var(--color-primary-hover);
          }
        }
      }

      & button.menu-button {
        display: flex;
      }
    }
  }
}

@media (max-width: 800px) {
  header .wrap nav {
    & .logo {
      height: 35px;
    }
  }
}

@media (max-width: 500px) {
  header .wrap nav {
    & .logo {
      height: 30px;
    }
  }
}

@media (max-width: 450px), (max-height: 400px) {
  :root {
    --header-height: 60px;
  }

  header .wrap nav {
    padding-inline: 10px;

    & .logo {
      height: 25px;
    }
  }
}

@media (max-width: 370px), (max-height: 400px) {
  header .wrap nav .right-side {
    gap: 10px;

    & #contact-btn {
      width: 35px;
      height: 35px;
      padding: 0;

      & span {
        display: none;
      }

      & img {
        display: block;
      }
    }
  }
}