/* Hover state for everything that acts like a button or a box: Secondary fill,
   Primary border and text. The colors come from the visit's palette, so every
   palette gets the same look (crimson: pink fill, dark red line and text). It
   shows on keyboard focus as well as on hover. The Menu and Close pills in
   navigation.css use the same two variables. */

:root {
	--ce-hover-bg: var(--ce-secondary);
	--ce-hover-fg: var(--ce-primary);

	/* Keyboard focus: a Primary ring with a cream band between it and the thing
	   it surrounds. The band is a box-shadow as wide as the outline offset, so it
	   fills the gap. Primary against cream and cream against Primary both pass
	   3:1 in every palette, wherever the ring lands (tests/accessibility). */
	--ce-focus-ring: var(--ce-primary);
	--ce-focus-band: var(--wp--preset--color--background);
}

/* Fallback ring for any link, button or summary that has no ring of its own, so
   the browser's default outline never shows. :where() gives it no weight: every
   specific focus rule in the theme (and the ones that hide a ring on purpose)
   wins over it. */
:where(a, button, summary):focus-visible {
	outline: 3px solid var(--ce-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--ce-focus-band);
}

/* The keyboard gets the same fill as the pointer. An offer card holds its link,
   so the card follows the focus of the link inside it. A reference card does the
   same when it has a project link. */
:is(.wp-element-button, .wp-block-button__link):is(:hover, :focus-visible),
.ce-offer-card:is(:hover, :has(a:focus-visible)),
.ce-ref--link:is(:hover, :has(a:focus-visible)) {
	border-color: var(--ce-primary);
	background: var(--ce-hover-bg);
	color: var(--ce-hover-fg);
}