/* =========================================================================
   Koinonia Q&A — premium dark theme (2025)
   Inspired by Linear / Vercel / Notion / Discord. On-brand with the black
   field of the 1 GOD Decade Africa mark; brand green as the accent, gold for
   cornerstone content.

   Self-contained and namespaced (.kqa) so it never collides with the host
   theme. No backend markup contract is touched: form id, field names, the
   submit button, and .kqa-form-message are all preserved by the template.
   ========================================================================= */

.kqa {
	/* Surfaces (elevation ramp) */
	--kqa-bg:      #0F1114;
	--kqa-elev:    #16181C;
	--kqa-elev-2:  #1B1E23;
	--kqa-elev-3:  #22262C;
	/* Text */
	--kqa-ink:      #ECEDEF;
	--kqa-ink-soft: #A7ADB5;
	--kqa-muted:    #71777F;
	/* Lines */
	--kqa-line:   rgba(255,255,255,.08);
	--kqa-line-2: rgba(255,255,255,.15);
	/* Brand */
	--kqa-green:    #35C77B;
	--kqa-green-2:  #46D488;
	--kqa-on-green: #05130B;
	--kqa-red:      #F0616A;
	--kqa-gold:     #E4B646;
	--kqa-gold-soft: rgba(228,182,70,.13);
	--kqa-gold-line: rgba(228,182,70,.34);
	/* Effects */
	--kqa-focus:  0 0 0 3px rgba(53,199,123,.28);
	--kqa-shadow: 0 1px 2px rgba(0,0,0,.40), 0 14px 44px -18px rgba(0,0,0,.65);
	--kqa-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
	/* Shape */
	--kqa-radius:    16px;
	--kqa-radius-sm: 12px;
	--kqa-pill:      999px;

	max-width: 820px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 34px) clamp(16px, 4vw, 32px) clamp(26px, 4vw, 38px);
	background: var(--kqa-bg);
	border: 1px solid var(--kqa-line);
	border-radius: 22px;
	box-shadow: var(--kqa-shadow);
	color: var(--kqa-ink) !important;
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.kqa *, .kqa *::before, .kqa *::after { box-sizing: border-box; }

