/**
 * PX Menu Link - Reusable menu link with arrow reveal on hover.
 *
 * Used in: footer nav links, mega menu links.
 */

.px-menu-link {
	display: inline-grid;
	grid-template-columns: auto 0fr;
	align-items: center;
	gap: 0;
	padding: var(--space-d05) var(--space-d075);
	margin-left: calc(-1 * var(--space-d075));
	border-radius: var(--radius-s);
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-d1);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
	text-decoration: none;
	transition: grid-template-columns var(--duration-normal) var(--ease-smooth),
	            gap var(--duration-normal) var(--ease-smooth),
	            color var(--duration-normal) var(--ease-smooth);
}

.px-menu-link__arrow {
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var(--gray-dark);
}

.px-menu-link__arrow svg {
	width: var(--space-d1);
	height: var(--space-d1);
	flex-shrink: 0;
}

.px-menu-link:hover {
	color: var(--action);
	text-decoration: underline;
	text-decoration-color: var(--action);
	grid-template-columns: auto 1fr;
	gap: var(--space-d05);
}

.px-menu-link:focus-visible {
	outline: solid 3px var(--btn-focus-ring);
	outline-offset: 2px;
}

/* Icon variant — icon always visible, arrow fades in on hover */
.px-menu-link--has-icon {
	grid-template-columns: auto auto auto;
	gap: var(--space-d05);
	transition: color var(--duration-normal) var(--ease-smooth);
}

.px-menu-link--has-icon .px-menu-link__arrow {
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-smooth);
}

.px-menu-link--has-icon:hover {
	grid-template-columns: auto auto auto;
	gap: var(--space-d05);
}

.px-menu-link--has-icon:hover .px-menu-link__arrow {
	opacity: 1;
}

.px-menu-link__icon {
	display: flex;
	align-items: center;
}

.px-menu-link__icon svg {
	width: var(--space-d15);
	height: var(--space-d15);
}