/**
 * Social Replies for Ghost — drop-in styles
 *
 * The component uses CSS custom properties that fall back to neutral values
 * if your theme doesn't define them. To match your theme's palette, define
 * any of these in your own stylesheet:
 *
 *   --sr-rule         (border / divider color)
 *   --sr-text         (primary text)
 *   --sr-muted        (secondary text)
 *   --sr-soft         (body text inside reply cards)
 *   --sr-accent       (link color)
 *   --sr-bg-card      (avatar placeholder bg)
 *   --sr-mastodon     (Mastodon platform pill color)
 *   --sr-bluesky      (Bluesky platform pill color)
 *   --sr-font-sans    (header text)
 *   --sr-font-body    (reply body text)
 *
 * Sizing notes:
 *   The section sets its own font-size baseline (--social-replies-base-size,
 *   default 1.7rem) and all inner elements use `em` so they scale together.
 *   1.7rem matches the default --content-font-size used by Casper, Source,
 *   and most Ghost themes (which use a 62.5% root → 10px root font-size).
 *   On themes that use a 16px root, override with:
 *     :root { --social-replies-base-size: 1.05rem; }
 *
 * License: MIT
 */

.social-replies {
  --sr-rule: var(--social-replies-rule, #e5e1d8);
  --sr-text: var(--social-replies-text, #15171a);
  --sr-muted: var(--social-replies-muted, #738a94);
  --sr-soft: var(--social-replies-soft, #3c4043);
  --sr-accent: var(--social-replies-accent, #3eb0ef);
  --sr-bg-card: var(--social-replies-bg-card, #f4f4f5);
  --sr-mastodon: var(--social-replies-mastodon, #5655c4);
  --sr-bluesky: var(--social-replies-bluesky, #0085ff);
  /* Default to inheriting from the host theme so type matches the post body.
     Override --social-replies-font-sans / -font-body in your stylesheet
     if you want a different family. */
  --sr-font-sans: var(--social-replies-font-sans, inherit);
  --sr-font-body: var(--social-replies-font-body, inherit);

  /* Sets the typographic baseline. All inner elements size in em from here. */
  font-size: var(--social-replies-base-size, 1.7rem);
  line-height: 1.6;

  max-width: 640px;
  margin: 3rem auto 0;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--sr-rule);
}

/* ---- Heading ------------------------------------------------------------ */
.social-replies-heading {
  font-family: var(--sr-font-sans);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sr-muted);
  margin-bottom: 1.75rem;
  text-align: center;
}
.social-replies-heading::before,
.social-replies-heading::after {
  content: "—";
  font-size: 0.78em;
  margin: 0 0.75rem;
  color: var(--sr-rule);
  letter-spacing: 0;
}
.social-replies-label {
  color: var(--sr-soft);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  font-style: italic;
  font-family: var(--sr-font-body);
  font-size: 1em;
}

/* ---- List + each reply -------------------------------------------------- */
.social-replies-list {
  display: block;
}

.social-reply {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--sr-rule);
}
.social-reply:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.social-reply-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sr-bg-card);
  display: block;
  flex-shrink: 0;
}
.social-reply-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-reply-main {
  min-width: 0;
}

/* Head row: name, handle, date with platform pill. */
.social-reply-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
  font-family: var(--sr-font-sans);
}

.social-reply-name {
  font-weight: 600;
  font-size: 0.95em;
  color: var(--sr-text);
  text-decoration: none;
}
.social-reply-name:hover { color: var(--sr-accent); }

.social-reply-handle {
  font-size: 0.85em;
  color: var(--sr-muted);
}
.social-reply-handle::before {
  content: "·";
  margin-right: 0.35rem;
  color: var(--sr-rule);
}

.social-reply-date {
  font-size: 0.82em;
  color: var(--sr-muted);
  font-variant-numeric: tabular-nums;
}
.social-reply-date a { color: inherit; text-decoration: none; }
.social-reply-date a:hover { color: var(--sr-accent); }

/* Platform pill appended after the date via ::after pseudo. */
.social-reply-date[data-platform="mastodon"]::after {
  content: "Mastodon";
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.45rem;
  background: rgba(99, 100, 255, 0.1);
  color: var(--sr-mastodon);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.65em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.social-reply-date[data-platform="bluesky"]::after {
  content: "Bluesky";
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.45rem;
  background: rgba(0, 133, 255, 0.1);
  color: var(--sr-bluesky);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.65em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* ---- Reply body --------------------------------------------------------- */
.social-reply-body {
  font-family: var(--sr-font-body);
  font-size: 1em;
  line-height: 1.6;
  color: var(--sr-soft);
}
.social-reply-body p + p { margin-top: 0.6rem; }
.social-reply-body a {
  color: var(--sr-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.social-reply-body a:hover {
  text-decoration-thickness: 2px;
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 640px) {
  .social-reply {
    grid-template-columns: 38px 1fr;
    gap: 0.85rem;
  }
  .social-reply-avatar {
    width: 38px;
    height: 38px;
  }
}

/* ---- Dark mode --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .social-replies {
    --sr-rule: var(--social-replies-rule, #2c2f33);
    --sr-text: var(--social-replies-text, #e6e6e6);
    --sr-muted: var(--social-replies-muted, #999);
    --sr-soft: var(--social-replies-soft, #ccc);
    --sr-bg-card: var(--social-replies-bg-card, #2c2f33);
  }
  .social-reply-date[data-platform="mastodon"]::after {
    background: rgba(99, 100, 255, 0.18);
  }
  .social-reply-date[data-platform="bluesky"]::after {
    background: rgba(0, 133, 255, 0.18);
  }
}