.kqa p, .kqa span, .kqa a, .kqa li, .kqa label,
.kqa button, .kqa input, .kqa textarea, .kqa select {
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.kqa h1, .kqa h2, .kqa h3, .kqa h4,
.kqa .kqa-headline, .kqa .kqa-card-title,
.kqa .kqa-askpanel-title, .kqa .kqa-compose-title, .kqa .kqa-answers-title {
	font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
	color: var(--kqa-ink) !important;
}

.kqa a { color: var(--kqa-green); text-decoration: none; }
.kqa a:hover { color: var(--kqa-green-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Logo + masthead ---- */
.kqa .kqa-logo { display:block; max-width:170px; max-height:70px; width:auto; height:auto; margin:0 auto 14px; }
.kqa .kqa-masthead { text-align:center; padding:4px 0 26px; border-bottom:1px solid var(--kqa-line); margin-bottom:24px; }
.kqa .kqa-eyebrow {
	font-size:12px; letter-spacing:.20em; text-transform:uppercase;
	color:var(--kqa-green); font-weight:600; margin:0 0 10px;
}
.kqa .kqa-headline { font-weight:500; font-size:clamp(28px,5vw,42px); line-height:1.1; letter-spacing:-.01em; margin:0 0 12px; }
.kqa .kqa-subhead { color:var(--kqa-ink-soft); max-width:34em; margin:0 auto 20px; font-size:17px; }

/* ---- Buttons ---- */
.kqa .kqa-btn {
	position:relative;
	display:inline-flex; align-items:center; justify-content:center; gap:9px;
	font-size:15px; font-weight:600; line-height:1;
	padding:13px 22px; border-radius:var(--kqa-pill);
	border:1px solid transparent; cursor:pointer; text-decoration:none;
	transition: transform .12s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.kqa .kqa-btn:active { transform: translateY(1px) scale(.995); }

.kqa .kqa-btn-primary {
	background: var(--kqa-green) !important;
	color: var(--kqa-on-green) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px -10px rgba(53,199,123,.65);
}
.kqa .kqa-btn-primary:hover { background: var(--kqa-green-2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px -10px rgba(53,199,123,.8); }
.kqa .kqa-btn-primary:disabled { opacity:.8; cursor:progress; }

.kqa .kqa-btn-ghost {
	background: var(--kqa-elev-2) !important;
	color: var(--kqa-ink) !important;
	border-color: var(--kqa-line-2);
	padding:11px 18px; font-size:14px;
}
.kqa .kqa-btn-ghost:hover { background: var(--kqa-elev-3) !important; border-color: var(--kqa-line-2); text-decoration:none; }

/* Premium submit: trailing arrow + loading spinner (CSS-only, no JS change) */
.kqa .kqa-submit::after {
	content:""; width:16px; height:16px; background: currentColor; opacity:.9;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center/contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>') center/contain no-repeat;
	transition: transform .18s ease;
}
.kqa .kqa-submit:hover::after { transform: translateX(3px); }
.kqa .kqa-btn-primary:disabled::after { display:none; }
.kqa .kqa-btn-primary:disabled::before {
	content:""; width:15px; height:15px; border-radius:50%;
	border:2px solid rgba(5,19,11,.35); border-top-color: var(--kqa-on-green);
	animation: kqa-spin .7s linear infinite;
}
@keyframes kqa-spin { to { transform: rotate(360deg); } }

/* ---- Category filter pills ---- */
.kqa .kqa-topicbar { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:22px; scrollbar-width:thin; }
.kqa .kqa-topictab {
	--pill: var(--kqa-green);
	flex:0 0 auto; padding:8px 15px; border-radius:var(--kqa-pill);
	font-size:14px; font-weight:500; white-space:nowrap; text-decoration:none;
	color:var(--kqa-ink-soft); background:var(--kqa-elev-2); border:1px solid var(--kqa-line);
	transition: color .16s ease, background .16s ease, border-color .16s ease, transform .12s ease;
}
.kqa .kqa-topictab:hover { color:var(--kqa-ink); background:var(--kqa-elev-3); border-color:var(--kqa-line-2); text-decoration:none; }
.kqa .kqa-topictab.is-active {
	color: color-mix(in srgb, var(--pill) 82%, #fff);
	background: color-mix(in srgb, var(--pill) 20%, transparent);
	border-color: color-mix(in srgb, var(--pill) 55%, transparent);
}

/* ---- Feed grid + cards ---- */
.kqa .kqa-grid { display:flex; flex-direction:column; gap:14px; }
.kqa .kqa-card {
	position:relative; background:var(--kqa-elev); border:1px solid var(--kqa-line);
	border-radius:var(--kqa-radius); padding:22px 24px; box-shadow:var(--kqa-shadow-sm);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.kqa .kqa-card:hover {
	border-color: color-mix(in srgb, var(--kqa-green) 40%, var(--kqa-line-2));
	background: var(--kqa-elev-2);
	box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -22px rgba(53,199,123,.45);
	transform: translateY(-2px);
}
.kqa .kqa-card.is-featured { border-color: var(--kqa-gold-line); box-shadow: inset 0 1px 0 var(--kqa-gold-soft), var(--kqa-shadow-sm); }
.kqa .kqa-card-topics { margin-bottom:10px; }
.kqa .kqa-card-title { font-weight:500; font-size:21px; line-height:1.28; margin:0 0 8px; }
.kqa .kqa-card-title a { color:var(--kqa-ink) !important; }
.kqa .kqa-card-title a:hover { color:var(--kqa-green-2) !important; text-decoration:none; }
.kqa .kqa-card-excerpt { color:var(--kqa-ink-soft); margin:0 0 14px; font-size:15px; }
.kqa .kqa-card-meta { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--kqa-muted); }
.kqa .kqa-asker { font-weight:600; color:var(--kqa-ink-soft); }
.kqa .kqa-dot { color:var(--kqa-line-2); }

/* ---- Topic pills ---- */
.kqa .kqa-pill {
	--pill: var(--kqa-muted);
	display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.01em;
	padding:4px 11px; border-radius:var(--kqa-pill); text-decoration:none;
	color: color-mix(in srgb, var(--pill) 78%, #fff);
	background: color-mix(in srgb, var(--pill) 20%, transparent);
	border: 1px solid color-mix(in srgb, var(--pill) 42%, transparent);
}
.kqa .kqa-pill:hover { text-decoration:none; background: color-mix(in srgb, var(--pill) 30%, transparent); }

/* ---- Cornerstone seal ---- */
.kqa .kqa-seal { position:absolute; top:16px; right:18px; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--kqa-gold); }
.kqa .kqa-seal .kqa-sun { width:20px; height:14px; }

/* ---- Sunrise mark ---- */
.kqa .kqa-sun { width:22px; height:15px; display:inline-block; overflow:visible; }
.kqa .kqa-sun .kqa-sun-dome, .kqa .kqa-sun .kqa-sun-horizon, .kqa .kqa-sun .kqa-sun-rays { stroke: var(--kqa-muted); fill:none; }
.kqa .kqa-seal .kqa-sun *, .kqa .kqa-answer-badge .kqa-sun *, .kqa .kqa-empty .kqa-sun * { stroke: var(--kqa-gold); }

/* =========================================================================
   THE ASK FORM (premium card)
   ========================================================================= */
.kqa .kqa-askpanel {
	background: var(--kqa-elev);
	border: 1px solid var(--kqa-line);
	border-radius: 18px;
	padding: clamp(20px, 3vw, 28px);
	margin-bottom: 24px;
	box-shadow: var(--kqa-shadow-sm);
}
.kqa .kqa-askpanel.is-standalone { margin-top:8px; }
.kqa .kqa-askpanel-title, .kqa .kqa-compose-title { font-weight:500; font-size:22px; margin:0 0 6px; }
.kqa .kqa-askpanel-title + .kqa-form { margin-top:18px; }

.kqa .kqa-field { margin-bottom:20px; }
.kqa .kqa-label {
	display:flex; align-items:center; gap:8px;
	font-size:14.5px; font-weight:500; color:var(--kqa-ink) !important; margin-bottom:8px;
}
.kqa .kqa-optional {
	font-weight:500; font-size:11px; letter-spacing:.03em; text-transform:uppercase;
	color:var(--kqa-muted); background:var(--kqa-elev-3);
	border:1px solid var(--kqa-line); border-radius:var(--kqa-pill); padding:2px 8px;
}
.kqa .kqa-help { font-size:13px; color:var(--kqa-muted); margin:7px 0 0; }

/* Inputs / textarea / select — both new classes and legacy .kqa-field tags */
.kqa .kqa-input,
.kqa .kqa-textarea,
.kqa .kqa-select,
.kqa .kqa-field input[type="text"],
.kqa .kqa-field textarea,
.kqa .kqa-field select {
	width:100%; font-size:15px; color:var(--kqa-ink) !important;
	background: var(--kqa-elev-2) !important;
	border: 1px solid var(--kqa-line-2) !important;
	border-radius: var(--kqa-radius-sm);
	padding: 13px 15px;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
	-webkit-appearance:none; appearance:none;
}
.kqa .kqa-textarea, .kqa .kqa-field textarea { resize:vertical; min-height:112px; line-height:1.55; }
.kqa .kqa-input::placeholder, .kqa .kqa-textarea::placeholder,
.kqa .kqa-field input::placeholder, .kqa .kqa-field textarea::placeholder { color:var(--kqa-muted); opacity:1; }

.kqa .kqa-input:hover, .kqa .kqa-textarea:hover, .kqa .kqa-select:hover,
.kqa .kqa-field input:hover, .kqa .kqa-field textarea:hover, .kqa .kqa-field select:hover { border-color: rgba(255,255,255,.22) !important; }

.kqa .kqa-input:focus, .kqa .kqa-textarea:focus, .kqa .kqa-select:focus,
.kqa .kqa-field input:focus, .kqa .kqa-field textarea:focus, .kqa .kqa-field select:focus {
	outline:none;
	background: var(--kqa-elev-3) !important;
	border-color: var(--kqa-green) !important;
	box-shadow: var(--kqa-focus);
}

/* Elegant dropdown with custom caret */
.kqa .kqa-select-wrap { position:relative; }
.kqa .kqa-select { padding-right:42px; cursor:pointer; }
.kqa .kqa-select-caret {
	position:absolute; right:15px; top:50%; transform:translateY(-50%);
	width:16px; height:16px; pointer-events:none;
	stroke: var(--kqa-ink-soft); transition: stroke .16s ease;
}
.kqa .kqa-select:focus + .kqa-select-caret { stroke: var(--kqa-green); }
.kqa .kqa-select option { background: var(--kqa-elev-2); color: var(--kqa-ink); }

/* Validation — native, no JS needed */
.kqa .kqa-input:user-invalid, .kqa .kqa-textarea:user-invalid,
.kqa .kqa-field input:user-invalid, .kqa .kqa-field textarea:user-invalid {
	border-color: var(--kqa-red) !important;
	box-shadow: 0 0 0 3px rgba(240,97,106,.18);
}

.kqa .kqa-form-foot { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.kqa .kqa-note { font-size:13px; color:var(--kqa-muted); margin:0; }

/* Messages — success / error banners */
.kqa .kqa-form-message { margin-top:16px; font-size:14.5px; line-height:1.5; }
.kqa .kqa-form-message:empty { display:none; }
.kqa .kqa-form-message.is-success, .kqa .kqa-form-message.is-error {
	display:flex; align-items:flex-start; gap:10px;
	padding:12px 15px; border-radius:var(--kqa-radius-sm); border:1px solid transparent;
}
.kqa .kqa-form-message.is-success::before, .kqa .kqa-form-message.is-error::before {
	content:""; flex:0 0 auto; width:18px; height:18px; margin-top:1px; background: currentColor;
}
.kqa .kqa-form-message.is-success {
	color:#8BE3B4; background: rgba(53,199,123,.10); border-color: rgba(53,199,123,.34);
}
.kqa .kqa-form-message.is-success::before {
	-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/contain no-repeat;
	mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') center/contain no-repeat;
}
.kqa .kqa-form-message.is-error {
	color:#F3969B; background: rgba(240,97,106,.10); border-color: rgba(240,97,106,.34);
}
.kqa .kqa-form-message.is-error::before {
	-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>') center/contain no-repeat;
	mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>') center/contain no-repeat;
}

/* ---- Single question ---- */
.kqa.kqa-single { max-width:820px; }
.kqa .kqa-single-topics { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.kqa .kqa-question-body { font-size:17px; color:var(--kqa-ink-soft); border-bottom:1px solid var(--kqa-line); padding-bottom:24px; margin-bottom:26px; }
.kqa .kqa-answers-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; }
.kqa .kqa-answers-title { font-weight:500; font-size:23px; margin:0; }
.kqa .kqa-answers { display:flex; flex-direction:column; gap:16px; }
.kqa .kqa-answer { background:var(--kqa-elev); border:1px solid var(--kqa-line); border-radius:var(--kqa-radius); padding:22px 24px; box-shadow:var(--kqa-shadow-sm); }
.kqa .kqa-answer.is-featured { border-color:var(--kqa-gold-line); border-left:3px solid var(--kqa-gold); }
.kqa .kqa-answer-badge { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--kqa-gold); margin-bottom:12px; }
.kqa .kqa-answer-body { font-size:16px; color:var(--kqa-ink); }
.kqa .kqa-answer-body p:first-child { margin-top:0; }
.kqa .kqa-answer-body p:last-child { margin-bottom:0; }
.kqa .kqa-answer-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--kqa-line); }
.kqa .kqa-answer-author { font-size:14.5px; font-weight:600; color:var(--kqa-ink-soft); }

/* ---- Affirm (sunrise) ---- */
.kqa .kqa-affirm {
	display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
	color:var(--kqa-ink-soft); background:var(--kqa-elev-2); border:1px solid var(--kqa-line-2);
	border-radius:var(--kqa-pill); padding:8px 15px; cursor:pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.kqa .kqa-affirm:hover { border-color:var(--kqa-gold-line); color:var(--kqa-gold); background:var(--kqa-elev-3); }
.kqa .kqa-affirm:hover .kqa-sun * { stroke:var(--kqa-gold); }
.kqa .kqa-affirm-count { font-variant-numeric:tabular-nums; background:var(--kqa-bg); border:1px solid var(--kqa-line-2); border-radius:var(--kqa-pill); padding:1px 9px; font-size:12.5px; }
.kqa .kqa-affirm.is-affirmed { color:var(--kqa-gold); background:var(--kqa-gold-soft); border-color:var(--kqa-gold-line); cursor:default; }
.kqa .kqa-affirm.is-affirmed .kqa-sun * { stroke:var(--kqa-gold); }
.kqa .kqa-affirm.is-affirmed .kqa-sun { animation:kqa-rise .5s ease; }
@keyframes kqa-rise { 0%{ transform:translateY(4px); opacity:.4; } 100%{ transform:translateY(0); opacity:1; } }

/* ---- Answer composer + team-only note ---- */
.kqa .kqa-answer-compose { margin-top:30px; background:var(--kqa-elev); border:1px solid var(--kqa-line); border-radius:18px; padding:clamp(20px,3vw,26px); box-shadow:var(--kqa-shadow-sm); }
.kqa .kqa-answer-note { margin-top:30px; text-align:center; color:var(--kqa-ink-soft); background:var(--kqa-elev); border:1px dashed var(--kqa-line-2); border-radius:var(--kqa-radius); padding:22px 24px; }
.kqa .kqa-answer-note p { margin:0 auto; max-width:34em; }

/* ---- Empty states ---- */
.kqa .kqa-empty { text-align:center; padding:48px 24px; color:var(--kqa-ink-soft); background:var(--kqa-elev); border:1px dashed var(--kqa-gold-line); border-radius:var(--kqa-radius); }
.kqa .kqa-empty .kqa-sun { width:40px; height:26px; margin-bottom:12px; }
.kqa .kqa-empty p { max-width:30em; margin:0 auto 18px; }
.kqa .kqa-empty-inline { padding:32px 24px; }

/* ---- Pager ---- */
.kqa .kqa-pager { display:flex; justify-content:center; gap:6px; margin-top:28px; flex-wrap:wrap; }
.kqa .kqa-pager .page-numbers { display:inline-flex; min-width:38px; height:38px; align-items:center; justify-content:center; padding:0 12px; border-radius:var(--kqa-radius-sm); border:1px solid var(--kqa-line-2); background:var(--kqa-elev-2); color:var(--kqa-ink-soft) !important; font-size:14.5px; font-weight:600; text-decoration:none; }
.kqa .kqa-pager .page-numbers.current { background:var(--kqa-green); color:var(--kqa-on-green) !important; border-color:var(--kqa-green); }
.kqa .kqa-pager a.page-numbers:hover { border-color:var(--kqa-green); color:var(--kqa-ink) !important; text-decoration:none; }

/* ---- Focus visibility ---- */
.kqa a:focus-visible, .kqa button:focus-visible, .kqa input:focus-visible, .kqa textarea:focus-visible, .kqa select:focus-visible {
	outline:2px solid var(--kqa-green); outline-offset:2px;
}
.kqa .screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Responsive ---- */
@media (max-width:600px) {
	.kqa { font-size:15.5px; }
	.kqa .kqa-card, .kqa .kqa-answer, .kqa .kqa-askpanel, .kqa .kqa-answer-compose { padding:18px; }
	.kqa .kqa-seal { position:static; margin-bottom:10px; }
	.kqa .kqa-answers-head { flex-direction:column; align-items:flex-start; gap:10px; }
	.kqa .kqa-answer-foot { flex-direction:column; align-items:flex-start; }
	.kqa .kqa-form-foot { gap:12px; }
	.kqa .kqa-form-foot .kqa-btn-primary { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
	.kqa * { animation:none !important; transition:none !important; }
	.kqa .kqa-card:hover { transform:none; }
	.kqa .kqa-submit:hover::after { transform:none; }
}