/* ---------------------------------------------------------------------------
   Social accounts, as icons.

   One definition, loaded by the public site and by the admin panel, so the row
   an Owner arranges in the admin is the row the footer draws — the same reason
   the block markup lives in this library rather than twice.

   Sizing: the glyph is 22px, the target around it is 44px, which is the size a
   finger needs. The padding is what makes the difference, so the icons stay
   visually small while staying comfortably tappable, and the row is pulled
   left by that padding so the first icon lines up with the text above it.
   --------------------------------------------------------------------------- */

.social-icons {
  list-style: none;
  margin: 10px 0 0 -11px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.social-icons li { margin: 0; }

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: inherit;
  border-radius: 2px;
  /* Colour is the whole hover state, so it is the only thing that moves.
     A transform here would make a row of icons bob about on a page whose
     restraint is the point. */
  transition: color .18s var(--ease, ease), opacity .18s var(--ease, ease);
}

.social-icons__glyph {
  display: block;
  width: 22px;
  height: 22px;
  /* An uploaded icon is any shape; this keeps it inside the same square as
     the built-in glyphs instead of setting the row's height by itself. */
  object-fit: contain;
}

.social-icons a:focus-visible {
  outline: 2px solid var(--focus, #1a63d8);
  outline-offset: 2px;
}

/* ---- On the dark footer ---------------------------------------------------
   Rest is a light grey rather than pure white: at 22px a solid white glyph is
   louder than the wordmark above it. Both states are far above the 3:1 that
   WCAG asks of a graphic that carries meaning. */

.footer-social-icons a { color: #c9c9c9; }
.footer-social-icons a:hover,
.footer-social-icons a:focus-visible { color: #fff; }

/* An uploaded icon cannot be recoloured, so it dims instead — the same
   two-state behaviour, expressed the only way a bitmap can express it. */
.footer-social-icons .social-icons__glyph--uploaded { opacity: .82; }
.footer-social-icons a:hover .social-icons__glyph--uploaded,
.footer-social-icons a:focus-visible .social-icons__glyph--uploaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .social-icons a { transition: none; }
}

/* ---- In the admin list ----------------------------------------------------
   Not a link there but a preview, at the size the site draws it. */

.social-icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 3px;
  background: #fff;
  color: #111;
}

.social-icon-preview svg,
.social-icon-preview img { display: block; width: 22px; height: 22px; object-fit: contain; }