/* Forms: GiveWP (the donation form) and Gravity Forms (contact, pledge,
   share your story), styled to match the site. The plugins' own
   stylesheets are not loaded (inc/assets.php), so this covers their
   layout and hidden parts too. Then the Donate page. */

/* ============================================================
   SHARED: fields, choices and buttons
   ============================================================ */
:is(.give-form-wrap, .gform_wrapper) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="password"], select, textarea) {
	width: 100%;
	min-height: 54px;
	padding: 12px 16px;
	border: 2px solid var(--rule-mid);
	border-radius: 10px;
	background: #fff;
	font: 500 1.05rem/1.4 var(--sans);
	color: var(--ink);
	transition: border-color 0.2s, box-shadow 0.2s;
}

:is(.give-form-wrap, .gform_wrapper) textarea { min-height: 140px; resize: vertical; }
:is(.give-form-wrap, .gform_wrapper) :is(input, select, textarea):hover { border-color: var(--forest); }
:is(.give-form-wrap, .gform_wrapper) :is(input, select, textarea):focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 4px var(--lime); }
:is(.give-form-wrap, .gform_wrapper) ::placeholder { color: rgb(19 38 26 / 0.45); }
:is(.give-form-wrap, .gform_wrapper) :is(input[type="checkbox"], input[type="radio"]) { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--forest); cursor: pointer; }
:is(.give-form-wrap, .gform_wrapper) fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
/* No word left alone: labels, legends and buttons balance their lines. */
:is(.give-form-wrap, .gform_wrapper) :is(label, legend, button, .give-label, .gfield_label) { text-wrap: balance; }
@media (max-width: 520px) { :is(.give-submit-button-wrap .give-submit, .gform_wrapper .gform_button) { padding-inline: 16px; white-space: nowrap; } }

/* ============================================================
   GIVEWP: the donation form
   ============================================================ */
.give-form-wrap { color: var(--ink); }
.give-hidden, .give-honeypot, .give-tooltip, .give-loading-text, .give-loading-animation { display: none !important; }
.give-form { display: grid; gap: 28px; margin: 0; }
.give-form p { margin: 0; }

/* Staging only: the test mode notice */
#give_error_test_mode { margin: 0 0 20px; padding: 10px 14px; border-radius: 8px; background: var(--paper-2); font-size: 0.88rem; color: var(--slate); }
#give_error_test_mode p { margin: 0; }

