/*
 * Footer — Figma desktop 44:2242, mobile 44:3629.
 * Desktop: #21282a, radius 30 зверху (заходить на секцію вище на 30),
 *   pt 100, pb 32, px 48, блоки gap 64, по центру.
 *   Лого 196×19.4 + підпис 18 Medium 50% білого, gap 24.
 *   Contact 24 SemiBold; email 64 SemiBold + стрілка 27×20;
 *   «or you can call to us» 14 caps; номери 32; «Hours» 14 caps + 18 Medium.
 *   Низ: меню 16 у 2 рядки (gap 32 / 20) зліва; оплата + юр. посилання справа.
 * Mobile: radius 20, pt 70, px 12; лого 172×17; підпис 14; Contact 20;
 *   email 24 + стрілка 17×12; номери 20; меню по центру gap 20.
 */
.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  margin-top: -30px;
  padding: 100px var(--gutter) 32px;
  border-radius: 30px 30px 0 0;
  background: var(--color-dark);
  color: var(--color-white);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.site-footer__logo {
  width: 196px;
  height: 19.356px;
}

.site-footer__logo-mobile {
  display: none;
}

.site-footer__tagline {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white-50);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.site-footer__contact-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}

.site-footer__email {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 64px;
  font-weight: 600;
  line-height: 1.1;
  word-break: break-all;
  transition: color 0.2s ease;
}

.site-footer__email:hover {
  color: var(--color-primary-soft);
}

.site-footer__email img {
  flex-shrink: 0;
  width: 27px;
  height: 20px;
}

.site-footer__email .site-footer__email-arrow-mobile {
  display: none;
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.site-footer__caption {
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-footer__phones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
}

.site-footer__phones a:hover {
  color: var(--color-primary-soft);
}

.site-footer__hours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}

.site-footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  max-width: 1344px;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 16px;
  line-height: 1.1;
}

.site-footer__nav-row {
  display: flex;
  gap: 32px;
}

.site-footer__nav a:hover,
.site-footer__legal a:hover {
  color: var(--color-primary-soft);
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}

.site-footer__legal {
  display: flex;
  gap: 32px;
  font-size: 16px;
  line-height: 1.1;
  color: var(--color-white-50);
}

@media (max-width: 1199px) {
  .site-footer__email {
    font-size: 48px;
  }
}

@media (max-width: 900px) {
  .site-footer {
    padding: 70px var(--gutter) 32px;
    border-radius: 20px 20px 0 0;
  }

  .site-footer__logo {
    display: none;
  }

  .site-footer__brand .site-footer__logo-mobile {
    display: block;
    width: 172.277px;
    height: 17.014px;
  }

  .site-footer__tagline {
    font-size: 14px;
  }

  .site-footer__contact-title {
    font-size: 20px;
  }

  .site-footer__email {
    font-size: clamp(20px, 6.4vw, 24px);
    word-break: normal;
  }

  .site-footer__email .site-footer__email-arrow {
    display: none;
  }

  .site-footer__email .site-footer__email-arrow-mobile {
    display: block;
    width: 17px;
    height: 12px;
  }

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

  .site-footer__phones {
    font-size: 20px;
  }

  .site-footer__hours {
    font-size: 16px;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 64px;
  }

  .site-footer__nav {
    align-items: center;
  }

  .site-footer__nav-row {
    gap: 20px;
  }

  .site-footer__meta {
    align-items: center;
    gap: 20px;
  }
}