/**
 * Styles for single-members.php (ESTMJS Member Profile).
 * Enqueued conditionally from Frontend_Assets — loads only on
 * single "members" pages.
 *
 * Typography (font-family, font-size, color) for headings, paragraphs,
 * and body text is intentionally NOT set here — it inherits from the
 * active theme's Customizer settings via normal CSS cascade. Only
 * structural layout and deliberate decorative accents (pills, buttons,
 * borders) are defined below.
 */

.estmjs-member-single {
  --estmjs-navy:       #0F2A43;
  --estmjs-teal:       #1F8A83;
  --estmjs-teal-light: #E4F3F2;
  --estmjs-muted:      #64748B;
  --estmjs-paper:      #FFFFFF;
  --estmjs-canvas:     #F7F9FA;
  --estmjs-border:     #E2E8ED;
  --estmjs-radius:     6px;

  background-color:    var(--estmjs-canvas);
}

.estmjs-member-single * {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------
 * Page layout: profile content + optional widget sidebar.
 * ---------------------------------------------------------------------- */
.estmjs-member-layout {
  display:               grid;
  grid-template-columns: minmax( 0, 1fr ) 320px;
  gap:                   2.5rem;
  max-width:             1200px;
  margin:                0 auto;
  padding:               2.5rem 1.5rem 4rem;
}

.estmjs-member-layout.estmjs-member-layout--full {
  grid-template-columns: minmax( 0, 1fr );
}

@media ( max-width: 900px ) {
  .estmjs-member-layout {
    grid-template-columns: minmax( 0, 1fr );
    max-width:             720px;
  }
}

/* -----------------------------------------------------------------------
 * Profile article
 * ---------------------------------------------------------------------- */
.estmjs-member-profile {
  background-color: var(--estmjs-paper);
  border:           1px solid var(--estmjs-border);
  border-radius:    var(--estmjs-radius);
  padding:          2rem;
}

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

.estmjs-member-profile__back a {
  color:           var(--estmjs-teal);
  text-decoration: none;
  font-weight:     600;
}

.estmjs-member-profile__back a:hover,
.estmjs-member-profile__back a:focus-visible {
  text-decoration: underline;
}

/* Photo + details: flexbox so the photo keeps a fixed width while the
 * details column fills the remaining space, wrapping to a single
 * column on small screens. */
.estmjs-member-profile__grid {
  display:        flex;
  gap:            2rem;
  align-items:    flex-start;
  padding-bottom: 2rem;
  border-bottom:  1px solid var(--estmjs-border);
}

@media ( max-width: 640px ) {
  .estmjs-member-profile__grid {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
  }
}

.estmjs-member-profile__media {
  flex: 0 0 220px;
}

.estmjs-member-photo {
  display:       block;
  width:         220px;
  height:        330px;
  object-fit:    cover;
  border-radius: var(--estmjs-radius);
  border-bottom: 4px solid var(--estmjs-teal);
}

.estmjs-member-photo--placeholder {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background-color: var(--estmjs-navy);
  color:            var(--estmjs-teal-light);
  font-size:        4rem;
}

.estmjs-member-profile__details {
  flex:      1 1 auto;
  min-width: 0;
}

.estmjs-member-profile__name {
  margin: 0 0 0.35rem;
}

.estmjs-member-profile__job-title {
  margin: 0 0 1rem;
}

/* Category pills — deliberate accent chrome, not body text. */
.estmjs-member-profile__categories {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
  list-style: none;
  margin:     0 0 1.25rem;
  padding:    0;
}

@media ( max-width: 640px ) {
  .estmjs-member-profile__categories {
    justify-content: center;
  }
}

.estmjs-member-profile__category-pill {
  border:           1px solid var(--estmjs-teal);
  color:            var(--estmjs-teal);
  background-color: var(--estmjs-teal-light);
  border-radius:    999px;
  padding:          0.25rem 0.75rem;
  font-size:        0.75rem;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.05em;
}

/* Meta list (location / email) */
.estmjs-member-profile__meta {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1.5rem;
  list-style: none;
  margin:     0;
  padding:    0;
}

@media ( max-width: 640px ) {
  .estmjs-member-profile__meta {
    justify-content: center;
  }
}

.estmjs-member-profile__meta-item {
  display:        flex;
  flex-direction: column;
  gap:            0.15rem;
}

/* Small uppercase eyebrow label — UI chrome, kept distinct from body text. */
.estmjs-member-profile__meta-label {
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--estmjs-muted);
}

/* Meta value (location text, email link) inherits the theme's text/link
 * styling — no color/font override. */

/* Intro / excerpt — kept as a distinct callout via the left accent border
 * only; the text itself now inherits theme paragraph styling. */
.estmjs-member-profile__intro {
  border-left: 3px solid var(--estmjs-teal);
  padding:     0.25rem 0 0.25rem 1.25rem;
  margin:      2rem 0;
}

.estmjs-member-profile__intro p:last-child {
  margin-bottom: 0;
}

/* Main biography content — constrains line length for readability;
 * the "entry-content" class (added in the template) picks up the
 * theme's own paragraph/heading typography for this block. */
.estmjs-member-profile__content {
  max-width: 68ch;
}

.estmjs-member-profile__content p {
  margin: 0 0 1.25rem;
}

/* Publications — heading text inherits the theme; the underline beneath
 * it is a deliberate accent, not a text-colour override. */
.estmjs-member-profile__publications {
  margin-top:  2.5rem;
  padding-top: 2rem;
  border-top:  1px solid var(--estmjs-border);
}

.estmjs-member-profile__publications h2 {
  margin:         0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom:  2px solid var(--estmjs-teal);
  display:        inline-block;
}

.estmjs-member-profile__publications ul {
  list-style: none;
  margin:     0;
  padding:    0;
}

.estmjs-member-profile__publications li {
  position:      relative;
  padding:       0.6rem 0 0.6rem 1.25rem;
  border-bottom: 1px solid var(--estmjs-border);
}

.estmjs-member-profile__publications li:last-child {
  border-bottom: none;
}

.estmjs-member-profile__publications li::before {
  content:          '';
  position:         absolute;
  left:             0;
  top:              1.1rem;
  width:            6px;
  height:           6px;
  background-color: var(--estmjs-teal);
}

/* -----------------------------------------------------------------------
 * Sidebar (registered by the plugin as "sidebar-members")
 * Widget titles are intentionally left unstyled here — Astra already
 * applies its own theme-wide ".widget-title" typography and colour.
 * ---------------------------------------------------------------------- */
.estmjs-member-sidebar {
  align-self: start;
}

.estmjs-member-sidebar .widget {
  background-color: var(--estmjs-paper);
  border:           1px solid var(--estmjs-border);
  border-radius:    var(--estmjs-radius);
  padding:          1.5rem;
  margin-bottom:    1.5rem;
}

@media ( max-width: 900px ) {
  .estmjs-member-sidebar {
    border-top:  1px solid var(--estmjs-border);
    padding-top: 2rem;
  }
}

/* -----------------------------------------------------------------------
 * Accessibility / motion preferences
 * ---------------------------------------------------------------------- */
.estmjs-member-single a:focus-visible {
  outline:        2px solid var(--estmjs-teal);
  outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
  .estmjs-member-single * {
    transition: none !important;
  }
}