/**
 * Styles the links inside compiled copy.
 *
 * Elementor has no link-colour control on the text widgets, so a link written
 * in a paragraph takes whatever the host theme decides. On a real site that
 * meant links already painted in the accent colour at rest, which left the
 * hover state painting them the same colour again: no feedback at all, and
 * nothing telling the reader the word was clickable while their pointer was
 * over it.
 *
 * The rule below is deliberately narrow. It only applies to the `dbe-copy`
 * class the compiler writes, so a page this plugin never touched keeps the
 * theme's own link styling.
 *
 * The class is repeated in every selector on purpose. Elementor's kit writes
 * `.elementor-kit-N a`, which carries exactly the same weight as a single
 * class plus a type: at equal specificity the later stylesheet wins, and the
 * kit is always enqueued after a plugin. Doubling the class buys one class of
 * specificity and settles it without a single `!important`.
 */

.dbe-copy.dbe-copy a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	/* The accent is the host kit's, not ours: a link should belong to the site
	   it lives on. The literal is the fallback for kits that never set one. */
	text-decoration-color: var( --e-global-color-accent, #2D5BFF );
	transition: color .15s ease, text-decoration-color .15s ease;
}

.dbe-copy.dbe-copy a:hover,
.dbe-copy.dbe-copy a:focus,
.dbe-copy.dbe-copy a:active {
	color: var( --e-global-color-accent, #2D5BFF );
	text-decoration-color: currentColor;
}

.dbe-copy.dbe-copy a:focus-visible {
	outline: 2px solid var( --e-global-color-accent, #2D5BFF );
	outline-offset: 2px;
}