/* IGVM Family Hub — deep royal purple + fiery orange/gold on black.
   Mobile-first, big tap targets, simple for every member. */

:root{
  --black:#0a0218;
  --panel:#170636;
  --panel2:#1f0a45;
  --line:#3b1a75;
  --purple:#4a148c;
  --purple-deep:#2a0a54;
  --gold:#ffb300;
  --orange:#ff7b00;
  --text:#f5efff;
  --muted:#c9b8ec;
  --danger:#ff5a5a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.5;
}

/* ---------- header band ---------- */
.band{
  background:linear-gradient(160deg,var(--purple-deep),var(--purple) 60%,#5e1fa8);
  border-bottom:3px solid var(--gold);
  padding:1.2rem 1rem 1rem;text-align:center;
}
.crest{
  font-size:2rem;font-weight:800;letter-spacing:.12em;color:var(--gold);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.church{font-size:1rem;color:#ffe9b0;margin-top:.15rem}
.hubname{font-size:1.35rem;font-weight:700;margin-top:.3rem}
.who{margin-top:.6rem;font-size:.95rem;color:var(--muted)}
.who strong{color:#fff}

/* ---------- layout & cards ---------- */
.wrap{max-width:46rem;margin:0 auto;padding:1rem .8rem 2rem}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:1.1rem 1rem;margin:1rem 0;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.card h2{margin:.1rem 0 .7rem;font-size:1.35rem;color:var(--gold)}
.card h3{margin:1rem 0 .4rem;font-size:1.1rem}
.note-card{border-color:var(--orange);background:var(--panel2)}
.corner{border-color:var(--gold)}
.corner-body{font-size:1.08rem}
.muted{color:var(--muted)}
.hint{display:block;font-size:.9rem;color:var(--muted);margin-top:.25rem}
.flash{
  background:#2e5e1e;border:1px solid #7bc47f;color:#eaffea;
  padding:.8rem 1rem;border-radius:12px;margin:1rem 0;font-weight:600;
}

/* ---------- forms & buttons ---------- */
form.stack{display:flex;flex-direction:column;gap:.8rem;margin:.6rem 0}
label{display:block;font-weight:600}
label.radio,label.check{font-weight:500;display:flex;gap:.55rem;align-items:center;min-height:44px}
input[type=text],input[type=email],input[type=number],input[type=datetime-local],
select,textarea{
  width:100%;margin-top:.3rem;padding:.75rem .8rem;font-size:1.05rem;
  border-radius:10px;border:1px solid var(--line);
  background:#0d0221;color:var(--text);
}
input[type=radio],input[type=checkbox]{width:1.4rem;height:1.4rem;accent-color:var(--orange)}
.btn{
  display:inline-block;min-height:52px;padding:.7rem 1.2rem;
  font-size:1.05rem;font-weight:700;color:#1a0533;
  background:linear-gradient(180deg,var(--gold),var(--orange));
  border:none;border-radius:12px;cursor:pointer;
}
.btn:active{transform:scale(.98)}
.btn.big{width:100%;font-size:1.15rem}
.btn.small{min-height:40px;padding:.4rem .8rem;font-size:.95rem}
.btn.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold)}
.btn.danger{background:linear-gradient(180deg,#ff7b6b,#e33);color:#fff;margin-top:.6rem}
form.inline{display:inline}
details{margin-top:.8rem}
summary{cursor:pointer;font-weight:700;color:var(--gold);min-height:44px;padding:.5rem 0}
.leader-tools{border-top:1px dashed var(--line);margin-top:1rem;padding-top:.4rem}

/* ---------- sign-in name list ---------- */
.names{display:flex;flex-direction:column;gap:.6rem}
.names form{margin:0}
.name-btn{width:100%;text-align:left;background:var(--panel2);color:var(--text);border:1.5px solid var(--line)}
.name-btn .lbl{color:var(--gold);font-size:.9rem;font-weight:600;margin-left:.4rem}

/* ---------- events ---------- */
.event{border-top:1px solid var(--line);padding:1rem 0}
.event:first-of-type{border-top:none}
.event h3{margin:.1rem 0;color:#fff;font-size:1.25rem}
.when{color:var(--gold);font-weight:700;margin:.15rem 0}
.where{margin:.15rem 0}
.rsvp-summary{margin:.6rem 0 .2rem}
.rsvp-list{margin:.2rem 0 .6rem;padding-left:1.2rem}
.rsvp-form{
  display:flex;flex-direction:column;gap:.55rem;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:.8rem;
}
.rsvp-form label{font-weight:600}
.rsvp-form label.radio{font-weight:500}

/* ---------- wall ---------- */
.post{border-top:1px solid var(--line);padding:.9rem 0}
.post:first-of-type{border-top:none}
.post-head{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.badge{
  background:var(--purple);color:#ffe9b0;border:1px solid var(--gold);
  padding:.1rem .55rem;border-radius:999px;font-size:.85rem;font-weight:700;
}
.type-announcement .badge{background:#7a2d00}
.author{font-weight:700}
.time{color:var(--muted);font-size:.9rem}
.post-body{margin:.5rem 0;font-size:1.05rem}
.reactions{display:flex;gap:.6rem;flex-wrap:wrap}
.reactions form{margin:0}
.btn.react{background:var(--panel2);color:var(--text);border:1.5px solid var(--line);min-height:48px}
.btn.react.on{border-color:var(--gold);color:var(--gold);background:#33200a}
.counts{color:var(--muted)}
.post-form{border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:.4rem}

/* ---------- leadership member list ---------- */
.member-admin{list-style:none;padding:0;margin:.4rem 0}
.member-admin li{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.5rem 0;border-top:1px solid var(--line);
}
.member-admin li:first-child{border-top:none}

/* ---------- footer ---------- */
.foot{text-align:center;padding:1.4rem .6rem .4rem;color:var(--muted);font-size:.95rem}
.foot p{margin:.25rem 0}