/* FAQ page (/faq/): "ask first" layout. Markup from [jnr_faq] (functions.php),
   search from faq.js. Site tokens from design.css. */

body:not(.home) .entry-content > .jbq.jbq { max-width: none; }

.jbq { display: grid; gap: 32px; color: var(--cream-100); }
.entry-content .jbq p { margin: 0; }
.entry-content .jbq ul { margin: 0; padding: 0; list-style: none; }
.entry-content .jbq li { margin: 0; }
.jbq a { color: inherit; text-decoration: none; }
.jbq a:focus-visible, .jbq button:focus-visible, .jbq input:focus-visible { outline: 2px solid var(--glow-500); outline-offset: 2px; }

/* question + search */
.jbq-top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px 48px;
	align-items: end;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--hairline);
}
.entry-content .jbq .jbq-lede { font: 400 clamp(28px, 3.2vw, 42px)/1.15 'Lora', serif; color: var(--cream-100); text-wrap: balance; }
.jbq-find { display: grid; gap: 8px; }
.jbq-label { font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-400); }
.entry-content .jbq .jbq-input {
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 18px;
	font: inherit;
	font-size: 17px;
	color: var(--cream-100);
	background: var(--ink-900);
	border: 1px solid var(--glow-700);
	border-radius: var(--r-input);
	box-shadow: none;
}
.jbq-input::placeholder { color: var(--cream-400); opacity: 1; }
.jbq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jbq .jbq-chip {
	margin: 0;
	padding: 6px 14px;
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	color: var(--cream-100);
	background: transparent;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--r-pill);
	box-shadow: none;
	cursor: pointer;
}
.jbq .jbq-chip:hover { border-color: var(--glow-500); color: var(--glow-300); }

/* answers + side */
.jbq-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.jbq-main { display: grid; gap: 14px; }
.entry-content .jbq .jbq-count { font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-400); }
.jbq-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jbq-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: var(--ink-900);
	border: 1px solid var(--ink-border);
	border-radius: var(--r-card);
	scroll-margin-top: 24px;
}
.jbq-card[hidden] { display: none; }
.jbq-card:target { border-color: var(--glow-500); }
.jbq-tag { font: 400 11.5px/1.4 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-400); }
.entry-content .jbq .jbq-q { margin: 0; font: 400 23px/1.25 'Lora', serif; color: var(--cream-100); text-wrap: balance; }
.entry-content .jbq .jbq-a { font-size: 16.5px; line-height: 1.55; color: var(--cream-100); }
.jbq-more { margin-top: auto; padding-top: 4px; font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--glow-300) !important; }
.jbq-more:hover { text-decoration: underline !important; }
.entry-content .jbq .jbq-none { padding: 24px 0; color: var(--cream-400); }

.jbq-side { position: sticky; top: 24px; display: grid; gap: 16px; }
.jbq-panel { padding: 20px 22px; background: var(--ink-900); border: 1px solid var(--ink-border); border-radius: var(--r-card); }
.entry-content .jbq .jbq-side-h { margin: 0 0 8px; font: 400 12px/1.4 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-400); }
.jbq-list li + li { border-top: 1px solid var(--hairline); }
.jbq-list a { display: block; padding: 9px 0; font-size: 15px; line-height: 1.4; }
.jbq-list a:hover { color: var(--glow-300); }
.jbq-cta { display: grid; gap: 4px; padding: 20px 22px; border: 1px solid var(--ink-border); border-radius: var(--r-card); transition: border-color .15s ease-out; }
.jbq-cta:hover { border-color: var(--glow-500); }
.jbq-cta-t { font: 400 20px/1.3 'Lora', serif; color: var(--cream-100); }
.jbq-cta-d { font-size: 14.5px; line-height: 1.5; color: var(--cream-400); }

@media (max-width: 1100px) {
	.jbq-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.jbq-top, .jbq-body { grid-template-columns: minmax(0, 1fr); }
	.jbq-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jbq-panel { grid-column: 1 / -1; }
	.jbq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.jbq { gap: 24px; }
	.jbq-cards, .jbq-side { grid-template-columns: minmax(0, 1fr); }
	.jbq-card { padding: 20px; }
	.entry-content .jbq .jbq-q { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .jbq-cta { transition: none; } }