/*
 * Button – Howe Green House's: a solid rectangle, the label in uppercase with
 * wide tracking, filling with the hover colour under the pointer. Every
 * colour is a role from css/base/theme.css, reached through the custom
 * properties below so a block can retarget the control (the panels do)
 * without restating it.
 *
 * .blockButton is the class the wysiwyg "Button Link" format emits
 * (inc/wysiwyg.php), so editor content reaches the same control. It has to
 * stay in this selector list rather than gain a rule of its own: the variants
 * below are single-class, so anything more specific than 0-1-0 here would
 * stop them overriding the custom properties.
 *
 * This file stays flat (no nesting at the top level): add_editor_style()'s
 * selector-prefixing doesn't reliably rewrite nested selectors, and .button
 * needs that prefix to beat wp-admin's .wp-core-ui .button in the editor.
 */
.button,
.blockButton {
	--button-bg: var(--landing-button-bg);
	--button-border: var(--landing-button-bg);
	--button-label: var(--landing-button-text);
	--button-bg-hover: var(--landing-button-hover-bg);
	--button-border-hover: var(--landing-button-hover-bg);
	--button-label-hover: var(--landing-button-text);

	display: inline-block;
	padding: 10px 25px;
	border: 2px solid var(--button-border);
	border-radius: 0;
	background: var(--button-bg);
	color: var(--button-label);
	font: var(--text-button);
	letter-spacing: 0.09em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 300ms, border-color 300ms, color 300ms;
}

.button:hover,
.button:focus,
.blockButton:hover,
.blockButton:focus {
	border-color: var(--button-border-hover);
	background: var(--button-bg-hover);
	color: var(--button-label-hover);
	text-decoration: none;
}

.button:focus-visible,
.blockButton:focus-visible {
	outline: 2px solid var(--button-border-hover);
	outline-offset: 3px;
}

/* Outlined in the panel's text colour, filling with the button colour – a
   button on a panel or a photo (the form's submit, Image with Text). */
.button--onDark {
	--button-bg: transparent;
	--button-border: var(--landing-panel-text);
	--button-label: var(--landing-panel-text);
	--button-bg-hover: var(--landing-button-bg);
	--button-border-hover: var(--landing-button-bg);
	--button-label-hover: var(--landing-button-text);
}

/* Outlined in the button colour on the page, filling on hover. */
.button--outline {
	--button-bg: transparent;
	--button-label: var(--landing-button-bg);
	--button-bg-hover: var(--landing-button-bg);
	--button-border-hover: var(--landing-button-bg);
}

button:focus {
	outline: 0;
}

/*
 * WPForms submit – inc/wpforms.php adds .button to every submit, but the
 * plugin paints its own button through container-classed selectors that
 * outgun the single-class control above. This rule matches that specificity
 * and hands the paint back to the control's custom properties, so the submit
 * follows .button and its variants (the form panel outlines it).
 */
.wpforms-container .wpforms-form button[type="submit"].button {
	/* the plugin's paint reads these custom properties through selectors that
	   outrank any plain rule – overriding the values on the element wins. Its
	   resting fill and label come from the "-alt" pair, so both pairs carry
	   the resting colours; the hover rule below paints the hover state. */
	--wpforms-button-background-color: var(--button-bg);
	--wpforms-button-background-color-alt: var(--button-bg);
	--wpforms-button-text-color: var(--button-label);
	--wpforms-button-text-color-alt: var(--button-label);
	--wpforms-button-border-color: var(--button-border);
	--wpforms-button-border-size: 2px;
	--wpforms-button-border-style: solid;
	--wpforms-button-border-radius: 0;
	--wpforms-button-size-font-size: 16px;
	--wpforms-button-size-height: auto;
	--wpforms-button-size-padding-h: 25px;
	--wpforms-button-size-margin-top: 0;

	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 25px;
	border: 2px solid var(--button-border);
	border-radius: 0;
	background: var(--button-bg);
	color: var(--button-label);
	font: var(--text-button);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color 300ms, border-color 300ms, color 300ms;
}

.wpforms-container .wpforms-form button[type="submit"].button:hover,
.wpforms-container .wpforms-form button[type="submit"].button:focus {
	border-color: var(--button-border-hover);
	background: var(--button-bg-hover);
	color: var(--button-label-hover);
	box-shadow: none;
}

/* the plugin draws a focus ring on the submit's ::after at higher
   specificity – the control's own outline replaces it */
.wpforms-container .wpforms-form button[type="submit"].button:focus::after {
	content: none;
}

.wpforms-container .wpforms-form button[type="submit"].button:focus-visible {
	outline: 2px solid var(--button-border-hover);
	outline-offset: 3px;
}