/*
 * Buttons, and the closing band that is mostly buttons.
 *
 * Loaded from functions.php, after the styles core prints inline. That order
 * matters: our selectors and core's layout selectors have the same specificity,
 * so the later one wins, and every grid on the site depends on ours winning.
 */

/* --------------------------------------------------------------- buttons */

/*
 * Plain anchors that match the core button block, for the places that cannot
 * hold a block: the hero, and the tier table.
 */
.ghizo-button {
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	/* 44px minimum, met by padding rather than a fixed height so the label can
	   wrap on a narrow screen without being clipped. */
	min-height: 2.75rem;
	padding: 0.75rem 1.4rem;
	text-decoration: none;
	transition: background var(--ghizo-fast) var(--ghizo-ease),
		border-color var(--ghizo-fast) var(--ghizo-ease),
		transform var(--ghizo-fast) var(--ghizo-ease);
}

.ghizo-button--primary {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--paper);
}

/*
 * Darker on hover, never lighter, and the text colour never changes.
 *
 * The first version swapped a blue button with white text for a pale blue button
 * with dark text, which is a different button appearing where you pointed rather
 * than the one you pointed at responding. One step down the same hue is all a
 * hover has to do.
 */
.ghizo-button--primary:hover,
.ghizo-button--primary:focus-visible {
	background: var(--ghizo-cta-hover);
	color: var(--wp--preset--color--paper);
}

.ghizo-button--ghost {
	border: 1px solid rgb(147 197 253 / 45%);
	color: var(--wp--preset--color--paper);
}

.ghizo-button--ghost:hover,
.ghizo-button--ghost:focus-visible {
	background: rgb(147 197 253 / 12%);
	border-color: var(--wp--preset--color--blue-soft);
	color: var(--wp--preset--color--paper);
}

.ghizo-button:active {
	transform: translateY(1px);
}

/* ----------------------------------------------------------------- closing */

.ghizo-closing {
	margin-inline: auto;
	max-width: 44rem;
	text-align: center;
}

.ghizo-closing__title {
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

.ghizo-closing .ghizo-lead {
	margin-inline: auto;
}