/* Vertical spacing between bullet points */
ul li {
  margin-bottom: 1rem;
}

.hero {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
}

.avatar {
  width: 202px;
  height: 202px;
  border-radius: 10px;
  object-fit: cover;
}

.hero-left {
  display: flex;
  flex-direction: row;     /* key change */
  align-items: flex-end;
  gap: 1rem;
}

.hero-socials {
  display: flex;
  flex-direction: column;  /* stack icons next to photo */
  gap: 0.6rem;
}

.hero-socials .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 1.1em;
  flex: 0 0 1.2em;
}

.hero-socials .icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-socials .social {
  display: inline-flex;
  align-items: center;   /* THIS is the key */
  gap: 0.45rem;
}

# .hero-socials .label {
#   line-height: 1;        /* prevent font baseline offset */
# }


/* Sticky footer for Archie's structure: footer is inside .content */
.content {
  min-height: 98vh;
  max-height: 98vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-bottom: 0 !important;
}

/* Make the main area take up remaining space */
main {
  flex: 1 0 auto;
  margin-bottom: 0;
}


footer {
  text-align: center;
  justify-content: center;
  font-size: 0.7rem;
  opacity: 0.5;
  border-top: none !important;
  border-block-start: none !important;
  padding-top: 0 !important
  padding-bottom: 0 !important
  margin-top: auto;
  margin-bottom: 0 !important;
  padding-block: 0 !important;
  margin-block-start: 0 !important;
}

footer a,
footer a:visited,
footer a:hover,
footer a:active {
  text-decoration: none !important;
  border-bottom: 0 !important; /* some themes fake underline with borders */
}

.badge {
  # display: inline-flex;          /* key change */
  align-items: center;           /* vertical centering */
  justify-content: center;

  font-size: 0.65rem;
  line-height: 1;                /* prevent baseline weirdness */
  padding: 0.35em 0.45em;

  border-radius: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;

  margin-right: 0.2rem;
  vertical-align: middle;        /* align with text */
}

/* Badge variants */
.badge.invited {
  background-color: rgba(80, 120, 200, 0.15);
  color: #5078c8;
}

.badge.contributed {
  background-color: rgba(80, 160, 120, 0.15);
  color: #509f78;
}