/*
 * PO — Social Media Footer
 * Standalone CSS. Works with any theme.
 */

/* ── Wrapper — appears after theme footer ── */
.po-social-footer {
  background: var(--primary, #0f1923);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 28px 24px;
}

/* ── When placed inline via shortcode ── */
.po-social-footer--inline {
  background: transparent;
  border-top: none;
  padding: 0;
}

/* ── Inner row ── */
.po-social-footer__inner {
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ── "Follow Us" label ── */
.po-social-footer__label {
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ── List reset ── */
.po-social-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Each icon link ── */
.po-social-footer__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.po-social-footer__link svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* ── Hover: each network gets its brand colour ── */
.po-social-footer__link--facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
  transform: translateY(-3px);
}
.po-social-footer__link--instagram:hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-color: #e1306c;
  color: #fff;
  transform: translateY(-3px);
}
.po-social-footer__link--youtube:hover {
  background: #ff0000;
  border-color: #ff0000;
  color: #fff;
  transform: translateY(-3px);
}
.po-social-footer__link--tiktok:hover {
  background: #010101;
  border-color: #69c9d0;
  color: #69c9d0;
  transform: translateY(-3px);
}
.po-social-footer__link--google_maps:hover {
  background: #4285f4;
  border-color: #4285f4;
  color: #fff;
  transform: translateY(-3px);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .po-social-footer__link { width: 38px; height: 38px; }
  .po-social-footer__link svg { width: 16px; height: 16px; }
  .po-social-footer__label { font-size: 12px; }
}