:root {
    --rem: 10px;
}

html {
    font-size: var(--rem);
}

.site-footer {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
  font-family: Arial, sans-serif;
  padding: 80px 0;
  margin-top: 40px;
  max-width: 1920px;
  margin: 0 auto;
}

.footer-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}

.footer-left {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-logo {
  width: 100%;
  max-width: 250px;
  margin-bottom: 20px;
}

.footer-logo img {
  width: 100%;
  height: auto;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icon {
  width: 40px;
  height: 40px;
  /* Never paints: every icon in the markup carries one of the modifier
     classes below, and all four set navy. Kept as a matching fallback. */
  background-color: var(--color-navy);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.social-icon:hover {
  background-color: #8a4d4d;
}

.social-icon.facebook {
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%23ff8000' fill='white' %3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.18182 10.3333C5.20406 10.3333 5 10.5252 5 11.4444V13.1111C5 14.0304 5.20406 14.2222 6.18182 14.2222H8.54545V20.8889C8.54545 21.8081 8.74951 22 9.72727 22H12.0909C13.0687 22 13.2727 21.8081 13.2727 20.8889V14.2222H15.9267C16.6683 14.2222 16.8594 14.0867 17.0631 13.4164L17.5696 11.7497C17.9185 10.6014 17.7035 10.3333 16.4332 10.3333H13.2727V7.55556C13.2727 6.94191 13.8018 6.44444 14.4545 6.44444H17.8182C18.7959 6.44444 19 6.25259 19 5.33333V3.11111C19 2.19185 18.7959 2 17.8182 2H14.4545C11.191 2 8.54545 4.48731 8.54545 7.55556V10.3333H6.18182Z' stroke='none' stroke-width='1.5' stroke-linejoin='round' /%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-navy);
  border-radius: 50%;
  margin-right: 10px;
}

.social-icon.instagram {
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%23ff8000' fill='white' %3E%3Cpath d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z' /%3E%3Cpath d='M16.5 12C16.5 14.4853 14.4853 16.5 12 16.5C9.51472 16.5 7.5 14.4853 7.5 12C7.5 9.51472 9.51472 7.5 12 7.5C14.4853 7.5 16.5 9.51472 16.5 12Z' stroke='none' stroke-width='1.5' fill='%232D3142' /%3E%3Cpath d='M17.5078 6.5L17.4988 6.5' stroke='%232D3142' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-navy);
  border-radius: 50%;
  margin-right: 10px;
}

.social-icon.telegram {
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%23ffffff' fill='white' %3E%3Cpath d='M11.97 15.44L15.23 19.09C16.43 20.46 17.03 21.14 17.66 20.98 18.29 20.81 18.5 19.91 18.93 18.11L21.32 8.15C21.99 5.38 22.32 3.99 21.58 3.31 20.84 2.63 19.56 3.14 17.01 4.15L5.14 8.86C3.09 9.68 2.07 10.08 2.01 10.78 2 10.85 2 10.92 2 11 2.07 11.69 3.09 12.1 5.13 12.92 6.06 13.29 6.52 13.48 6.85 13.83 6.89 13.87 6.93 13.92 6.96 13.96 7.27 14.34 7.4 14.84 7.66 15.83L8.15 17.7C8.4 18.67 8.53 19.16 8.86 19.22 9.19 19.29 9.48 18.89 10.65 17.25L11.69 15.84Z' /%3E%3Cline stroke='black' stroke-width='1 ' x1='10.1' x2='12.96' y1='14' y2='17.25' stroke-linecap='round' /%3E%3Cline stroke='black' stroke-width='1' x1='13.109349658771576' x2='10.150072260136492' y1='11.100867121637895' y2='13.990072260136492' stroke-linecap='round' /%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-navy);
  border-radius: 50%;
  margin-right: 10px;
}

.social-icon.linkedin {
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' color='%23ffffff' fill='white' %3E%3Cpath d='M4.5 9.5H4C3.05719 9.5 2.58579 9.5 2.29289 9.79289C2 10.0858 2 10.5572 2 11.5V20C2 20.9428 2 21.4142 2.29289 21.7071C2.58579 22 3.05719 22 4 22H4.5C5.44281 22 5.91421 22 6.20711 21.7071C6.5 21.4142 6.5 20.9428 6.5 20V11.5C6.5 10.5572 6.5 10.0858 6.20711 9.79289C5.91421 9.5 5.44281 9.5 4.5 9.5Z' stroke-width='1.5' /%3E%3Cpath d='M6.5 4.25C6.5 5.49264 5.49264 6.5 4.25 6.5C3.00736 6.5 2 5.49264 2 4.25C2 3.00736 3.00736 2 4.25 2C5.49264 2 6.5 3.00736 6.5 4.25Z' stroke-width='1.5' /%3E%3Cpath d='M12.326 9.5H11.5C10.5572 9.5 10.0858 9.5 9.79289 9.79289C9.5 10.0858 9.5 10.5572 9.5 11.5V20C9.5 20.9428 9.5 21.4142 9.79289 21.7071C10.0858 22 10.5572 22 11.5 22H12C12.9428 22 13.4142 22 13.7071 21.7071C14 21.4142 14 20.9428 14 20L14.0001 16.5001C14.0001 14.8433 14.5281 13.5001 16.0879 13.5001C16.8677 13.5001 17.5 14.1717 17.5 15.0001V19.5001C17.5 20.4429 17.5 20.9143 17.7929 21.2072C18.0857 21.5001 18.5572 21.5001 19.5 21.5001H19.9987C20.9413 21.5001 21.4126 21.5001 21.7055 21.2073C21.9984 20.9145 21.9985 20.4432 21.9987 19.5006L22.0001 14.0002C22.0001 11.515 19.6364 9.50024 17.2968 9.50024C15.9649 9.50024 14.7767 10.1531 14.0001 11.174C14 10.5439 14 10.2289 13.8632 9.995C13.7765 9.84686 13.6531 9.72353 13.505 9.63687C13.2711 9.5 12.9561 9.5 12.326 9.5Z' stroke-width='1.5' stroke-linejoin='round' /%3E%3C/svg%3E");
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-navy);
  border-radius: 50%;
  margin-right: 10px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex: 1;
  margin-left: 120px;
}

.footer-column {
  flex: 1;
  min-width: 200px;
  margin-bottom: 20px;
}

.footer-column h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  font-size: 1.4rem;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid var(--color-border-mid);
  margin-top: 30px;
  padding-top: 20px;
  text-align: center;
  font-size: 14px;
}

.footer-consent, .footer-copyright {
  margin-bottom: 10px;
}

/* Ссылка на политику стоит внутри абзаца, а не в ряду .footer-legal под ним,
   поэтому подчёркивание ей оставлено: без него её в сплошном мелком тексте не
   найти. Цвет — тот же приглушённый, что у соседнего ряда, и это не вкус:
   красный из article.css даёт на фоне подвала 4,24:1 при пороге 4,5 для 14px,
   а --color-text-muted — 5,27:1. */
.footer-consent a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.footer-legal a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-legal a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
  }
  
  .footer-left {
    margin-bottom: 30px;
  }
  
  .footer-links {
    flex-direction: column;
    margin-left: 0;
  }
  
  .footer-column {
    width: 100%;
  }
}