/* 1) Container for author block */
.post-author {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

/* 2) Author avatar */
.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.75rem;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

/* 3) Author name: use primary color for “by Author” text */
.author-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary);
}

/* 4) Author bio: lighter, maybe muted text */
.author-bio {
  font-size: 0.85rem;
  color: var(--muted-foreground, #555); /* fallback if your theme sets --muted-foreground */
}

/* 5) Social‐link container: spacing */
.author-socials {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* 6) Base style for each social link: small text and var(--link-color) */
.social-link {
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--link-color);
  transition: color 0.2s ease;
}

/* 7) On hover, lighten or darken */
.social-link:hover {
  color: var(--link-hover-color);
}

/* 8) If you want individual social‐platform color accents (optional), e.g.: */
.social-link.github {
  /* Either let it be var(--link-color), or use a GitHub‐specific tone */
  color: var(--link-color);
}
.social-link.github:hover {
  color: #333; /* or var(--link-hover-color) if that blends */
}

.social-link.twitter {
  color: #1da1f2; /* Twitter blue */
}
.social-link.twitter:hover {
  color: #0d8ae5;
}

.social-link.linkedin {
  color: #0077b5;
}
.social-link.linkedin:hover {
  color: #005582;
}

/* 9) (Continue for mastodon, instagram, snapchat, email… use either brand colors or link-hover) */
.social-link.mastodon {
  color: #6364ff; /* Mastodon brand purple */
}
.social-link.mastodon:hover {
  color: #4a4ecc;
}

.social-link.instagram {
  /* Instagram gradient is tricky in plain text—pick a single hue that works */
  color: #c32aa3; 
}
.social-link.instagram:hover {
  color: #a0228a;
}

.social-link.snapchat {
  color: #fffc00; /* Snapchat yellow */
}
.social-link.snapchat:hover {
  color: #e6e600;
}
.social-link.threads {
  color: #000;
}
.social-link.threads:hover {
  color: #333;
}

/* “Email” link can be the same as muted text or primary */
.social-link.email {
  color: var(--link-color);
}
.social-link.email:hover {
  color: var(--link-hover-color);
}