/* program-navigation — nav bar on program pages.
   Public users see Overview/Syllabus/FAQs; enrolled see full nav.
   Active link uses [aria-current='page']; .subdued / .new-badge are
   per-link state classes. */

.program-navigation {
	--space: 10px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 20px;

	/* Hang the first link's padding outside the column so its text, not its
	   hit area, sits on the left edge. Margin rather than transform so layout
	   knows where the nav really is. */
	margin-inline-start: calc(-1 * var(--space));

	a {
		display: block;
		padding-block: 0.5em;
		padding-inline: var(--space);

		text-decoration: underline;
		color: inherit;

		&[aria-current='page'] {
			color: var(--accent);
		}

		&.subdued {
			opacity: 0.3;
		}
	}

	.new-badge {
		display: inline-block;
		margin-left: 0.5em;
		padding: 0.2em 0.5em;
		font-size: 0.7em;
		background: var(--accent);
		color: white;
		border-radius: 3px;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 0.05em;
	}
}