/* ===== COMMUNITY PAGE ===== */
.community-page {
  min-height: 100vh;
  background: var(--gradient-page);
  display: flex;
  flex-direction: column;
}

.community-wrapper {
  flex: 1;
  padding: calc(var(--nav-height) + 20px) 24px 60px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ===== COMMUNITY SUB-NAV ===== */
.community-subnav {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(30,58,138,0.12);
  border-radius: 14px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  flex-wrap: wrap;
}

.community-subnav__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.subnav-tab {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

.subnav-tab:hover {
  background: rgba(30,58,138,0.08);
  color: var(--text-dark);
}

.subnav-tab.active {
  background: var(--green-primary);
  color: var(--white);
  box-shadow: 0 3px 12px rgba(30,58,138,0.3);
}

.community-subnav__search {
  position: relative;
  flex: 1;
  max-width: 340px;
  min-width: 180px;
}

.community-subnav__search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: #8A93A4;
  pointer-events: none;
}

.community-subnav__search input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border: 1.5px solid #E6EAF1;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dark);
  background: var(--white);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.community-subnav__search input::placeholder { color: #8A93A4; }
.community-subnav__search input:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.12);
}

/* ===== MAIN LAYOUT ===== */
.community-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: start;
}

.community-main { min-width: 0; }

/* ===== ARTICLES SECTION ===== */
.section-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--text-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title__count {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  background: rgba(30,58,138,0.1);
  color: var(--green-dark);
  border-radius: 20px;
}

.articles-scroll-wrap {
  position: relative;
  margin-bottom: 36px;
}

.articles-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(30,58,138,0.3) transparent;
}

.articles-scroll::-webkit-scrollbar { height: 4px; }
.articles-scroll::-webkit-scrollbar-track { background: transparent; }
.articles-scroll::-webkit-scrollbar-thumb { background: rgba(30,58,138,0.3); border-radius: 2px; }

.article-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(30,58,138,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-decoration: none;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  border-color: rgba(30,58,138,0.25);
}

.article-card__img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #F0FAEC, #EEF1FA);
}

.article-card__img-placeholder {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.article-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}

.article-card__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-body);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.article-card__arrow {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--green-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

.article-card:hover .article-card__arrow {
  background: var(--green-dark);
  transform: translateX(2px);
}

.article-card__arrow svg {
  width: 14px;
  height: 14px;
  fill: var(--white);
}

/* ===== DISCUSSIONS SECTION ===== */
.discussions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.discussions-filters {
  display: flex;
  gap: 8px;
}

.disc-filter {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--white);
  border: 1.5px solid #E6EAF1;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.25s ease;
}

.disc-filter:hover { border-color: var(--green-primary); color: var(--green-dark); }
.disc-filter.active { background: var(--green-primary); color: var(--white); border-color: var(--green-primary); }

/* Discussion thread cards */
.discussion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.disc-card {
  background: var(--white);
  border-radius: 14px;
  padding: 20px 22px;
  border: 1.5px solid rgba(30,58,138,0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  animation: fadeInUp 0.5s ease-out both;
}

.disc-card:nth-child(1) { animation-delay: 0.05s; }
.disc-card:nth-child(2) { animation-delay: 0.1s; }
.disc-card:nth-child(3) { animation-delay: 0.15s; }

.disc-card:hover {
  border-color: rgba(30,58,138,0.22);
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.disc-card.pinned {
  border-left: 4px solid var(--green-primary);
}

.disc-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.disc-card__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
  line-height: 1.4;
  flex: 1;
  /* Post titles are user-supplied: a long run with no spaces has no break
     opportunity and ran straight out of the card on a phone. Reply text already
     does this (see .reply-item__text below); the discussion title/excerpt were
     missed. `anywhere` (not break-word) also shrinks min-content, so the title
     cannot pin the card wider than its column. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.disc-card__time {
  font-size: 11px;
  color: #8A93A4;
  white-space: nowrap;
  font-weight: 500;
}

.disc-card__excerpt {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* same reason as .disc-card__title: user-supplied body text with no spaces had
     no break opportunity. overflow:hidden clipped it rather than wrapping it. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.disc-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.disc-card__author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-body);
  font-weight: 500;
}

.disc-card__author-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-primary), #15306E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.disc-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.disc-tag {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(30,58,138,0.08);
  color: var(--green-dark);
  border: 1px solid rgba(30,58,138,0.15);
}

/* Vote + Reply bar */
.disc-card__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(30,58,138,0.06);
  /* wrap: the row (votes + flag + delete + a margin-left:auto "View replies")
     is ~12px too wide for a 320px phone and pushed the card off-screen */
  flex-wrap: wrap;
  row-gap: 8px;
}

.vote-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid #E6EAF1;
  border-radius: 8px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.25s ease;
}

.vote-btn svg { width: 14px; height: 14px; fill: currentColor; }
.vote-btn:hover { border-color: var(--green-primary); color: var(--green-primary); }
.vote-btn.active { background: rgba(30,58,138,0.08); color: var(--green-primary); border-color: var(--green-primary); }
.vote-btn.downvote:hover { border-color: #e53935; color: #e53935; }
.vote-btn.downvote.active { background: rgba(229,57,53,0.06); color: #e53935; border-color: #e53935; }

.reply-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: color 0.25s ease;
  padding: 5px 4px;
}

.reply-btn svg { width: 14px; height: 14px; fill: currentColor; }
.reply-btn:hover { color: var(--green-primary); }

.disc-card__replies-count {
  font-size: 11px;
  color: #8A93A4;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.disc-card__replies-count svg { width: 13px; height: 13px; fill: currentColor; }

/* Flag button */
.flag-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  color: #c8d4c8;
  transition: color 0.25s ease;
  display: flex;
  align-items: center;
}

.flag-btn:hover { color: #ffa726; }
.flag-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* Anonymous badge */
.anon-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  background: rgba(160,176,160,0.12);
  color: #8A93A4;
  border-radius: 10px;
  border: 1px solid rgba(160,176,160,0.2);
  letter-spacing: 0.5px;
}

/* ===== SHARE / POST BOX ===== */
.share-box {
  background: var(--white);
  border-radius: 14px;
  padding: 22px 22px 18px;
  border: 1.5px solid rgba(30,58,138,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  margin-bottom: 8px;
}

.share-box__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-box__title svg { width: 18px; height: 18px; fill: var(--green-primary); }

.share-box__top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.share-box__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-primary), #15306E);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.share-box__avatar svg { width: 18px; height: 18px; fill: var(--white); }

.share-box__body { flex: 1; }

.share-box__title-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #E6EAF1;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dark);
  background: #FFFFFF;
  outline: none;
  margin-bottom: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.share-box__title-input:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
  background: var(--white);
}

