/* Softer, warmer accent green for institution/org lines and skill/language labels,
   replacing the theme's saturated success-green (which read as too intense). */
.text-accent {
  color: #6e8b5e !important;
}
[data-color-mode="dark"] .text-accent {
  color: #9cba84 !important;
}

/* The theme bottom-aligns the nav tabs against the taller color-modes
   illustration (align-items: flex-end), which leaves an empty strip above
   the tabs since we don't have a cover-photo banner filling that space.
   Center everything in the bar instead so it reads as one row. */
.hx_UnderlineNav-with-profile-color-modes-banner {
  align-items: center !important;
}

/* When scrolled, the mini avatar/name bar (#headerStuck, naturally ~48px
   tall) and the nav-links bar (~74px tall, driven by the color-modes
   illustration) both pin to top:0 independently. Their vertically-centered
   content ends up at different heights unless the two bars share a height. */
#headerStuck {
  height: 74px;
  display: flex !important;
  align-items: center;
}

/* Small modal for Activities entries that explain themselves instead of
   linking out (e.g. an event site that's gone offline since). */
.activity-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.activity-popup-overlay.is-open {
  display: flex;
}
.activity-popup-box {
  max-width: 360px;
  width: 100%;
}

/* Distinguish clickable Activities cards (post/link/popup) from plain,
   non-interactive ones: a small corner badge (external-link or info icon)
   plus a hover lift, so it reads at a glance without relying on cursor
   alone (which touch devices don't have anyway). */
.activity-card {
  position: relative;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.activity-card:hover {
  border-color: var(--color-accent-emphasis);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.activity-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}