/**
 * Beaufort Expression of Interest form.
 *
 * Follows the theme's design system so the form does not read as a bolted-on
 * plugin: no shadows, no gradients, 0 corner radius everywhere except a 2px
 * micro-radius on inputs, depth from hairlines and tonal shifts only.
 *
 * Colours are read from the theme's own custom properties where they exist,
 * with the palette values as fallbacks so the form still looks right if the
 * plugin is used under a different theme.
 */

.bfeoi {
	--bfeoi-ink: var(--wp--preset--color--ink, #121619);
	--bfeoi-graphite: var(--wp--preset--color--graphite, #4a5160);
	--bfeoi-outline: var(--wp--preset--color--outline, #d8dce3);
	--bfeoi-silver: var(--wp--preset--color--silver, #c9ced6);
	--bfeoi-mist: var(--wp--preset--color--mist, #f4f5f7);
	--bfeoi-navy: var(--wp--preset--color--navy, #12213d);
	--bfeoi-error: var(--wp--preset--color--error, #9b2c2c);

	color: var(--bfeoi-ink);
}

/* --- Terms, shown before the buyer commits to them ---------------------- */

.bfeoi__terms {
	border: 1px solid var(--bfeoi-outline);
	background: var(--bfeoi-mist);
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
}

.bfeoi__terms-title {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bfeoi__terms ul {
	margin: 0;
	padding-left: 1.25rem;
}

.bfeoi__terms li {
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
}

/* --- Alerts ------------------------------------------------------------- */

.bfeoi__alert {
	border: 1px solid var(--bfeoi-navy);
	border-left-width: 3px;
	background: #fff;
	padding: 1rem 1.25rem;
	margin-bottom: 2rem;
}

.bfeoi__alert p {
	margin: 0 0 0.5rem;
}

.bfeoi__alert p:last-child,
.bfeoi__alert ul:last-child {
	margin-bottom: 0;
}

.bfeoi__alert--error {
	border-color: var(--bfeoi-error);
	color: var(--bfeoi-error);
}

.bfeoi__alert ul {
	margin: 0;
	padding-left: 1.25rem;
}

/* --- Groups ------------------------------------------------------------- */

.bfeoi__group {
	border: 1px solid var(--bfeoi-outline);
	padding: 1.5rem;
	margin: 0 0 1.5rem;
}

.bfeoi__legend {
	padding: 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bfeoi__note {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	color: var(--bfeoi-graphite);
}

/* --- Rows --------------------------------------------------------------- */

.bfeoi__rows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
}

/* The grid is what makes this necessary: a full-width field has to be told to
   span both tracks, or it sits in the left column with a hole beside it. */
.bfeoi__field--full {
	grid-column: 1 / -1;
}

.bfeoi__field {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.bfeoi__field label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bfeoi-graphite);
	margin-bottom: 0.375rem;
}

.bfeoi__req {
	color: var(--bfeoi-error);
}

.bfeoi__field input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--bfeoi-silver);
	/* The one place the design system allows a radius at all. */
	border-radius: 2px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	color: var(--bfeoi-ink);
}

.bfeoi__field input:focus {
	outline: 2px solid var(--bfeoi-navy);
	outline-offset: 1px;
	border-color: var(--bfeoi-navy);
}

.bfeoi__field.is-invalid input {
	border-color: var(--bfeoi-error);
}

.bfeoi__error {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	color: var(--bfeoi-error);
}

.bfeoi__prefix {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* --- The honeypot ------------------------------------------------------- */

/* Present in the markup, which is all a scripted submitter reads, and gone for
   everyone else. Not `display: none` alone — some bots skip those. */
.bfeoi__pot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Submit ------------------------------------------------------------- */

.bfeoi__actions {
	margin: 2rem 0 0.75rem;
}

.bfeoi__submit {
	display: inline-block;
	padding: 0.875rem 2rem;
	border: 1px solid var(--bfeoi-navy);
	border-radius: 0;
	background: var(--bfeoi-navy);
	color: #fff;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.bfeoi__submit:hover,
.bfeoi__submit:focus {
	background: #fff;
	color: var(--bfeoi-navy);
}

@media (max-width: 781px) {
	.bfeoi__rows {
		grid-template-columns: minmax(0, 1fr);
	}

	.bfeoi__group {
		padding: 1rem;
	}

	.bfeoi__submit {
		width: 100%;
	}
}