/* ══════════════════════════════════════════════
   CourageAll Community Forum — styles
   Reuses theme CSS variables (--teal-dark, --navy,
   --gray-*, --radius-*) so it matches the site
   without duplicating the design system.
══════════════════════════════════════════════ */

.ja-forum-hero {
	background: linear-gradient(135deg, #0D2B4B 0%, #1B3D6E 100%);
	color: #fff;
	padding: 40px 0 28px;
}
.ja-forum-hero__top {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.ja-forum-hero h1 {
	font-size: 28px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
}
.ja-forum-hero p { margin: 0; color: rgba(255,255,255,0.8); font-size: 14px; max-width: 520px; }
.ja-forum-ask-btn { white-space: nowrap; }

.ja-forum-search {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 10px; padding: 10px 16px; max-width: 480px;
}
.ja-forum-search i { color: var(--gray-400, #888); }
.ja-forum-search input { flex: 1; border: none; outline: none; font-size: 14px; }
.ja-forum-search button {
	background: var(--teal-dark, #1E9F87); color: #fff; border: none;
	padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}

.ja-forum-page { padding: 32px 0 60px; background: var(--gray-50, #FAFAFA); }
.ja-forum-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: flex-start; }
@media (max-width: 860px) { .ja-forum-layout { grid-template-columns: 1fr; } }

.ja-forum-sidebar { display: flex; flex-direction: column; gap: 20px; }
.ja-forum-filter-group { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 16px; }
.ja-forum-filter-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600,#666); margin: 0 0 10px; }
.ja-forum-filter-link {
	display: flex; justify-content: space-between; padding: 7px 8px; border-radius: 6px;
	font-size: 13.5px; color: var(--gray-700,#333); text-decoration: none;
}
.ja-forum-filter-link span { color: var(--gray-400,#999); font-size: 12px; }
.ja-forum-filter-link:hover { background: var(--gray-100,#f5f5f5); }
.ja-forum-filter-link--active { background: #E8F8F5; color: var(--teal-dark,#1E9F87); font-weight: 700; }

.ja-forum-help-cta { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 18px; text-align: center; }
.ja-forum-help-cta i { font-size: 26px; color: var(--teal-dark,#1E9F87); margin-bottom: 8px; }
.ja-forum-help-cta p { margin: 0 0 10px; font-size: 13.5px; }

.ja-forum-list { display: flex; flex-direction: column; gap: 14px; }
.ja-forum-card {
	background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 18px;
	display: flex; gap: 18px;
}
.ja-forum-card__stats { display: flex; flex-direction: column; gap: 10px; min-width: 64px; text-align: center; }
.ja-forum-card__stat strong { display: block; font-size: 17px; color: var(--gray-700,#333); }
.ja-forum-card__stat span { font-size: 11px; color: var(--gray-400,#999); }
.ja-forum-card__stat--has strong { color: var(--teal-dark,#1E9F87); }
.ja-forum-card__body { flex: 1; min-width: 0; }
.ja-forum-card__body h2 { font-size: 17px; margin: 6px 0 6px; }
.ja-forum-card__body h2 a { color: var(--navy,#0D2B4B); text-decoration: none; }
.ja-forum-card__body h2 a:hover { color: var(--teal-dark,#1E9F87); }
.ja-forum-card__body p { font-size: 13.5px; color: var(--gray-600,#666); margin: 0 0 10px; }
.ja-forum-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-400,#999); }
.ja-forum-card__meta img { border-radius: 50%; }
.ja-forum-card__dot { opacity: .5; }

.ja-forum-badge {
	display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
	padding: 3px 9px; border-radius: 999px; margin-right: 6px;
}
.ja-forum-badge--resolved { background: #F0FDF4; color: #16A34A; }
.ja-forum-badge--cat { background: #EEF4FF; color: #2563EB; }

/* ── Single question ── */
.ja-forum-question { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 28px; margin-bottom: 24px; }
.ja-forum-question__badges { margin-bottom: 12px; }
.ja-forum-question h1 { font-size: 24px; margin: 0 0 16px; color: var(--navy,#0D2B4B); }
.ja-forum-question__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ja-forum-question__meta img { border-radius: 50%; }
.ja-forum-question__meta strong { display: block; font-size: 13.5px; }
.ja-forum-question__meta span { font-size: 12px; color: var(--gray-400,#999); }
.ja-forum-question__content { font-size: 15px; line-height: 1.7; color: var(--gray-700,#333); }

.ja-forum-answers h2 { font-size: 18px; margin: 0 0 16px; }
.ja-forum-answer { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 20px; margin-bottom: 14px; }
.ja-forum-answer--accepted { border-color: #16A34A; background: #F8FFFA; }
.ja-forum-answer--reply { margin-left: 32px; border-left: 3px solid #DDD6FE; }
.ja-forum-answer__reply-tag {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #7C3AED;
	background: #F5F3FF; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.ja-forum-answer__accepted-tag {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
	color: #16A34A; background: #F0FDF4; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.ja-forum-answer__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ja-forum-answer__meta img { border-radius: 50%; }
.ja-forum-answer__meta strong { font-size: 13px; display: block; }
.ja-forum-answer__meta span { font-size: 11.5px; color: var(--gray-400,#999); }
.ja-forum-answer__content { font-size: 14.5px; line-height: 1.65; color: var(--gray-700,#333); margin-bottom: 12px; }
.ja-forum-answer__actions { display: flex; gap: 10px; }
.ja-forum-vote-btn, .ja-forum-accept-btn, .ja-forum-reply-btn {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
	border: 1px solid #ddd; background: #fff; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.ja-forum-vote-btn:hover { border-color: var(--teal-dark,#1E9F87); color: var(--teal-dark,#1E9F87); }
.ja-forum-vote-btn--voted { background: #E8F8F5; border-color: var(--teal-dark,#1E9F87); color: var(--teal-dark,#1E9F87); cursor: default; }
.ja-forum-accept-btn:hover { border-color: #16A34A; color: #16A34A; }
.ja-forum-reply-btn:hover { border-color: #7C3AED; color: #7C3AED; }
.ja-forum-no-answers { color: var(--gray-400,#999); font-size: 14px; padding: 16px 0; }

.ja-forum-answer-form { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 24px; }
.ja-forum-answer-form h3 { margin: 0 0 14px; font-size: 16px; }
.ja-forum-answer-form textarea {
	width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px;
	resize: vertical; margin-bottom: 12px; box-sizing: border-box;
}
.ja-forum-login-prompt { text-align: center; padding: 20px 0; }
.ja-forum-login-prompt i { font-size: 26px; color: var(--gray-400,#999); margin-bottom: 10px; }
.ja-forum-login-prompt p { margin: 0 0 14px; color: var(--gray-600,#666); font-size: 14px; }
.ja-forum-login-prompt span { display: block; margin-top: 12px; font-size: 13px; color: var(--gray-400,#999); }

/* ── Login gate (ask page, logged out) ── */
.ja-forum-login-gate { text-align: center; padding: 60px 20px; background: #fff; border: 1px solid #eee; border-radius: 12px; }
.ja-forum-login-gate i { font-size: 38px; color: var(--teal-dark,#1E9F87); margin-bottom: 16px; }
.ja-forum-login-gate h1 { font-size: 22px; margin: 0 0 10px; }
.ja-forum-login-gate p { color: var(--gray-600,#666); max-width: 420px; margin: 0 auto 22px; font-size: 14.5px; }
.ja-forum-login-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.ja-forum-ask-header { margin-bottom: 24px; }
.ja-forum-ask-header h1 { font-size: 24px; margin: 0 0 6px; }
.ja-forum-ask-header p { color: var(--gray-600,#666); font-size: 14px; margin: 0; }
.ja-forum-ask-form { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 26px; }
.ja-forum-ask-form select, .ja-forum-ask-form input[type="text"], .ja-forum-ask-form textarea {
	width: 100%; box-sizing: border-box;
}