/* Shared trainer-portal navigation.
 *
 * The trainer pages used to hand-copy the nav links per template, which let
 * the link set and ordering drift page-by-page. This file holds the shared
 * chrome styling while templates render one common include.
 */

.tr-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	padding: 12px 0;
	border-bottom: 1px solid #E2E6EB;
	margin-bottom: 20px;
	font-size: 0.92rem;
}

.tr-nav a {
	color: #0F4C81;
	text-decoration: none;
	font-weight: 500;
	border-radius: 999px;
	padding: 6px 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tr-nav a:hover {
	color: #F25C05;
}

.tr-nav a.is-current {
	background: #0F4C81;
	color: #fff;
	padding: 6px 12px;
}

.tr-nav a.is-current:hover {
	color: #fff;
}

.tr-nav-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #EAF3FB;
	color: #0F4C81;
	font-size: 0.76rem;
	font-weight: 700;
}

.tr-nav a.is-current .tr-nav-count {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

@media (max-width: 480px) {
	.tr-nav {
		gap: 10px 12px;
	}

	.tr-nav a {
		padding: 6px 2px;
		min-height: 32px;
	}

	.tr-nav a.is-current {
		padding: 6px 10px;
	}
}