/**
 * Styles for the ESTMJS Members country badge and live search.
 * Enqueued on member archives and single member pages.
 *
 * Self-contained: it defines its own colour custom properties rather than
 * relying on the ones declared on .estmjs-member-archive, because the badge
 * rule also applies on the single profile page, where those are not set.
 * Typography is left to the theme.
 */

:root {
  --estmjs-extras-teal:        #0A848F;
  --estmjs-extras-border:      #E2E8ED;
  --estmjs-extras-muted:       #5B6B74;
}

/* -----------------------------------------------------------------------
 * Country badge
 *
 * Mirror image of the founder badge in member-founder-badge.css: identical
 * size, type and shadow, but pinned to the bottom RIGHT of the photo and
 * with a map pin icon. It sits inside the same ".estmjs-member-badge-wrap"
 * element as the founder badge, which supplies position: relative.
 *
 * The darker background keeps the two badges visually distinct when both
 * are showing.
 * ---------------------------------------------------------------------- */
.estmjs-member-country {
  position:         absolute;
  right:            0.5rem;
  bottom:           0.5rem;
  z-index:          2;
  display:          inline-flex;
  align-items:      center;
  box-sizing:       border-box;
  max-width:        calc( 100% - 1rem );
  padding:          0.25rem 0.6rem;
  background-color: #0B3C42;
  color:            #FFFFFF;
  font-size:        0.7rem;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.04em;
  line-height:      1;
  border-radius:    999px;
  box-shadow:       0 2px 6px rgba( 0, 0, 0, 0.25 );
  pointer-events:   none;
}

.estmjs-member-country__icon {
  flex:         0 0 auto;
  width:        1em;
  height:       1em;
  margin-right: 0.3em;
}

/* A long name (for example "Bosnia and Herzegovina") is truncated rather
 * than allowed to wrap or run across the photo. The full name is in the
 * title attribute. */
.estmjs-member-country__name {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Leave room for the founder badge on the left when both are present
 * (the country badge follows the founder badge in the markup). */
.estmjs-member-badge--founder ~ .estmjs-member-country {
  max-width: calc( 100% - 6.5rem );
}

/* -----------------------------------------------------------------------
 * Live search
 * ---------------------------------------------------------------------- */
.estmjs-member-search-wrap {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 1.5rem;
}

.estmjs-member-search[hidden],
.estmjs-member-search__results[hidden],
.estmjs-member-search__clear[hidden],
.estmjs-member-search__more[hidden],
[data-estmjs-members-listing][hidden] {
  display: none !important;
}

.estmjs-member-search {
  margin: 0 0 1.5rem;
}

.estmjs-member-search__field {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
}

.estmjs-member-search__input {
  flex:             1 1 auto;
  width:            100%;
  padding:          0.75rem 1rem;
  border:           1px solid var(--estmjs-extras-border);
  border-radius:    6px;
  background-color: #FFFFFF;
  font-size:        1rem;
  line-height:      1.4;
}

.estmjs-member-search__input:focus-visible {
  outline:        2px solid var(--estmjs-extras-teal);
  outline-offset: 2px;
}

.estmjs-member-search__clear {
  flex:             0 0 auto;
  padding:          0.7rem 1.1rem;
  border:           1px solid var(--estmjs-extras-teal);
  border-radius:    6px;
  background-color: transparent;
  color:            var(--estmjs-extras-teal);
  font-size:        0.875rem;
  font-weight:      600;
  cursor:           pointer;
}

.estmjs-member-search__clear:hover,
.estmjs-member-search__clear:focus-visible {
  background-color: var(--estmjs-extras-teal);
  color:            #FFFFFF;
}

.estmjs-member-search__status {
  min-height: 1.25rem;
  margin:     0.5rem 0 0;
  color:      var(--estmjs-extras-muted);
  font-size:  0.875rem;
}

/* "Show more" under the search results. */
.estmjs-member-search__more-wrap {
  margin:     0;
  text-align: center;
}

.estmjs-member-search__more {
  margin:           1.5rem 0;
  padding:          0.6rem 1.75rem;
  border:           1px solid var(--estmjs-extras-teal);
  border-radius:    999px;
  background-color: transparent;
  color:            var(--estmjs-extras-teal);
  font-size:        0.875rem;
  font-weight:      600;
  cursor:           pointer;
}

.estmjs-member-search__more:hover,
.estmjs-member-search__more:focus-visible {
  background-color: var(--estmjs-extras-teal);
  color:            #FFFFFF;
}

.estmjs-member-search__more:disabled {
  opacity: 0.6;
  cursor:  progress;
}

@media ( prefers-reduced-motion: no-preference ) {
  .estmjs-member-search__clear,
  .estmjs-member-search__more {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
}