/* OC native fundraising template (2 column). No ENGrid.

   Mobile first: base styles are the phone, two-column is the 900px
   enhancement. Do not push the first control below the fold at 390x844.
   Targets only our `.ocd-*` wrappers and the `.en__*` classes EN emits. */

:root {
	/* Color */
	--ocd-midnight: #001a2a;
	--ocd-navy: #0d3669;
	--ocd-kelp: #03695d;
	--ocd-mint: #82d99f;
	--ocd-steel: #6c8fa6;
	--ocd-sky: #007eb3;

	/* Sky is 4.31:1 on off-white, an AA fail. This is 5.23:1. */
	--ocd-link: #00709f;

	--ocd-white: #fff;
	--ocd-offwhite: #f7faf8;
	--ocd-error: #b3261e;

	/* Frequency message tints. Navy on both clears AA comfortably
	   (11.3:1 yellow, 10.8:1 green); the link colour clears it too. */
	--ocd-notice-warm: #fff8e1;
	--ocd-notice-warm-edge: #e0b400;
	--ocd-notice-cool: #eaf5ef;
	--ocd-notice-cool-edge: #82d99f;

	/* Type. Inter must be requested, not assumed - see brand-tokens doc.
	   Regan chose Inter over Roboto on 2026-09-08; js/vgs-fields.js duplicates
	   this value by hand and has to change with it. */
	--ocd-font-heading: "Geologica", system-ui, sans-serif;
	--ocd-font-body: "Inter", system-ui, sans-serif;

	/* Fluid type */
	--ocd-h1: clamp(1.875rem, 1.25rem + 3vw, 4rem);
	--ocd-h2: clamp(1.375rem, 1.15rem + 0.9vw, 1.8rem);
	--ocd-h4: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
	--ocd-body: 1rem;
	--ocd-label: 1.125rem;
	--ocd-input: 1.1rem;
	--ocd-submit: clamp(1.25rem, 1rem + 1.4vw, 2rem);

	/* Spacing */
	--ocd-space-xs: 0.5rem;
	--ocd-space-sm: 0.75rem;
	--ocd-space-md: 1.25rem;
	--ocd-space-lg: 2rem;
	--ocd-space-xl: 3rem;

	/* Controls */
	--ocd-radius-input: 12px;
	--ocd-radius-media: 50px;
	--ocd-media-inset: 2rem;
	--ocd-radius-pill: 50px;
	--ocd-border-input: 2px solid var(--ocd-steel);
	--ocd-border-amount: 3px solid var(--ocd-steel);
	--ocd-focus: 3px solid var(--ocd-sky);

	/* Layout */
	--ocd-form-max: 840px;
	--ocd-gutter: 1.25rem;
	--ocd-gutter-wide: clamp(2rem, 4vw, 4rem);
	--ocd-banner-height: 140px;
}

/* 2. Reset, only as far as we need it */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body.ocd {
	margin: 0;
	font-family: var(--ocd-font-body);
	font-size: var(--ocd-body);
	line-height: 1.5;
	color: var(--ocd-navy);
	-webkit-text-size-adjust: 100%;

	/* Flat off-white on phones, not the gradient. */
	background: var(--ocd-offwhite);
}

.ocd h1,
.ocd h2,
.ocd h3,
.ocd h4,
.ocd h5 {
	font-family: var(--ocd-font-heading);
	font-weight: 700;
	color: var(--ocd-midnight);
	margin: 0 0 var(--ocd-space-sm);
}

.ocd h1 {
	font-size: var(--ocd-h1);
	line-height: 1.12;
	letter-spacing: -0.03em;
}
.ocd h2 { font-size: var(--ocd-h2); line-height: 1.3; }
.ocd h4 { font-size: var(--ocd-h4); }

.ocd h5 {
	/* Subhead: body font on purpose. */
	font-family: var(--ocd-font-body);
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--ocd-navy);
}

.ocd p { margin: 0 0 var(--ocd-space-md); }
.ocd p:last-child { margin-bottom: 0; }

.ocd a { color: var(--ocd-link); }

.ocd img { max-width: 100%; height: auto; }

/* One focus treatment; :focus-visible only. */
.ocd :focus-visible {
	outline: var(--ocd-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.ocd .ocd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Skip link, hidden until focused */
.ocd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--ocd-white);
	color: var(--ocd-navy);
	font-weight: 700;
}
.ocd-skip:focus { left: 0; }

/* 3. Page shell and the two-column layout */

