/* ============================================================================
   About page — Three Pathways + Team & Leadership
   campaigns.healthsites.io  ·  styling-only, pure CSS, no JS
   Add to theme/css/style.css AFTER the base styles (or @import at the end).

   Built entirely on the existing healthsites tokens. The three pathways are
   differentiated with the brand's OWN sanctioned status palette (the amber /
   sky / mint Bootstrap-alert colours already used on campaign status badges) —
   NOT new blue/green/purple. healthsites red stays the global signal and is
   deliberately NOT used as a pathway colour so it remains distinct.

   MARKUP CONTRACT (what Claude Code writes in about.md, md_in_html enabled)
   ------------------------------------------------------------------------
   <div class="pathways" markdown="1">

   <details class="pathway pathway--fund" markdown="1">
   <summary markdown="1">
   ### Pathway 1: Fund a Campaign
   </summary>
   ...markdown content...
   <p class="pathway-actions"><a class="pathway-cta pathway-cta--primary" href="#">Fund Now →</a>
   <a class="pathway-cta pathway-cta--ghost" href="#">How Funding Works</a></p>
   </details>

   <details class="pathway pathway--api" markdown="1"> … </details>
   <details class="pathway pathway--institutional" markdown="1"> … </details>

   </div>

   The icon badge (::before) and open/close chevron (::after) are generated in
   CSS — no extra markup needed. Just put the modifier class on each <details>.
   The eyebrow ("PATHWAY 01 · PHILANTHROPIC") is OPTIONAL: add
   <span class="pathway-eyebrow">Pathway 01 · Philanthropic</span> at the top of
   the <summary> if you want it; the layout works without it.
   ============================================================================ */

:root {
  /* brand — already defined site-wide; repeated so this block is portable */
  --hs-red: #f44a52;
  --hs-red-hover: #e63946;
  --hs-slate: #3c4c57;
  --hs-body: #585858;
  --hs-muted: #666666;
  --hs-hairline: #f1f0f0;
  --hs-soft: #f9f9f9;
  --hs-border: #e0e0e0;

  /* pathway identity = brand status palette (amber / sky / mint) */
  --pw-fund-tint: #fff3cd; --pw-fund-ink: #856404; --pw-fund-edge: #f0d795;
  --pw-api-tint:  #d1ecf1; --pw-api-ink:  #0c5460; --pw-api-edge:  #a9dbe6;
  --pw-inst-tint: #d4edda; --pw-inst-ink: #155724; --pw-inst-edge: #aedcb8;
}

/* ---- pathways group ---------------------------------------------------- */
.pathways { display: flex; flex-direction: column; gap: 20px; margin: 32px 0 8px; }

/* base pathway = collapsible "door" */
.pathway {
  --pw-tint: var(--hs-soft);
  --pw-ink: var(--hs-slate);
  --pw-edge: var(--hs-border);
  background: #fff;
  border: 1px solid var(--hs-hairline);
  border-left: 4px solid var(--pw-ink);   /* the one sanctioned coloured-left-border */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pathway:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13); }
.pathway[open] { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); }

.pathway--fund          { --pw-tint: var(--pw-fund-tint); --pw-ink: var(--pw-fund-ink); --pw-edge: var(--pw-fund-edge); }
.pathway--api           { --pw-tint: var(--pw-api-tint);  --pw-ink: var(--pw-api-ink);  --pw-edge: var(--pw-api-edge); }
.pathway--institutional { --pw-tint: var(--pw-inst-tint); --pw-ink: var(--pw-inst-ink); --pw-edge: var(--pw-inst-edge); }

/* summary = the door header (click/tap target) */
.pathway > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  min-height: 64px;
  background: var(--pw-tint);
}
.pathway > summary::-webkit-details-marker { display: none; }

/* icon badge (generated — FontAwesome 4.7, already loaded site-wide) */
.pathway > summary::before {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: #fff;
  color: var(--pw-ink);
  display: flex; align-items: center; justify-content: center;
  font: normal normal normal 20px/1 FontAwesome;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.pathway--fund          > summary::before { content: "\f004"; } /* fa-heart       (Lucide: heart) */
.pathway--api           > summary::before { content: "\f1e6"; } /* fa-plug        (Lucide: plug) */
.pathway--institutional > summary::before { content: "\f19c"; } /* fa-university  (Lucide: landmark) */

/* open/close chevron (generated) */
.pathway > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--pw-ink);
  border-bottom: 2px solid var(--pw-ink);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.pathway[open] > summary::after { transform: rotate(-135deg); }

/* heading inside summary */
.pathway-eyebrow {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--pw-ink);
  margin-bottom: 2px;
}
.pathway > summary h3,
.pathway-title {
  font-family: 'Raleway', sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.25;
  color: var(--hs-slate);
  margin: 0;
}
.pathway-heading { flex: 1; min-width: 0; }   /* optional wrapper around eyebrow + h3 */

