/**
 * Universities directory (page-institutions.php): the first-letter filter.
 *
 * Each letter is a square chip. The chosen one (or "All") is filled gold;
 * letters no university matches are dashed and muted, and aren't links.
 * The results heading's count sits beside it in a lighter weight. The
 * loading/fade states of the results themselves are the shared
 * assets/css/ajax-region.css.
 *
 * Colours come from the theme's palette (style.min.css :root) --
 * --blue, --yellow and --cream.
 */

.un-az {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.un-az__label {
	color: var(--blue, #231a64);
	font-size: 1.15rem;
}

.un-az__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .top-pagination a (style.min.css) spaces bare links apart; the list's gap does that here. */
.top-pagination .un-az__item {
	margin: 0;
}

.un-az__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid rgba(35, 26, 100, 0.18);
	border-radius: 8px;
	background: #fff;
	color: var(--blue, #231a64);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.un-az__item--all {
	padding: 0 14px;
}

a.un-az__item:hover {
	border-color: var(--yellow, #ddb14d);
	background: var(--cream, #f6f2e8);
	color: var(--blue, #231a64);
}

a.un-az__item:focus-visible {
	outline: 2px solid var(--blue, #231a64);
	outline-offset: 2px;
}

.un-az__item.is-active,
a.un-az__item.is-active:hover {
	border-color: var(--yellow, #ddb14d);
	background: var(--yellow, #ddb14d);
	color: var(--blue, #231a64);
	box-shadow: 0 4px 10px rgba(221, 177, 77, 0.35);
}

.un-az__item.is-empty {
	border-style: dashed;
	background: transparent;
	color: rgba(35, 26, 100, 0.28);
	cursor: not-allowed;
}

.un-az-count {
	color: #6b6889;
	font-weight: 400;
}

@media (max-width: 575.98px) {
	.un-az__item {
		min-width: 34px;
		height: 34px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.un-az__item {
		transition: none;
	}
}