.ocd-page {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"media"
		"header"
		"title"
		"intro"
		"form"
		"footer";
	min-height: 100vh;
}

.ocd-media  { grid-area: media; }
.ocd-header { grid-area: header; }
.ocd-title  { grid-area: title; }
.ocd-form   { grid-area: form; }
.ocd-intro  { grid-area: intro; }
.ocd-footer { grid-area: footer; }

.ocd-header,
.ocd-title,
.ocd-form,
.ocd-intro,
.ocd-footer {
	padding-inline: var(--ocd-gutter);
}

.ocd-header {
	padding-top: var(--ocd-space-md);
	padding-bottom: var(--ocd-space-sm);
}

.ocd-title { padding-bottom: var(--ocd-space-md); }

/* Above the form at every width (OC, October 2026 testing doc; this reverses
   the 2026-08-07 phone reorder). Sized like the field labels, midnight, 500. */
.ocd-intro {
	padding-bottom: var(--ocd-space-md);
	color: var(--ocd-midnight);
	font-size: var(--ocd-label);
	font-weight: 500;
}

/* Logo */
.ocd-logo img {
	display: block;
	width: 160px;
	max-width: 45vw;
	height: auto;
}

/* Two column, 900px and up. Image column is sticky and one viewport tall. */

@media (min-width: 900px) {
	.ocd-page {
		grid-template-columns: 7fr 5fr;
		grid-template-areas:
			"header media"
			"title  media"
			"intro  media"
			"form   media"
			"footer media";
		column-gap: 0;

		background: linear-gradient(180deg, var(--ocd-mint) 0%, var(--ocd-kelp) 100%);
	}

	/* Sky is 1.46:1 on the gradient, so links out here go navy. */
	.ocd-title a,
	.ocd-intro a {
		color: var(--ocd-navy);
		text-decoration-thickness: 2px;
	}

	.ocd-header,
	.ocd-title,
	.ocd-form,
	.ocd-intro,
	.ocd-footer {
		padding-inline: var(--ocd-gutter-wide);
		max-width: calc(var(--ocd-form-max) + 8rem);
		width: 100%;
	}

	.ocd-header { padding-top: var(--ocd-space-lg); }
	.ocd-logo img { width: 220px; max-width: none; }
	.ocd-footer { padding-bottom: var(--ocd-space-xl); }
}

/* 4. The image column */

.ocd-media {
	position: relative;
	overflow: hidden;
	background: var(--ocd-steel);
	/* Inset with margin rather than padding so the radius clips the image. */
	margin: var(--ocd-media-inset);
	border-radius: var(--ocd-radius-media);
}

.ocd-media__figure {
	margin: 0;
	height: 100%;
}

.ocd-media__figure img {
	display: block;
	width: 100%;
	height: var(--ocd-banner-height);
	object-fit: cover;
	object-position: center 40%;
}

/* Equal gaps (OC, October 2026): page edge to card, card to image, and image
   to page edge all read as one gutter. The form column's own right padding is
   the middle gap, so the image takes no left margin and a right margin the
   same width. Keeps the floating, rounded image OC wants. */
@media (min-width: 900px) {
	.ocd-media {
		position: sticky;
		top: var(--ocd-media-inset);
		align-self: start;
		height: calc(100vh - (var(--ocd-media-inset) * 2));
		margin-left: 0;
		margin-right: var(--ocd-gutter-wide);
	}
	.ocd-media__figure img { height: 100%; }
}

/* Photo credit */
.ocd-credit {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
}

.ocd-credit__toggle {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 26, 42, 0.6);
	color: var(--ocd-white);
	font-family: var(--ocd-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(2px);
}

.ocd-credit__toggle:hover { background: rgba(0, 26, 42, 0.85); }

.ocd-credit__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.5rem);
	width: max-content;
	max-width: min(280px, 70vw);
	padding: 0.625rem 0.75rem;
	border-radius: 8px;
	background: rgba(0, 26, 42, 0.92);
	color: var(--ocd-white);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.ocd-credit__panel[hidden] { display: none; }

/* Hover and keyboard focus open it too (OC expected a hover, October 2026).
   Hover only where there is a real pointer, so a tap still toggles on phones.
   WCAG 1.4.13: a bridge keeps the panel open as the pointer moves onto it,
   and Escape closes it (block 7). */
