#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 4rem;

  #branding {
    height: 5rem;
    
    img {
      height: 100%;
      width: auto;
    }
  }

  nav {
    display: flex;
    align-items: center;

    wa-button::part(base) {
      font-weight: 650;
    }

    wa-button::part(base):active {
      background-color: transparent;
    }

    #facebook-button {
      width: 2.5rem;
      height: 2.5rem;
      margin-left: .5rem;

      a {
        font-weight: 800;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  .nav-link.active wa-button::part(base) {
    background-color: white;
    border: 2px solid var(--background-color-hover);
  }

  .nav-link.active wa-button::part(base):active {
    background-color: white;
  }
}

@media (min-width: 1101px) {
	#header {
		.headerNavigationTrigger {
			display: none;
		}
	}
}

@media (max-width: 1100px) {
	#header {
		flex-wrap: wrap;
		
		.headerNavigation {
			margin-top: 2rem;
			flex-basis: 100%;
			justify-content: center;
		}
		
		&:not(.nav-active) {
			.headerNavigation {
				display: none;
			}
		}
	}
}

@media (max-width: 768px) {
	#header {
		padding-left: 2rem;
		padding-right: 2rem;
		
		#branding {
			height: 3rem;
		}
		
		.headerNavigation {
			flex-direction: column;
		}
	}
}

@media (max-width: 520px) {
  .headerNavigation {
    transform: scale(1.25);

    #facebook-button {
      margin-top: .25rem;
    }
  }
}