/* Help Centre — layered on the design tokens in style.css.
   Loaded only by pages under /help/. */

.help-wrap {
	max-width: 1080px;
}

.help-lede {
	color: var(--muted);
	font-size: 1.05rem;
	margin: 4px 0 32px;
}

/* ── Home grid ─────────────────────────────────────────────── */

.help-home h1 {
	font-size: 2rem;
	margin-bottom: 4px;
}

.help-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.help-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-alt);
	text-decoration: none;
	color: var(--text);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.help-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.help-card-icon {
	font-size: 1.6rem;
	line-height: 1;
}

.help-card-title {
	font-weight: 700;
	font-size: 1.05rem;
}

.help-card-desc {
	color: var(--muted);
	font-size: 0.92rem;
}

.help-card-count {
	margin-top: 4px;
	color: var(--footer-text);
	font-size: 0.8rem;
}

/* ── Breadcrumb ────────────────────────────────────────────── */

.help-breadcrumb {
	font-size: 0.85rem;
	color: var(--muted);
	padding: 20px 0 12px;
}

.help-breadcrumb a {
	text-decoration: none;
}

.help-breadcrumb .sep {
	margin: 0 8px;
	opacity: 0.5;
}

/* ── Two-column layout ─────────────────────────────────────── */

.help-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 40px;
	align-items: start;
	padding-bottom: 48px;
}

.help-sidebar {
	position: sticky;
	top: 24px;
	font-size: 0.9rem;
}

.help-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.help-sidebar > ul > li {
	margin-bottom: 6px;
}

.help-sidebar a {
	text-decoration: none;
	color: var(--muted);
	display: block;
	padding: 4px 0;
}

.help-sidebar a:hover {
	color: var(--text);
}

.help-sidebar li.current > a {
	color: var(--text);
	font-weight: 700;
}

.help-sidebar li.current ul {
	margin: 4px 0 10px 12px;
	border-left: 1px solid var(--border);
	padding-left: 12px;
}

.help-sidebar li.current ul a {
	font-weight: 400;
	font-size: 0.86rem;
}

/* ── Content ───────────────────────────────────────────────── */

.help-content h1 {
	font-size: 1.9rem;
	margin: 0 0 8px;
}

.help-content h2 {
	font-size: 1.25rem;
	margin-top: 32px;
}

.help-content h3 {
	font-size: 1.05rem;
	margin-top: 24px;
}

.help-content p,
.help-content li {
	color: var(--muted);
}

.help-content a {
	text-decoration: underline;
}

.help-updated {
	color: var(--footer-text);
	font-size: 0.85rem;
	margin: 0 0 24px;
}

.help-content pre {
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
	overflow-x: auto;
	font-size: 0.88rem;
}

.help-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
}

.help-content blockquote {
	margin: 20px 0;
	padding: 12px 18px;
	border-left: 3px solid var(--accent);
	background: var(--bg-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
}

.help-content figure {
	margin: 24px 0;
}

.help-content img {
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.help-content figcaption {
	color: var(--footer-text);
	font-size: 0.85rem;
	margin-top: 6px;
}

/* ── Article lists / meta blocks ───────────────────────────── */

.help-article-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.help-article-list li {
	border-bottom: 1px solid var(--border);
}

.help-article-list a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 4px;
	text-decoration: none;
	color: var(--text);
}

.help-article-list a:hover {
	background: var(--bg-alt);
}

.help-article-list .t {
	font-weight: 600;
}

.help-article-list .s {
	color: var(--muted);
	font-size: 0.9rem;
}

.help-questions,
.help-related,
.help-stuck {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.help-questions h2,
.help-related h2,
.help-stuck h2 {
	font-size: 1rem;
	margin: 0 0 10px;
}

.help-questions ul,
.help-related ul {
	margin: 0;
	padding-left: 20px;
}

.help-empty {
	color: var(--muted);
}

/* ── Search ────────────────────────────────────────────────── */

.help-search {
	position: relative;
	margin: 0 0 28px;
}

.help-search input {
	width: 100%;
	padding: 12px 16px;
	font-size: 1rem;
	color: var(--text);
	background: var(--bg-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	-webkit-appearance: none;
	appearance: none;
}

.help-search input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.help-search-results {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin-top: 6px;
	max-height: 60vh;
	overflow-y: auto;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.help-search-results a {
	display: block;
	padding: 12px 16px;
	text-decoration: none;
	color: var(--text);
	border-bottom: 1px solid var(--border);
}

.help-search-results a:last-child {
	border-bottom: 0;
}

.help-search-results a:hover {
	background: var(--bg-alt);
}

.help-search-results .t {
	display: block;
	font-weight: 600;
}

.help-search-results .c {
	display: block;
	font-size: 0.78rem;
	color: var(--accent);
	margin: 1px 0;
}

.help-search-results .s {
	display: block;
	font-size: 0.85rem;
	color: var(--muted);
}

.help-search-empty {
	margin: 0;
	padding: 14px 16px;
	color: var(--muted);
	font-size: 0.9rem;
}

/* ── Prev / next ───────────────────────────────────────────── */

.help-prevnext {
	display: flex;
	gap: 12px;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.help-prevnext a {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--text);
}

.help-prevnext a:hover {
	border-color: var(--accent);
}

.help-prevnext .next {
	text-align: right;
}

.help-prevnext .l {
	font-size: 0.78rem;
	color: var(--muted);
}

.help-prevnext .t {
	font-weight: 600;
	font-size: 0.92rem;
}

/* ── Small screens ─────────────────────────────────────────── */

@media (max-width: 720px) {
	.help-layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* Content first on phones — navigate via the breadcrumb (its Help and
	   category links work) and the Related list at the foot of each article.
	   The full category list still shows on the home and category pages. */
	.help-sidebar {
		display: none;
	}
}