/* mfa-core community-v1.css - [mfa_community_page] on /community/, plus the
   Join/Visit button on a mosque page's Home tab. Built on global-v3 tokens. */

/* Width, gutter and bottom spacing all come from .mfa-shell --page in
   global-v3.css now. This page briefly owned a private copy of all three - a
   720px reading cap with no gutter, then 1100 with one - which is exactly the
   duplication the shared container exists to prevent. What is left here is the
   only thing genuinely local: the vertical rhythm between the masthead and the
   grid. */
.mfa-community {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-6);
}

/* ---------- Masthead ---------- */
.mfa-community-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--mfa-space-5);
  border-bottom: 1px solid var(--mfa-border);
}
.mfa-community-name { margin: 0; }
.mfa-community-address { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mfa-muted); }
.mfa-community-meta { margin: 4px 0 0; font-size: 13.5px; color: var(--mfa-muted); }
.mfa-community-meta a { color: var(--mfa-teal-dark); font-weight: 700; text-decoration: none; }
.mfa-community-meta a:hover { text-decoration: underline; }
.mfa-community-sep { margin: 0 8px; color: var(--mfa-border); }

/* ---------- Gate: log in, or join ---------- */
.mfa-community-gate {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-4);
  align-items: flex-start;
}
.mfa-community-gate-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mfa-ink);
  max-width: 56ch;
}
/* The auth module brings its own card, so it must not sit inside another one. */
.mfa-community-gate .mfa-member-out { width: 100%; }

.mfa-community-msg { font-size: 13.5px; color: var(--mfa-muted); }
.mfa-community-msg.is-error { color: var(--mfa-danger); }
.mfa-community-msg.is-ok { color: var(--mfa-teal-dark); font-weight: 700; }

/* ---------- Joined ---------- */
.mfa-community-body {
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-md);
  padding: var(--mfa-space-6);
  box-shadow: var(--mfa-shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-3);
  align-items: flex-start;
}
.mfa-community-soon {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mfa-ink);
  max-width: 60ch;
}
.mfa-community-actions {
  display: flex;
  gap: var(--mfa-space-3);
  flex-wrap: wrap;
  margin-top: var(--mfa-space-2);
}

/* ---------- The buttons on the mosque page ---------- */
/* The block owns the section rule, NOT the button row inside it. The row used
   to carry it while it was the last thing in the block; the prayer-times CTA
   now trails it, so a divider on the row would fall between the two CTAs and
   leave none above the mosque's own details. */
.mfa-mosque-cta-block {
  margin-bottom: var(--mfa-space-5);
  padding-bottom: var(--mfa-space-5);
  border-bottom: 1px solid var(--mfa-border);
}

/* The last child's own bottom margin would double up against the block's
   padding - .mfa-prayer-cta carries one globally, for the business page where
   there is no block around it. */
.mfa-mosque-cta-block > *:last-child { margin-bottom: 0; }

.mfa-mosque-community-cta {
  margin-bottom: var(--mfa-space-3);
  display: flex;
  gap: var(--mfa-space-3);
  flex-wrap: wrap;
  align-items: center;
}
.mfa-mosque-community-cta .mfa-btn { min-width: 190px; flex: 0 1 auto; }

@media (max-width: 480px) {
  /* ONE ROW, split evenly. These two actions are peers - join the community,
     or pass the mosque on to someone - and stacking them read as a list of
     chores rather than a choice, as well as pushing the mosque's own details
     an extra button further down the phone screen.
     min-width:0 is required: the 190px floor above would otherwise stop the
     flex items shrinking and force the wrap back. align-items:stretch keeps
     both pills the same height when one label wraps to two lines and the
     other does not. */
  .mfa-mosque-community-cta {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--mfa-space-2);
  }
  .mfa-mosque-community-cta .mfa-btn {
    min-width: 0;
    flex: 1 1 0;
    padding-left: var(--mfa-space-3);
    padding-right: var(--mfa-space-3);
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
  }
}

