/**
 * @file
 * Header layout.
 */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--color-white);
  z-index: 100;
  border-bottom: 1px solid var(--border-color);
}

.gin--horizontal-toolbar .header {
  top: var(--gin-toolbar-height);
}

.vfla-mobile-menu-toggler {
  display: none;
}

.mobile-menu-toggler__line,
.mobile-menu-toggler__line:before,
.mobile-menu-toggler__line:after {
  background: var(--base-font-color);
}

.mobile-menu-toggler {
  padding: 0;
}

.header-content {
  height: 100%;
}

.header-content__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header .header-content nav .menu,
.vfla-stages-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .header-content nav .menu a,
.vfla-stages-menu__item {
  position: relative;
  z-index: 2;
  font-size: 1.125rem;
  padding: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--base-font-color);
}

.vfla-stages-menu__item:first-child {
  display: none;
}

.header .header-content nav .menu a:hover,
.vfla-stages-menu__item:hover {
  color: var(--base-color);
}

.header .header-content nav .menu a.contest-link {
  color: var(--base-color-extra);
}

.header .has-childs {
  position: relative;
}

.header .header-content nav .has-childs ul {
  display: none;
  position: absolute;
  top: 120%;
  left: 0;
  width: 18.75rem;
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: 0 0 10px rgb(0 0 0 / 5%);
  padding: 1rem;
}

.header .header-content nav .has-childs:hover ul {
  display: block;
}

.header .header-content nav .has-childs ul a {
  display: block;
  padding: .75rem;
  text-transform: none;
}

.vfla-stages-menu__item:not(.is-active) {
  position: relative;
  color: var(--color-gray);
  margin-right: .5rem;
  cursor: default;
}

.vfla-stages-menu__item:not(.is-active):after {
  position: absolute;
  top: 1px;
  right: -2px;
  content: '';
  display: block;
  width: 14px;
  height: 18px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAASCAMAAABcgh8DAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAMBQTFRFAAAAxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxcXFxuCrHwAAAEB0Uk5TAAVflplsFUPn//hkNMzHXuXvOSPWFEBBbW/uxJXiu1rjuIZx17rQ1LmM/vHFpPJwPeAaAssmAdFi82Oqq7TDfS8tDDcAAAC5SURBVHicRY/rCwFBFMXPQevR5pHNszwSKY/2o/z/X3wUkgi1aFGeSUjr7qA9NXPmN/fO3HsJEZWe7klWkFR3N4X6GwjwBWhnF+OPEA9ISlDfE6kroltJ1gJOzCayp8TG/Q/5Q3JFZM6GpbCwd7G4Sy8Vlu3snBWuaUipe+RyNHSG8Q0tlLExl70yRGsmXmXuKFbrw5x4WJeWRx6iyQE8bPf+b9tTsdIYnb64+S/0E7ukAx9h5WQ6/wdEojGsDCbQJAAAAABJRU5ErkJggg==);
  transform: translateY(100%);
}


.header .account-link__link {
  padding: 0 .75rem 0 1.25rem;
}

.header .account-link__link__text {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.625rem;
  text-transform: uppercase;
  font-weight: 600;
}

