/* ============================================================
   AUDHDSPACE COMMUNITY — distinct visual identity (own accent
   color) layered on top of the shared base.css design tokens,
   so the community section feels like its own space while
   staying typographically/accessibility-consistent with the rest
   of the site.
   ============================================================ */

.community-body {
  --color-accent:       #6B4FA0;
  --color-accent-hover: #54397F;
  --color-logo:         #6B4FA0;
}
[data-theme="dark"].community-body,
.community-body[data-theme="dark"] {
  --color-accent:       #B79CE8;
  --color-accent-hover: #CBB6F0;
  --color-logo:         #B79CE8;
}

/* html carries data-theme, not body — re-scope correctly */
html[data-theme="dark"] .community-body {
  --color-accent:       #B79CE8;
  --color-accent-hover: #CBB6F0;
  --color-logo:         #B79CE8;
}

.community-header { border-block-end-color: var(--color-accent); }

/* ── Timeline feed (article cards) ── */
.timeline-feed { display: flex; flex-direction: column; gap: 1.25rem; }
.timeline-post {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.15s;
}
.timeline-post:hover { border-color: var(--color-accent); }
.timeline-post-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.5rem;
}
.timeline-pillar-tag {
  background: var(--color-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15em 0.65em;
  border-radius: 20px;
}
.timeline-pillar-tag:hover { opacity: 0.85; }
.timeline-post-time {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.timeline-post-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.45;
}
.timeline-post-title a { color: var(--color-text); }
.timeline-post-title a:hover { color: var(--color-accent); }
.timeline-post-tldr {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 0.85rem;
}
.timeline-read-more {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-accent);
}
.timeline-read-more:hover { text-decoration: underline; }

.timeline-comments { margin-block-start: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.timeline-comment {
  background: var(--color-sidebar-bg);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}
.timeline-comment-author { font-weight: 600; font-size: 0.9rem; }
.timeline-comment-body { font-size: 0.95rem; margin-block-start: 0.2em; white-space: pre-line; }

/* ── Discord-style forum discussions (المنتدى) ──────────────── */
.discussion-board {
  display: flex;
  flex-direction: column;
  max-width: var(--max-prose-width);
  margin-inline: auto;
  padding-block-end: 1rem;
}
.discussion-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.25rem;
}
.discussion-board-header p { color: var(--color-text-muted); }
.discussion-new-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: var(--color-accent);
  color: #fff;
  border-radius: 6px;
  padding: 0.6em 1.1em;
  min-height: 48px;
}
.discussion-new-btn:hover { background: var(--color-accent-hover); color: #fff; }

.discussion-list { display: flex; flex-direction: column; gap: 0.9rem; }

.discussion-card {
  display: block;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  color: var(--color-text);
  text-decoration: none;
}
.discussion-card:hover { border-color: var(--color-accent); }
.discussion-card-title { font-weight: 700; font-size: 1.05rem; margin-block-end: 0.3em; }
.discussion-card-snippet {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.discussion-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 0.5em;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.discussion-author-name { font-weight: 700; color: hsl(var(--author-hue) 60% 45%); }
[data-theme="dark"] .discussion-author-name { color: hsl(var(--author-hue) 70% 70%); }

.discussion-thread-op {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid hsl(var(--author-hue) 60% 45%);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-block-end: 1.25rem;
}
[data-theme="dark"] .discussion-thread-op { border-inline-start-color: hsl(var(--author-hue) 70% 70%); }
.discussion-thread-title { font-size: 1.3rem; font-weight: 700; margin-block-end: 0.4em; }
.discussion-thread-body { white-space: pre-line; word-break: break-word; margin-block-start: 0.5em; }

.discussion-replies { display: flex; flex-direction: column; gap: 0.75rem; margin-block-end: 1.25rem; }
.discussion-reply {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid hsl(var(--author-hue) 60% 45%);
  border-radius: 10px;
  padding: 0.8rem 1rem;
}
[data-theme="dark"] .discussion-reply { border-inline-start-color: hsl(var(--author-hue) 70% 70%); }
.discussion-reply-time { color: var(--color-text-muted); font-size: 0.78rem; margin-inline-start: 0.5em; }
.discussion-reply-body { margin-block: 0.4em; white-space: pre-line; word-break: break-word; }
.discussion-reply-actions { display: flex; gap: 0.75rem; }
.discussion-reply-actions button {
  background: none;
  border: none;
  padding: 0.3em 0.6em;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  min-height: 36px;
}
.discussion-reply-actions button:hover { color: var(--color-accent); background: none; }

.discussion-login-prompt { text-align: center; padding-block: 1.5rem; }

@media (max-width: 768px) {
  .discussion-board-header { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .discussion-reply-actions button { min-height: 44px; }
}