/* Powershift buttons — the chamfer every button wears, and the fill it animates.
   Front end AND editor canvas (enqueue_block_assets), so the editor shows the real thing.

   The brand cut is TOP-LEFT + BOTTOM-RIGHT, on every button, always. It is never an
   editor control: there is no "chamfer" style to pick and no way to turn it off.

   Why gradients rather than clip-path
   -----------------------------------
   A clip-path on the button also clips its focus ring, and the ring is the only thing a
   keyboard user has to go on. Two 45° gradient layers — one over the top half cutting the
   top-left corner, one over the bottom half cutting the bottom-right — leave the outline
   alone. The 51% halves overlap by a hair so no seam shows at fractional heights.
   The cut is measured perpendicular from the corner, so it is chamfer / √2.

   Measured in Chromium at 1x: the top-left cut lands at 10.00px and the bottom-right at
   9.50px — half a device pixel, from how the reversed gradient rasterises. It is invisible
   at any real size and it shrinks as DPR rises, so it is NOT worth a fudge factor: a fixed
   correction would be wrong on every retina screen. Leave it.

   Outline styles draw their ring in a ::before instead (see /styles/button-*-outline.json);
   that pseudo-element can be clipped freely, because the focus ring lives on the button.

   HOW THIS FILE STAYS OUT OF THE NAMED STYLES' WAY — read before editing
   ---------------------------------------------------------------------
   WordPress emits BOTH theme.json's elements.button and the /styles/button-*.json partials
   wrapped in `:root :where(…)`. That makes them specificity (0,1,0) each — the partials win
   only because they are printed later in the same inline stylesheet. This file is a separate
   enqueued stylesheet, so anything it writes is printed after BOTH: a single class here would
   quietly beat all six named styles. (It did, first time round: Secondary Outline rendered as
   an orange filled button with a green ring around it.)

   So the split below is deliberate, and it is the thing to preserve:

     · geometry and motion  — every button, no colour, so there is nothing to collide over.
     · the default fill     — only reaches buttons with NO Powershift style, via :not().

   Colour for a named button comes from its partial and from nowhere else. If you ever need to
   touch a named style's colour, edit /styles/button-*.json — do not add a rule here. */

@property --pwr-btn-bg {
	syntax: "<color>";
	inherits: false;
	initial-value: transparent;
}

/* ── 1. Geometry and motion: every button on the site ──
   .wp-element-button, not .wp-block-button__link, so this also catches the buttons that are
   not core Button blocks: the search button, and the content-model plugin's Hire now,
   datasheet and product-card CTAs, which render as bare <a class="wp-element-button">. */
.wp-element-button.wp-element-button {
	--pwr-btn-chamfer: var(--wp--custom--chamfer-btn--md);
	--pwr-btn-cut: calc(var(--pwr-btn-chamfer) / 1.4142136);
	border-radius: 0;
	/* No filter or text-shadow here: the glow the handoff specified on outline and text
	   hovers was removed on Wayne's instruction, 25 Sep. Nothing animates those now. */
	transition:
		color 120ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1),
		--pwr-btn-bg 120ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The outline styles draw their ring in a ::before, so the ring's colour has to cross-fade
   with everything else — a button hovers to the deeper step of its OWN colour, and for an
   outline that colour is the stroke (Wayne, 14 Oct). No `content` here, so this creates no
   pseudo-element of its own; it only gives the partials' ring a transition. */
.wp-element-button.wp-element-button::before {
	transition: background-color 120ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The cut tracks the button's size, the way Button.jsx does: 8 / 10 / 14px. */
.wp-block-button.has-s-font-size .wp-block-button__link {
	--pwr-btn-chamfer: var(--wp--custom--chamfer-btn--sm);
}
.wp-block-button.has-xl-font-size .wp-block-button__link,
.wp-block-button.has-xxl-font-size .wp-block-button__link {
	--pwr-btn-chamfer: var(--wp--custom--chamfer-btn--lg);
}

/* ── 2. The default fill: Primary Filled, for a button nobody styled ──
   First selector: the bare <a> CTAs, which can never carry a block style.
   Second: a core Button whose wrapper has no is-style-pwr-* class — nothing picked, or
   content still carrying core's retired is-style-fill. A button WITH a named Powershift
   style is excluded here, and is coloured entirely by its partial. */
.wp-element-button.wp-element-button:not(.wp-block-button__link),
.wp-block-button:not([class*="is-style-pwr-"]) > .wp-block-button__link {
	--pwr-btn-bg: var(--wp--preset--color--orange);
	background:
		linear-gradient(135deg, transparent var(--pwr-btn-cut), var(--pwr-btn-bg) var(--pwr-btn-cut)) top left / 100% 51% no-repeat,
		linear-gradient(315deg, transparent var(--pwr-btn-cut), var(--pwr-btn-bg) var(--pwr-btn-cut)) bottom right / 100% 51% no-repeat;
}
.wp-element-button.wp-element-button:not(.wp-block-button__link):is(:hover, :focus-visible),
.wp-block-button:not([class*="is-style-pwr-"]) > .wp-block-button__link:is(:hover, :focus-visible) {
	--pwr-btn-bg: var(--wp--preset--color--orange-dark);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-1px);
}

/* The named styles carry their own hover transform, so this uses !important — the same
   device motion.css uses for .pwr-motion-target. The colour change still happens; only
   the lift and the cross-fade go. */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button.wp-element-button,
	.wp-element-button.wp-element-button:is(:hover, :focus-visible, :active),
	.wp-element-button.wp-element-button::before,
	.wp-element-button.wp-element-button:is(:hover, :focus-visible, :active)::before {
		transition: none !important;
		transform: none !important;
	}
}