/* Social links — styles partials/social-links.hbs
 * ---------------------------------------------------------------------
 * Used twice: under the brand in the site footer, and in the contact
 * page's info column. Colours are palette tokens only (see
 * figtree-cream.css); the icons are currentColor SVGs, so color: is the
 * whole theming story.
 *
 * Loaded after figtree-contact.css on purpose: .ft-cinfo-text a there
 * underlines every link in that column, and .ft-social--contact a below
 * has to win at equal specificity by coming later. Before figtree-sticky.css,
 * which must stay last.
 *
 * 36px hit area, not 18px: the glyph is small, the target is not. Four
 * targets in a row on a phone at 18px is a miss-tap generator.
 */

.ft-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.ft-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.ft-social a:hover {
  color: var(--green);
  border-color: var(--green);
}

.ft-social a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.ft-social svg { display: block; }

/* Contact page: sits directly under the gold "Follow Along" label, so it
   needs less top margin than in the footer, and must undo the underline
   that .ft-cinfo-text a applies to every link in the column. */
.ft-social--contact { margin-top: 0.4rem; }
.ft-social--contact a { text-decoration: none; color: var(--green-dark); }
.ft-social--contact a:hover { color: var(--green); }

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