/*
 * Business Voice C10 R1 HF59
 * Premium social icon correction.
 *
 * - no raster/cropped social imagery
 * - dedicated vector brand marks
 * - semantic platform classes instead of fragile nth-child colours
 * - consistent header + footer rendering
 */

.socials{
  display:flex;
  align-items:center;
  gap:8px;
}

.socials .social-link{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  flex:0 0 30px!important;
  display:inline-grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  border-radius:50%!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  text-decoration:none!important;
  line-height:1!important;
  box-shadow:0 3px 10px rgba(0,0,0,.10)!important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease!important;
}

.socials .social-link::before,
.socials .social-link::after{
  content:none!important;
  display:none!important;
}

.socials .social-link:hover,
.socials .social-link:focus-visible{
  transform:translateY(-1px)!important;
  box-shadow:0 6px 15px rgba(0,0,0,.18)!important;
  filter:brightness(1.06)!important;
  outline:none!important;
}

.socials .social-icon{
  display:block!important;
  width:15.5px!important;
  height:15.5px!important;
  max-width:none!important;
  overflow:visible!important;
  fill:currentColor;
  stroke:none;
  color:#fff!important;
  shape-rendering:geometricPrecision;
}

/* Slightly tune optical sizes by mark rather than cropping them. */
.socials .social-link--instagram .social-icon{width:16px!important;height:16px!important}
.socials .social-link--facebook .social-icon{width:17px!important;height:17px!important}
.socials .social-link--x .social-icon{width:14.5px!important;height:14.5px!important}
.socials .social-link--youtube .social-icon{width:17px!important;height:17px!important}
.socials .social-link--threads .social-icon{width:16px!important;height:16px!important}
.socials .social-link--linkedin .social-icon{width:15.5px!important;height:15.5px!important}

/* Premium platform treatments — semantic, stable, and independent of order. */
.socials .social-link--instagram{
  background:linear-gradient(135deg,#833ab4 0%,#c13584 42%,#fd1d1d 72%,#fcb045 100%)!important;
}
.socials .social-link--facebook{background:#1877f2!important}
.socials .social-link--x{background:#050505!important}
.socials .social-link--youtube{background:#ff0033!important}
.socials .social-link--threads{background:#111!important}
.socials .social-link--linkedin{background:#0a66c2!important}

/* Remove the historical nth-child ownership so Threads and LinkedIn cannot
   inherit each other's colours. */
.socials a:nth-child(1),
.socials a:nth-child(2),
.socials a:nth-child(3),
.socials a:nth-child(4),
.socials a:nth-child(5),
.socials a:nth-child(6){
  background-image:none;
}

/* Footer gets the same premium vector family, slightly larger touch targets. */
.socials--footer .social-link{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  flex-basis:32px!important;
}

/* Topbar stays visually balanced on smaller desktop/tablet widths. */
@media (max-width:1180px) and (min-width:961px){
  .topbar .socials{gap:6px}
  .topbar .socials .social-link{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    flex-basis:28px!important;
  }
  .topbar .socials .social-icon{
    transform:scale(.94);
  }
}