/*
 * Morningside fixes on top of the original Divi styles (loaded after the page CSS).
 */

/* Tick-box answers (Consent, Constitution, WhatsApp groups, Skills): keep the box in its own column so long
   text wraps neatly beside it instead of underneath, and centre the box on the first line of text.
   Selectors are one step more specific than Divi's ".et_pb_contact p input[type=checkbox]+label". */
.et_pb_contact p .et_pb_contact_field_checkbox input[type=checkbox] + label {
  display: flex;
  align-items: flex-start;
}
.et_pb_contact p .et_pb_contact_field_checkbox input[type=checkbox] + label i {
  flex: 0 0 18px;
  margin-right: 10px;
  margin-top: 0.15em;
}

/* Constitution pop-up (Membership page) – styled like the site's own buttons and dark sections. */
.ms-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px}
.ms-modal[hidden]{display:none}
.ms-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78)}
.ms-modal__dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:880px;height:min(92vh,1100px);background:#1F1F1F;color:#e6e6e6;border:1px solid #3a3a3a;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.ms-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 16px;border-bottom:1px solid #333}
.ms-modal__head h2{margin:0;padding:0;font-family:'Michroma',Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:#fff;letter-spacing:.02em}
.ms-modal__x{background:none;border:0;color:#bbb;font-size:30px;line-height:1;cursor:pointer;padding:0 4px;margin-top:-4px}
.ms-modal__x:hover,.ms-modal__x:focus-visible{color:#fff}
.ms-modal__body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:#2b2b2b;padding:18px;outline:none}
.ms-modal__body:focus-visible{box-shadow:inset 0 0 0 2px #fff}
.ms-modal__pages canvas{display:block;width:100%;height:auto;margin:0 auto 14px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.ms-modal__status{text-align:center;color:#bbb;padding:40px 10px;font-size:14px}
.ms-modal__status a{color:#fff;text-decoration:underline}
.ms-modal__foot{padding:16px 24px 20px;border-top:1px solid #333}
.ms-modal__hint{margin:0 0 12px;padding:0;font-size:13px;color:#bdbdbd}
.ms-modal__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ms-modal__btn{display:inline-block;font-family:'Michroma',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:#000;background:#fff;border:1px solid #fff;border-radius:0;padding:14px 22px;cursor:pointer;text-decoration:none;text-align:center}
.ms-modal__btn:hover{background:#e9e9e9}
.ms-modal__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ms-modal__btn[disabled]{opacity:.35;cursor:not-allowed}
.ms-modal__btn--ghost{background:transparent;color:#fff;border-color:#777}
.ms-modal__btn--ghost:hover{background:rgba(255,255,255,.08)}
html.ms-modal-open,html.ms-modal-open body{overflow:hidden}
@media (max-width:600px){
  .ms-modal{padding:0}
  .ms-modal__dialog{height:100%;max-width:none;border:0}
  .ms-modal__head{padding:16px}
  .ms-modal__head h2{font-size:13px}
  .ms-modal__body{padding:10px}
  .ms-modal__foot{padding:12px 16px 16px}
  .ms-modal__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ms-modal__btn{width:100%;padding:12px 6px;letter-spacing:.06em;font-size:11px;white-space:nowrap}
  .ms-modal__btn[data-accept]{grid-column:1 / -1;grid-row:1}
  .ms-modal__hint{margin-bottom:10px;font-size:12px}
}

/* POPIA: ID / passport numbers appear as dots when the field isn't being edited (site.js marks them). */
.et_pb_contact_form input[data-ms-sensitive]:not(:focus){-webkit-text-security:disc;text-security:disc}

/* ---- "Our story" section (home page): timeline + monthly numbers ---------------------------------------- */
.ms-story{background-color:#171717;padding:40px 0 70px;color:#9e9e9e;font-family:'Open Sans',Arial,sans-serif}
.ms-story__inner{width:80%;max-width:1080px;margin:0 auto}
.ms-story .ms-story__heading{font-family:'Michroma',Helvetica,Arial,Lucida,sans-serif;font-size:48px;line-height:1.2em;color:#fff;padding:0;margin:0 0 14px;font-weight:400}
.ms-story__intro{font-size:16px;line-height:1.8em;color:#bdbdbd;max-width:680px;margin:0 0 46px;padding:0}

.ms-timeline{list-style:none;margin:0 0 64px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0}
.ms-timeline__item{position:relative;padding:34px 24px 0 0;list-style:none}
.ms-timeline__item::before{content:"";position:absolute;left:0;right:0;top:7px;border-top:2px solid #f9fc35}
.ms-timeline__item.is-next::before{border-top:2px dashed #5a5a5a}
.ms-timeline__dot{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#f9fc35;box-sizing:border-box}
.ms-timeline__item.is-now .ms-timeline__dot{box-shadow:0 0 0 6px rgba(249,252,53,.22)}
.ms-timeline__item.is-next .ms-timeline__dot{background:#171717;border:2px solid #9e9e9e}
.ms-timeline__when{font-family:'Michroma',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#f9fc35;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-height:32px}
.ms-timeline__item.is-next .ms-timeline__when{color:#d6d6d6}
.ms-timeline__status{font-family:'Open Sans',Arial,sans-serif;font-size:10px;letter-spacing:.12em;border:1px solid currentColor;border-radius:999px;padding:2px 8px;color:#9e9e9e}
.ms-timeline__item.is-now .ms-timeline__status{color:#f9fc35}
.ms-story .ms-timeline__title{font-family:'Open Sans',Arial,sans-serif;font-size:18px;line-height:1.35em;font-weight:600;color:#fff;margin:0 0 8px;padding:0}
.ms-timeline__body{font-size:14px;line-height:1.7em;color:#9e9e9e;margin:0;padding:0}

.ms-stats{border:1px solid #3E3E3E;padding:36px 32px 28px}
.ms-stats__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;margin-bottom:28px}
.ms-story .ms-stats__heading{font-family:'Michroma',Helvetica,Arial,sans-serif;font-size:24px;line-height:1.3em;color:#fff;margin:0;padding:0;font-weight:400}
.ms-stats__period{font-size:14px;color:#9e9e9e;letter-spacing:.05em}
.ms-stats__grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0}
.ms-stat{padding:4px 24px 8px;border-left:1px solid #3E3E3E}
.ms-stat:first-child,.ms-stat:nth-child(4n+1){border-left:0;padding-left:0}
.ms-stat__n{font-family:'Michroma',Helvetica,Arial,sans-serif;font-size:clamp(26px,2.6vw,36px);line-height:1.2em;color:#f9fc35;white-space:nowrap}
.ms-stat__label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-top:10px}
.ms-stat__sub{font-size:13px;color:#8a8a8a;margin-top:4px}
.ms-stats__note{font-size:12px;line-height:1.6em;color:#7d7d7d;margin:26px 0 0;padding:16px 0 0;border-top:1px solid #2b2b2b}

.ms-story__cta{margin-top:40px;text-align:center}
.ms-story__button{display:inline-block;background:#f9fc35;color:#000!important;font-family:'Michroma',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:16px 24px;text-decoration:none;transition:background .2s}
.ms-story__button:hover,.ms-story__button:focus{background:#fff}

@media (max-width:980px){
  .ms-story .ms-story__heading{font-size:32px}
  .ms-stats__grid{grid-template-columns:1fr 1fr;row-gap:24px}
  .ms-stat:nth-child(even){border-left:1px solid #3E3E3E;padding-left:24px}
  .ms-stat:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:767px){
  .ms-story{padding:30px 0 50px}
  .ms-story .ms-story__heading{font-size:24px}
  .ms-story__intro{font-size:15px;margin-bottom:32px}
  /* Timeline becomes vertical with the line on the left */
  .ms-timeline{display:block;margin-bottom:44px}
  .ms-timeline__item{padding:0 0 28px 34px}
  .ms-timeline__item::before{left:7px;right:auto;top:16px;bottom:0;border-top:0;border-left:2px solid #f9fc35}
  .ms-timeline__item.is-next::before{border-top:0;border-left:2px dashed #5a5a5a}
  .ms-timeline__item:last-child::before{display:none}
  .ms-stats{padding:26px 20px 20px}
  .ms-stat__n{font-size:24px}
  .ms-stat{padding:0 0 0 14px}
  .ms-stat__label{font-size:12px;letter-spacing:.06em}
  .ms-stat__sub{font-size:12px}
}

/* Projects we've tackled */
.ms-projects{margin:0 0 64px}
.ms-story .ms-projects__heading{font-family:'Michroma',Helvetica,Arial,sans-serif;font-size:24px;line-height:1.3em;color:#fff;margin:0 0 24px;padding:0;font-weight:400}
.ms-projects__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;align-items:start}
.ms-project{border:1px solid #3E3E3E;background:#1c1c1c;display:flex;flex-direction:column}
.ms-project__img{aspect-ratio:16/10;overflow:hidden;background:#222}
.ms-project__img img{width:100%;height:100%;object-fit:cover;display:block}
.ms-project__body{padding:22px 24px 24px}
.ms-project__meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9e9e9e;margin-bottom:10px}
.ms-project__status{border:1px solid currentColor;border-radius:999px;padding:2px 8px;font-size:10px}
.ms-project__status.is-done{color:#f9fc35}
.ms-story .ms-project__title{font-family:'Open Sans',Arial,sans-serif;font-size:19px;line-height:1.35em;font-weight:600;color:#fff;margin:0 0 10px;padding:0}
.ms-project__result{color:#fff;font-size:14px;letter-spacing:.04em;margin-bottom:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ms-project__num{font-family:'Michroma',Helvetica,Arial,sans-serif;font-size:30px;line-height:1.1em;color:#f9fc35}
.ms-project__text{font-size:14px;line-height:1.7em;color:#9e9e9e;margin:0;padding:0}
.ms-stats__grid{row-gap:28px}
@media (max-width:767px){
  .ms-projects{margin-bottom:44px}
  .ms-story .ms-projects__heading{font-size:20px}
  .ms-project__body{padding:18px 18px 20px}
}
@media (max-width:767px){ .ms-stat:nth-child(even){padding-left:14px} }

/* Debit order pop-up (Membership page): the form runs in a frame that fills the dialog. */
.ms-modal--debit .ms-modal__dialog{max-width:960px}
.ms-modal__body--frame{padding:0;overflow:hidden;background:#111}
.ms-modal__frame{display:block;width:100%;height:100%;border:0;background:#111}
.ms-debit-status{margin:8px 0 0;padding:10px 12px;font-size:14px;line-height:1.5;color:#fff;background:rgba(255,255,255,.08);border-left:3px solid #f5c400}
.ms-debit-status .mono{font-family:Menlo,Consolas,monospace}
/* The debit order form inside the pop-up: no site header/footer, less padding. */
body.ms-embed{background:#111}
body.ms-embed #page-container{padding-top:0 !important;margin-top:0 !important}
body.ms-embed .ms-do{padding-top:16px !important;padding-bottom:24px !important}
body.ms-embed .ms-do__inner > .ms-do__title{display:none}
@media (max-width:600px){.ms-modal--debit .ms-modal__hint{display:none}.ms-modal--debit .ms-modal__actions{display:flex}}