/*
 * Pledge form.
 *
 * Every value reads the site's Elementor global variables, so the form stays
 * on the same tokens as the rest of the design. What is here rather than in a
 * global class is the part Elementor's style schema has no property for:
 * appearance, ::placeholder, :checked and :focus-visible on real controls.
 */

:is(.nl-pledge-form, .nl-pledge-builder-form) {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	color: var(--color-ink, #3c472e);
	font-family: var(--font-sans, "Helvetica Neue", Arial, sans-serif);
	text-align: left;
}

/* ---- Commitment groups --------------------------------------------------- */

.nl-pledge-commitments {
	display: flex;
	width: 100%;
	max-width: 775px;
	flex-direction: column;
	margin-block-start: 48px;
	gap: 72px;
}

.nl-pledge-group {
	display: flex;
	gap: 16px;
}

.nl-pledge-group-body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 8px;
}

.nl-pledge-group-title {
	font-family: var(--font-display, inherit);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.nl-pledge-group-intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.25;
}

.nl-pledge-group-actions {
	display: flex;
	flex-direction: column;
	margin-block-start: 16px;
	gap: 24px;
}

.nl-pledge-action {
	display: flex;
	margin: 0;
	gap: 18px;
	font-size: 18px;
	line-height: 1.25;
}

.nl-pledge-bullet {
	flex-shrink: 0;
}

/* On step two the heading is the first thing on the page, so the margin that
   separated it from step one becomes dead space at the top. The base margin
   is kept for the no-JS fallback, where both steps render as one long form. */
.nl-pledge-form[data-nl-step="2"] .nl-pledge-heading {
	margin-block-start: 0;
}

/* The second half of the page keeps the comp's own section heading. */
.nl-pledge-heading {
	max-width: 845px;
	margin: 112px 0 0;
	font-family: var(--font-display, inherit);
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	align-self: center;
}

/* ---- Details ------------------------------------------------------------- */

