/* ── Footer social links ──────────────────────────────────────────────
   Brand marks are the official SVGs from Simple Icons v16.29.0 (CC0),
   stored unmodified in /icons/. They are applied as CSS masks so the
   glyph inherits `currentColor` and can be recolored on hover.
   ------------------------------------------------------------------ */

.apex-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* Centered variant for the single-row footers on interior pages */
.apex-social--center {
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto 18px;
}

.apex-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, .06);
  color: #8a8a8a;
  text-decoration: none;
  transition: color .2s, background-color .2s, transform .2s;
}

.apex-social a:hover,
.apex-social a:focus-visible { color: #fff; transform: translateY(-2px); }
.apex-social a:focus-visible { outline: 2px solid #1B6FCC; outline-offset: 2px; }

.apex-social .instagram:hover, .apex-social .instagram:focus-visible { background: #FF0069; }
.apex-social .youtube:hover,   .apex-social .youtube:focus-visible   { background: #FF0000; }
.apex-social .facebook:hover,  .apex-social .facebook:focus-visible  { background: #0866FF; }
.apex-social .pinterest:hover, .apex-social .pinterest:focus-visible { background: #BD081C; }

.apex-social i {
  display: block;
  width: 19px;
  height: 19px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-size: contain;       mask-size: contain;
}

.apex-social .instagram i { -webkit-mask-image: url("/icons/instagram.svg"); mask-image: url("/icons/instagram.svg"); }
.apex-social .youtube i   { -webkit-mask-image: url("/icons/youtube.svg");   mask-image: url("/icons/youtube.svg"); }
.apex-social .facebook i  { -webkit-mask-image: url("/icons/facebook.svg");  mask-image: url("/icons/facebook.svg"); }
.apex-social .pinterest i { -webkit-mask-image: url("/icons/pinterest.svg"); mask-image: url("/icons/pinterest.svg"); }

@media (max-width: 720px) {
  .apex-social { justify-content: center; }
}