@media (hover: hover) {
	.ocd-credit:not([data-ocd-dismissed]):hover .ocd-credit__panel[hidden] {
		display: block;
	}
}
.ocd-credit:not([data-ocd-dismissed]):has(:focus-visible) .ocd-credit__panel[hidden] {
	display: block;
}
.ocd-credit__panel::after {
	content: "";
	position: absolute;
	inset: 100% 0 auto;
	height: 0.5rem;
}
.ocd-credit__panel p { margin: 0; }
.ocd-credit__panel p + p { margin-top: 0.25rem; opacity: 0.8; }

/* Postal code help (template.js block 8). Same open rules as the credit. */
.ocd .ocd-has-tip > .en__field__label { display: inline-block; }

.ocd-tip {
	position: relative;
	display: inline-block;
	margin-left: 0.5rem;
	vertical-align: middle;
}

.ocd-tip__toggle {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid var(--ocd-navy);
	border-radius: 50%;
	background: var(--ocd-white);
	color: var(--ocd-navy);
	font-family: var(--ocd-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.ocd-tip__panel {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.5rem);
	z-index: 3;
	width: max-content;
	max-width: min(260px, 70vw);
	padding: 0.625rem 0.75rem;
	border-radius: 8px;
	background: rgba(0, 26, 42, 0.92);
	color: var(--ocd-white);
	font-size: 0.875rem;
	line-height: 1.4;
	transform: translateX(-50%);
}

.ocd-tip__panel[hidden] { display: none; }

@media (hover: hover) {
	.ocd-tip:not([data-ocd-dismissed]):hover .ocd-tip__panel[hidden] { display: block; }
}
.ocd-tip:not([data-ocd-dismissed]):has(:focus-visible) .ocd-tip__panel[hidden] { display: block; }

.ocd-tip__panel::after {
	content: "";
	position: absolute;
	inset: 100% 0 auto;
	height: 0.5rem;
}

/* 5. The form card */

.ocd-form { padding-bottom: var(--ocd-space-lg); }

.ocd-form__inner {
	/* Mobile: no card. Transparent, no padding, no radius, no shadow. */
	background: none;
	padding: 0;
}

@media (min-width: 900px) {
	.ocd-form__inner {
		background: var(--ocd-white);
		padding: var(--ocd-space-lg);
		border-radius: 16px;
		box-shadow: 0 2px 16px rgba(0, 26, 42, 0.12);
	}
}

/* Space formblocks; do not decorate them. */
.ocd .en__component--formblock {
	margin: 0 0 var(--ocd-space-lg);
	background: none;
}

.ocd .en__component--formblock:last-child { margin-bottom: 0; }

/* EN's own hide mechanism. */
.ocd .en-target-hidden { display: none !important; }

/* 6. Fields */

/* `padding-bottom: 0` is doing the real work here, not the margin.
   EN's enPage.css pads the field and its label and we had never overridden
   either: `.en__captcha, .en__field { padding-bottom: 18px }` plus
   `.en__field__helpText, .en__field__label { padding: 6px 0 }`. That is 30px
   per field, stacked on top of our own margins, and with 18 visible fields it
   was most of the white space Regan asked us to cut twice (2026-08-25 and
   2026-09-08). Measured on live 196739: 4,394px -> 3,838px at 390x844, the
   same 556px on desktop.

   The margin is the only gap between fields now, so read it as the field
   rhythm. It is a literal value rather than `--ocd-space-md` on purpose: that
   token also spaces the footer and the seals, which should not tighten with
   the form. */
.ocd .en__field {
	padding-bottom: 0;
	margin-bottom: 1rem;
}

/* EN's rule is `.en__captcha, .en__field { padding-bottom: 18px }` - the same
   declaration, so the captcha needs the same treatment. It is a real reCAPTCHA
   v2 checkbox (a 304x78 iframe), not decoration, so only the padding goes. */
.ocd .en__captcha {
	padding-bottom: 0;
}
.ocd .en__field:last-child { margin-bottom: 0; }

.ocd .en__field__label {
	display: block;
	padding: 0; /* EN ships 6px 0; see above */
	margin-bottom: var(--ocd-space-xs);
	font-size: var(--ocd-label);
	font-weight: 400;
	color: var(--ocd-navy);
}

/* Required marker comes from EN's `en__mandatory` class, not from an asterisk
   typed into the label (OC, October 2026: the address fields were required but
   unmarked). Labels in EN should carry no "*" of their own. Direct child only,
   so radio and checkbox option labels never get one. */
.ocd .en__mandatory > .en__field__label::after {
	content: "*";
}

/* EN ships `.en__field__element` as inline-block, so it shrink-to-fits around
   the input's intrinsic size (a text input's default `size` is ~195px, a select
   is as wide as its longest option). A `width: 100%` on the input then resolves
   against that shrunken box, not the form. Blocking the wrapper is what makes
   fields fill the form. Radio and splitselect wrappers are grids already. */
.ocd .en__field__element--text,
.ocd .en__field__element--email,
.ocd .en__field__element--telephone,
.ocd .en__field__element--number,
.ocd .en__field__element--select,
.ocd .en__field__element--vgs {
	display: block;
	width: 100%;
}

/* EN emits `--telephone` (not `--tel`) and `--number`. A wrong suffix fails
   silently, leaving the field at browser defaults. Read them off a live page. */
.ocd .en__field__input--text,
.ocd .en__field__input--email,
.ocd .en__field__input--telephone,
.ocd .en__field__input--number,
.ocd .en__field__input--select,
.ocd .en__field__input--splitselect,
.ocd .en__field__input--other,
.ocd .en__field__input--vgs {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: var(--ocd-border-input);
	border-radius: var(--ocd-radius-input);
	background: var(--ocd-white);
	color: var(--ocd-navy);
	font-family: var(--ocd-font-body);
	font-size: var(--ocd-input);
	line-height: 1.5;
	transition: border-color 0.2s, box-shadow 0.2s;
}

/* EN's enPage.css gives `.en__field__input--other` a 5px left margin, which
   pushes the full-width field 5px past its container: sideways scroll in the
   embed iframe, and on phones. Measured 2026-10-07 on page 201638. */
.ocd .en__field__input--other { margin-left: 0; }

/* 16px minimum on phones or iOS Safari zooms the viewport on focus. */
@media (max-width: 899px) {
	.ocd .en__field__input--text,
	.ocd .en__field__input--email,
	.ocd .en__field__input--telephone,
	.ocd .en__field__input--number,
	.ocd .en__field__input--select,
	.ocd .en__field__input--splitselect,
	.ocd .en__field__input--other {
		font-size: 1rem;
	}
}

.ocd .en__field__input--text:focus,
.ocd .en__field__input--email:focus,
.ocd .en__field__input--telephone:focus,
.ocd .en__field__input--number:focus,
.ocd .en__field__input--select:focus,
.ocd .en__field__input--splitselect:focus,
.ocd .en__field__input--other:focus {
	border-color: var(--ocd-sky);
	box-shadow: 0 0 0 3px rgba(0, 126, 179, 0.18);
	outline: none;
}

.ocd .en__field__input--select,
.ocd .en__field__input--splitselect {
	appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230d3669' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	background-size: 12px 8px;
}

/* Explicit height: the VGS iframe has no intrinsic size. */
.ocd .en__field__input--vgs {
	height: 3.05rem;
	padding: 0;
	overflow: hidden;
}
.ocd .en__field__input--vgs iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Fields stack full width. No two-up pairing: EN emits fields as plain
   siblings and every ask string differs, so one column is the maintainable
   shape and it matches the current form. */

/* Card expiry: two selects. EN's label sits at a fixed width and wrapped
   "Credit Card Expiration" onto two lines on phones. */
.ocd .en__field--ccexpire > .en__field__label {
	width: auto;
	white-space: nowrap;
}

/* Card expiry: two selects */
.ocd .en__field--splitselect .en__field__element--splitselect {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ocd-space-sm);
}

