/*
 * The support form.
 *
 * The plugin prints the markup - the address must stay off the page - and the look lives here with
 * the rest of the design. Fields are the same 48px controls as checkout, so the page a customer
 * reaches at two in the morning feels like the shop they just bought from.
 */

.akem-contact {
	max-width: 34rem;
	margin-block: var(--akem-space-4) 0;
}

/* WordPress centres any block narrower than the column, and it does so with margin-left/right: auto
   marked !important in its own inline layout stylesheet - which left the form floating 96px in from
   the text above it. Only !important answers !important; the form starts where the reading starts. */
.entry-content > .akem-contact {
	margin-inline: 0 !important;
}

.akem-contact__row {
	display: flex;
	flex-direction: column;
	gap: var(--akem-space-1);
	margin-block: 0 var(--akem-space-3);
}

.akem-contact__row label {
	font-size: var(--akem-size-micro);
	font-weight: 500;
	letter-spacing: var(--akem-tracking-micro);
	text-transform: uppercase;
	color: var(--akem-grey);
}

/* The fields are the site's fields (controls.css). Only the two shapes this form needs itself are
   here: a textarea that starts taller than one line, and a select that is not full width. */
.akem-contact textarea {
	min-height: 8rem;
}


/* The honeypot: off-screen rather than display:none, because a robot reading the stylesheet skips
   what is hidden and fills what it can see. */
.akem-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.akem-contact__note {
	margin-block: 0 var(--akem-space-3);
	font-size: var(--akem-size-small);
	color: var(--akem-grey);
}

/* The answer to the submit, printed above the form. */
.akem-contact__done,
.akem-contact__error {
	margin-block: 0 var(--akem-space-3);
	padding: var(--akem-space-3);
	font-size: var(--akem-size-small);
	border: 1px solid var(--akem-line);
	border-radius: var(--akem-radius);
	background: var(--akem-canvas);
}

.akem-contact__error {
	border-color: var(--akem-ink);
}