/**
 * PX Menu Link - Reusable menu link with arrow reveal on hover.
 *
 * Used in: footer nav links, mega menu links, vacatures shortcode.
 *
 * Arrow rendered via ::after pseudo-element on .px-menu-link__text so it flows
 * inline with the last word. Negative margin-right cancels its space → no reflow.
 */


/* Container for a vertical list of px-menu-link items */
.px-menu-link-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-d1);
}

.px-menu-link {
	display: block;
	padding: 0;
	margin-left: 0;
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	line-height: var(--lh-normal);
	color: var(--gray-dark);
	text-decoration: none;
	transition: color var(--duration-normal) var(--ease-smooth);
}

/* Hide the HTML arrow span — replaced by ::after */
.px-menu-link__arrow {
	display: none;
}

/* Inline pseudo-element arrow */
.px-menu-link__text::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -0.05em;
	width: var(--space-d1);
	height: var(--space-d1);
	margin-left: var(--space-d05);
	margin-right: calc(-1 * (var(--space-d1) + var(--space-d05)));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M221.66,133.66l-72,72A8,8,0,0,1,136,200V136H40a8,8,0,0,1,0-16h96V56a8,8,0,0,1,13.66-5.66l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M221.66,133.66l-72,72A8,8,0,0,1,136,200V136H40a8,8,0,0,1,0-16h96V56a8,8,0,0,1,13.66-5.66l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: var(--gray-dark);
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--duration-normal) var(--ease-smooth);
}

.px-menu-link:hover {
	color: var(--action);
	text-decoration: underline;
	text-decoration-color: var(--action);
}

.px-menu-link:hover .px-menu-link__text::after {
	clip-path: inset(0 0 0 0);
}

.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 {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--space-d05);
	box-decoration-break: unset;
	-webkit-box-decoration-break: unset;
	transition: color var(--duration-normal) var(--ease-smooth);
}

/* Icon variant uses the HTML arrow span (grid needs the element) */
.px-menu-link--has-icon .px-menu-link__arrow {
	display: flex;
	align-items: center;
	width: auto;
	margin-left: 0;
	opacity: 0;
	transition: opacity var(--duration-normal) var(--ease-smooth);
}

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

/* Hide ::after on icon variant (uses HTML arrow instead) */
.px-menu-link--has-icon .px-menu-link__text::after {
	display: none;
}

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

.px-menu-link__icon {
	display: flex;
	align-items: center;
	height: calc(1em * var(--lh-normal));
}

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