.share-box__textarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid #E6EAF1;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dark);
  background: #FFFFFF;
  resize: none;
  min-height: 90px;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  line-height: 1.6;
}

.share-box__textarea:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
  background: var(--white);
}

.share-box__textarea::placeholder { color: #8A93A4; }

.share-box__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.share-box__tools {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tool-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: none;
  border: 1.5px solid #E6EAF1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-body);
}

.tool-btn svg { width: 14px; height: 14px; fill: currentColor; }
.tool-btn:hover { border-color: var(--green-primary); color: var(--green-primary); background: rgba(30,58,138,0.05); }

.share-box__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.anon-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  user-select: none;
}

.anon-toggle input { accent-color: var(--green-primary); cursor: pointer; }

.btn-post {
  padding: 9px 28px;
  background: var(--green-primary);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 12px rgba(30,58,138,0.3);
}

.btn-post:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(30,58,138,0.4);
}

/* ===== SIDEBAR ===== */
.community-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.sidebar-card {
  background: var(--white);
  border-radius: 14px;
  padding: 20px;
  border: 1.5px solid rgba(30,58,138,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  animation: fadeInUp 0.6s ease-out both;
}

.sidebar-card:nth-child(1) { animation-delay: 0.1s; }
.sidebar-card:nth-child(2) { animation-delay: 0.2s; }
.sidebar-card:nth-child(3) { animation-delay: 0.3s; }

.sidebar-card__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(30,58,138,0.08);
}

.sidebar-card__title svg { width: 16px; height: 16px; fill: var(--green-primary); }

/* Forum sidebar */
.forum-thread-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f5f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.forum-thread-item:last-child { border-bottom: none; }
.forum-thread-item:hover { padding-left: 6px; }

.forum-thread-item__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 3px;
  line-height: 1.4;
}

.forum-thread-item:hover .forum-thread-item__title { color: var(--green-primary); }

.forum-thread-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #8A93A4;
}

.forum-thread-item__replies {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #8A93A4;
}

.forum-thread-item__replies svg { width: 11px; height: 11px; fill: currentColor; }

/* FAQ sidebar */
.faq-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f5f0;
  cursor: pointer;
}

.faq-item:last-child { border-bottom: none; }

.faq-item__q {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.faq-item__q::before {
  content: 'Q';
  font-size: 10px;
  font-weight: 800;
  color: var(--green-primary);
  background: rgba(30,58,138,0.1);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
  margin-top: 1px;
}

.faq-item__a {
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.5;
  padding-left: 22px;
  display: none;
}

.faq-item.open .faq-item__a { display: block; }

/* Stats card */
.community-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-row__label {
  font-size: 12px;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-row__label svg { width: 14px; height: 14px; fill: var(--green-primary); }

.stat-row__val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}

/* View all link */
.sidebar-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-primary);
  text-decoration: none;
  padding: 8px;
  border-radius: 8px;
  border: 1.5px solid rgba(30,58,138,0.2);
  transition: all 0.25s ease;
}

.sidebar-view-all:hover {
  background: rgba(30,58,138,0.06);
  border-color: var(--green-primary);
}

/* ===== ARTICLE DETAIL OVERLAY ===== */
.article-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(5px);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.article-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.article-modal {
  background: var(--white);
  border-radius: 20px;
  padding: 36px;
  max-width: 680px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  transform: scale(0.93) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  position: relative;
}

.article-modal-overlay.active .article-modal {
  transform: scale(1) translateY(0);
}

.article-modal__close {
  position: absolute;
  top: 16px; right: 18px;
  width: 34px; height: 34px;
  background: #f0f5f0;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.article-modal__close:hover { background: #e0ece0; }
.article-modal__close svg { width: 16px; height: 16px; fill: var(--text-dark); }

.article-modal__category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-primary);
  margin-bottom: 8px;
}

.article-modal__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--text-dark);
  margin-bottom: 12px;
  line-height: 1.25;
}

.article-modal__meta {
  font-size: 12px;
  color: #8A93A4;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.article-modal__body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-body);
}

.article-modal__body p { margin-bottom: 14px; }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-body);
}

.empty-state svg { width: 56px; height: 56px; fill: #E6EAF1; margin-bottom: 14px; }
.empty-state__title { font-weight: 700; font-size: 16px; color: var(--text-dark); margin-bottom: 6px; }
.empty-state__text { font-size: 13px; }

/* ===== MODERATION FLAG TOAST ===== */
.flag-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #1B2230;
  color: var(--white);
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}

.flag-toast.show { transform: translateY(0); opacity: 1; }
.flag-toast svg { width: 18px; height: 18px; fill: var(--green-primary); }

/* ===== NOTIFICATION BELL (number inside) ===== */
.navbar__notif {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.navbar__notif:hover { transform: scale(1.1); }

.navbar__notif > svg {
  width: 26px;
  height: 26px;
  fill: var(--text-dark);
  position: relative;
  z-index: 1;
}

.navbar__notif-badge {
  display: none;
}
.navbar__notif .navbar__notif-badge.show {
  display: flex !important;
  position: absolute;
  top: 0;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  background: #E11D48;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  border-radius: 9px;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
  z-index: 2;
  text-shadow: none;
  transform: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .community-layout {
    grid-template-columns: 1fr;
  }
  .community-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .community-subnav {
    flex-direction: column;
    align-items: stretch;
  }
  .community-subnav__search {
    max-width: 100%;
  }
  .subnav-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
  .article-card { flex: 0 0 160px; }
  .share-box__footer { flex-direction: column; align-items: flex-start; }
  .community-sidebar {
    grid-template-columns: 1fr;
  }
  .reply-item--nested { margin-left: 16px; }
}

/* ===== REPLY SECTION (Threaded Conversations) ===== */
.reply-section {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(30,58,138,0.08);
  animation: replySlideIn 0.35s ease-out;
}

@keyframes replySlideIn {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to   { opacity: 1; max-height: 2000px; transform: translateY(0); }
}

.reply-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.reply-section__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}

.reply-section__title svg {
  width: 14px;
  height: 14px;
  fill: var(--green-primary);
}

