/*
 * Interactive states — the parts theme.json cannot express.
 *
 * theme.json owns the state *colours*: `styles.elements.button` carries
 * `:hover`, `:active` and `:focus` nodes, and they are the right place for them
 * because the editor can see them there. Two things it cannot say, which is why
 * this file exists:
 *
 * - **`@media (hover: hover)`.** theme.json emits `:hover` unguarded, so a
 *   hover fill can stick after a tap on a touch device. Everything written here
 *   is guarded; the button fills from theme.json are the known exception, and
 *   moving them into CSS is the fix if that ever matters.
 * - **`:focus-visible` on a *block*.** theme.json's own
 *   `VALID_ELEMENT_PSEUDO_SELECTORS` does list `:focus-visible`, so a global
 *   `elements.link` can use it — but `block-supports/elements.php` implements
 *   only `:hover` for a block's own element styles, and silently drops the rest.
 *   Anything a block needs beyond hover is written here.
 *
 * Derived colours are `color-mix()` of an existing token, never a new one — a
 * hover fill is a shift of a colour the palette already has, not a colour in
 * its own right.
 */

/*
 * Only colours and the outline colour transition, never `all`: the focus ring's
 * geometry has to snap in immediately, and animating `outline-width` or
 * `outline-offset` makes a keyboard user watch it arrive.
 */
@media (prefers-reduced-motion: no-preference) {
	/* Buttons and links share one list, so the two never drift apart. */
	.wp-element-button,
	.wp-block-button__link,
	a:where(:not(.wp-element-button)) {
		transition:
			background-color 0.2s var(--wp--custom--transition-spring-smooth),
			color 0.2s var(--wp--custom--transition-spring-smooth),
			outline-color 0.2s var(--wp--custom--transition-spring-smooth);
	}
}

@media (hover: hover) {
	/* Guarded, so a tap does not leave the last link underlined. */
	a:where(:not(.wp-element-button)):hover {
		text-decoration: underline;
	}
}

a:where(:not(.wp-element-button)):focus-visible {
	text-decoration: underline;
}

/*
 * The one ring, everywhere. `woodsmoke` rather than pure black because it is the
 * design's own near-black, and the 2px offset puts page ground on both sides of
 * the ring — so it contrasts with the page rather than with whatever fill it
 * happens to be sitting on, and one ring serves every button colour.
 */
a:where(:not(.wp-element-button)):focus-visible,
:where(button, summary, [tabindex]:not([tabindex^="-"])):focus-visible {
	outline: 2px solid var(--kg-focus-ring-color);
	outline-offset: 2px;
}

/*
 * A little more room at the ends of a link's ring than at its top and bottom.
 *
 * `outline-offset` is a single value on all four sides, so it cannot say
 * "further out horizontally" — and raising it to get past the glyphs would push
 * the ring into the line above and below as well, which on a 1.54 line height is
 * where it starts colliding with the next link in a menu.
 *
 * Padding grows the border box the outline is drawn around; the matching
 * negative margin gives the space straight back to the layout, so nothing moves
 * when the ring appears. It is safe on a link precisely because a link has no
 * background — the padding is invisible and only the ring sees it. Not extended
 * to buttons for the same reason reversed: there the padding would widen a
 * visible fill.
 */
a:where(:not(.wp-element-button)):focus-visible {
	padding-inline: 3px;
	margin-inline: -3px;
}

/*
 * Two properties decide what an interactive state looks like, and both are set
 * by the *ground* rather than by the block.
 *
 * The theme has one near-black focus ring and one accent, and both are wrong on
 * a dark section: `woodsmoke` on the footer's `neutral-900` is 1.11:1, which is
 * not a focus ring, and `brand-blue` is a dim 4.25:1 there. So a dark ground
 * redefines them, and every state that reads them lands correctly without
 * knowing where it is.
 *
 * Keying it off the palette's own background classes is what makes it automatic:
 * a section is dark because someone picked a dark background in the editor, and
 * that same choice is what flips these. Nothing to opt into, and a section that
 * stops being dark stops being treated as dark.
 *
 * `brand-light-blue` rather than white on a dark ground, deliberately: half the
 * footer's links are already white, so white would be no hover at all for them.
 * The light blue lifts the white links and the 70% ones alike, is the same
 * accent the light ground uses one step brighter, and clears 8:1 on `neutral-900`.
 */
:root {
	--kg-focus-ring-color: var(--wp--preset--color--woodsmoke);
	--kg-link-hover-color: var(--wp--preset--color--brand-blue);
}

.has-neutral-900-background-color,
.has-woodsmoke-background-color,
.has-black-background-color {
	--kg-focus-ring-color: var(--wp--preset--color--white);
	--kg-link-hover-color: var(--wp--preset--color--brand-light-blue);
}

/*
 * Navigation is the one place a link state cannot come from theme.json or from a
 * block's own `elements.link`, and the reason is worth knowing before trying.
 *
 * Core ships this, in `blocks/navigation/style.css`:
 *
 *     .wp-block-navigation
 *     .wp-block-navigation-item__content.wp-block-navigation-item__content
 *     { color: inherit }
 *
 * The class is **repeated deliberately** — three classes, (0,3,0) — so a menu
 * item takes the colour of its surroundings and stays there. Everything that
 * could otherwise set it loses: theme.json's `elements.link` emits inside
 * `:root :where(…)` and is worth (0,1,0); a block's own `elements.link[':hover']`
 * is `.wp-elements-N a…:hover`, (0,2,1). Both are silently outranked, which
 * looks exactly like the rule not existing.
 *
 * So matching core's own class — doubled specificity and all — is what it takes.
 * Naming the class rather than repeating it keeps this at (0,3,1), one type
 * selector above core, which is the smallest thing that wins.
 *
 * A menu item is a target in its own right and does not need the underline a
 * link inside a sentence does; `text-decoration: none` takes back the one the
 * generic rule above adds, and the colour shift is the whole state.
 */
@media (hover: hover) {
	.wp-block-navigation a.wp-block-navigation-item__content:hover {
		color: var(--kg-link-hover-color);
		text-decoration: none;
	}
}

.wp-block-navigation a.wp-block-navigation-item__content:focus-visible {
	color: var(--kg-link-hover-color);
	text-decoration: none;
}