/*
 * Links v2: one style for "View all" and its kind (round 3, Lane O; D-380; LINKS-V2-PORT.md). Loaded only with
 * `eupepsia_links_v2` on and design v4 active (inc/enqueue-links-v2.php), which also sets body class `eup-links-v2`.
 * CSS on the existing classes only; no template changes.
 *
 * The component: the words in medium weight, no resting underline, a forward arrow after them in the accent text
 * colour; on hover and keyboard focus a 1 px underline fades in and the arrow steps 3 px forward
 * (reduced motion: they appear without movement). Focus ring 2 px, offset 4 px. At least 44 px tall. Contrast:
 * indigo #1d1848 on white 15.6:1, arrow #008674 4.5:1 (on mint 4.2:1; 3:1 needed for a graphic); on dark grounds white.
 *
 * The arrow: neither Eupepsia Boutique Icons.pdf nor Icons Set2 (nor Lane N's icons-v2 sprite) has a forward arrow, so it
 * is drawn here in the sets' manner (a 24 px box, 1.75 stroke, round caps and joins) and used as a CSS mask so it
 * takes currentColor-like colouring from `--eup-l2-arrow`.
 *
 * Where it applies (inventory: research lane-o/links-inventory-staging.tsv, 2026-10-20):
 *   .eup-ds4-head__link   section heading links (homepage "View all", "Shop all fall picks"; any v4 section head)
 *   .eup-hd__panel-all    header panel foot links (Lane N's header: colour and decoration only, their caps type kept)
 *   .shop-all-link        "Shop All" above the catalogue breadcrumb
 *   .eup-bm2__range       Body Map "See all <area>" (on the dark card: white)
 *   .eup-landing__link    landing "See all N supplements"
 * Buttons (.eup-ds4-btn, ghost buttons) are not this format and are left alone.
 */

html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link) {
	--eup-l2-ink: var(--eup3-indigo, #1d1848);
	--eup-l2-arrow: var(--eup3-accent-text, #008674);
	align-items: center;
	color: var(--eup-l2-ink);
	display: inline-flex;
	gap: 0.45em;
	min-height: 44px;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

/* One line where the old rule already kept it on one line (heading links); the others may wrap on a phone card. */
html body.eup-ds4.eup-links-v2 .eup-ds4-head__link {
	white-space: nowrap;
}

/* Words in medium weight where the link sets its own type (the header panels keep Lane N's caps). */
html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .shop-all-link, .eup-bm2__range, .eup-landing__link) {
	font-weight: 500;
}

html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link)::after {
	background-color: var(--eup-l2-arrow);
	content: "";
	flex: 0 0 auto;
	height: 1.1em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14.5M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14.5M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 1.1em;
}

/* Body Map's own text arrow gives way to the drawn one. */
html body.eup-ds4.eup-links-v2 .eup-bm2__range > span[aria-hidden="true"] {
	display: none;
}

/* On the Body Map's dark cards: white words and arrow (the page's own colour). */
html body.eup-ds4.eup-links-v2 .eup-bm2 .eup-bm2__range {
	--eup-l2-arrow: #ffffff;
	--eup-l2-ink: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
	html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link):hover {
		color: var(--eup-l2-ink);
		text-decoration-color: currentColor;
	}

	html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link):hover::after {
		transform: translateX(3px);
	}
}

html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link):focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--eup3-focus, #1d1848);
	outline-offset: 4px;
	text-decoration-color: currentColor;
}

html body.eup-ds4.eup-links-v2 .eup-bm2 .eup-bm2__range:focus-visible {
	outline-color: #ffffff;
}

html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link):focus-visible::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: no-preference) {
	html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link) {
		transition: text-decoration-color var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
	}

	html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link)::after {
		transition: transform var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
	}
}

@media (forced-colors: active) {
	html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link) {
		text-decoration: underline;
	}

	html body.eup-ds4.eup-links-v2 :is(.eup-ds4-head__link, .eup-hd__panel-all, .shop-all-link, .eup-bm2__range, .eup-landing__link)::after {
		background-color: LinkText;
	}
}