/* This file is a plain, page-scoped stylesheet (not run through the Tailwind
   build) loaded only by members_page.xml. All markup authored directly in
   that template uses Tailwind (tw- prefixed) utility classes instead; the
   rules below only cover what member.js creates or toggles at runtime via
   fixed class names (document.createElement / classList.toggle), which
   can't carry Tailwind classes since there's no HTML tag to put them on. */

/* --navy, --gold, --cream, --ink-muted, --gold-soft and --ease already live
   on :root globally via style.css (loaded site-wide from site_layout.xml) —
   only what's unique to this page is declared here. */
:root{
  --navy-soft:#16295e;
}

/* This page uses a slightly different dark-theme surface/ink palette than
   the rest of the site, so it overrides the global tokens while active. */
html[data-theme="dark"]{
  --page-bg:#0b1330;
  --surface:#101a3d;
  --surface-2:#0e1836;
  --ink:#f5f1e4;
  --muted:#9aa3c2;
  --line:rgba(212,175,55,0.16);
}

/* ===== Scroll reveal. Shared by static blocks in members_page.xml and by
   the card/pagination elements member.js injects, so it stays as a plain
   class here. `.in` is toggled by the IntersectionObserver in member.js
   on both scroll directions, re-triggering the animation either way. ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal, .member-card.reveal-card{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .65s var(--ease, ease), transform .65s var(--ease, ease);
  }
  .reveal.in, .member-card.reveal-card.in{
    opacity:1;
    transform:translateY(0);
  }
  .members-filterbar.reveal{ transition-delay:.08s; }
}

/* ===== "No members match" empty state: member.js toggles `.show`. ===== */
.no-results{ display:none; }
.no-results.show{ display:block; }

/* ===== Member cards and pagination buttons are built by member.js via
   document.createElement with fixed class names. ===== */
.member-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:#fffdf8;
  border:1px solid rgba(13,31,76,0.08);
  border-radius:14px;
  padding:18px 16px;
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:100%;
}
.member-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px -14px rgba(13,31,76,0.22);
  border-color:rgba(212,175,55,0.4);
  color:inherit;
}

.member-num{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--navy);
  color:var(--gold-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Noto Serif', serif;
  font-weight:700;
  font-size:.78rem;
}

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

.member-name{
  font-family:'Noto Serif', serif;
  font-weight:600;
  color:var(--navy);
  font-size:.85rem;
  line-height:1.4;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.member-link-type{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--gold);
}
.member-link-type i{ font-size:.72rem; }

.members-pagination .page-btn{
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(13,31,76,0.12);
  background:#fffdf8;
  color:var(--navy);
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:.85rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  cursor:pointer;
}
.members-pagination .page-btn:hover:not(:disabled):not(.active){
  border-color:var(--gold);
  color:var(--gold);
  transform:translateY(-2px);
}
.members-pagination .page-btn.active{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--gold-soft);
}
.members-pagination .page-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* ===== Dark mode (toggled via html[data-theme="dark"] navbar button).
   Light/base styling for the static template markup is inline Tailwind
   utilities in members_page.xml; only the dark-mode deltas for it live
   here, alongside the full dark styling for the JS-generated elements
   above (which have no HTML tag to carry a dark: utility on). ===== */
html[data-theme="dark"] body{ background:var(--page-bg); }
html[data-theme="dark"] .members-directory{ background:var(--page-bg); }
html[data-theme="dark"] .result-count{ color:var(--muted); }
html[data-theme="dark"] .result-count span{ color:var(--ink); }
html[data-theme="dark"] .members-filterbar{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:0 24px 46px -20px rgba(0,0,0,0.55);
}
html[data-theme="dark"] .filter-search .input-group-text,
html[data-theme="dark"] .filter-search .form-control,
html[data-theme="dark"] .filter-select-wrap .form-select{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--ink);
}
html[data-theme="dark"] .filter-search .form-control::placeholder{ color:var(--muted); }
html[data-theme="dark"] .member-card{
  background:var(--surface);
  border-color:var(--line);
}
html[data-theme="dark"] .member-name{ color:var(--ink); }
html[data-theme="dark"] .members-pagination .page-btn{
  background:var(--surface);
  border-color:var(--line);
  color:var(--ink);
}
html[data-theme="dark"] .members-pagination .page-btn.active{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy);
}

@media (max-width:575.98px){
  .member-name{ font-size:.8rem; }
}