/* Powershift text links: ONE arrow, two directions (ticket #826, 28 Sep 2026).
   Front end AND editor canvas (enqueue_block_assets).

   Meg: "DATASHEET and VIEW PRODUCT arrows … need to be bigger and even." Wayne: every link
   the same size across the site.

   Why an icon and not a character
   -------------------------------
   The arrows used to be the font's own glyphs, "\2192" and "\2193", added by ::after or typed
   into the copy. Red Hat Display draws the two differently: the down arrow is narrower and
   lighter than the right arrow, and both sit small against 800-weight caps. Two links side by
   side on a product card never matched. A masked square painted in currentColor is the same
   size, weight and gap in every direction, and it follows the link colour on every surface.

   The rule
   --------
     →  goes somewhere (a page, a section, an archive)    .pwr-b-textlink
     ↓  downloads a file (datasheets)                     .pwr-b-textlink--download
   Nothing else. The type (14px / 800 / uppercase) is .pwr-b-textlink in the content-model
   plugin's blocks.css; this file owns only the arrow, so the header's CTA, which colours itself
   from the glass scheme, can wear the same one.

   Size: 1.15em, which is 16px at the 14px link size. That is the "bigger": the glyph's arrow
   came to roughly 10px. */

:root {
	--pwr-arrow-size: 1.15em;
	--pwr-arrow-gap: 0.45em;
	/* 24×24, 2.75 stroke, square caps: reads at 16px next to 800-weight caps without going blobby. */
	--pwr-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='square'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--pwr-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='square'%3E%3Cpath d='M12 3v14M6 12l6 6 6-6M5 21h14'/%3E%3C/svg%3E");
}

.pwr-b-textlink,
.pwr-header__cta-link,
.pwr-postcard .wp-block-post-excerpt__more-link,
.pwr-postcard .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: var(--pwr-arrow-gap);
}

.pwr-b-textlink::after,
.pwr-header__cta-link::after,
.pwr-postcard .wp-block-post-excerpt__more-link::after,
.pwr-postcard .wp-block-read-more::after {
	content: "";
	flex: none;
	width: var(--pwr-arrow-size);
	height: var(--pwr-arrow-size);
	background-color: currentColor;
	-webkit-mask: var(--pwr-arrow-right) center / contain no-repeat;
	mask: var(--pwr-arrow-right) center / contain no-repeat;
	/* Nudge up a hair: caps have no descenders, so centring on the line box sits the arrow low. */
	transform: translateY(-0.04em);
	transition: transform var(--wp--custom--motion--fast, 150ms) var(--wp--custom--motion--ease-standard, ease);
}

.pwr-b-textlink--download::after {
	-webkit-mask-image: var(--pwr-arrow-down);
	mask-image: var(--pwr-arrow-down);
}

/* The arrow moves the way it points, a little. It is the only hover feedback text links get
   beyond colour, and it says which kind of link it is. */
@media (prefers-reduced-motion: no-preference) {
	.pwr-b-textlink:is(:hover, :focus-visible)::after,
	.pwr-header__cta-link:is(:hover, :focus-visible)::after,
	.pwr-postcard:hover .wp-block-post-excerpt__more-link::after,
	.pwr-postcard:hover .wp-block-read-more::after,
	/* …and when the CARD is hovered, because the card is one target. Not --download: a
	   datasheet goes somewhere else, so it does not travel with the card. */
	.pwr-b-card:hover .pwr-b-textlink:not(.pwr-b-textlink--download)::after,
	.pwr-b-prodcard:hover .pwr-b-textlink:not(.pwr-b-textlink--download)::after { transform: translate(0.15em, -0.04em); }
	.pwr-b-textlink--download:is(:hover, :focus-visible)::after { transform: translateY(0.11em); }
}