/* ========================================
   Text links with an arrow

   One shared component for "words, then a trailing arrow," replacing three
   things that each drew it their own way: .front-link (front-page-2.css,
   a border-bottom under the whole flex row, icon and all), .footer-info__link
   (footer.css, text-decoration on hover only) and .front-section__link
   (front-page.css, a literal "\2192" unicode character with its own
   ::after { text-decoration: none } to keep the underline off it). None of
   the three agreed on colour, size, or how the arrow was drawn.

   .link__label is a real <span>, not the link's own text node, so underline
   can target just the words and never the icon next to it -- a
   text-decoration painted across the whole flex row draws under the arrow
   too, which is what every one of the three old techniques either accepted
   or had to work around.

   The arrow itself is .icon-arrow (bc-icon.css), the same one every button
   and badge on the site already uses. It is a sibling of .link__label, not
   inside it, and its side follows markup order like everywhere else -- no
   left/right class needed. Not every link needs one: templates/front-page-2
   .php's hero also uses .link for its plain "see categories" jump link, with
   no icon at all.

   Default carries no font-size at all, on purpose: with no size modifier it
   reads as body text, the same size as whatever paragraph or heading it sits
   next to, because .link is not always a CTA-scale element -- sometimes it is
   just where a paragraph happens to end in an arrow. .link--mid (17px) and
   .link--small (15px) are explicit steps down from that when a spot wants
   something quieter than body text.
======================================== */

:root {
	--bc-link-gap: var(--space-2); /* 8px */
}

.link {
	display: inline-flex;
	align-items: center;
	gap: var(--bc-link-gap);

	color: inherit;
	font-weight: var(--font-medium);
	line-height: var(--leading-short);
	text-decoration: none;

	transition: color var(--duration-fast) var(--ease);
}

.link:hover {
	color: var(--color-action);
}

.link__label {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/*
 * Plain: quiet until hover, for a link in a dense context that should not
 * compete with everything around it -- the footer's card links used to work
 * exactly this way, underlined only on :hover / :focus.
 */
.link--plain .link__label {
	text-decoration: none;
}

.link--plain:hover .link__label {
	text-decoration: underline;
}

/*
 * Size steps down from body text. Each sets only font-size; everything else
 * -- gap, weight, colour, the underline -- stays the base value.
 */
.link--mid {
	font-size: var(--text-ui-l); /* 17px */
}

.link--small {
	font-size: var(--text-body-s); /* 15px */
}