/**
 * Buttons — Gg (F3)
 *
 * D2 Button/Primary component set (Figma 2009:170: Default/Hover/Focus/Active).
 * figma-analysis-2026-07.md §1: fill #d62609, square corners, DM Sans SemiBold
 * 17px/20 white text, ~30px horizontal padding, ~49px rendered height.
 *
 * This is a NEW dedicated partial (not a shared-file edit): assets/css/global.css
 * ships NHC-era button geometry (pill radius, uppercase, heading-font, responsive
 * shrink) that doesn't match the Gracie spec, but is out of this wave's file
 * license. Because pattern CSS is glob-enqueued with a dependency on kd-global
 * (see inc/enqueue.php), this file always loads AFTER global.css, so equal-
 * specificity overrides below win on normal cascade order — no !important
 * needed anywhere in this file.
 */

/* ── Universal button geometry/typography ─────────────────────────────────────
   Square corners + DM Sans + fixed size apply regardless of style variant
   (outline/invert/text-link are colour-only treatments layered on the same
   shape) — this matches global.css's own base selector scope. */
.wp-block-button__link,
.kd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--kd-btn-height);
	padding: 0 var(--kd-btn-padding-x);
	font-family: var(--kd-font-buttons); /* DM Sans */
	font-size: var(--kd-size-btn); /* 17px */
	font-weight: 600; /* SemiBold */
	line-height: 1.18; /* 20/17 */
	text-transform: none;
	letter-spacing: normal;
	border-radius: var(--kd-radius-0); /* square — not a pill */
}

/* ── Primary (filled) button — the ONLY style in the Gracie file; no secondary/
   outline variant is designed. Scoped identically to global.css's own primary
   selector so this never touches the outline/invert/text-link variants. ───── */
.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link {
	background-color: var(--kd-btn-bg); /* Default — #d62609 */
	color: var(--kd-btn-fg); /* white */
	border: 0;
}

.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link:hover {
	background-color: var(--kd-btn-bg-hover); /* Hover — #900000 (D2) */
	color: var(--kd-btn-fg);
	border: 0;
}

.wp-block-button:not(.is-style-outline):not(.is-style-text-link)
	.wp-block-button__link:active {
	background-color: var(--kd-btn-bg-active); /* Active — #6b0000 (D2) */
	color: var(--kd-btn-fg);
	border: 0;
}

/* Focus — default fill + a visible ring (D2: 2px solid #900000, offset 2px).
   Overrides global.css's generic 3px primary-colour ring + pill radius. */
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--kd-btn-focus-ring);
	outline-offset: 2px;
	border-radius: var(--kd-radius-0);
}

/* Neutralize global.css's NHC-era responsive button shrink (~1024/768px
   breakpoints, smaller padding + font-size) — no mobile derivation is
   specified for the button in the Gracie spec, so it stays constant. */
@media (max-width: 1024px) {
	.wp-block-button__link,
	.kd-btn {
		height: var(--kd-btn-height);
		padding: 0 var(--kd-btn-padding-x);
		font-size: var(--kd-size-btn);
	}
}

@media (max-width: 768px) {
	.wp-block-button__link,
	.kd-btn {
		height: var(--kd-btn-height);
		padding: 0 var(--kd-btn-padding-x);
		font-size: var(--kd-size-btn);
	}
}