.reply-section__count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(30,58,138,0.1);
  color: var(--green-dark);
  border-radius: 12px;
}

.reply-section__collapse-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-body);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.reply-section__collapse-btn:hover {
  background: rgba(30,58,138,0.08);
  color: var(--green-primary);
}

/* Individual reply */
.reply-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: #FFFFFF;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(30,58,138,0.06);
  transition: all 0.25s ease;
  animation: fadeInUp 0.3s ease-out both;
}

.reply-item:hover {
  background: #f0f7f0;
  border-color: rgba(30,58,138,0.15);
}

/* Nested replies — indented */
.reply-item--nested {
  margin-left: 32px;
  background: #fafcfa;
  border-left: 2px solid rgba(30,58,138,0.2);
}

.reply-item--nested .reply-item__avatar {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

/* Profile-styled avatar — light gradient circle, navy ring, navy initial —
   consistent with .bpc-disc__avatar and the profile card. */
.reply-item__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0FAEC, #EEF1FA);
  border: 2px solid rgba(30, 58, 138, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #1E3A8A;
  flex-shrink: 0;
  margin-top: 2px;
}

.reply-item__body {
  flex: 1;
  min-width: 0;
}

.reply-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.reply-item__author {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}

.reply-item__time {
  font-size: 10px;
  color: #8A93A4;
  font-weight: 500;
}

.reply-item__content {
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.6;
  word-break: break-word;
}

.reply-item__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.reply-item__reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #8A93A4;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.reply-item__reply-btn:hover {
  color: var(--green-primary);
  background: rgba(30,58,138,0.08);
}

.reply-item__reply-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.reply-item__delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #ccc;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.reply-item__delete-btn:hover {
  color: #e53e3e;
  background: rgba(229,62,62,0.06);
}

.reply-item__delete-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.reply-item__report-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: #8A93A4;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.reply-item__report-btn:hover {
  color: #e53e3e;
  background: rgba(229,62,62,0.06);
}

.reply-item__report-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Reply composer */
.reply-composer {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 14px;
  background: rgba(30,58,138,0.03);
  border-radius: 10px;
  border: 1.5px dashed rgba(30,58,138,0.18);
  animation: fadeInUp 0.3s ease-out;
}

.reply-composer--nested {
  margin-left: 32px;
  margin-top: 4px;
  margin-bottom: 8px;
}

.reply-composer__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0FAEC, #EEF1FA);
  border: 2px solid rgba(30, 58, 138, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reply-composer__avatar svg {
  width: 14px;
  height: 14px;
  fill: #1E3A8A;
}

.reply-composer__body {
  flex: 1;
  /* A <textarea> carries an intrinsic min-width from its default cols=20 (~172px),
     and a flex item's default `min-width: auto` refuses to shrink below it — so the
     composer stayed 172px wide at every viewport and pushed the whole page 14px off
     a 320px screen once replies were expanded. min-width:0 lets it track the
     column; the textarea is width:100% and follows. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reply-composer__replying-to {
  font-size: 11px;
  color: var(--green-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.reply-composer__input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #E6EAF1;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dark);
  background: var(--white);
  outline: none;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  line-height: 1.5;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.reply-composer__input:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}

.reply-composer__input::placeholder {
  color: #8A93A4;
}

.reply-composer__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.reply-composer__cancel {
  padding: 6px 14px;
  background: none;
  border: 1.5px solid #E6EAF1;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.reply-composer__cancel:hover {
  border-color: #c8d4c8;
  background: #f5f8f5;
}

.reply-composer__submit {
  padding: 6px 18px;
  background: var(--green-primary);
  color: var(--white);
  border: none;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(30,58,138,0.25);
}

.reply-composer__submit:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30,58,138,0.35);
}

.reply-composer__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Toggle replies button on disc card */
.disc-card__toggle-replies {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--green-primary);
  cursor: pointer;
  padding: 5px 4px;
  transition: all 0.2s ease;
  margin-left: auto;
}

.disc-card__toggle-replies:hover {
  color: var(--green-dark);
}

.disc-card__toggle-replies svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

/* .disc-card__toggle-replies.expanded svg {
  transform: rotate(180deg);
} */


/* ============================================================
   BPS Community — React (bpc-*) component styles
   The React Community page uses a `bpc-*` class vocabulary the
   legacy rules above never defined, leaving the composer, feed,
   filters, discussion cards, articles and FAQs completely
   unstyled. These rules supply that missing layer. (The hero and
   tab-nav are inline-styled in Community.jsx.)
   ============================================================ */

.bpc-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  padding: 20px 22px;
}

/* Composer -------------------------------------------------- */
.bpc-composer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.bpc-composer__id { display: flex; align-items: center; gap: 12px; }
.bpc-composer__title { font-size: 14px; font-weight: 800; color: #1b2433; }
.bpc-composer__sub { font-size: 12.5px; color: #64748b; margin-top: 1px; }
.bpc-composer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

/* Anonymous switch ------------------------------------------ */
.bpc-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  user-select: none;
}
.bpc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bpc-switch__track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background .2s ease;
  flex-shrink: 0;
}
.bpc-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.bpc-switch input:checked + .bpc-switch__track { background: #1e3a8a; }
.bpc-switch input:checked + .bpc-switch__track::after { transform: translateX(16px); }

/* Inputs ---------------------------------------------------- */
.bpc-input,
.bpc-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  font-family: inherit;
  font-size: 14px;
  color: #1b2433;
  background: #fff;
  margin-bottom: 10px;
}
.bpc-input:focus,
.bpc-textarea:focus {
  outline: none;
  border-color: #1e3a8a;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .12);
}
.bpc-textarea { resize: vertical; min-height: 84px; }

