/* ============================================================
   I-STEP Network Core, front-end styles.
   Uses theme CSS variables when available, with brand fallbacks.
   ============================================================ */
:root {
  --istep-navy: var(--color-primary, #1F3864);
  --istep-teal: var(--color-accent, #00B4D8);
  --istep-ink:  var(--color-text, #15243F);
  --istep-off:  var(--color-bg-alt, #F5F7FA);
  --istep-line: var(--color-border, #e2e8f0);
  --istep-muted: var(--color-text-muted, #6B7280);
  --istep-radius: var(--radius, 8px);
  --istep-radius-lg: var(--radius-lg, 16px);
}

/* honeypot, visually hidden but present */
.istep-hp { position:absolute !important; left:-9999px !important; height:0; overflow:hidden; }

/* conditions block */
.istep-conditions { background: var(--istep-off); border:1px solid var(--istep-line); border-left:4px solid var(--istep-teal); border-radius: var(--istep-radius); padding:1.2rem 1.4rem; margin-bottom:1.8rem; }
.istep-conditions h2 { margin-top:0; color: var(--istep-navy); font-size:1.3rem; }

/* alerts */
.istep-alert { border-radius: var(--istep-radius); padding:1rem 1.2rem; margin:1rem 0; border:1px solid var(--istep-line); background:#fff; }
.istep-alert--ok { background: rgba(26,127,55,.08); border-color:#1a7f37; color:#12551f; }
.istep-alert--err { background: rgba(138,32,32,.06); border-color:#8a2020; color:#7a1c1c; }
.istep-alert--err ul { margin:.4rem 0 0 1.1rem; }

/* form */
.istep-form { max-width: 820px; }
.istep-form fieldset { border:0; padding:0; margin:0 0 1rem; }
.istep-form legend { font-family: var(--font-display, inherit); font-weight:700; color: var(--istep-navy); font-size:1.4rem; margin-bottom:.6rem; }
.istep-form label { display:block; font-weight:600; margin-bottom:.3rem; font-size:.95rem; }
.istep-form input[type=text], .istep-form input[type=email], .istep-form input[type=url], .istep-form select, .istep-form textarea {
  width:100%; padding:.7rem .85rem; border:1px solid var(--istep-line); border-radius: var(--istep-radius); font:inherit; color: var(--istep-ink); background:#fff;
}
.istep-form textarea { min-height:90px; resize:vertical; }
.istep-form input:focus, .istep-form select:focus, .istep-form textarea:focus { outline:2px solid var(--istep-teal); border-color: var(--istep-teal); }
.istep-form .req { color:#c0392b; }
.istep-hint { color: var(--istep-muted); font-size:.9rem; }
.istep-2col { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:620px){ .istep-2col { grid-template-columns:1fr; } }
.istep-counter { display:block; font-size:.8rem; color: var(--istep-muted); margin-top:.2rem; }

/* step indicator + panels */
.istep-steps { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:0; margin:0 0 1.4rem; }
.istep-steps li { font-size:.85rem; font-weight:600; color: var(--istep-muted); padding:.35rem .8rem; border-radius:999px; background: var(--istep-off); }
.istep-steps li.is-active { background: var(--istep-navy); color:#fff; }
.istep-step { display:none; }
.istep-step.is-active { display:block; }
.istep-nav { display:flex; gap:.8rem; margin-top:1.2rem; }

/* checkbox groups + consents */
.istep-checks { border:1px solid var(--istep-line); border-radius: var(--istep-radius); padding:.8rem 1rem; }
.istep-checks legend { font-size:1rem; font-weight:600; color: var(--istep-navy); }
.istep-checks label { display:inline-flex; align-items:center; gap:.4rem; font-weight:400; margin:.25rem 1rem .25rem 0; }
.istep-checks input, .istep-consent input { width:auto; }
.istep-consents { display:flex; flex-direction:column; gap:.7rem; }
.istep-consent { display:flex; gap:.6rem; align-items:flex-start; font-weight:400; background: var(--istep-off); border:1px solid var(--istep-line); border-radius: var(--istep-radius); padding:.7rem .9rem; }
.istep-frow { display:flex; gap:.5rem; margin-bottom:.5rem; align-items:center; }
.istep-frow--project { flex-wrap:wrap; }
.istep-frm { background:#fff; border:1px solid var(--istep-line); border-radius:6px; cursor:pointer; width:34px; }
.istep-repeat-fs { border:1px solid var(--istep-line); border-radius: var(--istep-radius); padding:.8rem 1rem; }

/* directory filters */
.istep-filters { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; margin-bottom:1.2rem; }
.istep-field { display:flex; flex-direction:column; font-size:.85rem; font-weight:600; color: var(--istep-navy); }
.istep-field input, .istep-field select { padding:.55rem .7rem; border:1px solid var(--istep-line); border-radius: var(--istep-radius); font:inherit; margin-top:.25rem; }
.istep-count { color: var(--istep-muted); font-weight:600; margin:.2rem 0 1.4rem; }
.istep-count-n { color: var(--istep-navy); }
.istep-empty { background: var(--istep-off); border:1px dashed var(--istep-line); border-radius: var(--istep-radius); padding:1.2rem; text-align:center; color: var(--istep-muted); }
.member-more { display:inline-block; margin-top:.8rem; font-weight:600; color: var(--istep-teal); }

/* single member extras */
.istep-social { list-style:none; padding:0; margin:.3rem 0 0; }
.istep-social li { padding:.2rem 0; }
.istep-project { border-top:1px solid var(--istep-line); padding-top:1rem; margin-top:1rem; }

/* map popups (self-contained so the map works without the theme sheet) */
.map-pop strong { display:block; color: var(--istep-navy); font-weight:700; }
.map-pop .map-pop-sub { display:block; color: var(--istep-muted); font-size:.85rem; margin-bottom:.3rem; }
.map-pop-list { list-style:none; margin:.2rem 0 0; padding:0; max-height:190px; overflow:auto; }
.map-pop-list li { border-top:1px solid var(--istep-line); padding:.4rem 0; }
.map-pop-view { display:inline-block; margin-top:.3rem; font-weight:600; }
.istep-map-alt { margin:1rem 0 2rem; }
.istep-map-alt summary { cursor:pointer; font-weight:600; color: var(--istep-navy); }
.istep-map-alt ul { margin:.6rem 0 0 1.1rem; }

/* member card fallback (in case theme sheet is absent) */
.member-card .ml-badge { display:grid; place-items:center; width:54px; height:54px; border-radius:10px; background: var(--istep-navy); color:#fff; font-weight:700; }
.member-card:target { outline:3px solid var(--istep-teal); outline-offset:4px; }

/* ============================================================
   1.1.0: dynamic statistics, impact section, metrics, badges
   ============================================================ */
.istep-stats { margin: 0 0 1.5rem; }
.istep-stats .stat-strip { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:1.2rem; text-align:center; }
.istep-stats .stat { background: var(--istep-off); border:1px solid var(--istep-line); border-radius: var(--istep-radius-lg); padding:1.4rem 1rem; }
.istep-stats--homepage .stat { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.istep-stats .stat-num { display:block; font-family: var(--font-display, inherit); font-weight:700; font-size: clamp(1.8rem,4vw,2.6rem); color: var(--istep-teal); line-height:1; }
.istep-stats--homepage .stat-num { color:#4fd6f1; }
.istep-stats .stat-label { display:block; margin-top:.4rem; font-size:.9rem; color: var(--istep-muted); }
.istep-stats--homepage .stat-label { color: rgba(255,255,255,.82); }
.istep-stats-note { font-size:.82rem; color: var(--istep-muted); margin-top:.8rem; }
.istep-stats--homepage .istep-stats-note { color: rgba(255,255,255,.7); text-align:center; }
.istep-stats--empty p { color: var(--istep-muted); }

.istep-impact { margin-bottom:2rem; }
.istep-impact h2 { color: var(--istep-navy); font-family: var(--font-display, inherit); }
.istep-impact .lead { font-size:1.15rem; color: var(--istep-ink); max-width:64ch; }

/* metrics fieldset in the form */
.istep-metrics-fs { border:1px solid var(--istep-line); border-radius: var(--istep-radius); padding:1rem 1.1rem; margin-top:1rem; }
.istep-metrics-fs legend { font-weight:700; color: var(--istep-navy); }

/* member hero badges */
.istep-member-badges { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.istep-member-badges .badge { background: rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); }
.istep-member-badges .badge--accent { background: var(--istep-teal); color:#06283d; border-color:transparent; }

/* organisation at a glance cards */
.istep-glance-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:1rem; margin:1rem 0; }
.istep-glance-card { background: var(--istep-off); border:1px solid var(--istep-line); border-radius: var(--istep-radius-lg); padding:1.1rem; text-align:center; }
.istep-glance-card .n { display:block; font-family: var(--font-display, inherit); font-weight:700; font-size:1.8rem; color: var(--istep-navy); }
.istep-glance-card .l { display:block; font-size:.85rem; color: var(--istep-muted); margin-top:.3rem; }

/* step indicator polish (accessible, not colour-only) */
.istep-steps li.is-done::before { content:'\2713 '; color: var(--istep-teal); font-weight:700; }
.istep-steps li[aria-current="step"], .istep-steps li.is-active { outline:2px solid var(--istep-teal); outline-offset:1px; }

/* selectable cards / pills keep native checkboxes */
.istep-checks label:focus-within { outline:2px solid var(--istep-teal); outline-offset:2px; border-radius:6px; }

/* directory: distinguish group badges from area tags */
.member-card .focus-pills .badge--accent { background: rgba(0,180,216,.16); color: var(--istep-accent-ink, #0a7fa0); }
.member-card { display:flex; flex-direction:column; }
.member-card .member-more { margin-top:auto; }

/* member profile section rhythm */
.single-istep_member .section .cols { gap:3rem; }
@media (max-width: 880px) { .single-istep_member .section .cols { gap:1.5rem; } }

/* ============================================================
   1.1.1: member profile layout (scoped; no inline styles)
   ============================================================ */
.istep-member-hero .istep-hero-row { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.istep-hero-logo { background:#fff; border-radius:12px; padding:10px; display:inline-flex; }
.istep-hero-logo img { height:60px; width:auto; object-fit:contain; }
.istep-hero-badge { width:80px; height:80px; border-radius:12px; font-size:1.8rem; }
.istep-hero-copy { min-width:min(100%,280px); }
.istep-hero-copy h1 { margin:0; }
.istep-hero-acr { opacity:.7; }
.istep-hero-cta { margin:.7rem 0 0; }

.istep-member-body { display:block; }
.istep-sec-title { color: var(--istep-navy); font-family: var(--font-display, inherit); margin:2rem 0 1rem; }
.istep-member-cols { display:grid; grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap:2.5rem; align-items:start; }
/* Two columns, then one, well before any overlap can occur. */
@media (max-width: 900px) { .istep-member-cols { grid-template-columns:1fr; gap:1.5rem; } }
.istep-member-main { min-width:0; }
.istep-member-aside { min-width:0; }
.istep-aside-title { font-size:1.05rem; color: var(--istep-navy); margin:1.2rem 0 .5rem; }
.istep-method-note { background: var(--istep-off); border-left:4px solid var(--istep-teal); border-radius: var(--istep-radius); padding:.8rem 1rem; color: var(--istep-ink); }
.istep-glance-caption { font-size:.85rem; }
.istep-muted { color: var(--istep-muted); }
.istep-linked-projects .istep-project:first-child { border-top:0; padding-top:0; }
.istep-member-cta { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }

/* ============================================================
   1.1.1: application form — branded card, steps, cards, logo
   ============================================================ */
.istep-form { max-width:960px; margin-inline:auto; background:#fff; border:1px solid var(--istep-line); border-radius: var(--istep-radius-lg); box-shadow: var(--shadow, 0 10px 30px rgba(31,56,100,.08)); padding: clamp(1.25rem, 3vw, 2.5rem); }
.istep-form legend { font-size:1.3rem; }
.istep-form fieldset { margin-bottom:1.5rem; }

/* Accessible 4-step indicator: not colour-only, completed + current states. */
.istep-steps { counter-reset: step; gap:.4rem; }
.istep-steps li { display:flex; align-items:center; gap:.4rem; }
.istep-steps li .istep-step-badge { display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:999px; background: var(--istep-line); color: var(--istep-ink); font-size:.8rem; font-weight:700; }
.istep-steps li[aria-current="step"] { background: var(--istep-navy); color:#fff; }
.istep-steps li[aria-current="step"] .istep-step-badge { background:#fff; color: var(--istep-navy); }
.istep-steps li[data-done="1"] .istep-step-badge { background: var(--istep-teal); color:#06283d; }
.istep-steps li[data-done="1"] .istep-step-badge::after { content:"\2713"; }
.istep-steps li[data-done="1"] .istep-step-num { display:none; }

/* Selectable checkbox cards for areas & groups (native checkbox kept, just styled). */
.istep-checks.istep-cardset { border:0; padding:0; display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:.6rem; }
.istep-checks.istep-cardset label { display:flex; align-items:flex-start; gap:.5rem; margin:0; padding:.7rem .8rem; border:1px solid var(--istep-line); border-radius: var(--istep-radius); background:#fff; cursor:pointer; font-weight:500; }
.istep-checks.istep-cardset label:hover { border-color: var(--istep-teal); }
.istep-checks.istep-cardset input:checked + span,
.istep-checks.istep-cardset label:has(input:checked) { color: var(--istep-navy); }
.istep-checks.istep-cardset label:has(input:checked) { border-color: var(--istep-teal); box-shadow: inset 0 0 0 1px var(--istep-teal); background: rgba(0,180,216,.06); }
.istep-checks.istep-cardset label:focus-within { outline:2px solid var(--istep-teal); outline-offset:2px; }

/* Structured repeatable cards with a labelled Remove button. */
.istep-frow { display:grid; gap:.5rem; border:1px solid var(--istep-line); border-radius: var(--istep-radius); padding:.9rem; background: var(--istep-off); margin-bottom:.7rem; }
.istep-frow--project { grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .istep-frow--project { grid-template-columns:1fr; } }
.istep-frow--project textarea { grid-column:1 / -1; }
.istep-frm { justify-self:end; width:auto; background:#fff; border:1px solid var(--istep-line); border-radius:6px; cursor:pointer; padding:.35rem .7rem; font-weight:600; color:#8a2020; }
.istep-frm:hover { border-color:#8a2020; }

/* Branded logo upload: preview, replace, remove. */
.istep-logo-field { border:1px dashed var(--istep-line); border-radius: var(--istep-radius); padding:1rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; background: var(--istep-off); }
.istep-logo-preview { width:72px; height:72px; border-radius:10px; background:#fff; border:1px solid var(--istep-line); display:grid; place-items:center; overflow:hidden; }
.istep-logo-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.istep-logo-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Submit loading / disabled state. */
.istep-form button[disabled], .istep-form .is-loading { opacity:.6; cursor:progress; }
.istep-spinner { display:none; width:1em; height:1em; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; margin-left:.5rem; vertical-align:-2px; animation: istep-spin .7s linear infinite; }
.is-loading .istep-spinner { display:inline-block; }
@keyframes istep-spin { to { transform: rotate(360deg); } }

/* No horizontal overflow on mobile. */
.istep-form, .istep-form * { max-width:100%; }
.istep-form input, .istep-form select, .istep-form textarea { box-sizing:border-box; }

@media (prefers-reduced-motion: reduce) {
  .istep-spinner { animation:none; }
  .istep-step { transition:none; }
}