/* ==========================================================================
   SKY Corporate Services — social links in the contact blocks.

   Shared deliberately: the main site loads style.css, while Company Setup and
   Financial load startup.css / financial.css + brand-match.css. None of those
   overlap, so this one small file is linked by all of them and keeps the row
   identical everywhere.

   Why the white disc:
   Each glyph is the real brand mark drawn as ONE solid shape whose inner
   detail — Facebook's f, LinkedIn's in, YouTube's play triangle — is a
   cut-out, not a separate white shape. A cut-out shows whatever sits behind
   it, so the logos only read correctly on a light backing. White also keeps
   all four brand colours legible on the dark navy contact panels.
   ========================================================================== */

.socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

/* The .contact prefix is needed to beat `.contact a`, which gives every link
   in that block a dashed underline. */
.socials .soc,
.contact .socials .soc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transition: transform .15s ease, box-shadow .2s ease;
}

.socials .soc svg { width: 21px; height: 21px; display: block; }

/* Brand colours. `fill` is an inherited SVG property, so setting it on the
   <svg> reaches each path that has no fill of its own. */
.socials .soc--youtube  svg { fill: #FF0000; }
.socials .soc--facebook svg { fill: #1877F2; }
.socials .soc--linkedin svg { fill: #0A66C2; }
/* Instagram's mark is a gradient defined inside its own <svg>. No fill rule
   here on purpose, so the path's own fill="url(#skyIgGrad)" is what applies. */

.socials .soc:hover,
.contact .socials .soc:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
}

.socials .soc:focus-visible {
  outline: 2px solid #E9A94D;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) and (min-width: 999999px) {
  .socials .soc { transition: none; }
}