/* ---------- Volunteering to look after a mosque ---------- */
/* Sits BELOW the community body on /community/?pid=. Tinted rather than a
   white card, so it reads as an aside to the community space above it and not
   as a second, competing headline. */
.mfa-volunteer {
  margin-top: var(--mfa-space-5);
  padding: var(--mfa-space-6);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  background: var(--mfa-mint-bg);
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-3);
  align-items: flex-start;
}
.mfa-volunteer-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mfa-ink);
  max-width: 60ch;
}
/* Approved: the one state that hands over a capability, so it gets the solid
   left edge the rest of the site uses for "this is yours". */
.mfa-volunteer--active {
  border-left: 3px solid var(--mfa-teal);
}
.mfa-volunteer--pending {
  border-left: 3px solid var(--mfa-gold);
}
@media (max-width: 480px) {
  .mfa-volunteer .mfa-btn { width: 100%; }
}

/* ---------- The photo uploader ---------- */
/* Rules for [cpt_image_manager] (enaizi-mfa/shortcodes/upload-image.php),
   which carried its own inline styles until volunteers could see it. It
   renders inside [mfa_modal], so it sets no width of its own. */
.mfa-img-manager {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-4);
}
.mfa-img-manager-current img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mfa-radius-md);
  border: 1px solid var(--mfa-border);
}
.mfa-img-manager-hint {
  margin: var(--mfa-space-2) 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mfa-muted);
}
.mfa-img-manager-file {
  display: block;
  width: 100%;
  font-size: 14px;
  padding: var(--mfa-space-3);
  border: 1px dashed var(--mfa-border);
  border-radius: var(--mfa-radius-md);
  background: var(--mfa-white);
}
.mfa-img-manager-file:focus-visible { outline: var(--mfa-focus-ring); }
.mfa-img-manager-submit { width: 100%; margin-top: var(--mfa-space-3); }
.mfa-img-manager-msg {
  padding: var(--mfa-space-3) var(--mfa-space-4);
  border-radius: var(--mfa-radius-md);
  font-size: 14px;
  line-height: 1.5;
}
.mfa-img-manager-msg.is-ok {
  background: var(--mfa-mint-bg);
  color: var(--mfa-green-dark);
  border: 1px solid var(--mfa-teal);
}
.mfa-img-manager-msg.is-error {
  background: var(--mfa-danger-bg);
  color: var(--mfa-danger);
  border: 1px solid var(--mfa-danger);
}

/* ---------- Announcements ---------- */
.mfa-ann {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-4);
}
.mfa-ann-form {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-3);
  padding: var(--mfa-space-5);
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  box-shadow: var(--mfa-shadow-card);
}
.mfa-ann-form .mfa-btn { align-self: flex-start; }
.mfa-ann-empty {
  margin: 0;
  padding: var(--mfa-space-5);
  border: 1px dashed var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mfa-muted);
  max-width: 60ch;
}
.mfa-ann-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-3);
}
/* Teal left edge: this is the mosque speaking, and the marker separates its
   voice from the page's own copy. Decoration, so --mfa-teal is correct here -
   text and links use --mfa-teal-dark. */
.mfa-ann-item {
  padding: var(--mfa-space-5);
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-left: 3px solid var(--mfa-teal);
  border-radius: var(--mfa-radius-lg);
  box-shadow: var(--mfa-shadow-card);
}
.mfa-ann-item-title {
  margin: 0 0 var(--mfa-space-2);
  font-size: 17px;
  line-height: 1.35;
}
.mfa-ann-item-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mfa-ink);
  /* The page is full width like every other, so the middle column is ~890px on
     a desktop - far past a comfortable line. Cap the TEXT rather than the page:
     that is the distinction the shell variants got wrong. */
  max-width: 68ch;
  /* A pasted announcement can carry a long URL with no break opportunity,
     which would otherwise push the card wider than the phone. */
  overflow-wrap: anywhere;
}
.mfa-ann-item-meta {
  margin: var(--mfa-space-3) 0 0;
  font-size: 13px;
  color: var(--mfa-muted);
}
/* A button, not a link - it performs an action. Styled down so removing is
   never the most prominent thing on a card the mosque just published. */
