/* modules/forum/css/forum.css
 *
 * Forum-specific CSS. Loaded via $extra_css from every forum entry-point
 * page (index, category, post, categories, manage/*, etc.). The base rules
 * for .post, .post-aside, .vote-stack, .comment-row, etc. live in
 * /css/styles.css; this file overrides + extends them with the forum's
 * actual visual rules.
 *
 * Why module-local: forum cards/votes/comments aren't reused outside this
 * module. Keeping the layout knobs here means future tuning doesn't risk
 * touching unrelated modules' cards. Selectors below are unscoped because
 * (a) every class here is forum-only and (b) this file only loads on forum
 * pages. Don't add ancestor scopes — `.post-wrap` (single post) and
 * `.forum-main` (index/category) are different containers.
 */

/* ── Form-width override — root cause of "vote far right" bugs ─────────────
 * Global rule `form { width: 300px; ... }` (css/styles.css) is inherited by
 * every <form>, including the vote stack and the comment box. The 28px vote
 * buttons get centered inside a 300px-wide form, sitting ~136px right of
 * where they should be, and the post-aside takes the form's 300px which
 * pushes the post title ~280px right. width: auto restores natural sizing. */
.vote-stack         { width: auto; }
.comment-form       { width: auto; }
.comment-reply-form { width: auto; }
.comments-sort      { width: auto; margin: 0 0 0 auto; padding: 0; background: transparent; border: 0; }

/* ── Post-card visual hierarchy (used in category.php + index.php search) ─
 * Without these classes the markup falls back to default browser h3/p sizes
 * (18.7px h3 with 18.7px top+bottom margin, 16px p with 16px margin) which
 * renders cards loose and flat. Order: title (largest) > author > time > stats. */
.post              { margin-bottom: 12px; padding: 12px; }
.post-card-title   { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.post-card-meta    { margin: 0; font-size: 13px; color: var(--text-secondary); }
.post-card-author  { font-weight: 600; font-size: 14px; color: var(--text-primary); text-decoration: none; }
.post-card-author:hover { text-decoration: underline; }
.post-card-time    { font-size: 12px; color: var(--text-muted); }
.post-card-stats   { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* ── Single post view: tighter spacing, vote/actions hug the left ───────── */
.post-content { padding: 16px; }
.post-header  { gap: 12px; }
.post-aside   { align-items: flex-start; gap: 6px; }
/* Stack Edit/Delete vertically so the aside stays narrow even for post owners. */
.post-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    flex-wrap: nowrap;
}

/* ── Threaded comments: tighter row, vote sits flush against the colored bar */
.comment-row { gap: 8px; padding: 6px 10px 6px 6px; }

/* ── Mobile: show post content first, sidebar after ─────────────────────── */
/* Pre-existing rule collapses .forum-aside to full width below 768px, but the
 * sidebar still rendered before .forum-main — forcing users to scroll past 25
 * categories to see the actual posts. Using flex order flips that. */
@media (max-width: 768px) {
    .forum-main  { order: 1; }
    .forum-aside { order: 2; max-height: none; }
}