/* ==========================================================================
   Footer social icons — The Sri COM
   --------------------------------------------------------------------------
   Eight round icon buttons (Instagram, Facebook, X, YouTube, TikTok, Threads,
   WhatsApp, Email). Markup lives in default.hbs.

   On hover each button fills with that platform's own brand colour, which
   makes the row readable at a glance. The three near-black brands (X, TikTok,
   Threads) flip to a light fill on the dark footer so they stay visible.

   Loaded LAST in default.hbs. `.footer-social .social-link` (2 classes) beats
   the `.footer-social a` rules in screen.css / footer-polish.css; the
   `html[data-theme="…"]` variants beat the themed colour rules in
   theme-toggle.css / blue-links.css / brand-accent.css.
   ========================================================================== */

/* footer-polish.css draws text glyph icons (f, ◎, ▶, ♪, 𝕏) via ::before.
   Real SVGs replace them, so switch the pseudo-element off. */
.footer-social a::before,
.footer-social .social-link::before {
  content: none;
  display: none;
}

/* --- Layout --------------------------------------------------------------- */

/* A fixed 4-wide grid rather than flex-wrap, so the eight icons always land
   as a tidy 4 x 2 block instead of breaking 7 + 1 at some widths. */
.footer-social .social-list {
  display: grid;
  grid-template-columns: repeat(4, 38px);
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Footer column layout lives in footer-v2.css — this file only owns the icons. */

/* --- The buttons ---------------------------------------------------------- */

.footer-social .social-link {
  --brand: #2475e8;
  --brand-ink: #ffffff;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(180, 204, 237, .22);
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
}

.footer-social .social-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

html[data-theme="dark"] .footer-social .social-link,
html[data-theme] .footer-social .social-link {
  color: #c7d4e8;
}

html[data-theme="light"] .footer-social .social-link {
  border-color: #d3ddea;
  color: #39506e;
}

html[data-theme] .footer-social .social-link:hover,
html[data-theme] .footer-social .social-link:focus-visible,
html[data-theme="light"] .footer-social .social-link:hover,
html[data-theme="light"] .footer-social .social-link:focus-visible {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-2px);
}

/* --- Per-platform brand colours ------------------------------------------- */

.footer-social .social-instagram { --brand: #e4405f; }
.footer-social .social-facebook  { --brand: #1877f2; }
.footer-social .social-youtube   { --brand: #ff0000; }
.footer-social .social-whatsapp  { --brand: #25d366; }
.footer-social .social-email     { --brand: #ea4335; }
.footer-social .social-x         { --brand: #111418; }
.footer-social .social-tiktok    { --brand: #111418; }
.footer-social .social-threads   { --brand: #111418; }

/* Near-black brands would disappear into the dark footer — invert them. */
html[data-theme="dark"] .footer-social .social-x,
html[data-theme="dark"] .footer-social .social-tiktok,
html[data-theme="dark"] .footer-social .social-threads {
  --brand: #f2f5fa;
  --brand-ink: #0b1424;
}

/* --- Phones --------------------------------------------------------------- */

@media (max-width: 700px) {
  .footer-social .social-list {
    gap: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] .footer-social .social-link:hover,
  html[data-theme] .footer-social .social-link:focus-visible {
    transform: none;
  }
}