.nl-pledge-details {
	display: flex;
	width: 100%;
	max-width: 987px;
	flex-direction: column;
	margin-block-start: 53px;
	gap: 32px;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-field {
	width: 100%;
	max-width: 535px;
	padding: 0 0 6px;
	border: 0;
	border-block-end: 1px solid var(--nl-field-border, var(--color-ink, #3c472e));
	border-radius: 0;
	background-color: var(--nl-field-background, transparent);
	color: var(--nl-field-color, var(--color-ink, #3c472e));
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-field::placeholder {
	color: var(--nl-field-placeholder, var(--color-field-label, rgba(60, 71, 46, 0.35)));
	opacity: 1;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-field:focus-visible {
	border-block-end-width: 2px;
	outline: 0;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-field.is-invalid {
	border-block-end-color: var(--nl-error-color, #b3261e);
}

.nl-pledge-fieldset {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 0;
	margin: 0;
	gap: 8px;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-legend {
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
}

.nl-pledge-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nl-pledge-options-indent {
	margin-inline-start: 16px;
}

.nl-pledge-option {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	cursor: pointer;
	font-size: 20px;
	line-height: 32px;
}

/*
 * Astra's customizer CSS styles `label, legend` with a 500 weight and a colour
 * of its own, and a bare element selector is enough to win wherever nothing
 * here states either. The comp draws these in ABC Repro Regular on the page
 * ink, so both are set explicitly. The legend is left alone - "I am a:" is
 * bold in the comp.
 */
.nl-pledge-option-text {
	color: var(--color-ink, #3c472e);
	font-weight: 400;
}

.nl-pledge-option-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.nl-pledge-consent {
	display: flex;
	flex-direction: column;
	margin-block-start: 56px;
	gap: 32px;
}

.nl-pledge-terms {
	display: flex;
	flex-direction: column;
	margin-inline-start: 36px;
	gap: 24px;
	font-size: 20px;
	line-height: 32px;
}

.nl-pledge-term {
	display: flex;
	margin: 0;
	gap: 16px;
}

.nl-pledge-term-marker {
	flex-shrink: 0;
}

.nl-pledge-link,
.nl-pledge-terms a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ---- The control itself -------------------------------------------------- */

:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-check {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin: 6px 0 0;
	border: 1px solid var(--nl-check-border, var(--color-checkbox, #3c472e));
	border-radius: 0;
	appearance: none;
	background-color: transparent;
	cursor: pointer;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-check:checked {
	background-color: var(--nl-check-fill, var(--color-checkbox, #3c472e));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.6' fill='none' stroke='%23faf7f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 68%;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-check:focus-visible {
	outline: 2px solid var(--nl-field-focus, var(--color-ink, #3c472e));
	outline-offset: 4px;
}

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

.nl-pledge-actions {
	display: flex;
	margin-block-start: 112px;
	gap: 24px;
	justify-content: center;
}

/* Skip sits second in the markup so that pressing Enter in a field triggers
   Submit, not Skip. This puts it back on the left where the design has it. */
/*
 * No Thanks sits above the fields and Submit below them, but Submit comes
 * first in the markup so that Enter in a text field cannot trigger the button
 * that bypasses validation. .nl-pledge-step-2 is display:contents, so these
 * are flex items of the surrounding column and order can place them.
 */
.nl-pledge-decline-actions {
	order: 1;
	margin-block-start: 84px;
}

.nl-pledge-details {
	order: 2;
}

.nl-pledge-submit-actions {
	order: 3;
}

/*
 * The two contest prizes: equal columns, each a caption over its artwork.
 *
 * The captions run to different lengths, so the figures share the wrapper's
 * rows and both pictures start on the same line. Where subgrid is missing the
 * two-row span still holds and only that cross-column alignment is lost.
 */
.nl-pledge-prizes {
	display: grid;
	width: 100%;
	max-width: 987px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto auto;
	margin-block-start: 56px;
	gap: 38px 41px;
}

.nl-pledge-prize {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 38px;
	margin: 0;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-prize-caption {
	display: flex;
	align-items: baseline;
	margin: 0;
	color: var(--color-ink, #3c472e);
	font-family: var(--font-sans, "ABC Repro", "Helvetica Neue", Arial, sans-serif);
	font-size: var(--text-body, 20px);
	font-weight: 400;
	line-height: var(--leading-body, 30px);
	text-align: start;
}

/* The bracketed number keeps its own size and its own column of space. */
.nl-pledge-prize-index {
	flex: 0 0 42px;
	font-size: var(--text-caption, 16px);
}

:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-prize-img {
	display: block;
	align-self: start;
	width: 100%;
	height: auto;
}

/* Centre both the inline button and its validation message. */
.elementor-widget-newlife-pledge-button {
	text-align: center;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 40px;
	border: 1px solid var(--nl-button-border, var(--color-ink, #3c472e));
	border-radius: 0;
	background-color: var(--nl-button-background, transparent);
	color: var(--nl-button-color, var(--color-ink, #3c472e));
	font-family: var(--font-display, inherit);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms, color 160ms;
}

:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-button:hover,
:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-button:focus-visible {
	background-color: var(--nl-button-hover-background, var(--nl-button-border, var(--color-ink, #3c472e)));
	color: var(--nl-button-hover-color, var(--color-bg, #faf7f0));
	border-color: var(--nl-button-hover-border, var(--nl-button-border, var(--color-ink, #3c472e)));
	opacity: 1;
}

.nl-pledge-builder-form .elementor-heading-title {
	color: var(--color-ink, #3c472e);
	font-size: 20px;
	line-height: 32px;
}

@media (max-width: 900px) {
	.nl-pledge-builder-form .elementor-heading-title { font-size: 16px; }
}

/* Both steps sit in the flow; the script shows one at a time. */
.nl-pledge-step-1,
.nl-pledge-step-2 {
	display: contents;
}

.nl-pledge-step-1[hidden],
.nl-pledge-step-2[hidden],
.nl-pledge-next-actions[hidden],
.nl-pledge-next-error[hidden] {
	display: none;
}

/* The screen title is hidden with the step it belongs to. */
.pledge-title[hidden],
.pledge-lede[hidden] {
	display: none !important;
}

.nl-pledge-next-actions {
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* ---- Errors and the honeypot --------------------------------------------- */

.nl-pledge-error.nl-pledge-field-error { margin-block-start: 8px; text-align: left; }
.nl-pledge-field-error[hidden] { display: none !important; }

.nl-pledge-error,
.nl-pledge-form .nl-pledge-error {
	margin: 0;
	font-family: "ABC Repro", sans-serif;
	color: var(--nl-error-color, #b3261e);
	font-size: 16px;
	line-height: 1.4;
}

.nl-pledge-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.nl-pledge-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- The download note ---------------------------------------------------- */

/*
 * Shown where Web Share cannot take a file - most desktop browsers - and the
 * card downloads instead, because a download is otherwise silent and lands in
 * a folder nobody is looking at.
 *
 * A <dialog> rather than a div of our own: the backdrop, the focus trap and Esc
 * to close all come from the browser, and the close button is a form submit, so
 * none of it needs script. The message is a div rather than a p to stay clear
 * of .entry-content p, and both inner rules carry two classes because Astra's
 * content styles outrank anything a single class can say.
 */
.nl-share-note {
	max-width: 340px;
	padding: 32px;
	border: var(--rule-thin, 1px) solid var(--color-ink, #3c472e);
	background-color: var(--color-bg, #faf7f0);
	color: var(--color-ink, #3c472e);
	font-family: var(--font-sans, "ABC Repro", "Helvetica Neue", Arial, sans-serif);
	text-align: center;
}

.nl-share-note::backdrop {
	background-color: var(--color-scene-veil, rgba(60, 71, 46, 0.9));
}

.nl-share-note .nl-share-note__text {
	font-size: var(--text-small, 18px);
	line-height: var(--leading-small, 24px);
}

.nl-share-note .nl-share-note__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-block-start: var(--space-md, 24px);
	padding: 10px 40px;
	border: var(--rule-thin, 1px) solid var(--color-ink, #3c472e);
	border-radius: 0;
	background-color: transparent;
	color: var(--color-ink, #3c472e);
	font-family: var(--font-display, inherit);
	font-size: var(--text-small, 18px);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: opacity 160ms;
}

.nl-share-note .nl-share-note__close:hover,
.nl-share-note .nl-share-note__close:focus-visible {
	opacity: var(--opacity-hover, 0.6);
}
/* ---- Tablet and phone ---------------------------------------------------- */

/* Native containers own their layout; keep Elementor's flex/grid settings. */
.nl-pledge-builder {
	display: block;
}

.nl-pledge-builder > .e-con {
	width: 100%;
}

.nl-pledge-builder-step-1[hidden],
.nl-pledge-builder-step-2[hidden],
.nl-pledge-builder-step-choice[hidden],
.nl-pledge-builder-step-3[hidden],
.nl-pledge-step-choice[hidden],
.nl-pledge-step-3[hidden],
.nl-pledge-choice-error[hidden] {
	display: none !important;
}

.nl-pledge-dialog {
	--color-ink: #FBF7F0;
	--color-bg: #3C472E;
	--color-checkbox: #FBF7F0;
	--nl-field-placeholder: #d3d0c9;
	--nl-check-mark: #3C472E;
	--nl-error-color: #ffb4ab;
	box-sizing: border-box;
	width: min(960px, calc(100vw - 32px));
	max-height: calc(100dvh - 48px);
	padding: clamp(24px, 5vw, 64px);
	border: 0;
	background: var(--color-bg, #faf7f0);
	color: var(--color-ink, #3c472e);
	font-family: var(--font-sans, "Helvetica Neue", Arial, sans-serif);
	overflow-y: auto;
}
.nl-pledge-dialog::backdrop { background: rgba(30, 39, 24, .65); }
.nl-pledge-dialog button.nl-pledge-dialog-close {
	position: absolute;
	top: 8px;
	right: 12px;
	padding: 4px 12px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 28px;
	cursor: pointer;
}
.nl-pledge-dialog button.nl-pledge-dialog-close:is(:hover, :focus, :active) {
	background: transparent;
	color: #FBF7F0;
	box-shadow: none;
}
.nl-pledge-dialog button.nl-pledge-dialog-close:focus-visible {
	outline: 2px solid #FBF7F0;
	outline-offset: 2px;
}
.nl-pledge-step-choice, .nl-pledge-step-3 { width: 100%; }
.nl-pledge-step-choice { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.nl-pledge-step-choice .nl-pledge-heading { margin: 0; }
.nl-pledge-step-3 .nl-pledge-heading { margin: 0; font-size: clamp(24px, 3vw, 36px); }
.nl-pledge-step-3 .nl-pledge-details { margin-top: 32px; }
.nl-pledge-step-3 .nl-pledge-actions { margin-top: 32px; }
.nl-pledge-compact-commitments { gap: 24px; margin-top: 32px; }

.nl-pledge-editable-field > label:not(.nl-pledge-option),
.nl-pledge-editable-field legend {
	padding: 0;
}
.nl-pledge-editable-field > label:not(.nl-pledge-option) {
	display: block;
}
.nl-pledge-editable-field label.nl-pledge-option {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.nl-pledge-editable-field label,
.nl-pledge-editable-field legend,
.nl-pledge-editable-field .nl-pledge-option-text,
.nl-pledge-editable-field .nl-pledge-option-text a {
	color: var(--nl-field-color, var(--color-ink, #3c472e));
}
.nl-pledge-editable-field .nl-pledge-option { position: relative; }
.nl-pledge-check-mark {
	display: none;
	position: absolute;
	top: 6px;
	left: 0;
	width: 20px;
	height: 20px;
	pointer-events: none;
	background: var(--nl-check-mark, #FBF7F0);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 68% no-repeat;
}
.nl-pledge-editable-field input.nl-pledge-check:checked { background-image: none; }
.nl-pledge-editable-field input:checked + .nl-pledge-check-mark { display: block; }
:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-field:focus-visible {
	border-block-end-color: var(--nl-field-focus, var(--nl-field-border, var(--color-ink, #3c472e)));
}

/* The same palette is visible in the Elementor canvas and the live dialog. */
.nl-pledge-builder-step-3,
.nl-pledge-step-3 {
	--color-ink: #FBF7F0;
	--color-bg: #3C472E;
	--color-checkbox: #FBF7F0;
	--nl-field-placeholder: #d3d0c9;
	--nl-check-mark: #3C472E;
	--nl-error-color: #ffb4ab;
	background-color: #3C472E;
	color: #FBF7F0;
}
dialog.nl-pledge-dialog .elementor-element.elementor-widget-heading .elementor-heading-title,
.nl-pledge-builder-step-3 .elementor-element.elementor-widget-heading .elementor-heading-title {
	color: #FBF7F0;
}
.nl-pledge-dialog .nl-pledge-builder-step-3 .elementor-element.elementor-widget-text-editor,
.nl-pledge-builder-step-3 .elementor-element.elementor-widget-text-editor {
	color: #FBF7F0;
}
.nl-pledge-dialog a,
.nl-pledge-builder-step-3 .elementor-widget-text-editor a { color: inherit; }
.nl-pledge-step-3 .nl-pledge-heading,
.nl-pledge-step-3 label,
.nl-pledge-step-3 legend { color: var(--nl-field-color, #FBF7F0); }
.nl-pledge-step-3 input.nl-pledge-check:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.4 8.6 11 1.6' fill='none' stroke='%233C472E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.elementor-editor-active .nl-pledge-next-actions[hidden] {
	display: flex;
}

.elementor-editor-active .nl-pledge-next-error[hidden] {
	display: none;
}

.elementor-editor-active .nl-pledge-builder-form input.nl-pledge-field {
	width: 100%;
	background: var(--nl-field-background, transparent);
	color: var(--nl-field-color, var(--color-ink, #3c472e));
}

@media (max-width: 1280px) {
	.nl-pledge-commitments { gap: 56px; }
	.nl-pledge-details { max-width: 760px; margin-block-start: 48px; }
	.nl-pledge-heading { font-size: 34px; margin-block-start: 80px; }
	.nl-pledge-actions { margin-block-start: 80px; }
	.nl-pledge-prizes { max-width: 760px; margin-block-start: 48px; gap: 32px; }
	.nl-pledge-prize { row-gap: 32px; }
	.nl-pledge-prize-index { flex-basis: 34px; }
	.nl-pledge-decline-actions { margin-block-start: 64px; }
}

@media (max-width: 900px) {
	.nl-pledge-check-mark { width: 14px; height: 14px; }
	.nl-pledge-commitments { max-width: 100%; margin-block-start: 56px; gap: 56px; }
	.nl-pledge-group-title { font-size: 16px; }
	.nl-pledge-group-intro,
	.nl-pledge-action { font-size: 14px; }
	.nl-pledge-group-actions { gap: 20px; }
	.nl-pledge-details { max-width: 100%; margin-block-start: 40px; gap: 24px; }
	.nl-pledge-heading { font-size: 24px; margin-block-start: 72px; max-width: 100%; }
	:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-field,
	:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-legend,
	.nl-pledge-option,
	.nl-pledge-terms { font-size: 16px; }
	:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-field { max-width: 100%; }
	:is(.nl-pledge-form, .nl-pledge-builder-form) input.nl-pledge-check { width: 14px; height: 14px; }
	.nl-pledge-consent { margin-block-start: 40px; gap: 24px; }
	.nl-pledge-terms { margin-inline-start: 30px; gap: 20px; }
	.nl-pledge-actions { margin-block-start: 72px; flex-wrap: wrap; }
	.nl-pledge-prizes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; justify-items: center; max-width: 100%; margin-block-start: 40px; gap: 48px; }
	.nl-pledge-prize { grid-row: auto; grid-template-rows: auto auto; width: 100%; max-width: 420px; row-gap: 24px; }
	:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-prize-caption { font-size: 16px; line-height: 22px; }
	.nl-pledge-prize-index { flex-basis: 28px; }
	.nl-pledge-decline-actions { margin-block-start: 48px; }
	:is(.nl-pledge-form, .nl-pledge-builder-form) .nl-pledge-button { padding: 8px 16px; font-size: 14px; }
}