/**
 * Inline links: a link inside body copy, on every page.
 *
 * The link is text in the foreground, underlined in the brand red at half
 * strength; on hover and focus the underline turns full red and the text
 * stays as it is. The underline is what marks the link, so the text keeps
 * the contrast of the copy around it and no red has to work at body size.
 * See the style guide's typography page, "Inline links".
 *
 * The rule is written once, here, for the containers that hold copy: every
 * Elementor text editor widget, which is what the redesigned pages' notes,
 * prose and pillar texts are, the hub cards' captions, and the editor content
 * of listings and posts. A template of our own opts in with the class
 * `sba-prose` on the element that holds the copy, as the style guide does.
 * Controls are not inline links and have rules of their own: buttons, menus,
 * icon lists, cards, the listing's detail rows.
 *
 * Loaded after the legacy stylesheets and ahead of the pages' own, so a page
 * can still decide otherwise for one of its sections.
 */

.elementor-widget-text-editor a,
.sba-prose a,
.sba-hub-card-caption a,
.wp-editor-content a:not(.buttons) {
	color: var(--sba-charcoal);
	text-decoration: underline;
	text-decoration-color: hsl(var(--sba-red-hsl) / 0.5);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--sba-duration-hover) ease;
}

.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus,
.sba-prose a:hover,
.sba-prose a:focus,
.sba-hub-card-caption a:hover,
.sba-hub-card-caption a:focus,
.wp-editor-content a:not(.buttons):hover,
.wp-editor-content a:not(.buttons):focus {
	color: var(--sba-charcoal);
	text-decoration: underline;
	text-decoration-color: var(--sba-red);
}