/**
 * "Browse by topic" hashtag row. Homepage-only for now (enqueued via
 * is_front_page()) — the component itself is written to be reusable on
 * other templates later without changes. Values verified against the
 * real (non-dead-@media-max-width-1px) base rules in Design Refrance's
 * TSI Home Canva -Flat-.html.
 */

.ui-hash {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var(--spacing-hashtag_row-top) var(--spacing-hashtag_row-side) var(--spacing-hashtag_row-bottom);
	background: var(--color-wash);
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	overflow-x: auto;
}

.ui-hash .lab {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	white-space: nowrap;
	padding-right: 12px;
	border-right: 1px solid var(--color-line-mid);
}

.ui-hash a {
	font-size: 12.5px;
	color: var(--color-ink-mid);
	border: 1px solid var(--color-line-mid);
	border-radius: var(--radius-pill);
	padding: 6px 15px;
	white-space: nowrap;
	transition: 0.15s;
	background: var(--color-paper);
}

.ui-hash a:hover,
.ui-hash a:focus-visible {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

@media (max-width: 768px) {
	.ui-hash {
		padding-top: var(--spacing-hashtag_row-top);
		padding-bottom: var(--spacing-hashtag_row-bottom);
		padding-inline: 16px;
		gap: 10px;
	}
}