/* Buttons --------------------------------------------------- */
.bpc-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.bpc-btn:disabled { opacity: .6; cursor: default; }
.bpc-btn--primary { background: linear-gradient(135deg, #1e3a8a, #15306E); color: #fff; }

/* Feed header + filters ------------------------------------- */
.bpc-feed__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bpc-feed__filters { display: flex; gap: 6px; }
.bpc-pill {
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.bpc-pill:hover { border-color: #cbd5e1; }
.bpc-pill.active { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }

/* Discussion cards ------------------------------------------ */
.disc-card { padding: 16px 0; border-bottom: 1px solid #eef2f7; }
.disc-card:last-child { border-bottom: none; }
.bpc-disc { display: flex; gap: 14px; align-items: flex-start; }
.bpc-disc__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e3a8a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}
.bpc-disc__avatar--anon { background: #94a3b8; }
.bpc-disc__main { flex: 1; min-width: 0; }
.bpc-disc__title { font-size: 15px; font-weight: 800; color: #1b2433; margin-bottom: 3px; }
.bpc-disc__excerpt {
  font-size: 13.5px;
  color: #5a6b7d;
  line-height: 1.55;
  margin-bottom: 8px;
  word-break: break-word;
}
.bpc-disc__meta { font-size: 12px; color: #94a3b8; margin-bottom: 8px; }
.bpc-disc__meta b { color: #64748b; }
.bpc-disc__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bpc-iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f4f6fa;
  border: none;
  border-radius: 9px;
  padding: 6px 11px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bpc-iconbtn:hover { background: #e7ecf3; }
.bpc-iconbtn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.bpc-iconbtn.is-active { background: #e7ecf3; color: #1e3a8a; }

.bpc-loadmore {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 0;
  color: #1e3a8a;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.bpc-loadmore:hover { text-decoration: underline; }

/* Articles -------------------------------------------------- */
.bpc-badge {
  display: inline-block;
  background: #e7ecf3;
  color: #1e3a8a;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.bpc-art__title { font-size: 17px; font-weight: 800; color: #1b2433; line-height: 1.3; }
.bpc-art__meta { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #94a3b8; }

/* FAQs ------------------------------------------------------ */
.bpc-faq {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 4px;
  border-bottom: 1px solid #eef2f7;
  cursor: pointer;
}
.bpc-faq:last-child { border-bottom: none; }
.bpc-faq__ic { width: 20px; height: 20px; fill: #1e3a8a; flex-shrink: 0; margin-top: 1px; }
.bpc-faq__q { font-size: 14.5px; font-weight: 700; color: #1b2433; }
.bpc-faq__a { font-size: 13.5px; color: #5a6b7d; line-height: 1.6; margin-top: 8px; }

/* ============================================================
   BPS Community — React redesign (cmx-* vocabulary)
   Wires the Community hub, Articles, FAQs, Search results and
   Crisis Support banner. Reuses the legacy design tokens
   (--green-primary, --text-dark, etc.) for visual consistency.
   ============================================================ */

/* ── 3-column hub layout ─────────────────────────────────── */
.cmx-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
.cmx-col-left { position: sticky; top: calc(var(--nav-height) + 24px); }

@media (max-width: 1100px) {
  .cmx-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .cmx-col-left { display: none; }
}
@media (max-width: 860px) {
  .cmx-layout { grid-template-columns: 1fr; }
  .community-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .community-sidebar { grid-template-columns: 1fr; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.cmx-hero {
  background: linear-gradient(135deg, #F0FAEC 0%, #EEF1FA 100%);
  border: 1px solid rgba(30,58,138,0.1);
  border-radius: 18px;
  padding: 30px 32px;
  margin-bottom: 18px;
}
.cmx-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--green-primary, #1e3a8a);
  margin-bottom: 10px;
}
.cmx-hero__eyebrow svg { width: 16px; height: 16px; fill: currentColor; }
.cmx-hero__title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 34px; font-weight: 800; line-height: 1.15;
  color: var(--text-dark, #1b2433); margin: 0 0 10px;
}
.cmx-hero__title span { color: var(--green-primary, #1e3a8a); }
.cmx-hero__sub { font-size: 14.5px; color: var(--text-body, #5a6b7d); line-height: 1.6; margin: 0 0 18px; max-width: 520px; }
.cmx-hero__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 10px; border: none;
  background: var(--green-primary, #1e3a8a); color: #fff;
  font-family: var(--font-body, inherit); font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 14px rgba(30,58,138,0.3); transition: all 0.25s ease;
}
.cmx-hero__cta:hover { background: var(--green-dark, #15306E); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30,58,138,0.4); }

/* ── Staff role badge ─────────────────────────────────────── */
.cmx-role-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 2px 9px; border-radius: 20px;
  background: var(--green-primary, #1e3a8a); color: #fff;
}
.cmx-role-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #7dd3a8; }

/* ── Avatar ───────────────────────────────────────────────── */
.cmx-avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, #F0FAEC, #EEF1FA);
  border: 2px solid rgba(30,58,138,0.25);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--green-primary, #1e3a8a);
  flex-shrink: 0;
}

/* ── Content-review warning (composer) ────────────────────── */
.cmx-review-warning {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 12px; padding: 14px 16px;
  background: #FEF6E7; border: 1px solid #F6C878; border-radius: 12px;
}
.cmx-review-warning > svg { width: 22px; height: 22px; fill: #E0930B; flex-shrink: 0; margin-top: 1px; }
.cmx-review-warning__t { font-size: 13.5px; font-weight: 700; color: #9A6206; margin-bottom: 3px; }
.cmx-review-warning__d { font-size: 12.5px; color: #93712c; line-height: 1.55; }
.cmx-review-warning__tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: #9A6206; font-weight: 600; align-items: center; }
.cmx-review-warning__tags span { background: rgba(224,147,11,0.15); padding: 2px 8px; border-radius: 10px; }
.cmx-review-warning__close { background: none; border: none; cursor: pointer; padding: 2px; flex-shrink: 0; }
.cmx-review-warning__close svg { width: 16px; height: 16px; fill: #C08A2A; }

/* ── Flag / report menu ───────────────────────────────────── */
.cmx-flagwrap { position: relative; display: inline-flex; }
/* Each .disc-card establishes its own stacking context (the fadeInUp animation
   leaves a persistent transform), so a later sibling card paints over an open
   report dropdown. Lift the card that currently has the menu open above its
   siblings so the dropdown is never clipped/covered. */
.disc-card:has(.cmx-flagmenu) { position: relative; z-index: 50; }
/* .reply-item carries the same `animation: fadeInUp … both`, so it establishes the
   same kind of stacking context — which traps the dropdown's z-index inside the
   reply and lets the later-sibling .reply-composer ("Reply" button) paint over the
   menu. Same fix as the card above, one level down. */
.reply-item:has(.cmx-flagmenu) { position: relative; z-index: 50; }
.cmx-flagmenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  background: #fff; border: 1px solid #E6EAF1; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14); padding: 6px; min-width: 210px;
  display: flex; flex-direction: column;
}

/* The menu anchors to .cmx-flagwrap — a 24px-wide span — so `right: 0` grows a
   210px menu 186px LEFTWARD. Beside a wide desktop card there is room; on a phone
   it ran off the left edge (measured left = -24px at 430), slicing the first
   character off every option ("EPORT AS…", "pam", "arassment or bullying").
   Flipping it to open rightward does not work either: the card-level flag sits at
   x=226, so rightward overflows the RIGHT edge at every phone width. No fixed
   direction is safe from a 24px anchor.
   Instead, drop the wrap's positioning on mobile so the menu anchors to the
   .disc-card, which `:has()` above already makes position:relative and which is
   always fully on-screen. `right: 0` then pins the menu to the card's right edge.
   position:fixed is NOT an option here — per the note above, .disc-card keeps a
   persistent transform from fadeInUp, which would capture a fixed descendant. */
@media (max-width: 760px) {
  .cmx-flagwrap { position: static; }
  .cmx-flagmenu { max-width: calc(100vw - 32px); }
}
.cmx-flagmenu__title { font-size: 11px; font-weight: 700; color: #8A93A4; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px 4px; }
.cmx-flagmenu button {
  text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-body, inherit); font-size: 13px; color: var(--text-dark, #1b2433);
  padding: 8px 10px; border-radius: 8px; transition: background 0.15s ease;
}
.cmx-flagmenu button:hover { background: rgba(30,58,138,0.07); }

/* ── Sidebar: featured articles ───────────────────────────── */
.cmx-feat-article { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f5f0; text-decoration: none; }
.cmx-feat-article:last-of-type { border-bottom: none; }
.cmx-feat-article img, .cmx-feat-article__ph {
  width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: linear-gradient(135deg, #F0FAEC, #EEF1FA);
}
.cmx-feat-article__t { font-size: 12.5px; font-weight: 700; color: var(--text-dark, #1b2433); line-height: 1.35; margin: 4px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cmx-feat-article__m { font-size: 10.5px; color: #8A93A4; }
.cmx-feat-article:hover .cmx-feat-article__t { color: var(--green-primary, #1e3a8a); }

.cmx-cat-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--green-primary, #1e3a8a);
  background: rgba(30,58,138,0.1); padding: 3px 9px; border-radius: 20px; margin-bottom: 6px;
}

/* ── Sidebar: at-a-glance stat tiles ──────────────────────── */
.cmx-glance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmx-glance__tile { border-radius: 12px; padding: 12px 14px; position: relative; }
.cmx-glance__tile svg { width: 18px; height: 18px; opacity: 0.85; }
.cmx-glance__val { font-size: 22px; font-weight: 800; color: var(--text-dark, #1b2433); line-height: 1.1; margin-top: 6px; }
.cmx-glance__lbl { font-size: 11px; color: var(--text-body, #5a6b7d); font-weight: 500; }
.cmx-glance__tile--blue { background: #EEF2FB; } .cmx-glance__tile--blue svg { fill: #3b5bdb; }
.cmx-glance__tile--green { background: #E9F7EF; } .cmx-glance__tile--green svg { fill: #1f9d57; }
.cmx-glance__tile--purple { background: #F1EDFB; } .cmx-glance__tile--purple svg { fill: #7048c4; }
.cmx-glance__tile--amber { background: #FCF3E4; } .cmx-glance__tile--amber svg { fill: #d98a13; }

/* ── Sidebar: professional help card ──────────────────────── */
.cmx-help { text-align: center; background: linear-gradient(160deg, #F0FAEC, #EEF1FA); }
.cmx-help__ic { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cmx-help__ic svg { width: 24px; height: 24px; fill: var(--green-primary, #1e3a8a); }
.cmx-help__t { font-size: 15px; font-weight: 800; color: var(--text-dark, #1b2433); margin-bottom: 6px; }
.cmx-help__d { font-size: 12.5px; color: var(--text-body, #5a6b7d); line-height: 1.55; margin: 0 0 14px; }
.cmx-help__primary, .cmx-help__secondary {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  text-align: center; padding: 10px; border-radius: 9px;
  font-size: 13px; font-weight: 700; text-decoration: none; margin-bottom: 8px; transition: all 0.2s ease;
}
.cmx-help__primary { background: var(--green-dark, #15306E); color: #fff; box-shadow: 0 3px 10px rgba(21,48,110,0.3); }
.cmx-help__primary:hover { transform: translateY(-1px); }
.cmx-help__secondary { background: #fff; color: var(--green-primary, #1e3a8a); border: 1.5px solid rgba(30,58,138,0.25); margin-bottom: 0; }
.cmx-help__secondary:hover { background: rgba(30,58,138,0.05); }

/* ── Shared page hero (Articles / FAQs / Search) ──────────── */
.cmx-breadcrumb { font-size: 12.5px; color: #8A93A4; margin-bottom: 16px; }
.cmx-breadcrumb a { color: var(--green-primary, #1e3a8a); text-decoration: none; font-weight: 600; }
.cmx-breadcrumb span { margin: 0 6px; }

.cmx-page-hero { text-align: center; margin-bottom: 28px; }
.cmx-page-hero h1 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 38px; font-weight: 800; color: var(--green-dark, #15306E); margin: 0 0 10px;
}
.cmx-page-hero > p { font-size: 15px; color: var(--text-body, #5a6b7d); max-width: 560px; margin: 0 auto 22px; line-height: 1.6; }
.cmx-page-hero__search { position: relative; max-width: 540px; margin: 0 auto 18px; }
.cmx-page-hero__search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: #8A93A4; pointer-events: none; }
.cmx-page-hero__search input {
  width: 100%; box-sizing: border-box; padding: 13px 44px; border-radius: 30px;
  border: 1.5px solid #E6EAF1; font-family: var(--font-body, inherit); font-size: 14px;
  color: var(--text-dark, #1b2433); background: #fff; outline: none; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cmx-page-hero__search input:focus { border-color: var(--green-primary, #1e3a8a); box-shadow: 0 0 0 3px rgba(30,58,138,0.12); }
.cmx-search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 22px; color: #8A93A4; cursor: pointer; line-height: 1; }

/* Category chips */
.cmx-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cmx-chip {
  padding: 8px 18px; border-radius: 24px; font-family: var(--font-body, inherit);
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  background: #fff; border: 1.5px solid #E6EAF1; color: var(--text-body, #5a6b7d); transition: all 0.2s ease;
}
.cmx-chip:hover { border-color: var(--green-primary, #1e3a8a); color: var(--green-primary, #1e3a8a); }
.cmx-chip.active { background: var(--green-dark, #15306E); color: #fff; border-color: var(--green-dark, #15306E); }

/* ── Articles: featured banner ────────────────────────────── */
.cmx-featured {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0;
  background: #fff; border-radius: 18px; overflow: hidden; margin-bottom: 32px;
  border: 1px solid rgba(30,58,138,0.1); box-shadow: 0 4px 18px rgba(0,0,0,0.06); cursor: pointer;
}
.cmx-featured__img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
/* Placeholder art: the icon is sized in em, so font-size drives its scale. */
.cmx-featured__img--ph { display: flex; align-items: center; justify-content: center; font-size: 60px; color: #b6c0cf; background: linear-gradient(135deg, #F0FAEC, #EEF1FA); }
.cmx-featured__body { padding: 32px 34px; align-self: center; }
.cmx-featured__body h2 { font-family: var(--font-display, serif); font-size: 26px; font-weight: 800; color: var(--text-dark, #1b2433); line-height: 1.25; margin: 6px 0 12px; }
.cmx-featured__body p { font-size: 14px; color: var(--text-body, #5a6b7d); line-height: 1.6; margin: 0 0 14px; }
.cmx-featured__meta { font-size: 12.5px; color: #8A93A4; margin-bottom: 18px; }
@media (max-width: 720px) { .cmx-featured { grid-template-columns: 1fr; } .cmx-featured__img { min-height: 180px; } }

/* ── Articles: list controls + grid ───────────────────────── */
.cmx-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.cmx-sort { font-size: 12.5px; color: #8A93A4; display: flex; align-items: center; gap: 8px; }
.cmx-sort select { font-family: var(--font-body, inherit); font-size: 13px; padding: 7px 12px; border-radius: 8px; border: 1.5px solid #E6EAF1; background: #fff; color: var(--text-dark, #1b2433); cursor: pointer; }

.cmx-article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-bottom: 40px; }
.cmx-article-card {
  background: #fff; border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(30,58,138,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column;
}
.cmx-article-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.cmx-article-card img, .cmx-article-card__ph { width: 100%; height: 170px; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 42px; color: #b6c0cf; background: linear-gradient(135deg, #F0FAEC, #EEF1FA); }
.cmx-article-card__body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.cmx-article-card__body h3 { font-size: 16px; font-weight: 700; color: var(--text-dark, #1b2433); line-height: 1.35; margin: 4px 0 8px; }
.cmx-article-card__body p { font-size: 13px; color: var(--text-body, #5a6b7d); line-height: 1.55; margin: 0 0 12px; flex: 1; }
.cmx-article-card__meta { font-size: 11.5px; color: #8A93A4; }

/* ── FAQs ─────────────────────────────────────────────────── */
.cmx-faq-section { margin-bottom: 32px; }
.cmx-popular-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .cmx-popular-grid { grid-template-columns: 1fr; } }
.cmx-popular-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: #fff; border: 1px solid rgba(30,58,138,0.1); border-radius: 12px;
  padding: 16px 18px; font-family: var(--font-body, inherit); font-size: 13.5px; font-weight: 600;
  color: var(--text-dark, #1b2433); cursor: pointer; transition: all 0.2s ease;
}
.cmx-popular-card:hover { border-color: var(--green-primary, #1e3a8a); box-shadow: 0 4px 14px rgba(30,58,138,0.1); }
.cmx-popular-card svg { width: 22px; height: 22px; fill: var(--green-primary, #1e3a8a); flex-shrink: 0; }

.cmx-faq-list { display: flex; flex-direction: column; gap: 10px; }
.cmx-faq { background: #fff; border: 1px solid rgba(30,58,138,0.1); border-radius: 12px; overflow: hidden; transition: box-shadow 0.2s ease; }
.cmx-faq.open { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.cmx-faq__q { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: none; cursor: pointer; padding: 16px 18px; font-family: var(--font-body, inherit); }
.cmx-faq__cat { font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--green-primary, #1e3a8a); background: rgba(30,58,138,0.1); padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.cmx-faq__qtext { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--text-dark, #1b2433); }
.cmx-faq__chev { width: 20px; height: 20px; fill: #8A93A4; flex-shrink: 0; transition: transform 0.25s ease; }
.cmx-faq.open .cmx-faq__chev { transform: rotate(180deg); }
.cmx-faq__a { padding: 0 18px 18px 18px; font-size: 13.5px; color: var(--text-body, #5a6b7d); line-height: 1.7; }

/* ── Ask-a-question band ──────────────────────────────────── */
.cmx-ask {
  display: flex; align-items: center; gap: 20px; justify-content: space-between;
  background: linear-gradient(160deg, #F0FAEC, #EEF1FA); border: 1px solid rgba(30,58,138,0.1);
  border-radius: 18px; padding: 30px 34px; margin-top: 8px;
}
.cmx-ask__body h2 { font-family: var(--font-display, serif); font-size: 22px; font-weight: 800; color: var(--green-dark, #15306E); margin: 0 0 8px; }
.cmx-ask__body > p { font-size: 13.5px; color: var(--text-body, #5a6b7d); line-height: 1.6; margin: 0 0 16px; max-width: 520px; }
.cmx-ask__contact { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.cmx-ask__contact a { color: var(--green-primary, #1e3a8a); text-decoration: none; }
.cmx-ask__contact span { color: #c8d4c8; }
.cmx-ask__note { font-size: 12px; color: #8A93A4; margin: 8px 0 0; }
.cmx-ask__ic { flex-shrink: 0; }
.cmx-ask__ic svg { width: 90px; height: 90px; fill: rgba(30,58,138,0.18); }
@media (max-width: 680px) { .cmx-ask__ic { display: none; } }

/* ── Search results ───────────────────────────────────────── */
.cmx-search-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.cmx-search-summary { font-size: 13.5px; color: var(--text-body, #5a6b7d); margin-bottom: 18px; }
.cmx-search-group { margin-bottom: 30px; }
.cmx-search-group__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.cmx-search-group__all { font-size: 12.5px; font-weight: 700; color: var(--green-primary, #1e3a8a); text-decoration: none; white-space: nowrap; }
.cmx-search-results { display: flex; flex-direction: column; gap: 10px; }
.cmx-search-result {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid rgba(30,58,138,0.08); border-radius: 12px;
  padding: 16px 18px; text-decoration: none; transition: all 0.2s ease;
}
.cmx-search-result:hover { border-color: rgba(30,58,138,0.25); box-shadow: 0 4px 14px rgba(0,0,0,0.06); transform: translateY(-1px); }
.cmx-search-result__title { font-size: 14.5px; font-weight: 700; color: var(--text-dark, #1b2433); margin-bottom: 4px; }
.cmx-search-result__snippet { font-size: 12.5px; color: var(--text-body, #5a6b7d); line-height: 1.5; }
.cmx-search-result__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 11.5px; color: #8A93A4; white-space: nowrap; flex-shrink: 0; }
.cmx-mark { background: #FDECC8; color: inherit; padding: 0 2px; border-radius: 3px; }

.cmx-noresults { text-align: center; padding: 40px 20px; }
.cmx-noresults .empty-state__title { font-size: 18px; font-weight: 700; color: var(--text-dark, #1b2433); margin-bottom: 8px; }
.cmx-noresults p { font-size: 13.5px; color: var(--text-body, #5a6b7d); margin-bottom: 18px; }
.cmx-noresults__links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.cmx-search-help {
  display: flex; align-items: center; gap: 14px; margin-top: 20px;
  background: #EEF2FB; border: 1px solid rgba(30,58,138,0.12); border-radius: 12px; padding: 16px 20px;
}
.cmx-search-help svg { width: 24px; height: 24px; fill: var(--green-primary, #1e3a8a); flex-shrink: 0; }
.cmx-search-help b { display: block; font-size: 13.5px; color: var(--text-dark, #1b2433); }
.cmx-search-help span { font-size: 12.5px; color: var(--text-body, #5a6b7d); }
.cmx-search-help a { color: var(--green-primary, #1e3a8a); font-weight: 600; text-decoration: none; }

/* ── Crisis Support banner ────────────────────────────────── */
.cmx-crisis {
  background: linear-gradient(135deg, #8B1E1E 0%, #6d1616 100%); color: #fff;
  border-radius: 18px; padding: 24px 28px; margin-bottom: 20px; box-shadow: 0 6px 24px rgba(139,30,30,0.3);
}
.cmx-crisis__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cmx-crisis__head h2 { font-family: var(--font-display, serif); font-size: 24px; font-weight: 800; margin: 0; }
.cmx-crisis__close { background: rgba(255,255,255,0.15); border: none; border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cmx-crisis__close svg { width: 18px; height: 18px; fill: #fff; }
.cmx-crisis__msg { font-size: 13.5px; opacity: 0.92; margin: 0 0 18px; line-height: 1.55; }
.cmx-crisis__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.cmx-crisis__card { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 16px 18px; }
.cmx-crisis__name { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; line-height: 1.35; }
.cmx-crisis__num { font-size: 26px; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 8px; }
.cmx-crisis__sub { font-size: 11.5px; opacity: 0.85; line-height: 1.4; }

/* ── Trust footer band ────────────────────────────────────── */
.cmx-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  background: #fff; border-radius: 18px; padding: 24px 28px; margin-top: 32px;
  border: 1px solid rgba(30,58,138,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.cmx-trust__item { display: flex; align-items: center; gap: 12px; }
.cmx-trust__ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(30,58,138,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cmx-trust__ic svg { width: 22px; height: 22px; fill: var(--green-primary, #1e3a8a); }
.cmx-trust__t { font-size: 13.5px; font-weight: 700; color: var(--text-dark, #1b2433); }
.cmx-trust__d { font-size: 12px; color: var(--text-body, #5a6b7d); line-height: 1.4; }
@media (max-width: 900px) { .cmx-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .cmx-trust { grid-template-columns: 1fr; } }


/* ============================================================
   BPS Community — spacing refinements to match reference
   Later rules override the earlier cmx-* block above.
   ============================================================ */

/* Wider, more generous hub */
.community-page .community-wrapper { max-width: 1360px; }
.cmx-layout { grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 26px; }
.cmx-col-left { position: static; }

/* Center-column search bar (top of the feed) */
.cmx-main-search { position: relative; margin-bottom: 20px; }
.cmx-main-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: #8A93A4; pointer-events: none; }
.cmx-main-search input {
  width: 100%; box-sizing: border-box; padding: 15px 18px 15px 48px;
  border-radius: 14px; border: 1px solid #E6EAF1; background: #fff;
  font-family: var(--font-body, inherit); font-size: 14px; color: var(--text-dark, #1b2433);
  outline: none; box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cmx-main-search input:focus { border-color: var(--green-primary, #1e3a8a); box-shadow: 0 0 0 3px rgba(30,58,138,0.12); }

/* Hero: two-column with illustration */
.cmx-hero { display: flex; align-items: center; gap: 24px; padding: 34px 38px; margin-bottom: 20px; }
.cmx-hero__content { flex: 1; min-width: 0; }
.cmx-hero__sub { max-width: none; }
.cmx-hero__art { flex-shrink: 0; width: 210px; display: flex; align-items: center; justify-content: center; }
.cmx-hero__art svg { width: 100%; height: auto; }
@media (max-width: 760px) { .cmx-hero { padding: 26px 24px; } .cmx-hero__art { display: none; } }

/* Featured-articles column header */
.cmx-featured-col { padding: 20px; }
.cmx-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid rgba(30,58,138,0.08); }
.cmx-col-head__t { font-family: var(--font-display, 'Playfair Display', serif); font-size: 17px; font-weight: 800; color: var(--text-dark, #1b2433); }
.cmx-col-head__all { font-size: 12px; font-weight: 700; color: var(--green-primary, #1e3a8a); text-decoration: none; white-space: nowrap; }

/* Large vertical featured cards */
.cmx-feat-card { display: block; border-radius: 14px; overflow: hidden; border: 1px solid rgba(30,58,138,0.08); margin-bottom: 16px; text-decoration: none; background: #fff; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.cmx-feat-card:last-of-type { margin-bottom: 0; }
.cmx-feat-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.1); transform: translateY(-2px); }
.cmx-feat-card__img { width: 100%; height: 132px; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 34px; background: linear-gradient(135deg, #F0FAEC, #EEF1FA); }
.cmx-feat-card__ph { color: #b9c6d6; }
.cmx-feat-card__body { padding: 12px 14px 14px; }
.cmx-feat-card__t { font-size: 13.5px; font-weight: 700; color: var(--text-dark, #1b2433); line-height: 1.4; margin: 4px 0 6px; }
.cmx-feat-card:hover .cmx-feat-card__t { color: var(--green-primary, #1e3a8a); }
.cmx-feat-card__m { font-size: 11px; color: #8A93A4; }
.cmx-featured-col .sidebar-view-all { margin-top: 16px; }

/* Keep the left column visible on medium screens (stack it under the feed) */
@media (max-width: 1100px) {
  .cmx-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .cmx-col-left { grid-column: 1 / -1; order: 3; }
  .cmx-featured-col .cmx-feat-card { display: inline-block; width: calc(33.333% - 12px); vertical-align: top; margin-right: 12px; }
}
@media (max-width: 860px) {
  .cmx-featured-col .cmx-feat-card { display: block; width: auto; margin-right: 0; }
}


/* ============================================================
   BPS Community — discussion feed spacing (final override)
   ============================================================ */

/* More breathing room between the header/filters and the feed */
.community-main .discussions-header { margin-top: 28px; margin-bottom: 18px; }

/* Roomier gaps between discussion cards + a little more inner padding */
.community-main .discussion-list { gap: 18px; margin-bottom: 32px; }
.community-main .disc-card { padding: 22px 26px; border-radius: 16px; }

/* Give the action bar under each post more separation from the meta row */
.community-main .disc-card__actions { margin-top: 16px; padding-top: 14px; gap: 16px; }

/* A touch more space around the post title/excerpt block */
.community-main .disc-card__top { margin-bottom: 10px; }
.community-main .disc-card__excerpt { margin-bottom: 14px; }


/* ============================================================
   BPS Community — Crisis Support full-bleed banner overlay
   Overrides the earlier boxed .cmx-crisis rules. Pinned just
   under the fixed navbar, spanning the full viewport width,
   overlaying the top of the community content.
   ============================================================ */

.community-page { position: relative; }

.cmx-crisis-slot {
  position: absolute;
  top: var(--nav-height, 64px);
  left: 0;
  right: 0;
  z-index: 60;
}

/* Full-bleed gradient banner (maroon → purple → navy) */
.cmx-crisis {
  background: linear-gradient(100deg, #6e1622 0%, #6b1f39 27%, #45376f 60%, #24497f 100%);
  color: #fff;
  border-radius: 0;
  margin: 0;
  padding: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.cmx-crisis__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px 40px 30px;
}

.cmx-crisis__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cmx-crisis__head h2 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  color: #fff;
}
.cmx-crisis__close {
  background: #fff;
  border: none;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.cmx-crisis__close:hover { background: #eef1f5; }
.cmx-crisis__close svg { width: 18px; height: 18px; fill: #1b2433; }

.cmx-crisis__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .cmx-crisis__grid { grid-template-columns: 1fr; } }

.cmx-crisis__card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 18px 22px;
}
.cmx-crisis__card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.cmx-crisis__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmx-crisis__icon svg { width: 22px; height: 22px; fill: #fff; }
.cmx-crisis__eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.82;
  margin-bottom: 3px;
}
.cmx-crisis__name { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.cmx-crisis__num { font-size: 27px; font-weight: 800; letter-spacing: 0.4px; margin: 4px 0 10px; }
.cmx-crisis__hours { font-size: 12.5px; opacity: 0.9; margin-bottom: 4px; }
.cmx-crisis__hours b { font-weight: 700; }
.cmx-crisis__note { font-size: 12.5px; opacity: 0.82; line-height: 1.45; }

@media (max-width: 760px) {
  .cmx-crisis__inner { padding: 18px 20px 24px; }
  .cmx-crisis__num { font-size: 23px; }
}


/* ============================================================
   BPS Community — maximize the hub to fill the page width
   ============================================================ */

/* Fill the viewport (with small gutters) instead of a 1360px cap */
.community-page .community-wrapper {
  max-width: 1760px;
  padding-left: 28px;
  padding-right: 28px;
}

/* Widen the columns + gaps to use the extra space */
.cmx-layout {
  grid-template-columns: 300px minmax(0, 1fr) 340px;
  gap: 30px;
}

/* Keep the crisis banner's inner content aligned with the wider hub */
.cmx-crisis__inner { max-width: 1760px; padding-left: 28px; padding-right: 28px; }

/* Let the featured-article images breathe a bit taller in the wider column */
.cmx-feat-card__img { height: 150px; }

@media (max-width: 1200px) {
  .community-page .community-wrapper { max-width: 100%; }
}


/* Reply composer: anonymous toggle on the left, submit on the right */
.reply-composer__actions { justify-content: space-between; }
.reply-composer__anon { font-size: 11.5px; }
.reply-composer__anon input { width: 14px; height: 14px; }

/* In a narrow (indented) reply there is not room for the "Reply anonymously"
   label beside the submit button: the label shrinks, its text wraps to two lines
   and crowds the button. Wrapping drops the button onto its own line instead.
   The label keeps its own line and does not shrink into the button. */
.reply-composer__actions { flex-wrap: wrap; row-gap: 8px; }
/* flex-grow stays 0: with grow:1 the label fills the row and forces the button to
   wrap even where both fit side by side. shrink:0 keeps the label from being
   squeezed into the button — it wraps to the next line instead. */
.reply-composer__anon { flex: 0 0 auto; }
.reply-composer__submit { flex: 0 0 auto; }

/* ============================================================
   MOBILE COLLAPSE — must remain the LAST .cmx-layout rule here
   ============================================================
   .cmx-layout is declared five times in this file (~1626, 1635, 1639, 1950,
   2145). The last unconditional one (~2145: `300px minmax(0,1fr) 340px`) comes
   AFTER `@media (max-width:860px){ .cmx-layout{ grid-template-columns:1fr } }`
   at ~1639. Same specificity, so the later rule wins and the phone collapse
   never applied: the hub laid out 300px + 340px of fixed columns (~640px+gaps)
   on a 390px screen. body{overflow-x:hidden} (common.css:33) then clipped the
   sidebar off-screen instead of revealing the bug.

   Because this cascade is decided by source order, anything re-declaring
   .cmx-layout must go ABOVE this block, or the collapse breaks again. */
@media (max-width: 860px) {
  .cmx-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* stacked under the feed, two-up while there is room */
  .community-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .community-sidebar { grid-template-columns: 1fr; }
}