/* Иконки соцсетей в футере — всегда в фирменных цветах сетей.
   Глиф — CSS-маска из SVG, цвет даёт фон ссылки: Facebook #0866FF, YouTube #FF0000,
   Instagram — фирменный градиент (фильтром его не получить). <img> внутри остаётся
   ради alt и сделан прозрачным. Сеть определяем по домену в href — разметка в
   custom_users/general/footer_social1.php у всех пяти сайтов одинаковая. */
.footer-menu__socials {
    display: flex;
    align-items: center;
    gap: 16px;
}
.footer-socials__item {
    display: inline-flex;
    line-height: 0;
    background: var(--footer-social-brand);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: opacity 0.2s;
}
.footer-socials__item:hover,
.footer-socials__item:focus-visible {
    opacity: 0.75;
}
.footer-socials__item img {
    opacity: 0;
}
.footer-socials__item[href*="facebook.com"] {
    -webkit-mask-image: url("/local/assets/images/socials/facebook.svg");
    mask-image: url("/local/assets/images/socials/facebook.svg");
    --footer-social-brand: #0866FF;
}
.footer-socials__item[href*="instagram.com"] {
    -webkit-mask-image: url("/local/assets/images/socials/instagram.svg");
    mask-image: url("/local/assets/images/socials/instagram.svg");
    --footer-social-brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer-socials__item[href*="youtube.com"] {
    -webkit-mask-image: url("/local/assets/images/socials/youtube.svg");
    mask-image: url("/local/assets/images/socials/youtube.svg");
    --footer-social-brand: #FF0000;
}