/* ==========================================================================
   HEADER
   ========================================================================== */

   .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
  
    width: 100%;
  
    background: var(--color-light);
  
    border-bottom: 1px solid
      color-mix(in srgb, var(--color-dark) 8%, transparent);
  }
  
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    min-height: 89px;

    padding-inline: var(--container-pad);
  }
  
  
  /* ==========================================================================
     LOGO
     ========================================================================== */
  
  .site-logo {
    display: flex;
    align-items: center;
  
    flex-shrink: 0;
  }
  
  .site-logo__img {
    display: block;
  
    width: auto;
    height: 55px;
  }
  
  
  /* ==========================================================================
     NAVIGATION
     ========================================================================== */
  
  .site-nav {
    display: flex;
    align-items: center;
  
    gap: 34px;
  }
  
  .site-nav__list {
    display: flex;
    align-items: center;
  
    gap: 34px;
  
    margin: 0;
    padding: 0;
  
    list-style: none;
  }
  
  .site-nav__link {
    position: relative;
  
    display: flex;
    align-items: center;
  
    min-height: 55px;
    padding-inline: 8px;
  
    color: var(--color-dark);
  
    font-size: 13px;
    font-weight: 600;
  
    line-height: 1;
    letter-spacing: 0.08em;
  
    text-transform: uppercase;
  
    transition:
      color var(--duration-2) var(--ease-standard);
  }
  
  .site-nav__link::after {
    content: "";
  
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
  
    height: 2px;
  
    background: var(--color-lime);
  
    transform: scaleX(0);
    transform-origin: right center;
  
    transition:
      transform var(--duration-3) var(--ease-emphasized);
  }
  
  .site-nav__link:hover,
  .site-nav__link:focus-visible,
  .site-nav__link[aria-current="true"] {
    color: var(--color-forest);
  }
  
  .site-nav__link:hover::after,
  .site-nav__link:focus-visible::after,
  .site-nav__link[aria-current="true"]::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
  
  
  /* ==========================================================================
     LANGUAGE SWITCHER
     ========================================================================== */
  
  .lang-switcher {
  display: flex;
  align-items: center;

  height: 42px;

  padding: 4px;

  background:
    color-mix(in srgb, var(--color-dark) 6%, transparent);

  border-radius: 8px;
}

.lang-switcher__btn {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 34px;

  padding-inline: 8px;

  border: 0;
  border-radius: 6px;

  background: transparent;

  color:
    color-mix(in srgb, var(--color-dark) 55%, transparent);

  font: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    color var(--duration-2) var(--ease-standard),
    background-color var(--duration-2) var(--ease-standard);
}

.lang-switcher__btn:hover {
  color: var(--color-dark);
}

.lang-switcher__btn[aria-pressed="true"] {
  color: var(--color-lime);
  background: var(--color-dark);
}

.lang-switcher__divider {
  display: none;
}


/* ==========================================================================
    MOBILE TOGGLE
    ========================================================================== */

.nav-toggle {
  display: none;

  position: relative;

  width: 55px;
  height: 55px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  background: var(--color-dark);

  cursor: pointer;
}

.nav-toggle__line {
  position: absolute;
  left: 50%;

  display: block;

  width: 21px;
  height: 2px;

  background: var(--color-light);

  transform: translateX(-50%);

  transition:
    transform var(--duration-3) var(--ease-emphasized),
    top var(--duration-3) var(--ease-emphasized);
}

.nav-toggle__line:first-child {
  top: 22px;
}

.nav-toggle__line:last-child {
  top: 31px;
}


/* X state */

.nav-toggle[aria-expanded="true"] .nav-toggle__line:first-child {
  top: 27px;
  transform:
    translateX(-50%)
    rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:last-child {
  top: 27px;
  transform:
    translateX(-50%)
    rotate(-45deg);
}
  

/* ==========================================================================
    MEDIUM
    ========================================================================== */

@media (max-width: 64rem) {

  .site-header__inner {
    min-height: 76px;
  }

  .site-logo__img {
    height: 40px;
  }

  .site-nav {
    gap: 21px;
  }

  .site-nav__list {
    gap: 13px;
  }

  .site-nav__link {
    font-size: 12px;
  }

}


/* ==========================================================================
    MOBILE
    ========================================================================== */

@media (max-width: 47.9375rem) {

  .site-header__inner {
    position: relative;

    min-height: 72px;

    padding-inline: 21px;
  }

  .site-logo__img {
    height: 38px;
  }

  .site-nav {
    gap: 13px;
  }

  .nav-toggle {
    display: flex;
  }

  .site-nav__list {
    position: absolute;

    top: 100%;
    left: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;

    gap: 0;

    padding: 13px 21px 21px;

    background: var(--color-light);

    border-top: 1px solid
      color-mix(in srgb, var(--color-dark) 8%, transparent);

    border-bottom: 1px solid
      color-mix(in srgb, var(--color-dark) 8%, transparent);

    box-shadow:
      0 21px 34px
      color-mix(in srgb, var(--color-dark) 10%, transparent);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
      opacity var(--duration-2) var(--ease-standard),
      transform var(--duration-2) var(--ease-standard),
      visibility var(--duration-2);
  }

  .site-nav__list.is-open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
  }

  .site-nav__link {
    min-height: 55px;

    padding-inline: 0;

    font-size: 16px;

    border-bottom: 1px solid
      color-mix(in srgb, var(--color-dark) 8%, transparent);
  }

  .site-nav__link::after {
    display: none;
  }

}


/* ==========================================================================
    SMALL MOBILE
    ========================================================================== */

@media (max-width: 28rem) {

  .lang-switcher {
    display: none;
  }

}