/* body */
.pathway > *:not(summary) { /* default content sits in normal flow */ }
.pathway-body, .pathway > div[markdown] { padding: 24px 28px 28px; }
.pathway p  { font-size: 16px; line-height: 1.8; color: var(--hs-body); margin: 0 0 16px; max-width: 68ch; }
.pathway h4 { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 700; color: var(--hs-slate); margin: 22px 0 8px; }
.pathway ul { margin: 0 0 16px; padding-left: 20px; max-width: 68ch; }
.pathway li { font-size: 16px; line-height: 1.7; color: var(--hs-body); margin-bottom: 6px; }
.pathway a:not(.pathway-cta) { color: var(--pw-ink); font-weight: 600; }

/* API tier chips */
.pathway-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0 28px; }
.pathway-tier {
  font-size: 13px; font-weight: 600; color: var(--pw-ink);
  background: var(--pw-tint); border: 1px solid var(--pw-edge);
  border-radius: 12px; padding: 4px 12px;
}

/* trust note (ODbL / no personal data / MoH validated) */
.pathway-trust {
  margin: 18px 28px 0;
  padding: 12px 16px;
  background: #fff;
  border: 1px dashed var(--pw-edge);
  border-radius: 6px;
  font-size: 13.5px; color: var(--hs-muted);
}
.pathway-trust strong { color: var(--pw-ink); }

/* ---- CTAs -------------------------------------------------------------- */
.pathway-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; padding: 0 28px 4px; }
.pathway-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;            /* >= 44px tap target */
  padding: 13px 28px;
  border-radius: 6px;
  font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 600;
  text-decoration: none; text-align: center;
  transition: all 0.3s ease;
}
/* primary = colour-coded to the pathway (white text on the pathway ink) */
.pathway-cta--primary { background: var(--pw-ink); color: #fff; border: 2px solid var(--pw-ink); }
.pathway-cta--primary:hover { filter: brightness(0.9); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); opacity: 1; }
/* secondary = outlined slate ghost */
.pathway-cta--ghost { background: transparent; color: var(--hs-slate); border: 2px solid var(--hs-border); }
.pathway-cta--ghost:hover { border-color: var(--hs-slate); background: #fff; opacity: 1; }

/* OPTIONAL: uniform healthsites-red primary instead of colour-coded.
   Add class `pathways--red-cta` on the .pathways wrapper to switch. */
.pathways--red-cta .pathway-cta--primary { background: var(--hs-red); border-color: var(--hs-red); }
.pathways--red-cta .pathway-cta--primary:hover { background: var(--hs-red-hover); border-color: var(--hs-red-hover); filter: none; box-shadow: 0 4px 12px rgba(244, 74, 82, 0.30); }

/* ============================================================================
   TEAM & LEADERSHIP
   ============================================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 8px;
}
.team-member {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff;
  border: 1px solid var(--hs-hairline);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 18px;
}
/* monogram avatar — or drop a real <img class="team-avatar"> headshot in */
.team-avatar {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: #fef0f0;
  color: var(--hs-red);
  font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover;   /* applies if the element is an <img> */
}
.team-name      { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 16px; color: var(--hs-slate); margin: 0; }
.team-role      { font-size: 13.5px; font-weight: 600; color: var(--hs-red); margin: 2px 0 4px; }
.team-expertise { font-size: 13.5px; line-height: 1.5; color: var(--hs-muted); margin: 0; }

/* partners */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: 20px 0 8px;
}
.partner-tile {
  background: var(--hs-soft);
  border: 1px solid var(--hs-hairline);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--hs-slate);
  line-height: 1.4;
}
.partner-tile span { display: block; font-weight: 400; color: var(--hs-muted); font-size: 12px; margin-top: 2px; }

/* publications */
.pub-list { list-style: none; padding: 0; margin: 16px 0 0; }
.pub-list li { padding: 10px 0; border-bottom: 1px solid var(--hs-hairline); }
.pub-list a { color: var(--hs-slate); font-weight: 600; text-decoration: none; }
.pub-list a:hover { color: var(--hs-red); opacity: 1; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 968px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pathway > summary { padding: 16px 18px; gap: 12px; min-height: 56px; }
  .pathway > summary::before { width: 38px; height: 38px; font-size: 17px; }
  .pathway > summary h3, .pathway-title { font-size: 19px; }
  .pathway-body, .pathway > div[markdown] { padding: 20px 18px 24px; }
  .pathway-tiers, .pathway-trust, .pathway-actions { padding-left: 18px; padding-right: 18px; }
  .pathway-trust { margin-left: 18px; margin-right: 18px; }
  .team-grid { grid-template-columns: 1fr; }
  .pathway-actions { flex-direction: column; align-items: stretch; }
  .pathway-cta { width: 100%; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pathway, .pathway > summary::after, .pathway-cta { transition: none; }
}