/*
 * Styling pass (item 1) — reproduces the revised staging signup.php's
 * visual system: Raleway 14px form typography (letter-spacing 0.8px,
 * #282828 text), the Bootstrap-style two-column .row/.col-md-6 field grid
 * (stacks to one column below 992px, matching Bootstrap 3.3.2's own "md"
 * breakpoint), 34px-tall inputs/selects (padding 6px 12px, 1px solid #ccc,
 * no border-radius, inset shadow), the #f92601 brand red, and the white
 * "formSection" card (padding + 10px border-radius).
 *
 * Values below are the ACTUAL computed styles read live off
 * heart-saverinstitute.com/secure/signup.php via getComputedStyle()
 * (Bootstrap 3.3.2 CDN defaults + that site's own Mycss/design/style.css
 * layered together, as actually rendered) — not eyeballed from source or
 * guessed. Everything here is original CSS written for this plugin; nothing
 * is hotlinked from /secure/ or any other external host. Scoped entirely
 * under .hsi-nr-form so it can't bleed into the WP theme or any other
 * plugin's styles (including hsi-portal-core's, which this pass does not
 * touch).
 */

.hsi-nr-form {
	max-width: 100%;
	margin: 1.5em auto;
	background: #fff;
	padding: 0;
	border-radius: 10px;
	box-sizing: border-box;
}

.hsi-nr-form *,
.hsi-nr-form *::before,
.hsi-nr-form *::after {
	box-sizing: border-box;
}

.hsi-nr-form,
.hsi-nr-form input,
.hsi-nr-form select,
.hsi-nr-form button,
.hsi-nr-form label,
.hsi-nr-form legend {
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
	color: #282828;
	letter-spacing: 0.8px;
	line-height: 1.5;
}

/*
 * Theme-float containment (live-diagnosed 2026-08-05, client-approved): the
 * theme floats the page h1 left at 710px wide, so everything after it — the
 * whole form, and the success/error banner after a submit — flowed into the
 * ~30px sliver beside it (one-character-wide fields; banner overlapping the
 * title). clear:both drops the form below the float, fixing both at once.
 */
.hsi-nr-form {
	clear: both;
}

/*
 * Align the theme's page title with the form (client request 2026-08-05):
 * the theme gives the h1 20px padding-left the form doesn't have. Scoped via
 * :has() to the column that contains this form so no other page's headings
 * are touched.
 */
div:has(> .hsi-nr-form) > h1 {
	padding-left: 0;
}

.hsi-nr-form__banner {
	padding: 0.75em 1em;
	margin-bottom: 1.25em;
	margin-top: 40px;
	border-radius: 4px;
	border: 1px solid transparent;
	/* The banner renders BEFORE the .hsi-nr-form wrapper, so it needs its own
	 * escape from the theme's floated h1 (live-verified 2026-08-05 — the
	 * wrapper's clear alone left the h1 overlapping this banner). */
	clear: both;
}

.hsi-nr-form__banner--success {
	background: #e6f4ea;
	border-color: #b7dfc2;
	color: #1e4620;
}

.hsi-nr-form__banner--error {
	background: #fdecea;
	border-color: #f3c2bd;
	color: #611a15;
}

.hsi-nr-form__banner ul {
	margin: 0.5em 0 0;
	padding-left: 1.25em;
}

/* Field grid — mirrors signup.php's .row.form-group + .col-md-6 pairs. */

.hsi-nr-form__row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 15px;
}

.hsi-nr-form__row > .hsi-nr-form__field {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 0;
}

@media (max-width: 991px) {
	.hsi-nr-form__row {
		flex-direction: column;
	}

	.hsi-nr-form__row > .hsi-nr-form__field {
		flex: 1 1 100%;
	}

	.hsi-nr-form__row > .hsi-nr-form__field:not(:last-child) {
		margin-bottom: 15px;
	}
}

.hsi-nr-form__field {
	margin-bottom: 15px;
}

.hsi-nr-form__field label,
.hsi-nr-form__field--radio legend {
	display: block;
	font-weight: 600;
	margin-bottom: 5px;
}

.hsi-nr-form__field input[type='text'],
.hsi-nr-form__field input[type='email'],
.hsi-nr-form__field input[type='number'],
.hsi-nr-form__field input[type='date'],
.hsi-nr-form__field select {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 0;
	background-color: #fff;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.hsi-nr-form__field input[type='text']:focus,
.hsi-nr-form__field input[type='email']:focus,
.hsi-nr-form__field input[type='number']:focus,
.hsi-nr-form__field input[type='date']:focus,
.hsi-nr-form__field select:focus {
	border-color: #66afe9;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.hsi-nr-form__field--radio {
	border: 0;
	padding: 0;
	margin-bottom: 15px;
}

.hsi-nr-form__radio-option {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: normal;
	margin-right: 1.5em;
}

.hsi-nr-form__field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: normal;
	font-size: 10px;
}

/*
 * The consent copy is a single flex item so its two inline links stay in
 * the sentence. Without this wrapper each <a> became its own flex item and
 * broke onto its own line. flex: 1 lets the paragraph take the remaining
 * width beside the checkbox; min-width: 0 lets it wrap normally instead of
 * being forced to its longest word.
 */
.hsi-nr-form__field--checkbox .hsi-nr-form__consent-text {
	flex: 1;
	min-width: 0;
	/* Client-specified values (2026-08-05). */
	line-height: 1.2;
	font-size: 1.2em;
}

/*
 * Themes commonly set an absolute font-size on anchors, which made these
 * two links render several times larger than the 10px consent copy around
 * them. Force them to match their surrounding text.
 */
.hsi-nr-form__field--checkbox .hsi-nr-form__consent-text a {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	text-decoration: underline;
}

.hsi-nr-form__required {
	color: #f92601;
}

.hsi-nr-form__field--submit {
	margin-bottom: 0;
}

.hsi-nr-form__field--submit button {
	display: inline-block;
	align-self: flex-start;
	height: 34px;
	padding: 6px 24px;
	font-weight: 600;
	color: #fff;
	background-color: #f92601;
	border: 1px solid #f92601;
	border-radius: 0;
	cursor: pointer;
	transition: all 0.35s linear;
}

.hsi-nr-form__field--submit button:hover,
.hsi-nr-form__field--submit button:focus {
	color: #f92601;
	background: none!important;
	outline: 0;
	transition: all 0.35s linear;
	border:1px solid #f92601;
}