.mfa-ann-remove {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--mfa-danger);
  cursor: pointer;
  text-decoration: underline;
}
.mfa-ann-remove:focus-visible { outline: var(--mfa-focus-ring); }

/* .mfa-form-group now lives in global-v3.css, promoted there from the seven
   page sheets that each had their own copy. This page's scoped duplicate is
   gone; what remains is the one genuinely local rule. */
@media (max-width: 480px) {
  .mfa-ann-form .mfa-btn { width: 100%; }
}

/* ---------- Three-column shell ---------- */
/* Four grid children, not three: the primary actions are their own cell so
   that on a phone they can ride up under the header while the rail sinks to
   the bottom. Stacking the rail whole would put a menu between the header and
   the first announcement. */
.mfa-c-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 260px;
  grid-template-areas:
    "actions main side"
    "rail    main side";
  /* `auto 1fr` IS LOAD-BEARING. Without it both rows are auto, and the middle
     column - which spans both and is by far the tallest thing on the page -
     inflates row one, stranding the rail hundreds of pixels below the actions
     it belongs under. Pinning row one to its content and giving the slack to
     row two keeps them together. */
  grid-template-rows: auto 1fr;
  gap: var(--mfa-space-5);
  align-items: start;
}
.mfa-c-actions { grid-area: actions; display: flex; flex-direction: column; gap: var(--mfa-space-2); }
.mfa-c-rail    { grid-area: rail;    display: flex; flex-direction: column; gap: 2px; }
.mfa-c-main    { grid-area: main;    display: flex; flex-direction: column; gap: var(--mfa-space-4); min-width: 0; }
.mfa-c-side    { grid-area: side;    display: flex; flex-direction: column; gap: var(--mfa-space-4); }

.mfa-c-actions .mfa-label { margin: 0 0 var(--mfa-space-1); padding-left: 10px; }
.mfa-c-btn { width: 100%; text-align: center; }

/* ---------- Rail ---------- */
.mfa-c-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--mfa-radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--mfa-ink);
  text-decoration: none;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
}
a.mfa-c-link:hover { background: var(--mfa-mint-bg); }
.mfa-c-link:focus-visible { outline: var(--mfa-focus-ring); }
.mfa-c-ic { width: 15px; height: 15px; flex: none; color: var(--mfa-teal-dark); }
.mfa-c-link--soon { color: var(--mfa-label); }
/* Rendered, never hidden: a non-member should see what joining gets them,
   the same rule the /member/ gate follows for its locked cards. */
.mfa-c-link--locked { color: #9aa8a4; }
.mfa-c-link--locked .mfa-c-ic { color: #b8c4c1; }
.mfa-c-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mfa-label);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-pill);
  padding: 1px 6px;
}
.mfa-c-rule { height: 1px; background: var(--mfa-border); margin: var(--mfa-space-2) 0; }
/* Quiet, and last. Leaving is a real option, never a competing action. */
.mfa-c-leave { color: var(--mfa-muted); font-size: 13px; cursor: pointer; }
.mfa-c-leave .mfa-c-ic { color: var(--mfa-muted); }
.mfa-c-leave:hover { color: var(--mfa-danger); background: var(--mfa-danger-bg); }
.mfa-c-leave:hover .mfa-c-ic { color: var(--mfa-danger); }
.mfa-c-leave[disabled] { opacity: .6; cursor: default; }

