/**
 * Kata button states.
 *
 * Figma: the "button states" frame. It draws four things, each in rest and
 * hover, and they recur across every section — so they are defined once here
 * rather than per block, and a block only has to give its button the right
 * shape class.
 *
 *   solid pill    white       -> white 80%
 *   outline pill  transparent -> white 20%, border unchanged
 *   menu item     black       -> #333333
 *   arrow link    white mark  -> the mark leaves and a magenta one arrives
 *
 * The two greys are not in the palette and should not be: they are interaction
 * shades of colours that ARE, so they are derived from those with color-mix.
 * That keeps one source of truth — restyle `white` and the hover follows — and
 * it keeps the closed Kata palette closed.
 */

:root {
	/*
	 * The two hover fills are ALPHA, straight from the frames — white at 80%
	 * for a solid button (2082:6672) and white at 20% for an outlined one
	 * (2082:6678).
	 *
	 * Not the flat greys they resolve to over the dark surface, which is what I
	 * had. These buttons also sit on photographs — the hero's CTA, the cards —
	 * and a fixed grey would read as a grey slab there instead of the picture
	 * showing through. Alpha composites against whatever is actually behind.
	 */
	--kata-solid-hover: rgba( 255, 255, 255, 0.8 );
	--kata-outline-hover: rgba( 255, 255, 255, 0.2 );

	/* #333333 — a menu row lifted just off the panel behind it. */
	--kata-menu-hover: color-mix(
		in srgb,
		var( --wp--preset--color--black ) 80%,
		var( --wp--preset--color--white )
	);

	/*
	 * One duration for every button. Short enough that the button feels
	 * attached to the pointer, long enough not to flicker when it crosses a
	 * row of them.
	 */
	--kata-hover-ms: 180ms;
}

/* -------------------------------------------------------------------------
 * Solid pill — the white call to action
 * ---------------------------------------------------------------------- */

.kata-header__cta .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.kata-hero__cta,
.kata-btn--solid {
	/*
	 * `transition` is a shorthand, so naming only background-color here would
	 * discard the transform transition the hero's button already declares.
	 * Both are listed for that one.
	 */
	transition: background-color var( --kata-hover-ms ) ease;
}

.kata-hero__cta {
	transition: background-color var( --kata-hover-ms ) ease,
		transform var( --kata-hover-ms ) ease;
}

/*
 * `:hover:not(:disabled)` rather than a bare `:hover` — a disabled submit
 * still matches :hover, and lighting up a button that will not respond is
 * worse than no feedback at all.
 */
.kata-header__cta .wp-block-button__link:hover:not( :disabled ),
.wp-block-button.is-style-fill .wp-block-button__link:hover:not( :disabled ),
.kata-hero__cta:hover:not( :disabled ),
.kata-btn--solid:hover:not( :disabled ) {
	/*
	 * `!important`, and there is no way around it.
	 *
	 * A button given a palette colour in the editor carries a preset class, and
	 * core emits those as `.has-white-background-color { … !important }`. No
	 * amount of specificity beats it, so a hover state for any button an editor
	 * has coloured has to answer in kind. Same reason the preset font-size
	 * classes had to be overridden this way elsewhere.
	 */
	background-color: var( --kata-solid-hover ) !important;
}

/* -------------------------------------------------------------------------
 * Outline pill
 *
 * The border does NOT change — only the well behind it fills. Drawn that way,
 * and it is what keeps the button the same size and in the same place, which a
 * border-width change would not.
 * ---------------------------------------------------------------------- */

.kata-header__phone .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.kata-contact-form__submit,
.kata-btn--outline {
	transition: background-color var( --kata-hover-ms ) ease;
}

.kata-header__phone .wp-block-button__link:hover:not( :disabled ),
.wp-block-button.is-style-outline .wp-block-button__link:hover:not( :disabled ),
.kata-contact-form__submit:hover:not( :disabled ),
.kata-btn--outline:hover:not( :disabled ) {
	background-color: var( --kata-outline-hover );
}

/* -------------------------------------------------------------------------
 * Menu rows
 *
 * The submenu panel is black and a hovered row lifts off it. Applied to the
 * row rather than to the link so the whole width highlights, as drawn.
 * ---------------------------------------------------------------------- */

.kata-header__primary .wp-block-navigation__submenu-container li > a {
	transition: background-color var( --kata-hover-ms ) ease;
}

.kata-header__primary .wp-block-navigation__submenu-container li > a:hover,
.kata-header__primary .wp-block-navigation__submenu-container li > a:focus-visible {
	background-color: var( --kata-menu-hover );
}

/* -------------------------------------------------------------------------
 * Arrow link
 *
 * A ring with a chevron in it. On hover the chevron LEAVES — it travels out of
 * the ring in the direction it points — and a magenta one arrives behind it
 * from the opposite side. The drawn middle state shows both at once, each half
 * clipped by the ring, which is what makes the ring's `overflow: hidden` part
 * of the effect rather than a detail.
 *
 * Both marks are the same element duplicated, so they cannot drift; the second
 * is marked `data-kata-arrow-in` in the markup that uses this.
 * ---------------------------------------------------------------------- */

.kata-arrow {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 1px solid currentcolor;
	border-radius: 50%;
	color: var( --wp--preset--color--white );
}

.kata-arrow__mark {
	grid-area: 1 / 1;
	display: block;
	transition: transform var( --kata-hover-ms ) ease,
		opacity var( --kata-hover-ms ) ease;
}

/*
 * The incoming mark waits one full ring-width away, on the side the outgoing
 * one is travelling away from. A percentage of ITS OWN width, so the distance
 * scales with the mark at any size the ring is used at.
 */
.kata-arrow__mark--in {
	color: var( --wp--preset--color--magenta );
	transform: translateX( 140% );
}

/*
 * `:focus-visible` as well as `:hover`, so the state exists for a keyboard.
 * The travel is physical: the mark points left in this RTL document and it
 * leaves the way it points, which rtlcss mirrors along with the glyph itself.
 */
.kata-arrow:hover .kata-arrow__mark--out,
.kata-arrow:focus-visible .kata-arrow__mark--out,
a:hover .kata-arrow .kata-arrow__mark--out,
a:focus-visible .kata-arrow .kata-arrow__mark--out {
	transform: translateX( -140% );
	opacity: 0;
}

.kata-arrow:hover .kata-arrow__mark--in,
.kata-arrow:focus-visible .kata-arrow__mark--in,
a:hover .kata-arrow .kata-arrow__mark--in,
a:focus-visible .kata-arrow .kata-arrow__mark--in {
	transform: translateX( 0 );
}

/*
 * Nothing moves for a visitor who has asked for less of it — but the state
 * still has to be legible, so the colour change stays and only the travel goes.
 */
@media ( prefers-reduced-motion: reduce ) {
	.kata-arrow__mark {
		transition: opacity var( --kata-hover-ms ) ease;
	}

	.kata-arrow__mark--in {
		transform: none;
		opacity: 0;
	}

	.kata-arrow:hover .kata-arrow__mark--out,
	a:hover .kata-arrow .kata-arrow__mark--out {
		transform: none;
		opacity: 0;
	}

	.kata-arrow:hover .kata-arrow__mark--in,
	a:hover .kata-arrow .kata-arrow__mark--in {
		transform: none;
		opacity: 1;
	}
}