/*-------HEADER STYLES----------*/
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  min-height: 80px;
}

body.admin-bar .header {
  margin-top: 32px;
}

.header {
  background-color: transparent !important;
  transition: background-color 0.35s ease-in-out;
}

.header.scrolled {
  background-color: var(--wp--preset--color--tsa-offwhite) !important;
  opacity: 0.8;
  backdrop-filter: blur(5px);
  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1650px) {
  .header {
    padding: 50px 0 !important;
  }
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

/* Menu Toggles */
.header .container .menu-toggle,
.header .container .close-menu {
  margin-top: 0 !important;
  cursor: pointer;
  width: 30px;
}
.header .container .menu-toggle::before,
.header .container .close-menu::before {
  width: 100%;
  height: 100%;
  font-size: 2.5rem;
  object-fit: cover;
  color: red;
}
.header .container .close-menu {
  display: none;
}

/*-------------WEBSITE MENU-----------------------*/
.website-menu {
  backdrop-filter: blur(5px);
  background-color: #00000073;
  transform: translateX(-100%);
  transition: all 0.35s ease-in-out;
  position: absolute;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.website-menu.active {
  transform: translateX(0%);
}
.website-menu.close {
  transform: translateX(100%);
}

.website-menu .website-menu__content {
  width: 100% !important;
  max-width: 517px;
  height: 80vh;
  max-height: 996px;
  transition: all 0.35s ease-in-out;
}

@media (width <= 1024px) {
  .website-menu .website-menu__content {
    padding-left: 16px !important;
  }
}

/* Menu Navigation */
@media (min-width: 1650px) {
  .website-menu .wp-block-navigation {
    padding-top: 5rem;
  }
  .website-menu .website-menu__content {
    padding-left: 16px !important;
  }
}
.website-menu .wp-block-navigation__container li:hover,
.website-menu .wp-block-navigation__container li:focus {
  color: var(--wp--preset--color--tsa-offwhite);
}
/* Current item */
.website-menu .wp-block-navigation__container li.current-menu-item {
  font-size: 4rem !important;
}

@media (width <= 1024px) {
  .website-menu .wp-block-navigation__container li.current-menu-item {
    font-size: 2.5rem !important;
  }
}

/* Menu social icons */
.website-menu .website-menu__content .wp-block-social-links {
  margin-top: auto !important;
}

.website-menu .website-menu__content .wp-block-social-links li {
  background-color: var(--wp--preset--color--tsa-white) !important;
}

.website-menu .website-menu__content .wp-block-social-links li a svg {
  fill: var(--wp--preset--color--tsa-blue) !important;
}

@media (min-width: 1650px) {
  .website-menu .website-menu__content {
    max-width: 650px;
  }
}
