:root {
  /* Ui */
  --background-header: #111111;
  --background-nav: #f2f2f29e;
  --background-img-header: url("");
  --nav-color: var(--color-dark);
  --nav-font-height: 400;
  /* Sizes */
  --header-height: 80px;
  --header-padding: 0 50px;
}

/* Header display */

.site-header {
  flex-direction: row;
  position: relative;
  justify-content: space-between;
  z-index: 4;
}

/* Header and logo height */

.site-header {
  height: var(--header-height);
  font-family: var(--font-heading);
}

.site-header__wrapper .logo {
  height: calc(var(--header-height) * 0.8);
}

/* Header display */

.site-header,
.site-header__wrapper,
.site-header__wrapper .logo__wrapper {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo__wrapper {
  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
}

/* Background */

.site-header {
  background-color: var(--background-header);
  /* background-image: var(--background-img-header); */
  background-size: cover;
}

.site-header__wrapper,
.site-header__wrapper .logo {
  justify-content: center;
}

.site-header__wrapper {
  width: 100%;
  padding: var(--header-padding);
  a, li{
    text-decoration: none;list-style: none;
    color: var(--color-light);
  }
}

.nav__toggle {
  border: none;
  background-color: transparent;
  display: none;
}

.nav__toggle img,
.site-header__wrapper .logo img {
  height: 100%;
  max-inline-size: 100%;
}

.nav__item a.item {
  color: white;
  font-weight: var(--nav-font-height);
  display: block;
  padding: 1.5rem 1rem;
  transition: 300ms;
  display: flex;
  gap: 5px;
  align-items: center;
}

.nav__item a.item:hover {
  /* transform: translate(0, -10px); */
  text-shadow: 10px 10px 10px #919191;
}

.nav__item .nav__sub-item {
  display: none;
  opacity: 0;
  position: fixed;
  top: auto;
  padding: 15px;
  transition: all 300ms !important;

  width: min-content;
  gap: 10px;
  background: #f7f7f9;

  .sub-item {
    padding: 10px;
    background: none;
    transition: 300ms;
  }

  .sub-item:hover {
    text-shadow: 10px 10px 10px #2b2b2b;
  }
}

@media (min-width: 900px) {
  .site-header__wrapper,
  .nav__wrapper {
    display: flex;
  }

  .site-header__wrapper {
    justify-content: space-between;
    align-items: center;
    padding: 0 inherit;
  }
}

@media (max-width: 900px) {
  /* Reset header height */

  :root {
    /* Sizes */
    --header-height: 80px;
  }

  .nav__wrapper {
    inset: 100% 0 0 0;
    opacity: 0;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out,
      visibility 0s linear 0.3s;
    visibility: hidden;
    z-index: 1;
  }

  .nav__item {
    background-color: var(--background-nav);
  }

  .nav__item a:hover {
    transform: translate(0, 0px);
  }

  .nav__wrapper.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0s;
  }

  .nav__toggle {
    display: block;
    position: absolute;
    inset: auto 1rem auto auto;
  }
}