/* social-brands.css — brand-accurate platform icons
   CrossAIHub · site-wide · small · official brand colors
   v1 · 2026-07-29 · never advertising, just recognizable
*/

/* ── inline SVG defaults (used by both /connect/ page channels and footer) ── */
.brand-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
}
.brand-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Small size for footer inline usage */
.brand-icon--sm {
  width: 16px;
  height: 16px;
}
/* Medium size for /connect/ channel cards */
.brand-icon--md {
  width: 22px;
  height: 22px;
}

/* Colors are inlined per SVG. This is the muted default fill for the
   brand outline shell (e.g. Instagram square). Icon SVGs handle their
   own fills so brand color is authoritative. */

/* ── /connect/ page: replace generic gold channel icons ──
   The channel__icon class is defined in legacy/main.css. We keep the
   28x28 slot but restyle so brand-color SVG renders correctly (no
   currentColor override). Icons must use their own fill.
*/
.channels .channel__icon {
  color: inherit; /* stop overriding SVG fill */
  width: 22px;
  height: 22px;
  margin-top: 4px;
}
.channels .channel__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── footer Follow section: inline brand icon before text ── */
.lk-footer .lk-footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lk-footer .lk-footer-col a .brand-icon {
  width: 14px;
  height: 14px;
  opacity: 0.85;
  transition: opacity 160ms ease;
}
.lk-footer .lk-footer-col a:hover .brand-icon,
.lk-footer .lk-footer-col a:focus-visible .brand-icon {
  opacity: 1;
}

/* Prevent brand-icon from shifting layout in About/Rooms footer cols
   (only Follow col has brand icons — Others stay text-only) */