/* =========================================================================
   Arrow Link: a text label + a circular outlined arrow, as one link.
   ========================================================================= */

.nhc-al-wrap--left   { text-align: left; }
.nhc-al-wrap--center { text-align: center; }
.nhc-al-wrap--right  { text-align: right; }

.nhc-al {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none !important;
	font-size: 16px;
	line-height: 1.3;
}

.nhc-al__label {
	color: #333333 !important;   /* beat the theme's link colour */
	transition: color .25s ease;
}

.nhc-al__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border: 1px solid #cfcfcf;
	border-radius: 50%;
	color: #333333;              /* drives the chevron via currentColor */
	transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.nhc-al__icon svg {
	display: block;
	transition: transform .25s ease;
}

/* Hover: subtle teal accent + a small chevron nudge */
.nhc-al:hover .nhc-al__label { color: #137e83 !important; }
.nhc-al:hover .nhc-al__icon {
	border-color: #137e83;
	color: #137e83;
}
.nhc-al:hover .nhc-al__icon svg { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
	.nhc-al__icon svg { transition: none; }
	.nhc-al:hover .nhc-al__icon svg { transform: none; }
}