/*
 * Metric Horizon - link styles (design layer, child theme).
 * Targets the markup Bricks actually renders (.brxe-*) and uses --mh-* tokens.
 *
 * Prose links use native text-decoration: a hairline that follows the font,
 * skips descenders and stays crisp on high-DPI screens.
 * Menu links keep a gradient underline so it can animate on hover.
 *
 * Tune the weight in one place:
 *   --mh-underline        hairline thickness
 *   --mh-underline-offset distance from the baseline
 */

:root {
	--mh-underline: 0.5px;
	--mh-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------
 * 1. Prose links inside Bricks text elements
 * --------------------------------------------------------------- */
#brx-content :is(
	.brxe-text,
	.brxe-text-basic,
	.brxe-post-content,
	.brxe-shortcode,
	.brxe-list,
	.brxe-accordion,
	.mh-prose
) a:not(.bricks-button):not(.brxe-button):not([class*="mh-btn"]):not([class*="__link"]):not(.mh-brochure-btn) {
	color: var(--mh-primary, #0a1b4d);
	text-decoration: underline;
	text-decoration-color: var(--mh-accent, #c9a14a);
	text-decoration-thickness: var(--mh-underline, 0.5px);
	text-underline-offset: var(--mh-underline-offset, 0.18em);
	text-decoration-skip-ink: auto;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

#brx-content :is(
	.brxe-text,
	.brxe-text-basic,
	.brxe-post-content,
	.brxe-shortcode,
	.brxe-list,
	.brxe-accordion,
	.mh-prose
) a:not(.bricks-button):not(.brxe-button):not([class*="mh-btn"]):not([class*="__link"]):not(.mh-brochure-btn):hover {
	/* Colour shifts, the hairline keeps its weight. */
	color: var(--mh-primary-hover, #0d3b8e);
	text-decoration-color: var(--mh-primary-hover, #0d3b8e);
	text-decoration-thickness: var(--mh-underline, 0.5px);
}

/* ---------------------------------------------------------------
 * 2. Menu and standalone links: hairline sweeps in on hover
 * --------------------------------------------------------------- */
#brx-content :is(.brxe-nav-menu, .bricks-nav-menu, .brxe-nav-nested) a,
.mh-link {
	text-decoration: none;
	padding-bottom: 3px;
	background-image: linear-gradient(var(--mh-accent, #c9a14a), var(--mh-accent, #c9a14a));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--mh-underline, 0.5px);
	transition: background-size 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}

#brx-content :is(.brxe-nav-menu, .bricks-nav-menu, .brxe-nav-nested) a:hover,
#brx-content :is(.brxe-nav-menu, .bricks-nav-menu, .brxe-nav-nested) a:focus-visible,
.mh-link:hover,
.mh-link:focus-visible {
	background-size: 100% var(--mh-underline, 0.5px);
	color: var(--mh-primary-hover, #0d3b8e);
}

/* ---------------------------------------------------------------
 * 3. Excluded links must not fall back to the browser default
 *    underline when their own module CSS is not on the page.
 * --------------------------------------------------------------- */
#brx-content a:is(
	.bricks-button,
	.brxe-button,
	[class*="mh-btn"],
	[class*="__link"],
	.mh-brochure-btn,
	.mh-breadcrumbs a
) {
	text-decoration: none;
	background-image: none;
}

/* Logo and image links never get an underline. */
#brx-content a:has(> img),
#brx-content a:has(> svg),
#brx-content .brxe-logo a,
#brx-content .brxe-image a {
	background-image: none;
	text-decoration: none;
	padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	#brx-content a,
	.mh-link {
		transition: none;
	}
}