/* ---------- Join panel ---------- */
/* A PLAIN SECTION, NOT A CARD. [mfa_auth_tabs] is already a card - white,
   bordered, 18px radius, its own shadow and its own inset - so wrapping it in
   another gave a card inside a card, and my first attempt at fixing that
   stripped the inner one's horizontal padding, which left the login form
   touching its own border. Wrong lever: the answer is not to un-style the
   component, it is to stop double-wrapping it. The heading and lead sit
   directly on the page and the auth block keeps exactly the styling it was
   built with, the same as it looks on /member/. */
.mfa-c-join {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-3);
  align-items: flex-start;
}
.mfa-c-join h2 { margin: 0; }
.mfa-c-join-lead { margin: 0; font-size: 15px; line-height: 1.6; max-width: 52ch; }
/* Fills the column rather than sitting at its natural 480px cap, which in a
   ~700px column left it stranded against one edge. Its own padding is
   untouched - that is the thing that was missing. */
.mfa-c-join .mfa-member-auth {
  max-width: none;
  width: 100%;
}

/* ---------- Milestone ---------- */
.mfa-c-milestone {
  background: var(--mfa-mint-bg);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  padding: var(--mfa-space-5) var(--mfa-space-6);
}
/* Teal edge once a milestone is passed. Decoration, so --mfa-teal is right;
   nothing sits on top of it. */
.mfa-c-milestone.is-hit { border-left: 3px solid var(--mfa-teal); }
.mfa-c-milestone h3 { margin: 0 0 var(--mfa-space-2); font-size: 16px; color: var(--mfa-green-dark); }
.mfa-c-milestone p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 56ch; }
.mfa-c-bar {
  margin-top: var(--mfa-space-4);
  height: 8px;
  border-radius: var(--mfa-radius-pill);
  background: #e3efec;
  overflow: hidden;
}
.mfa-c-bar span { display: block; height: 100%; background: var(--mfa-teal); border-radius: var(--mfa-radius-pill); }
.mfa-c-bar-meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--mfa-space-2);
  font-size: 12px;
  color: var(--mfa-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Locked / not-built panels ---------- */
.mfa-c-locked,
.mfa-c-ghost {
  border: 1px dashed var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  background: #fcfdfd;
  padding: var(--mfa-space-6);
}
.mfa-c-locked { text-align: center; }
.mfa-c-locked svg { width: 20px; height: 20px; color: #b8c4c1; }
.mfa-c-locked h3 { margin: var(--mfa-space-3) 0 var(--mfa-space-1); font-size: 15px; color: var(--mfa-ink); }
.mfa-c-locked p { margin: 0 auto; max-width: 44ch; font-size: 14px; color: var(--mfa-muted); }
.mfa-c-ghost h3 { margin: 0 0 var(--mfa-space-1); font-size: 14px; color: var(--mfa-label); }
.mfa-c-ghost p { margin: 0; font-size: 13.5px; color: var(--mfa-muted); }

/* ---------- Right rail ---------- */
.mfa-c-card {
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  padding: var(--mfa-space-4) var(--mfa-space-5);
}
.mfa-c-card h3 {
  margin: 0 0 var(--mfa-space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mfa-label);
}
.mfa-c-stat { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.mfa-c-stat b { font-size: 26px; font-weight: 900; color: var(--mfa-green-dark); font-variant-numeric: tabular-nums; }
.mfa-c-stat span { font-size: 13px; color: var(--mfa-muted); }
.mfa-c-badge {
  display: inline-block;
  margin-top: var(--mfa-space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mfa-green-dark);
  background: var(--mfa-mint-bg);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-pill);
  padding: 2px 9px;
}
.mfa-c-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mfa-c-people li { display: flex; align-items: center; gap: 9px; }
.mfa-c-av {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--mfa-radius-pill);
  background: var(--mfa-mint-bg);
  border: 1px solid var(--mfa-border);
  color: var(--mfa-teal-dark);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mfa-c-who { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.mfa-c-when { margin-left: auto; font-size: 11.5px; color: var(--mfa-muted); flex: none; }
.mfa-c-nodata {
  margin: 0;
  border: 1px dashed var(--mfa-border);
  border-radius: var(--mfa-radius-md);
  padding: var(--mfa-space-3);
  background: #fcfdfd;
  font-size: 12.5px;
  color: var(--mfa-muted);
}

/* ---------- One column ---------- */
@media (max-width: 900px) {
  /* Actions first, then content, then the community, then the rail. The two
     rails carry different jobs - one acts, one informs - so they land in
     different places rather than stacking together. */
  .mfa-c-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "actions"
      "main"
      "side"
      "rail";
  }
  .mfa-c-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mfa-c-actions .mfa-label { flex-basis: 100%; padding-left: 0; }
  .mfa-c-actions .mfa-c-btn { flex: 1 1 0; min-width: 0; }
  .mfa-c-rail { margin-top: var(--mfa-space-2); }
}

/* ---------- Discussions ---------- */
.mfa-disc {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-4);
}
.mfa-disc-form {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-3);
  align-items: flex-start;
  padding: var(--mfa-space-5);
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  box-shadow: var(--mfa-shadow-card);
}
.mfa-disc-form .mfa-form-group { width: 100%; }
.mfa-disc-empty {
  margin: 0;
  padding: var(--mfa-space-5);
  border: 1px dashed var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--mfa-muted);
  max-width: 60ch;
}
.mfa-disc-list,
.mfa-disc-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mfa-disc-list {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-4);
}
.mfa-disc-thread {
  background: var(--mfa-white);
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-lg);
  padding: var(--mfa-space-5);
  box-shadow: var(--mfa-shadow-card);
}
.mfa-disc-item + .mfa-disc-item {
  margin-top: var(--mfa-space-4);
  padding-top: var(--mfa-space-4);
  border-top: 1px solid var(--mfa-border);
}
/* A reply is indented and hung off a hairline, so the shape of a conversation
   is readable without reading it. One level only - there is no deeper case. */
