/**
 * Nav links: .mk-nav-links (templates/components/nav-links.php).
 *
 * Row: header menu (fluid gap `custom.header.navGap`, 24px at 1440), label
 * medium. Column: footer and mobile menu lists. Parents change the gap through
 * --mk-nav-gap and the text style on .mk-nav-links__link. Items with sub-items:
 * nav-dropdown.css.
 */

.mk-nav-links {
	--mk-nav-gap: var(--wp--custom--header--nav-gap);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mk-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-nav-links--column {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
}

.mk-nav-links__link {
	color: var(--wp--custom--color--text--primary);
	font-family: var(--wp--custom--text--label-medium--font-family);
	font-size: var(--wp--custom--text--label-medium--font-size);
	font-weight: var(--wp--custom--text--label-medium--font-weight);
	line-height: var(--wp--custom--text--label-medium--line-height);
	letter-spacing: var(--wp--custom--text--label-medium--letter-spacing);
	text-decoration: none;
	white-space: nowrap;
	transition-property: color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-nav-links__link[aria-current="page"] {
	color: var(--wp--custom--color--text--accent);
}

@media (hover: hover) {
	.mk-nav-links__link:hover {
		color: var(--wp--custom--color--text--accent);
	}
}

.mk-nav-links__link:focus-visible {
	border-radius: var(--wp--preset--border-radius--3);
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

@media (prefers-reduced-motion: reduce) {
	.mk-nav-links__link {
		transition: none;
	}
}