/**
 * Riley Forms — front-end styles.
 *
 * Deliberately minimal and theme-agnostic: inherits your typography and
 * colors rather than imposing its own. Uses system focus styles so keyboard
 * users keep a visible focus ring.
 */

.rf-wrap {
	max-width: 38rem;
	margin: 2rem 0;
}

.rf-title {
	margin: 0 0 .75rem;
	font-size: 1.25em;
}

.rf-field {
	margin: 0 0 1rem;
}

.rf-field label {
	display: block;
	margin-bottom: .25rem;
	font-weight: 600;
}

.rf-field input[type="text"],
/*
 * Controls size by their border box.
 *
 * Without this, width:100% below means 100% *plus* padding and border, so a
 * field with any padding renders wider than the element containing it. In a
 * flex row the neighbouring item is then positioned against the parent's box
 * rather than the child's, and the button lands on top of the input. It looks
 * like a gap or flex fault and is neither.
 */
.rf-form input,
.rf-form textarea,
.rf-form button {
	box-sizing: border-box;
}

.rf-field input[type="email"],
.rf-field input[type="text"],
.rf-field textarea {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.4;
}

.rf-field textarea {
	resize: vertical;
}

/* Consent is a normal-weight inline label, not a heading. */
.rf-consent label {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	font-weight: 400;
	font-size: .95em;
}

.rf-consent input {
	margin-top: .25rem;
	flex: 0 0 auto;
}

/*
 * Hidden inputs take no part in layout. display:none does not stop a field
 * being submitted, so this is safe as well as tidy.
 */
.rf-hidden {
	display: none;
}

/*
 * Belt and braces against wpautop: any stray paragraph it leaves behind in
 * the form carries no class and no visible content, and should not occupy a
 * row in a flex layout.
 */
.rf-form > p:not([class]) {
	display: none;
}

/*
 * The promise line. Replaces the consent checkbox on signup forms, where the
 * submission is itself the affirmative act. It still has to say what the
 * visitor is agreeing to, so it sits directly under the button -- where they
 * are looking when they decide -- rather than above the field where it would
 * be read before it means anything.
 *
 * Inherits colour rather than setting one, so it stays legible on a dark band
 * and on a light page without needing to know which it is on.
 */
.rf-promise {
	margin: .6rem 0 0;
	font-size: .85em;
	opacity: .75;
	max-width: 46ch;
	flex-basis: 100%;
}

/*
 * The intro line, for a form that has to explain itself. On the homepage the
 * band already carries that copy above the form, so this stays empty there.
 */
.rf-intro {
	margin: 0 0 .75rem;
	max-width: 46ch;
	flex-basis: 100%;
}

.rf-submit button {
	padding: .6rem 1.4rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.rf-submit button:hover,
.rf-submit button:focus {
	opacity: .8;
}

/* Honeypot: hidden from people, still reachable by bots parsing the DOM.
   Not display:none, which some bots specifically skip. */
.rf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rf-notice {
	padding: .75rem 1rem;
	border-left: 4px solid currentColor;
	margin-bottom: 1rem;
}

.rf-notice--success {
	border-color: #2a7d2e;
}

.rf-notice--error {
	border-color: #a02020;
}