/* Public application, activities and learning pages. */
.mpn-join-experience .mpn-join-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mpn-join-experience .mvn-join-intro > .mpn-join-status-link { margin-block-start: .65rem; }
.mpn-join-experience .mvn-step-number { display: none; }
.mpn-join-experience .mpn-join-analytics-optin { margin-block-start: 1.25rem; }

#activity-results, #moments, .mvn-moment-card[id] { scroll-margin-block-start: 6rem; }
.mpn-activity-periods { display: flex; gap: .6rem; flex-wrap: wrap; margin-block: 0 1rem; }
.mpn-activity-periods a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid #91a79b;
  border-radius: .5rem;
  color: #174d38;
  background: #fff;
  text-decoration: none;
  font-weight: 700;
}
.mpn-activity-periods a[aria-current="page"] { background: #17573f; color: #fff; border-color: #17573f; }
.mpn-activity-periods a:focus-visible, .mpn-activity-archive a:focus-visible {
  outline: 3px solid #9b752f;
  outline-offset: 3px;
}
.mpn-activity-archive { margin-block: 2rem 1.5rem; }
.mpn-activity-archive h3 { margin-block: 0 .4rem; font: 400 clamp(1.4rem, 3vw, 2rem)/1.2 Georgia, serif; }
.mpn-activity-archive p { margin-block: 0 1rem; }
.mpn-activity-archive ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .75rem;
  padding: 0;
  list-style: none;
  margin-block: 0 1rem;
}
.mpn-activity-archive li {
  display: grid;
  gap: .25rem;
  align-content: start;
  background: #fff;
  border: 1px solid #d7e3da;
  border-radius: .6rem;
  padding: 1rem;
}
.mpn-activity-archive li a { color: #174d38; font-weight: 700; }
.mpn-activity-archive li :is(time, span) { color: #485e51; font-size: .875rem; }
.mvn-moment-card[id]:target { outline: 3px solid #9b752f; outline-offset: 4px; }

body.mpn-resource-body .mpn-resource-hero .mpn-resource-hero-actions a:first-child {
  color: #173e2d;
  background: #f7f3e8;
}
body.mpn-resource-body .mpn-resource-hero .mpn-resource-hero-actions a:first-child:hover {
  color: #173e2d;
  background: #fff;
}
.mpn-resource-main .mpn-resource-hero { padding-block: clamp(2rem, 4vw, 3.5rem); }
.mpn-resource-main .mpn-resource-list { padding-block-start: clamp(2rem, 4vw, 3rem); }