/* The amount, large, then the amounts as buttons */
.give-total-wrap { order: 0; }
.give-donation-amount { display: flex; align-items: center; gap: 4px; padding: 6px 18px; border: 2px solid var(--forest); border-radius: 14px; background: #fff; }
.give-donation-amount:focus-within { box-shadow: 0 0 0 4px var(--lime); }
.give-currency-symbol { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: var(--forest); }
.give-form-wrap .give-donation-amount input.give-amount-top { min-height: 0; padding: 4px 0; border: 0; box-shadow: none; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; color: var(--forest); }

.give-donation-levels-wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.give-donation-level-btn {
	width: 100%;
	min-height: 56px;
	padding: 8px 12px;
	border: 2px solid var(--forest);
	border-radius: 10px;
	background: #fff;
	font: 800 1.15rem var(--sans);
	color: var(--forest);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.give-donation-level-btn:hover { background: var(--paper-green); }
@media (max-width: 520px) { .give-donation-levels-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.give-donation-level-btn.give-default-level { background: var(--forest); color: #fff; }
.give-donation-level-btn:focus-visible { outline: 3px solid var(--give); outline-offset: 2px; }

/* Section headings: how to give, your details */
.give-form legend, .give-payment-mode-label { display: block; width: 100%; margin: 0 0 14px; padding: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--forest); }

/* How would you like to give? Each way as a card */
#give-gateway-radio-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
#give-gateway-radio-list li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; border: 2px solid var(--rule-mid); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
#give-gateway-radio-list li:hover { border-color: var(--forest); }
#give-gateway-radio-list li.give-gateway-option-selected { border-color: var(--forest); background: var(--paper-green); }
#give-gateway-radio-list label { flex: 1; font-weight: 700; color: var(--forest); cursor: pointer; }
/* The whole card picks the method. */
#give-gateway-radio-list label::after { content: ""; position: absolute; inset: 0; }

/* Your details */
#give_checkout_user_info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#give_checkout_user_info > legend, #give_checkout_user_info .form-row-wide, #give_checkout_user_info > :not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
.give-label { display: block; margin: 0 0 8px; font-weight: 700; color: var(--forest); }
.give-required-indicator { margin-left: 2px; color: var(--give); }
#give-anonymous-donation-wrap .give-label { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 600; color: var(--ink); cursor: pointer; }
@media (max-width: 520px) { #give_checkout_user_info { grid-template-columns: minmax(0, 1fr); } }

/* Offline: the instructions shown when "By cheque or bank transfer" is chosen */
#give_offline_payment_info, .give-offline-checkout-notes, #give-offline-payment-info { padding: 18px 20px; border-left: 4px solid var(--lime); border-radius: 0 10px 10px 0; background: var(--paper-green); color: var(--ink); }
:is(#give_offline_payment_info, #give-offline-payment-info) p + p { margin-top: 0.8em; }

/* Total and the button */
.give-donation-submit { display: grid; gap: 16px; }
#give-final-total-wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.give-donation-total-label { font-weight: 700; color: var(--slate); }
.give-final-total-amount { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--forest); }
.give-submit-button-wrap .give-submit {
	width: 100%;
	min-height: 60px;
	padding: 14px 24px;
	border: 0;
	border-radius: 10px;
	background: var(--give);
	font: 800 1.15rem var(--sans);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}
.give-submit-button-wrap .give-submit:hover { background: var(--give-deep); }
.give-submit-button-wrap .give-submit:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }

/* Errors and the thank-you */
.give_errors, .give_error:not(#give_error_test_mode) { padding: 14px 16px; border-left: 4px solid var(--give); border-radius: 0 10px 10px 0; background: #fbe9e4; color: var(--ink); }
.give_errors p, .give_error p { margin: 0; }
.give-form-wrap .give-input.error, .give-form-wrap .give-input[aria-invalid="true"] { border-color: var(--give); }

/* ============================================================
   GRAVITY FORMS: contact, pledge, share your story
   ============================================================ */
.gform_wrapper { margin: 0; color: var(--ink); }
.gform_validation_container, .gform_hidden, .gfield--type-hidden, .gfield_visibility_hidden, .gform_ajax_spinner, .gform-loader { display: none !important; }
.gform_wrapper form { margin: 0; }
.gform_fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }

.gform_wrapper .gfield_label { display: block; margin: 0 0 8px; padding: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--forest); }
.gform_wrapper legend.gfield_label { margin-bottom: 10px; }
.gform_wrapper .gfield_required_text { margin-left: 6px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0; color: var(--slate); }
.gform_wrapper .gform-field-label--type-sub { display: block; margin: 0 0 6px; font-size: 0.88rem; font-weight: 600; color: var(--slate); }
.gform_wrapper .gfield_description { margin: 0 0 10px; font-size: 0.95rem; color: var(--slate); }
.gform_wrapper .gfield_description a { font-weight: 700; color: var(--forest); text-decoration-color: var(--leaf); text-underline-offset: 3px; }

/* Names and addresses: two columns, full-width lines across both */
.gform_wrapper .gform-grid-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gform_wrapper .gform-grid-row > .ginput_full { grid-column: 1 / -1; }
@media (max-width: 520px) { .gform_wrapper .gform-grid-row { grid-template-columns: minmax(0, 1fr); } }

/* Checkboxes and radios */
.gform_wrapper :is(.gfield_checkbox, .gfield_radio) { display: grid; gap: 10px; }
.gform_wrapper .gf_list_2col :is(.gfield_checkbox, .gfield_radio) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); }
.gform_wrapper .gchoice { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border: 2px solid var(--rule-mid); border-radius: 12px; background: #fff; }
.gform_wrapper .gchoice:has(input:checked) { border-color: var(--forest); background: var(--paper-green); }
.gform_wrapper .gchoice label { flex: 1; margin: 0; font-weight: 700; color: var(--forest); cursor: pointer; }

/* A statement in the form (such as the pledge): large, beside a lime rule */
.gform_wrapper .gfield--type-html { padding: 4px 0 4px 22px; border-left: 6px solid var(--lime); font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--forest); text-wrap: pretty; }
.gform_wrapper .gfield--type-html p { margin: 0 0 0.6em; }
.gform_wrapper .gfield--type-html p:last-child { margin-bottom: 0; }

/* The button */
.gform_wrapper .gform_footer { margin: 32px 0 0; padding: 0; }
.gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 14px 32px;
	border: 0;
	border-radius: 10px;
	background: var(--forest);
	font: 800 1.1rem var(--sans);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}
.gform_wrapper .gform_button:hover { background: var(--leaf); }
.gform_wrapper .gform_button:focus-visible { outline: 3px solid var(--give); outline-offset: 3px; }
@media (max-width: 520px) { .gform_wrapper .gform_button { width: 100%; } }

