/*
 * EtchwpKits contact form: functional base styles only. The inserted component
 * brings its own visual design (colours, spacing, typography) through its BEM
 * classes; these rules just guarantee the honeypot stays hidden and the busy,
 * error, and success states are actually conveyed. Everything is scoped under
 * .ewkc-form so it can never touch the rest of the page.
 */

.ewkc-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ewkc-form__status {
	margin: 0 0 12px;
}

.ewkc-form__status:empty {
	display: none;
}

.ewkc-form--busy {
	opacity: 0.9;
}

.ewkc-form--busy [type="submit"] {
	cursor: progress;
}

.ewkc-form [aria-invalid="true"] {
	outline: 2px solid #b42318;
	outline-offset: 1px;
}

.ewkc-form--error .ewkc-form__status {
	color: #b42318;
}

.ewkc-form--success .ewkc-form__status {
	color: #1a7f37;
}

/*
 * The shortcode's default look (ewkc-form--styled; styling="none" leaves it
 * out). Built from the site's Automatic.css tokens, with plain fallbacks when
 * Automatic.css is not active. The submit button also carries ACSS's
 * btn--primary class, so on an ACSS site it is the site's own primary button
 * (its colours, text contrast and hover come from ACSS); the rules below only
 * fill in where ACSS is not there. Every selector sits inside :where() so it has
 * no specificity: any rule the author writes, even a bare class, wins.
 */

:where(.ewkc-form--styled) {
	display: grid;
	gap: var(--space-m, 1.25rem);
	max-inline-size: 40rem;
}

:where(.ewkc-form--styled) :where(.ewkc-form__title) {
	margin: 0;
}

:where(.ewkc-form--styled) :where(.ewkc-form__status) {
	margin: 0;
}

:where(.ewkc-form--styled) :where(.ewkc-form__field) {
	display: grid;
	gap: var(--space-xs, 0.5rem);
}

:where(.ewkc-form--styled) :where(.ewkc-form__label) {
	font-size: var(--text-s, 0.95rem);
	font-weight: 600;
}

:where(.ewkc-form--styled) :where(.ewkc-form__control) {
	box-sizing: border-box;
	inline-size: 100%;
	margin: 0;
	padding: var(--space-xs, 0.6rem) var(--space-s, 0.9rem);
	font: inherit;
	color: var(--text-dark, #111);
	background: var(--white, #fff);
	border: 1px solid var(--neutral-light, #c9ced3);
	border-radius: var(--radius, 0.5rem);
}

:where(.ewkc-form--styled) :where(textarea.ewkc-form__control) {
	min-block-size: 10rem;
	resize: vertical;
}

:where(.ewkc-form--styled) :where(input[type="file"].ewkc-form__control) {
	padding: var(--space-xs, 0.6rem);
}

:where(.ewkc-form--styled) :where(.ewkc-form__control:focus-visible) {
	outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary, #1a5fd0));
	outline-offset: var(--focus-offset, 2px);
}

:where(.ewkc-form--styled) :where(.ewkc-form__help) {
	margin: 0;
	font-size: var(--text-s, 0.875rem);
	opacity: 0.8;
}

:where(.ewkc-form--styled) :where(.ewkc-form__submit) {
	justify-self: start;
	padding: var(--space-xs, 0.7rem) var(--space-l, 1.6rem);
	font: inherit;
	font-weight: 600;
	color: var(--btn-text-color, #fff);
	background: var(--btn-background, #1a5fd0);
	border: 0;
	border-radius: var(--radius, 0.5rem);
	cursor: pointer;
}

:where(.ewkc-form--styled) :where(.ewkc-form__submit:hover) {
	color: var(--btn-text-color-hover, #fff);
	background: var(--btn-background-hover, #154ca6);
}

:where(.ewkc-form--styled) :where(.ewkc-form__submit:focus-visible) {
	outline: var(--focus-width, 2px) solid var(--focus-color, var(--primary, #1a5fd0));
	outline-offset: var(--focus-offset, 2px);
}