/* Converted from components/layout/site-header.module.css — class names are namespaced "site-header__*". */
.site-header__header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: var(--header-height);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: rgb(17 17 17 / 96%);
  color: var(--color-brand-white);
  transition:
    background-color var(--transition-base) var(--ease-premium),
    border-color var(--transition-base) var(--ease-premium),
    box-shadow var(--transition-base) var(--ease-premium);
}

.site-header__header[data-tone='solid'] {
  border-bottom-color: rgb(255 255 255 / 12%);
  background: rgb(17 17 17 / 98%);
  box-shadow: 0 10px 34px rgb(0 0 0 / 12%);
}

.site-header__homeHeader {
  position: fixed;
  width: 100%;
  border-bottom-color: transparent;
  background: linear-gradient(180deg, rgb(8 8 8 / 60%), transparent);
}

.site-header__homeHeader[data-tone='vuslat'] {
  border-bottom-color: rgb(245 196 0 / 16%);
  background: rgb(22 18 14 / 94%);
  box-shadow: 0 14px 42px rgb(0 0 0 / 16%);
}

@supports (backdrop-filter: blur(14px)) {
  .site-header__header {
    background: rgb(17 17 17 / 88%);
    backdrop-filter: blur(14px);
  }

  .site-header__header[data-tone='solid'] {
    background: rgb(17 17 17 / 96%);
  }

  .site-header__homeHeader[data-tone='hero'] {
    background: linear-gradient(180deg, rgb(8 8 8 / 60%), transparent);
    backdrop-filter: none;
  }

  .site-header__homeHeader[data-tone='vuslat'] {
    background: rgb(22 18 14 / 88%);
    backdrop-filter: blur(14px);
  }
}

.site-header__headerInner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-header__desktopNav ul,
.site-header__mobileNav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__desktopNav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.35rem);
}

.site-header__navLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgb(255 255 255 / 74%);
  font-family: var(--font-manrope), Manrope, sans-serif;
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-premium);
}

.site-header__navLink::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--color-brand-yellow);
  content: '';
  scale: 0 1;
  transform-origin: right;
  transition: scale var(--transition-base) var(--ease-premium);
}

.site-header__navLink:hover,
.site-header__navLink[data-active='true'] {
  color: var(--color-brand-white);
}

.site-header__navLink:hover::after,
.site-header__navLink[data-active='true']::after {
  scale: 1 1;
  transform-origin: left;
}

.site-header__menuButton {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--radius-button);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.site-header__menuButton span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 5px auto;
  background: currentColor;
  transition:
    translate var(--transition-fast) var(--ease-premium),
    rotate var(--transition-fast) var(--ease-premium);
}

.site-header__menuButton[aria-expanded='true'] span:first-child {
  translate: 0 3.25px;
  rotate: 45deg;
}

.site-header__menuButton[aria-expanded='true'] span:last-child {
  translate: 0 -3.25px;
  rotate: -45deg;
}

.site-header__mobileLayer {
  display: none;
}

@media (max-width: 61.999rem) {
  .site-header__desktopNav {
    display: none;
  }

  .site-header__menuButton {
    display: block;
  }

  .site-header__mobileLayer {
    position: fixed;
    z-index: 40;
    inset: var(--header-height) 0 0;
    display: grid;
    animation: site-header__layerIn var(--transition-base) var(--ease-premium) both;
  }

  .site-header__mobileBackdrop {
    position: absolute;
    z-index: 0;
    inset: 0;
    border: 0;
    background: rgb(0 0 0 / 56%);
    cursor: default;
  }

  .site-header__mobileNav {
    position: relative;
    z-index: 1;
    align-self: start;
    border-top: 1px solid rgb(255 255 255 / 8%);
    background: var(--color-brand-black);
    padding: clamp(1.5rem, 7vw, 2.5rem) var(--site-gutter) 2.5rem;
    box-shadow: 0 26px 50px rgb(0 0 0 / 28%);
    animation: site-header__menuIn 420ms var(--ease-premium) both;
  }

  .site-header__mobileNav ul {
    width: min(100%, var(--site-max-width));
    margin-inline: auto;
  }

  .site-header__mobileLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    color: rgb(255 255 255 / 78%);
    font-family: var(--font-manrope), Manrope, sans-serif;
    font-size: clamp(1.08rem, 4vw, 1.25rem);
    font-weight: 650;
    text-decoration: none;
  }

  .site-header__mobileLink::after {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-brand-yellow);
    content: '';
    opacity: 0;
    rotate: 45deg;
  }

  .site-header__mobileLink:hover,
  .site-header__mobileLink[data-active='true'] {
    color: var(--color-brand-white);
  }

  .site-header__mobileLink[data-active='true']::after {
    opacity: 1;
  }
}

@keyframes site-header__layerIn {
  from {
    opacity: 0;
  }
}

@keyframes site-header__menuIn {
  from {
    opacity: 0;
    translate: 0 -12px;
  }
}