/* The company's pages on social networks: the same three icon links in the
   header, the mobile menu and the footer of every public page. */
.vk-social { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; flex: none; }
.vk-social li { display: flex; }
.vk-social-link {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: #fff; border: 1px solid #E2E0D8; color: #1C1B17;
  transition: transform .16s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.vk-social-link svg { display: block; }
.vk-social-link:hover { transform: translateY(-2px); border-color: #1C1B17; color: #1C1B17; }
.vk-social-link:active { transform: translateY(0) scale(.96); background: #FFED00; border-color: #E8D800; }
.vk-social-link:focus-visible { outline: 3px solid rgba(28, 27, 23, .8); outline-offset: 3px; }

/* In the bar: beside the phone number, wherever the bar shows its navigation.
   Where the navigation folds into the menu button, so do they. Between the
   two they are a little smaller, so the row still fits. */
.vk-social--header { gap: 6px; }
@media (max-width: 1279px) {
  .vk-social--header { gap: 4px; }
  .vk-social--header .vk-social-link { width: 36px; height: 36px; border-radius: 10px; }
}
@media (max-width: 1079px) { .vk-social--header { display: none; } }

.vk-social--menu { gap: 10px; padding: 16px 0 2px; }
.vk-social--menu .vk-social-link { width: 46px; height: 46px; border-radius: 13px; background: #F7F6F2; }
@media (min-width: 1080px) { .vk-social--menu { display: none; } }

/* On the dark footer. */
.vk-social--footer { gap: 10px; flex-wrap: wrap; }
.vk-social--footer .vk-social-link {
  width: 44px; height: 44px; border-radius: 12px; background: #26241E; border-color: #3A372F; color: #E9E7DF;
}
.vk-social--footer .vk-social-link:hover { background: #FFED00; border-color: #FFED00; color: #1C1B17; }
.vk-social--footer .vk-social-link:active { background: #E8D800; }
.vk-social--footer .vk-social-link:focus-visible { outline-color: #FFED00; }

@media (prefers-reduced-motion: reduce) { .vk-social-link { transition: none; } .vk-social-link:hover { transform: none; } }