/**
 * Level 1 and Level 2 categories at the top of an archive.
 *
 * Parents read as headings you can click, children as chips beneath them, so
 * the shape of the taxonomy is visible at a glance rather than hidden one level
 * at a time behind a dropdown.
 */

.gcn-cats {
	margin: 0 0 var(--gcn-space-8);
	padding: var(--gcn-space-6);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-sm);
}

/* While the panel is fetching another post type's categories. */
.gcn-cats.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity var(--gcn-duration) var(--gcn-ease);
}

/* An empty panel takes no room: a post type with no categories shows nothing
   rather than an empty bordered box. */
.gcn-cats:empty {
	display: none;
}

.gcn-cats__title {
	margin: 0 0 var(--gcn-space-5);
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

/*
 * Columns rather than a grid: the groups are wildly different heights — one
 * parent has six children, the next has none — and a grid gives every cell in
 * a row the height of its tallest neighbour, which left half the panel empty.
 * Columns pack them.
 */
.gcn-cats__list {
	columns: 4 16rem;
	column-gap: var(--gcn-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gcn-cats__group {
	min-width: 0;
	margin-bottom: var(--gcn-space-5);
	/* A group must not be split across two columns. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

/* ---------------------------------------------------------------------------
   Level 1
   --------------------------------------------------------------------------- */

.gcn-cats__parent {
	display: flex;
	align-items: baseline;
	gap: var(--gcn-space-2);
	padding-bottom: var(--gcn-space-2);
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text);
	text-decoration: none;
	border-bottom: 1px solid var(--gcn-rule);
	transition: color var(--gcn-duration) var(--gcn-ease);
}

.gcn-cats__parent:hover,
.gcn-cats__parent:focus-visible {
	color: var(--gcn-brand-strong);
}

.gcn-cats__parent.is-current {
	color: var(--gcn-brand-strong);
	border-bottom-color: var(--gcn-brand);
}

/* ---------------------------------------------------------------------------
   Level 2
   --------------------------------------------------------------------------- */

.gcn-cats__children {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gcn-space-2);
	margin: var(--gcn-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.gcn-cats__link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--gcn-space-2);
	padding: 0.3em 0.75em;
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-soft);
	text-decoration: none;
	background: var(--gcn-surface-sunken);
	border: 1px solid transparent;
	border-radius: var(--gcn-radius-pill);
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		background var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease);
}

.gcn-cats__link:hover,
.gcn-cats__link:focus-visible {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
	border-color: var(--gcn-brand-border);
}

.gcn-cats__link.is-current {
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border-color: var(--gcn-brand);
}

/* The count. Quiet — it is context, not the label. */
.gcn-cats__count {
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text-faint);
}

.gcn-cats__parent .gcn-cats__count {
	margin-left: auto;
}

.gcn-cats__link.is-current .gcn-cats__count {
	color: hsl(0 0% 100% / 0.75);
}

.gcn-cats__all {
	margin: var(--gcn-space-5) 0 0;
	padding-top: var(--gcn-space-4);
	font-size: var(--gcn-text-sm);
	border-top: 1px solid var(--gcn-rule);
}

.gcn-cats__all a {
	color: var(--gcn-brand-strong);
	font-weight: var(--gcn-weight-medium);
}

@media (max-width: 640px) {

	.gcn-cats {
		padding: var(--gcn-space-5);
	}

	.gcn-cats__list {
		grid-template-columns: 1fr;
		gap: var(--gcn-space-4);
	}
}