/* =========================================================
   📄 /front/blocks/footer/contacts/contacts.css
   БЛОК: Контакты футера (телефон, email)
   ========================================================= */


/* =========================================================
   1️⃣ КОНТАКТ ФУТЕРА — ОДНА СТРОКА
   ========================================================= */

.footer-contact{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;

  gap:var(--space-2);

  white-space:nowrap !important;
  line-height:1 !important;

  color:var(--color-primary) !important;
  text-decoration:none;

  /* шрифт как у заголовков */
  font-family:var(--font-heading);
  font-weight:600;
}



.footer-contact,
.footer-contact:hover,
.footer-contact:focus{
  text-decoration:none !important;
}

.footer-contact{
  transition:
    opacity .2s ease,
    transform .2s ease;
}

.footer-contact:hover,
.footer-contact:focus{
  opacity:0.85;
  transform:translateX(2px);
}

.footer-contact__icon{
  transition:transform .2s ease;
}

.footer-contact:hover .footer-contact__icon,
.footer-contact:focus .footer-contact__icon{
  transform:translateX(1px);
}

/* =========================================================
   2️⃣ ИКОНКА КОНТАКТА (ANTI-FLASH, SVG)
   ========================================================= */

.footer-contact__icon{
  width:var(--icon-size-footer, 24px);
  height:var(--icon-size-footer, 24px);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.footer-contact__icon svg{
  width:100%;
  height:100%;
  display:block;
}

.footer-contact__icon svg,
.footer-contact__icon svg *{
  fill:currentColor;
  stroke:currentColor;
}




/* =========================================================
   3️⃣ ТЕКСТ КОНТАКТА (КАК ЗАГОЛОВКИ)
   ========================================================= */

.footer-contact__text{
  font-family:var(--font-heading);
  font-weight:600;

  font-size:18px;
  line-height:1.2;

  white-space:nowrap;
}




/* =========================================================
   4️⃣ СОСТОЯНИЯ (HOVER / FOCUS)
   ========================================================= */

.footer-contact:hover,
.footer-contact:focus{
  text-decoration:underline;
}