/* --- Errors --- */

/* EN injects the error as the **first** child of `.en__field`, ahead of the
   label, which is why this needs `order` at all. Regan asked for it under the
   field instead (2026-09-08), so `order: 1` sends it last - the previous
   `order: -1` was just restating EN's own DOM order.

   Plain red text rather than the tinted pill this used to be, matching the
   mock she supplied. Contrast holds at regular weight: 6.22:1 on off-white,
   6.54:1 on white, against AA's 4.5:1 for normal text.

   The copy itself is **EN's, set per field in the page editor** - not ours.
   Today the amount field reads "There is an issue with the donation amount,
   please try again." */
.ocd .en__field__error {
	order: 1;
	margin-top: var(--ocd-space-xs);
	color: var(--ocd-error);
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* EN's page-level error list (above the form after a server-side failure)
   gets the same red. reCAPTCHA's own message is inside Google's iframe and
   can't be styled. */
.ocd .en__errorList,
.ocd .en__errorList .en__error {
	color: var(--ocd-error);
}

/* Flex column so `order` applies at all. */
.ocd .en__field--validationFailed {
	display: flex;
	flex-direction: column;
}

/* All seven input types that can fail, not just the three this used to list.
   A real submit on 196739 returned errors on email, ccnumber, and ccvv too,
   and those three kept a normal steel border while the copy below them turned
   red - so the field the donor had to fix was the one field not marked. Same
   trap as the unstyled-fields bug of 2026-09-04: EN's suffixes are read off a
   live render, never guessed. */
.ocd .en__field--validationFailed .en__field__input--text,
.ocd .en__field--validationFailed .en__field__input--email,
.ocd .en__field--validationFailed .en__field__input--telephone,
.ocd .en__field--validationFailed .en__field__input--number,
.ocd .en__field--validationFailed .en__field__input--other,
.ocd .en__field--validationFailed .en__field__input--select,
.ocd .en__field--validationFailed .en__field__input--splitselect,
.ocd .en__field--validationFailed .en__field__input--vgs {
	border-color: var(--ocd-error);
}

/* 7. Frequency, amount, and payment type */

.ocd .en__field--recurrpay .en__field__element--radio,
.ocd .en__field--paymenttype .en__field__element--radio,
.ocd .en__field--donationAmt .en__field__element--radio {
	display: grid;
	gap: var(--ocd-space-sm);
}

/* Recurrence (recurrpay Y/N): two equal pills */
.ocd .en__field--recurrpay .en__field__element--radio {
	grid-template-columns: 1fr 1fr;
}

/* Amount: 2 up on phones, 3 up from 480px. */
.ocd .en__field--donationAmt .en__field__element--radio {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 480px) {
	.ocd .en__field--donationAmt .en__field__element--radio {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Payment type: 2 up on phones, 4 up from 480px. */
.ocd .en__field--paymenttype .en__field__element--radio {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 480px) {
	.ocd .en__field--paymenttype .en__field__element--radio {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ocd .en__field--recurrpay .en__field__input--radio,
.ocd .en__field--paymenttype .en__field__input--radio,
.ocd .en__field--donationAmt .en__field__input--radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.ocd .en__field--recurrpay .en__field__label--item,
.ocd .en__field--paymenttype .en__field__label--item,
.ocd .en__field--donationAmt .en__field__label--item {
	display: grid;
	place-items: center;
	margin: 0;
	min-height: 60px;
	padding: 0.75rem 0.5rem;
	border: var(--ocd-border-amount);
	border-radius: var(--ocd-radius-pill);
	background: var(--ocd-white);
	color: var(--ocd-navy);
	font-size: var(--ocd-input);
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ocd .en__field--recurrpay .en__field__label--item:hover,
.ocd .en__field--paymenttype .en__field__label--item:hover,
.ocd .en__field--donationAmt .en__field__label--item:hover {
	border-color: var(--ocd-kelp);
}

.ocd .en__field--recurrpay .en__field__input--radio:checked + .en__field__label--item,
.ocd .en__field--paymenttype .en__field__input--radio:checked + .en__field__label--item,
.ocd .en__field--donationAmt .en__field__input--radio:checked + .en__field__label--item {
	border-color: var(--ocd-kelp);
	background: var(--ocd-kelp);
	color: var(--ocd-white);
}

/* Hidden inputs can't take :focus-visible, so mirror focus onto the label. */
.ocd .en__field--recurrpay .en__field__input--radio:focus-visible + .en__field__label--item,
.ocd .en__field--paymenttype .en__field__input--radio:focus-visible + .en__field__label--item,
.ocd .en__field--donationAmt .en__field__input--radio:focus-visible + .en__field__label--item {
	outline: var(--ocd-focus);
	outline-offset: 2px;
}

/* Heart after "Monthly" (Leah, 2026-09-29, from Regan's example page 199911).
   Keyed on the `Y` value rather than the label text, so relabelling in EN
   can't lose it. The label goes flex so the heart sits inline instead of
   dropping to a second grid row. Decorative, so a pseudo-element keeps it out
   of the accessible name. SVG lifted verbatim off 199911. */
.ocd .en__field--recurrpay .en__field__input--radio[value="Y"] + .en__field__label--item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.ocd .en__field--recurrpay .en__field__input--radio[value="Y"] + .en__field__label--item::after {
	content: "";
	flex: 0 0 19px;
	width: 19px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6891 2.41452C16.2738 1.96607 15.7806 1.61034 15.2377 1.36763C14.6949 1.12492 14.1131 1 13.5255 1C12.9379 1 12.3561 1.12492 11.8133 1.36763C11.2704 1.61034 10.9154 2.05156 10.5 2.5L9.49978 3.9807L8.5 2.5C7.66095 1.5946 6.66066 1.00047 5.47407 1.00047C4.28747 1.00047 3.14947 1.50912 2.31042 2.41452C1.47137 3.31992 1 4.5479 1 5.82833C1 7.10875 1.47137 8.33674 2.31042 9.24214L3.1725 10.1724L9.49978 17L15.8271 10.1724L16.6891 9.24214C17.1047 8.79391 17.4344 8.26171 17.6593 7.67596C17.8842 7.0902 18 6.46237 18 5.82833C18 5.19428 17.8842 4.56645 17.6593 3.9807C17.4344 3.39494 17.1047 2.86275 16.6891 2.41452Z' fill='%23E5B2C6' stroke='%236A0E31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Other" amount. EN pairs a radio with a separate text item; the text input
   is always visible and its radio pill is hidden, so typing an amount is the
   only interaction. Block 2 selects the radio on input.

   The `other` value is capitalised inconsistently between ask strings, so the
   attribute selectors below are case-insensitive. */
.ocd .en__field--donationAmt .en__field__input--radio[value="other" i] + .en__field__label--item {
	display: none;
}

.ocd .en__field--donationAmt .en__field__item--other {
	grid-column: 1 / -1;
	position: relative;
}

/* EN's JS adds `--hidden` to the Other item whenever a preset is chosen, so the
   field would vanish and reappear as the donor clicks around. Keep it visible:
   the input is the only way to select Other, and block 2 clears its value when
   a preset is picked. Outranks enPage.css on specificity, no !important. */
.ocd .en__field--donationAmt .en__field__item--other.en__field__item--hidden {
	display: block;
}

/* Hardcoded, not `attr(data-currency-symbol)`: that attribute is ENGrid's and
   a native EN page does not emit it, so the symbol silently disappeared. */
.ocd .en__field--donationAmt .en__field__item--other::before {
	content: "$";
}

.ocd .en__field--donationAmt .en__field__item--other::after { content: "USD"; }

.ocd .en__field--donationAmt .en__field__item--other::before,
.ocd .en__field--donationAmt .en__field__item--other::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--ocd-input);
	font-weight: 700;
	color: var(--ocd-navy);
	pointer-events: none;
}

.ocd .en__field--donationAmt .en__field__item--other::before { left: 1.25rem; }
.ocd .en__field--donationAmt .en__field__item--other::after  { right: 1.25rem; font-size: 0.875rem; }

/* All the copy in the middle (OC, October 2026): "$", the amount, and "USD"
   sit together around the centered value. Block 2 measures the text and sets
   `--ocd-other-half`; without JS the pinned edges above still apply. */
.ocd .en__field--donationAmt .en__field__item--other[data-ocd-centered]::before {
	left: calc(50% - var(--ocd-other-half) - 0.35rem);
	transform: translate(-100%, -50%);
}
.ocd .en__field--donationAmt .en__field__item--other[data-ocd-centered]::after {
	left: calc(50% + var(--ocd-other-half) + 0.35rem);
	right: auto;
}

/* Sized and shaped like the amount pills, with room for the $ and USD. */
.ocd .en__field__input--other {
	min-height: 60px;
	padding-inline: 2.5rem;
	border-radius: var(--ocd-radius-pill);
	text-align: center;
	font-weight: 700;
}

/* Frequency messages. The copyblock is authored in EN; block 6 moves it
   between the recurrence and amount fields and stamps `data-ocd-freq` so only
   the relevant message shows. Without JS both stay visible, which is a
   readable fallback rather than a broken one. */

.ocd .frequency-messages { margin: 0 0 var(--ocd-space-md); }

.ocd .frequency-messages p {
	position: relative;
	margin: 0;
	padding: 0.75rem 1rem 0.75rem calc(1rem + 24px + 0.75rem);
	border: 2px solid transparent;
	border-radius: var(--ocd-radius-input);
}

/* Arrow pointing up at Monthly, from 199911 but mirrored: Monthly is the left
   pill here, where 199911 has it on the right. Absolutely placed rather than
   flex, because flex would split the message's text and link into separate
   items and break the sentence's inline flow. */
.ocd .frequency-messages p::before {
	content: "";
	position: absolute;
	top: 0.75rem;
	left: 1rem;
	width: 24px;
	height: 24px;
	transform: scaleX(-1);
	background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.25 7.875L16.125 1L23 7.875' stroke='%2303695D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 23H10.625C12.0837 23 13.4826 22.4205 14.5141 21.3891C15.5455 20.3576 16.125 18.9587 16.125 17.5V1' stroke='%2303695D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ocd .frequency-messages p.frequency-message-N {
	background: var(--ocd-notice-warm);
	border-color: var(--ocd-notice-warm-edge);
}

.ocd .frequency-messages p.frequency-message-Y {
	background: var(--ocd-notice-cool);
	border-color: var(--ocd-notice-cool-edge);
}

/* Kelp, not the usual link blue: it ties the prompt to the brand green and
   still clears AA on the tint (6.21:1). */
.ocd .frequency-message-N__switch-link {
	color: var(--ocd-kelp);
	font-weight: 700;
}

.ocd .frequency-messages[data-ocd-freq="Y"] .frequency-message-N,
.ocd .frequency-messages[data-ocd-freq="N"] .frequency-message-Y {
	display: none;
}

/* 8. Checkboxes (email and SMS opt-in) */

.ocd .en__field--checkbox .en__field__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.ocd .en__field--checkbox .en__field__input--checkbox {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var(--ocd-kelp);
	cursor: pointer;
}

.ocd .en__field--checkbox .en__field__label--item {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	cursor: pointer;
}

/* Group label is redundant next to the disclaimer. */
.ocd .en__field--sms-opt-in > .en__field__label,
.ocd .en__field--email-opt-in > .en__field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.ocd .sms-opt-in-disclaimer {
	margin-bottom: 0.5rem;
	font-size: 1rem;
	font-weight: 700;
}

/* 9. Payment */

/* "Payment Type" label off (OC, October 2026). Visually hidden rather than
   removed: it still names the radio group for screen readers. */
.ocd .en__field--paymenttype > .en__field__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Never hide these: they are EN's real payment controls. */

.ocd .en__field--NOT_TAGGED_33 { display: none; } /* PayPal billing agreement text */

.ocd #en__digitalWallet__paypalTouch,
.ocd #en__digitalWallet__chariot {
	margin-bottom: var(--ocd-space-md);
}

/* 10. Submit */

.ocd .en__submit,
.ocd .en__field--submit {
	margin-top: var(--ocd-space-md);
}

/* EN's submit carries no class; select through the parent, never ours. */

.ocd .en__submit button,
.ocd .en__field--submit button {
	display: block;
	width: 100%;
	padding: 1rem 2rem;
	border: 0;
	border-radius: var(--ocd-radius-pill);
	background: var(--ocd-kelp);
	color: var(--ocd-white);
	font-family: var(--ocd-font-body);
	font-size: var(--ocd-submit);
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.05s;
}

.ocd .en__submit button:hover,
.ocd .en__field--submit button:hover { background: #02534a; }

.ocd .en__submit button:active,
.ocd .en__field--submit button:active { transform: translateY(1px); }

/* 11. Footer */

.ocd-footer {
	padding-top: var(--ocd-space-lg);
	padding-bottom: var(--ocd-space-lg);
	text-align: center;
	font-size: 0.875rem;
	/* Kelp on phones: the seals are pale and vanish on the off-white page. */
	background: var(--ocd-kelp);
	color: var(--ocd-white);
}

.ocd-footer h4,
.ocd-footer a { color: var(--ocd-white); }
.ocd-footer a { text-decoration-color: rgba(255, 255, 255, 0.5); }

.ocd-footer h4 { margin-bottom: var(--ocd-space-md); }

.ocd-footer__seals {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ocd-space-md);
	margin-bottom: var(--ocd-space-md);
}

.ocd-footer__seals img { max-width: clamp(64px, 13vw, 124px); }

/* Regan asked for more room between these (2026-09-08); at 8px/16px the four
   read as one run-on line. The row gap grows too, because on a phone they wrap
   to two or three lines and the horizontal gain is what makes the wrap legible. */
.ocd-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
}

/* Desktop already sits on the gradient, so drop the flat fill. */
@media (min-width: 900px) {
	.ocd-footer { background: none; }
}

/* 11b. Thank-you page (sub-page 2 of the same EN record)

   `${page~title}` and `${page~notes}` belong to the page **record**, not to a
   sub-page, so the template renders the donation headline and the "Your Gift
   Today Can Help Save Our Ocean" intro on the thank-you page too, where both
   are wrong. Regan asked for exactly this removal on 2026-09-08.

   It cannot be fixed by deleting a page block, because the copy is the
   template's own. `template.js` block 1b sets `data-ocd-thankyou` when
   `pageJson.pageNumber > 1`. Worth 287px as measured on 196739 page 2: the
   title is 127px and the intro 160px.

   A positive flag on purpose - if the script never runs, the attribute is
   absent and the donation page keeps its headline. Negating a page number here
   would hide the headline on page 1 whenever the JS failed.

   The thank-you page supplies its own heading in a copyblock, so nothing is
   lost. */
body.ocd[data-ocd-thankyou] .ocd-title,
body.ocd[data-ocd-thankyou] .ocd-intro {
	display: none;
}

/* Double the Donation's employer-match widget sits directly against the
   "Donation amount:" line above it - measured at a 3px gap on page 2, which is
   the collision Regan flagged. EN owns this class; we only space it.

   If Double the Donation is removed (open in section 8) this rule becomes
   inert rather than wrong. */
.ocd .en__component--dd360confirmation {
	margin-top: var(--ocd-space-lg);
}

/* STOPGAP, delete with Double the Donation.

   Double the Donation injects a `<style>` into `<body>` built from the
   `css_overrides` field of OC's DTD account, fetched at runtime from
   `doublethedonation.com/api/v1/plugin_settings?customer_id=btMm9atJUfQASZk7`.
   That field contains an **unscoped** rule:

       p { font-family: var(--p_font-family); ... display: none; }

   So on any page where it lands, every paragraph is hidden - not just the ones
   inside DTD's own component. The `--p_*` variables are ENGrid's and no longer
   exist, so the typography half resolves to nothing either.

   **Scope, measured rather than assumed (corrected 2026-09-15):** the override
   rides in with the **`dd360confirmation` component**, not with `ddplugin.js`.
   Page 1 loads the plugin and does **not** get the rule - all seven of its
   paragraphs render. Page 2 has the confirmation widget and does get it, where
   it silently removed the donor's whole receipt: name, supporter ID,
   transaction ID, date, and amount. So the blast radius is pages carrying the
   confirmation widget, i.e. thank-you pages, not every page with the plugin.

   A page codeblock (`:not(#dd-container) p { display: inherit }`) had been
   masking it, undocumented, until it was deleted. This replaces that with a
   rule scoped to the thank-you page only, `revert` rather than a forced
   `block`, and no `!important` - so it is provably inert on the form page.

   Verified needed: with this rule removed on page 2, 9 of 9 paragraphs
   disappear. The real fixes are to remove DTD from the page, or clear
   `display: none` out of that `css_overrides` field in the DTD admin. Delete
   this rule when either lands.

   The template's own paragraphs need it too (OCR733): the photo credit's two
   lines and the footer copyright were hidden on page 2, so the credit opened
   as an empty 24x20px box and read as "hover doesn't work". */
body.ocd[data-ocd-thankyou] .en__component--copyblock p,
body.ocd[data-ocd-thankyou] .ocd-credit__panel p,
body.ocd[data-ocd-thankyou] .ocd-footer p:not([class]) {
	display: revert;
}

/* 12. Embedded (lightbox) mode */

body.ocd[data-ocd-embedded] { background: var(--ocd-white); }

body.ocd[data-ocd-embedded] .ocd-page {
	display: block;
	min-height: 0;
	background: none;
}

/* Intro must stay hidden: `display: block` drops the grid areas, so DOM
   order returns and the intro would land back above the form. */
body.ocd[data-ocd-embedded] .ocd-media,
body.ocd[data-ocd-embedded] .ocd-intro,
body.ocd[data-ocd-embedded] .ocd-footer__seals { display: none; }

/* The WP embed block sizes the iframe to its popup container and scrolls, so
   the form sits edge to edge: no gutter, no bottom pad, no 900px max-width.
   The popup's own container supplies any padding. */
body.ocd[data-ocd-embedded] .ocd-form {
	padding: 0;
	max-width: none;
}

body.ocd[data-ocd-embedded] .ocd-form__inner {
	background: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

body.ocd[data-ocd-embedded] .ocd-footer,
body.ocd[data-ocd-embedded] .ocd-footer h4,
body.ocd[data-ocd-embedded] .ocd-footer a { color: var(--ocd-navy); }

/* 13. Respect the OS */

@media (prefers-reduced-motion: reduce) {
	.ocd *,
	.ocd *::before,
	.ocd *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}