/* UG sub-nav pill (Highlights / Student Life / Careers / Entrepreneurship /
   Immersions), markup from src/lib/ug-subnav.js. Loaded on the UG landing page
   and the four sub-pages; each page sets the nav's own top/bottom spacing. */

.ugs-subnav {
	display: flex;
	justify-content: center;
}

.ugs-subnav__list {
	display: flex;
	gap: 48px;
	margin: 0;
	padding: 16px 48px;
	list-style: none;
	border-radius: 40px;
	/* Stronger than the original Figma fill (client: it merged into the maroon page). */
	border: 1px solid rgba(251, 244, 215, .22);
	background:
		linear-gradient(90deg, rgba(255, 59, 75, .38) 0%, rgba(255, 59, 75, .12) 60%, rgba(255, 59, 75, .08) 100%),
		rgba(120, 10, 14, .55);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
	white-space: nowrap;
}

.ugs-subnav__item {
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

a.ugs-subnav__item:hover {
	color: #fff;
}

.ugs-subnav__item.is-current {
	font-weight: 600;
	color: #fbf4d7;
}

@media (max-width: 1023px) {
	.ugs-subnav {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.ugs-subnav::-webkit-scrollbar {
		display: none;
	}

	.ugs-subnav__list {
		gap: 28px;
		padding: 12px 24px;
		margin: 0 auto;
	}

	.ugs-subnav__item {
		font-size: 14px;
	}
}

/* UG landing page: its header is fixed on desktop (below the 32px admissions
   strip) and in the flow on phones. */
.ugh-subnav {
	margin-top: 16px;
	margin-bottom: 16px !important;
}

@media (min-width: 1024px) {
	.ugh-subnav {
		margin-top: 94px;
		margin-bottom: 0 !important;
	}

	/* The hero's own top margin was there to clear the header; the nav does that now. */
	.ugh-subnav ~ * .hero-v1 {
		margin-top: 0;
	}
}