.header .account-link__link__text:after {
  content: '';
  display: block;
  width: 40px;
  height: 44px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAsCAMAAAAgsQpJAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAbZQTFRFAAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAAvAAA4o/DTgAAAJJ0Uk5TACBzrtfv2bF2JBeb/f+iHlLx91tn9fRyS81wNBExbMhZD28YoUg9bl8jd9XKhLRoWsDdK+ILCvMMCd8oIeMBt2RWwnrQxYgcJ6kz/rkUY1TBLBAqYLxicXte+acbgYYfifj8kBJT5euKpms/Dmmj7ZPaDbKodIvhNi2XCMsE8ugF4PucGubbkfYGQpi1zDvUHecU62/fAAACfUlEQVR4nJ2UW0hUURSG/xWFF3wopmK6WZOmNoRIMTWVIWYhJhYFkVm9VEoIUUhlZpJZWFFD+VRBCBFiRHRRkaiQiEpryrTI6KJlJdkVLWqYiGjt48zp7H3OnIfWw7/3Ouebtf69z95DkINEaBpQXkhZrKD0nwxGBEfSb0M2gr5EAEcHh8bocNvYD5ag84fQuJDHryJxvLYAXZ/EfEyPVH5stxlMFH2cL/Q86T3Lr6AJTPjIMv6ZwXJKH8vEpyrofgvEP4ExZvQCUx6rYOorYGqnBKaxwcSHKjiT3SU9kMDp74Dk+wro6Q0g2nVPAsUz9x+/DHp7AohJaJXA2dQFN7Upreex69TbEpjOltPopgJmtAOzbkhgJvvztKiLyWJ/c65L4GLuOveqCmbfgVJSFMT8KyqInFss457r+RLhLqMJJjBPq5bZEEodQfFq2KAZxDLNd9bAKO2YaS1zzsECxKrmoTEGoYObexaWIFZTozGN+owIINInN+jzn15p+2XQJv4LXEvtbwxpMJ9OW4HeFDqvVFlJdMoEFlJ9eOpGV3hacLdDATfVacPwfKLOvtzvrdlEtdqTDcckcI22LRtbPHorlLzs1hwX+QzgtpNCjR9Ci+0nhLoe6eCO4yzFdBBqlPmiWDdXh8Bp/SzxyRdMHFBONawLL2tgBR1lR81+Cw6opCNsodEvQK3xoouWHFeKE94qGFxxzWod/6L4DEvpbsK6S8DO8ogcUH0A2FVGWNBhuABWUcjd1tfQhG9ibaU2ILbUihWL+7y0zo7D4SpgOYmPIp15c4i/vz3kqwT2ltiCkwaAKirg+7Rvqy24/xDvORU54ahvswW9eUH0/wX9x6IYUSIInAAAAABJRU5ErkJggg==);
  background-size: cover;
}

.header .account-link__link:hover {
  color: var(--base-color-extra);
}

.header-mobile-account-link {
  margin-bottom: .5rem;
}

.header-ask-question {
  display: none;
}

.header-ask-question .vfla-ask-question {
  display: block;
  font-weight: 500;
  color: var(--base-color-extra);
  transition: var(--animation-speed) ease;
  cursor: pointer;
  padding: .5rem 0;
}

.header-ask-question .vfla-ask-question:hover {
  color: var(--base-color-extra-hover);
}

.mobile-menu .vfla-stages-menu {
  flex-direction: column;
  align-items: flex-start;
}

.mobile-menu .vfla-stages-menu__item {
  padding-left: 0;
}

.mobile-menu .vfla-stages-menu__item a {
  color: var(--base-font-color);
}

@media screen and (max-width: 1200px) {
  .header .header-content nav {
    display: none;
  }
  .vfla-mobile-menu-toggler {
    display: block;
  }
  .mobile-menu {
    top: 0;
  }
  .gin--horizontal-toolbar.toolbar-fixed .mobile-menu {
    top: 39px;
  }
  .mobile-menu__content {
    max-width: 50rem;
  }
  .header-content .vfla-stages-menu {
    display: none;
  }

  .mobile-menu nav .menu a {
    display: block;
    padding: .5rem 0;
  }

  .mobile-menu nav .menu a.contest-link {
    color: var(--base-color-extra);
  }

  .mobile-menu nav .menu a:not(.contest-link) {
    color: var(--base-font-color);
  }
}

@media screen and (max-width: 760px) {
  .vfla-logo__logo img {
    max-width: 160px;
  }

  .header-ask-question {
    display: block;
  }

  .header .account-link__link__text:after {
    width: 24px;
    height: 26px;
  }
}

@media screen and (max-width: 576px) {
  .header {
    background-image: none;
  }

  .header-logout-link,
  .header-stages-menu {
    display: none;
  }
  .mobile-menu__content {
    max-width: 100%;
    width: 100%;
  }
  .header-mobile-account-link {
    margin-bottom: 2rem;
  }
}