/**
 * The help hub (Thomas, 2026-11-08). Everything out of bn tokens; the
 * recipes are the house ones: section head like the events hub, category
 * tiles in the subspace dress on the my-groups three-column grid, FAQ
 * folds with the full-size ▼/▲ pair every fold wears since 2026-11-06.
 */

/* ── Page head (the events hub's dress) ─────────────────────────────── */

.wpbnbgh-head__title {
	display: flex;
	align-items: center;
	gap: var(--bn-s2);
}

.wpbnbgh-head__icon {
	display: flex;
	color: var(--bn-ink-2);
}

.wpbnbgh-head__icon svg {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

/* Versal section label over each FAQ block (house section dress). */
.wpbnbgh-section {
	margin-block: var(--bn-s5) var(--bn-s2);
	font-family: var(--bn-font-display);
	font-size: var(--bn-text-sm);
	font-weight: var(--bn-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--bn-ls-wide);
	color: var(--bn-ink);
}

/* ── Category tiles ─────────────────────────────────────────────────── */

/* The my-groups grid: at most three per row, each track's floor the
 * LARGER of 200px and a third of the row, so a narrow content column
 * drops to two tiles instead of squeezing three (v1.36.1's recipe). */
.wpbnbgh-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 2 * var(--bn-s4)) / 3)), 1fr));
	gap: var(--bn-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The whole tile is the button -- subspace dress on a button element. */
.wpbnbgh-cat {
	display: flex;
	flex-direction: column;
	gap: var(--bn-s1);
	inline-size: 100%;
	block-size: 100%;
	padding: var(--bn-s3);
	background: var(--bn-surface);
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-lg);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: border-color var(--bn-dur) var(--bn-ease);
}

.wpbnbgh-cat:hover {
	border-color: var(--bn-line-strong);
}

/* The selected tile reads like the active tab: accent on icon + name.
 * Accent is for the signal, not the surface -- the tile's face stays. */
.wpbnbgh-cat[aria-pressed="true"] {
	border-color: var(--bn-accent);
}

.wpbnbgh-cat[aria-pressed="true"] .wpbnbgh-cat__name,
.wpbnbgh-cat[aria-pressed="true"] .wpbnbgh-cat__icon {
	color: var(--bn-accent-text);
}

.wpbnbgh-cat__head {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-s2);
}

.wpbnbgh-cat__icon {
	display: flex;
	color: var(--bn-ink-2);
}

.wpbnbgh-cat__icon svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
}

.wpbnbgh-cat__name {
	font: var(--bn-fw-semibold) var(--bn-text-sm) / var(--bn-leading-tight) var(--bn-font-ui);
	color: var(--bn-ink);
}

.wpbnbgh-cat__desc {
	font-size: var(--bn-text-xs);
	line-height: var(--bn-leading-normal);
	color: var(--bn-ink-3);
}

/* ── FAQ sections ───────────────────────────────────────────────────── */

/* While JS drives the tiles it hides the unselected sections; without
 * JS nothing is hidden and the page is simply a full FAQ. */
.wpbnbgh-help[data-wpbnbgh-live] .wpbnbgh-articles:not(.is-open) {
	display: none;
}

.wpbnbgh-faq {
	border: 1px solid var(--bn-line);
	border-radius: var(--bn-r-md);
	background: var(--bn-surface);
	margin-block-end: var(--bn-s2);
	transition: border-color var(--bn-dur) var(--bn-ease);
}

.wpbnbgh-faq:hover {
	border-color: var(--bn-line-strong);
}

.wpbnbgh-faq__q {
	display: flex;
	align-items: baseline;
	gap: var(--bn-s2);
	padding: var(--bn-s3);
	list-style: none;
	cursor: pointer;
	font: var(--bn-fw-semibold) var(--bn-text-sm) / var(--bn-leading-snug) var(--bn-font-ui);
	color: var(--bn-ink);
}

.wpbnbgh-faq__q::-webkit-details-marker {
	display: none;
}

/* The FULL-SIZE triangle pair, right-aligned (the house fold marker --
 * Inter's small ▾/▴ render a third of the cap height). */
.wpbnbgh-faq__q::after {
	content: "▼";
	margin-inline-start: auto;
	font-size: var(--bn-text-xs);
	color: var(--bn-ink-3);
}

.wpbnbgh-faq[open] > .wpbnbgh-faq__q::after {
	content: "▲";
}

.wpbnbgh-faq__a {
	padding: 0 var(--bn-s3) var(--bn-s3);
	font-size: var(--bn-text-sm);
	line-height: var(--bn-leading-normal);
	color: var(--bn-ink-2);
}

/* Gutenberg content inside an answer: keep media inside the card. */
.wpbnbgh-faq__a img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--bn-r-md);
}

.wpbnbgh-faq__a > :first-child {
	margin-block-start: 0;
}

.wpbnbgh-faq__a > :last-child {
	margin-block-end: 0;
}

.wpbnbgh-faq__a a {
	color: var(--bn-accent-text);
}