/* Errors and the thank-you */
.gform_wrapper .gform_validation_errors { margin: 0 0 24px; padding: 16px 18px; border-left: 4px solid var(--give); border-radius: 0 10px 10px 0; background: #fbe9e4; }
.gform_wrapper .gform_validation_errors h2 { margin: 0; font-size: 1.05rem; color: var(--ink); }
.gform_wrapper .gfield_error :is(input, select, textarea) { border-color: var(--give); }
.gform_wrapper .validation_message { margin-top: 8px; font-size: 0.95rem; font-weight: 700; color: var(--give-deep); }
.gform_confirmation_message { padding: 22px 24px; border-left: 6px solid var(--lime); border-radius: 0 12px 12px 0; background: var(--paper-green); font-size: 1.2rem; font-weight: 700; color: var(--forest); }

/* In the main text of a page, forms keep their own spacing. */
.prose .gform_wrapper, .prose .give-form-wrap { margin: 2em 0; }
.prose :is(.gform_wrapper, .give-form-wrap) :is(ul, ol) { padding-left: 0; }

/* ============================================================
   THE DONATE PAGE
   ============================================================ */
.give-top { padding: calc(var(--island) + clamp(40px, 6vw, 96px)) 0 clamp(80px, 9vw, 150px); background: var(--leaf); color: #fff; }
.give-top-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.give-words h1 { font-size: var(--chap); color: #fff; }
.give-words .dot { color: var(--lime); }
.give-words .lead { margin-top: clamp(22px, 2.4vw, 32px); color: #fff; }
.give-why { max-width: 46ch; margin-top: clamp(24px, 3vw, 40px); font-size: 1.12rem; line-height: 1.65; color: rgb(255 255 255 / 0.92); }
.give-why p { margin: 0 0 1em; }
.give-why :is(ul, ol) { margin: 0 0 1em; padding: 0; list-style: none; }
.give-why li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid rgb(255 255 255 / 0.25); }
.give-why li::before { content: ""; position: absolute; top: 20px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); }
.give-why strong { color: #fff; }
.give-why a { font-weight: 700; color: #fff; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.give-card { padding: clamp(24px, 3.4vw, 48px); border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -40px rgb(10 24 15 / 0.6); }
.give-card :focus-visible { outline-color: var(--give); }
.give-card-note { margin: 0; color: var(--slate); }
/* Join, before membership opens online: a short note and a button */
.join-soon h2 { font-size: clamp(min(1.7rem, 7.4vw), 2.4vw, 2.2rem); line-height: 1.08; letter-spacing: var(--ls-mid); color: var(--forest); }
.join-soon > p:not(.give-card-note) { margin: 16px 0 28px; font-size: 1.08rem; color: var(--slate); }
.join-soon .give-card-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule-mid); font-size: 0.92rem; }
@media (max-width: 1000px) { .give-top-in { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   FORM PAGES (Have your say, Share your story): the Donate layout
   on the section's colour
   ============================================================ */
.form-top { background: var(--sec-bg); color: var(--sec-ink); }
/* Sized for longer titles ("Have your say") in half the width. */
.form-top .form-word { font-size: clamp(min(2.6rem, 11vw), 5vw, 5rem); line-height: 0.95; letter-spacing: var(--ls-huge); color: var(--sec-head); }
.form-top .dot { color: var(--sec-dot); }
.form-top .give-words .lead { color: var(--sec-head); }
.form-top .give-why { color: var(--sec-muted); }
.form-top .give-why :is(strong, a) { color: var(--sec-head); }
.form-top .give-why li { border-top-color: color-mix(in srgb, currentColor 25%, transparent); }

/* A pledge or statement in the text, read before the form: large, beside
   a lime rule */
.give-why blockquote { margin: 0 0 1.4em; padding: 4px 0 4px 22px; border-left: 6px solid var(--lime); }
.give-why blockquote p { margin: 0; font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--sec-head, #fff); text-wrap: pretty; }
.give-why blockquote cite { display: block; margin-top: 12px; font-size: 0.95rem; font-style: normal; font-weight: 650; color: var(--sec-muted, rgb(255 255 255 / 0.8)); }

/* Contact: the ways to reach us, and the note, on the section's colour */
.reach { display: grid; gap: 0; margin: clamp(28px, 3vw, 40px) 0 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.reach > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.reach dt { font-weight: 800; color: var(--sec-head); }
.reach dd { margin: 0; color: var(--sec-ink); }
.reach a { font-weight: 700; color: var(--sec-head); text-decoration-color: var(--sec-dot); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.reach-note { max-width: 46ch; margin: 24px 0 0; padding: 14px 18px; border-left: 4px solid var(--sec-dot); border-radius: 0 10px 10px 0; background: color-mix(in srgb, currentColor 7%, transparent); color: var(--sec-ink); }
@media (max-width: 420px) { .reach > div { grid-template-columns: minmax(0, 1fr); } }