/*
 * components/links.css — link styling and the animated underline.
 *
 * theme.json owns the link colour (styles.elements.link). This file owns what
 * it cannot express: the hover animation.
 *
 * THE ANIMATION IS THE SITE-WIDE DEFAULT.
 * ---------------------------------------------------------------------------
 * Every link gets the sliding underline unless a component opts out. That is a
 * deliberate choice: it keeps the interaction idiom consistent without each new
 * pattern having to remember to add a class, and it matches the button wipe in
 * components/buttons.css — one idiom, one direction, everywhere.
 *
 * Two mechanisms, because no single one works for every link:
 *
 *   1. Links in flowing prose use an animated background-gradient underline.
 *      A ::after pseudo-element anchors to the border box, so on a link that
 *      wraps across two lines it draws ONE bar under the whole thing. A
 *      background-image wraps correctly per line fragment, and needs no
 *      display change, so it never disturbs text flow.
 *
 *   2. Standalone links (nav rows, card CTAs, footers) use ::after + scaleX.
 *      This can flip transform-origin between rest and hover, so the bar enters
 *      from the left and leaves to the right instead of retracting the way it
 *      came — the same sweep as the button wipe. It requires inline-block,
 *      which is safe on short single-line labels.
 *
 * OPTING OUT
 * ---------------------------------------------------------------------------
 * A component that styles its own link hover suppresses the bar with
 * `a::after { content: none; }` in its own file, next to the rule that replaces
 * it. Three do so today, each for a layout reason, not a stylistic one:
 *
 *   header mobile drawer      layout/header.css   full-width stacked items
 *   header submenu panels     layout/header.css   full-row background hover
 *   footer nav on mobile      layout/footer.css   spans the 2-column grid cell
 *
 * Buttons are excluded here rather than opting out: core emits
 * .wp-element-button on them and they are styled wholly by buttons.css.
 *
 * Image links are excluded the same way: any link wrapping an img, svg,
 * picture or video (a linked core/image, an arrow icon on a card). A bar under
 * a picture reads as a rendering fault, not an affordance. The test is
 * :has(), so it catches image links whatever block produced them. A link
 * holding both an icon and a label loses the bar too — none exist today.
 * Both exclusions sit inside :where(), so they add no specificity and the
 * pattern files that restyle prose links keep winning as before.
 */

a:where( :not( .wp-element-button, :has( img, svg, picture, video ) ) ) {
	text-underline-offset: 0.2em;
	text-decoration-thickness: from-font;
	transition: color var( --fcs-transition );
}

/*
 * 1. Prose links — the wrap-safe gradient underline.
 *
 * Scoped to editor content so it only applies where text actually flows.
 * The bar collapses to nothing and grows back from the left on hover.
 */
:is( .wp-block-post-content, .entry-content, .fcs-prose ) a:where( :not( .wp-element-button, :has( img, svg, picture, video ) ) ) {
	text-decoration: none;
	background-image: linear-gradient( currentcolor, currentcolor );
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% var( --fcs-underline-size );
	padding-bottom: var( --fcs-underline-gap );
	transition:
		background-size var( --fcs-sweep-link ),
		color var( --fcs-transition );
}

:is( .wp-block-post-content, .entry-content, .fcs-prose ) a:where( :not( .wp-element-button, :has( img, svg, picture, video ) ) ):hover,
:is( .wp-block-post-content, .entry-content, .fcs-prose ) a:where( :not( .wp-element-button, :has( img, svg, picture, video ) ) ):focus-visible {
	background-size: 0 var( --fcs-underline-size );
	color: var( --wp--preset--color--primary );
}

/*
 * 2. Standalone links — the sweeping bar.
 *
 * .fcs-link--animated is the explicit opt-in for a link outside prose that
 * should sweep: card CTAs, inline calls to action, anything in a pattern.
 *
 * The header and footer implement the same effect in their own files rather
 * than using this class, because their links are generated by core's
 * navigation block and carry no class we control.
 */
.fcs-link--animated {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.fcs-link--animated:where( :not( :has( img, svg, picture, video ) ) )::after {
	content: "";
	position: absolute;
	inset: auto 0 calc( var( --fcs-underline-gap ) * -1 ) 0;
	height: var( --fcs-underline-size );
	background: currentcolor;
	transform: scaleX( 0 );
	transform-origin: right;
	transition: transform var( --fcs-sweep-link );
}

.fcs-link--animated:where( :not( :has( img, svg, picture, video ) ) ):hover::after,
.fcs-link--animated:where( :not( :has( img, svg, picture, video ) ) ):focus-visible::after {
	transform: scaleX( 1 );
	transform-origin: left;
}