.mfa-disc-item--reply {
  margin-left: var(--mfa-space-5);
  padding-left: var(--mfa-space-4);
  border-left: 2px solid var(--mfa-border);
}
.mfa-disc-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mfa-ink);
  max-width: 68ch;
  /* A pasted URL with no break opportunity would otherwise widen the card. */
  overflow-wrap: anywhere;
}
.mfa-disc-meta {
  margin: var(--mfa-space-2) 0 0;
  font-size: 12.5px;
  color: var(--mfa-muted);
}
.mfa-disc-who { font-weight: 700; color: var(--mfa-ink); }
/* Tinted rather than hidden: a removed post keeps its place so the replies
   around it still make sense. */
.mfa-disc-item.is-removed { opacity: 0.75; }
.mfa-disc-removed {
  margin: 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--mfa-muted);
}
.mfa-disc-remove {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--mfa-danger);
  cursor: pointer;
  text-decoration: underline;
}
.mfa-disc-remove:focus-visible { outline: var(--mfa-focus-ring); }

.mfa-disc-reply {
  display: flex;
  flex-direction: column;
  gap: var(--mfa-space-2);
  align-items: flex-start;
  margin-top: var(--mfa-space-4);
  padding-top: var(--mfa-space-4);
  border-top: 1px solid var(--mfa-border);
}
.mfa-disc-reply textarea {
  width: 100%;
  border: 1px solid var(--mfa-border);
  border-radius: var(--mfa-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  color: var(--mfa-ink);
  background: var(--mfa-white);
  resize: vertical;
}
.mfa-disc-reply textarea:focus { outline: 2px solid var(--mfa-teal); outline-offset: 1px; }
.mfa-disc-reply-btn { align-self: flex-start; }
@media (max-width: 480px) {
  .mfa-disc-form .mfa-btn,
  .mfa-disc-reply-btn { width: 100%; }
  .mfa-disc-item--reply { margin-left: var(--mfa-space-3); padding-left: var(--mfa-space-3); }
}