/* Centerly Giving — the public form.
 *
 * THERE IS NOT ONE COLOR LITERAL IN THIS FILE, and that is the rule, not a
 * coincidence. Every color is a custom property that `Core\PublicBrand` prints
 * into the head, scoped to `.centerly-give`. A hex here would be the single
 * rule that refuses to re-theme — invisible until a community asks why one
 * thing is still the wrong color. Where a translucent tint is genuinely
 * needed, it is mixed FROM a token, never written as rgba().
 *
 * The form is an island on somebody else's WordPress theme, so:
 *   - every rule is scoped under `.centerly-give`; nothing here can repaint
 *     their site,
 *   - the properties a hostile theme most likes to stomp (background, color,
 *     border, font-size on buttons and inputs) carry `!important`, so their
 *     theme cannot repaint us either.
 *
 * Token colors use the `background-color` LONGHAND, never the `background`
 * shorthand, and transitions name the longhand too. A transitioned shorthand
 * whose value is a var() gets stuck on its old color in Chromium when the
 * custom property changes — the button keeps the previous community's color
 * while its label has already changed to the new one. It shows up the moment a
 * palette changes under a live page: the Brand Kit preview, or a dark toggle.
 *
 * There are deliberately no `var( --token, #fallback )` fallbacks either. A
 * fallback would be a hex literal by another name, and worse: it would let a
 * missing token block render as "fine but the wrong brand" instead of visibly
 * wrong. `Core\PublicBrand` guarantees the block is present on every surface
 * that renders this form, including one dropped into a template where wp_head
 * has already run.
 */

.centerly-give {
	font-family: inherit;
	color: var( --c-ink );
	line-height: 1.5;
	text-align: left;
	--cg-gap: 18px;
	--cg-radius: 12px;
	--cg-focus: var( --c-accent );
}

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

/* ---- Fields ------------------------------------------------------- */

.centerly-give .cg-field {
	margin: 0 0 var( --cg-gap ) 0 !important;
	padding: 0 !important;
	border: 0;
}

.centerly-give .cg-row {
	gap: 12px !important;
	margin: 0 !important;
}

.centerly-give .cg-label {
	display: block !important;
	margin: 0 0 6px 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var( --c-ink-secondary ) !important;
	letter-spacing: 0;
}

.centerly-give .cg-input {
	min-height: 44px !important;
	padding: 12px 14px !important;
	border: 1px solid var( --c-border-strong ) !important;
	border-radius: var( --cg-radius ) !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	font-family: inherit !important;
	color: var( --c-ink ) !important;
	background-color: var( --c-surface ) !important;
	transition: border-color 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.centerly-give textarea.cg-input {
	min-height: 72px !important;
	resize: vertical;
}

.centerly-give .cg-input::placeholder {
	color: var( --c-ink-muted ) !important;
	opacity: 1;
}

/* The fund and interval selects were the browser's native widget showing
 * through a designed form (finish-pass item 7). Drop the UA arrow and draw our
 * own caret — two gradients meeting at a point, colored from a token (no color
 * literal, per this file's rule; no SVG data URI, which cannot read a token). */
.centerly-give select.cg-input {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	padding-right: 42px !important;
	background-image:
		linear-gradient( 45deg, transparent 50%, var( --c-ink-muted ) 50% ),
		linear-gradient( 135deg, var( --c-ink-muted ) 50%, transparent 50% ) !important;
	background-position:
		calc( 100% - 21px ) calc( 50% - 2px ),
		calc( 100% - 16px ) calc( 50% - 2px ) !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
}
.centerly-give select.cg-input:focus,
.centerly-give select.cg-input:focus-visible {
	outline: 2px solid var( --cg-focus ) !important;
	outline-offset: 1px !important;
	border-color: var( --c-primary ) !important;
}

/* ---- The amount is the hero -------------------------------------- */

.centerly-give .cg-field--hero {
	margin-bottom: 22px !important;
}

.centerly-give .cg-amount {
	gap: 4px !important;
	padding: 6px 16px !important;
	border: 1px solid var( --c-border-strong ) !important;
	border-radius: 16px !important;
	background-color: var( --c-surface ) !important;
	transition: border-color 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.centerly-give .cg-amount__symbol {
	font-size: 30px !important;
	font-weight: 700 !important;
	color: var( --c-ink-muted ) !important;
	line-height: 1 !important;
}

.centerly-give .cg-amount__input {
	border: 0 !important;
	outline: 0 !important;
	padding: 8px 0 !important;
	font-family: inherit !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	color: var( --c-ink ) !important;
	background-color: transparent !important;
	font-variant-numeric: tabular-nums;
	min-width: 0 !important;
}

.centerly-give .cg-amount__input::placeholder {
	color: var( --c-ink-muted ) !important;
	opacity: 1;
}

/* The whole control lights up when the input inside it has focus, because the
 * input's own outline is suppressed to keep the hero clean. */
.centerly-give .cg-amount:focus-within {
	border-color: var( --c-primary ) !important;
	box-shadow: 0 0 0 3px var( --c-primary-soft ) !important;
}

/* ---- Preset chips -------------------------------------------------- */

.centerly-give .cg-chips {
	gap: 8px !important;
	margin: 12px 0 0 0 !important;
}

.centerly-give .cg-chip {
	flex: 1 1 auto !important;
	min-width: 74px !important;
	min-height: 44px !important;
	padding: 10px 14px !important;
	border: 1px solid var( --c-border-strong ) !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var( --c-ink-secondary ) !important;
	background-color: var( --c-surface ) !important;
	cursor: pointer !important;
	font-variant-numeric: tabular-nums;
	transition: border-color 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 ), background-color 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 ), color 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 ), transform 50ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.centerly-give .cg-chip:hover {
	border-color: var( --c-primary ) !important;
	color: var( --c-primary-text ) !important;
}

.centerly-give .cg-chip:active {
	transform: translateY( 1px );
}

/* Selected: `c-primary` is a SURFACE here, so the label is `c-on-primary` —
 * which is near-black for a bright-gold community, not white. */
.centerly-give .cg-chip[aria-pressed="true"] {
	border-color: var( --c-primary ) !important;
	background-color: var( --c-primary ) !important;
	color: var( --c-on-primary ) !important;
}

/* ---- Frequency: a segmented control ------------------------------- */

.centerly-give .cg-seg {
	gap: 4px !important;
	padding: 4px !important;
	border: 1px solid var( --c-border ) !important;
	border-radius: var( --cg-radius ) !important;
	background-color: var( --c-surface-2 ) !important;
}

.centerly-give .cg-seg__option {
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	border-radius: 9px !important;
	cursor: pointer !important;
	margin: 0 !important;
	transition: background-color 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

/* The radio itself is the accessible control; it is visually replaced, never
 * removed, so keyboard and screen readers keep working. */
.centerly-give .cg-seg__input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}

.centerly-give .cg-seg__label {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var( --c-ink-secondary ) !important;
	text-align: center !important;
}

.centerly-give .cg-seg__option:hover .cg-seg__label {
	color: var( --c-ink ) !important;
}

.centerly-give .cg-seg__input:checked ~ .cg-seg__label {
	color: var( --c-primary-text ) !important;
}

.centerly-give .cg-seg__option:has( .cg-seg__input:checked ) {
	background-color: var( --c-surface ) !important;
	box-shadow: 0 1px 2px var( --c-border-strong ) !important;
}

/* :has() is widely supported but not universal; this keeps the selected state
 * legible without it, by tinting the label's own background. */
@supports not selector( :has( * ) ) {
	.centerly-give .cg-seg__input:checked ~ .cg-seg__label {
		background-color: var( --c-surface ) !important;
		border-radius: 9px !important;
		padding: 10px 0 !important;
		width: 100% !important;
	}
}

.centerly-give .cg-seg__input:focus-visible ~ .cg-seg__label {
	outline: 2px solid var( --cg-focus ) !important;
	outline-offset: 2px !important;
	border-radius: 6px;
}

/* ---- Fee cover: a switch ------------------------------------------ */

.centerly-give .cg-switch {
	gap: 12px !important;
	padding: 14px 16px !important;
	border: 1px solid var( --c-border ) !important;
	border-radius: var( --cg-radius ) !important;
	background-color: var( --c-accent-soft ) !important;
	cursor: pointer !important;
	margin: 0 !important;
}

.centerly-give .cg-switch__input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}

.centerly-give .cg-switch__track {
	flex: 0 0 auto !important;
	display: block !important;
	position: relative !important;
	width: 46px !important;
	height: 28px !important;
	margin-top: 2px !important;
	border-radius: 999px !important;
	background-color: var( --c-border-strong ) !important;
	transition: background-color 200ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.centerly-give .cg-switch__thumb {
	position: absolute !important;
	top: 3px !important;
	left: 3px !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 999px !important;
	background-color: var( --c-surface ) !important;
	box-shadow: 0 1px 3px var( --c-border-strong ) !important;
	transition: transform 200ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.centerly-give .cg-switch__input:checked ~ .cg-switch__track {
	background-color: var( --c-primary ) !important;
}

.centerly-give .cg-switch__input:checked ~ .cg-switch__track .cg-switch__thumb {
	transform: translateX( 18px );
}

.centerly-give .cg-switch__input:focus-visible ~ .cg-switch__track {
	outline: 2px solid var( --cg-focus ) !important;
	outline-offset: 2px !important;
}

.centerly-give .cg-switch__title {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var( --c-ink ) !important;
}

.centerly-give .cg-math {
	font-size: 13px !important;
	color: var( --c-ink-secondary ) !important;
	font-variant-numeric: tabular-nums;
	margin: 2px 0 0 0 !important;
}

/* ---- Summary: it reconciles BEFORE the button --------------------- */

.centerly-give .cg-summary {
	display: block !important;
	margin: 0 0 var( --cg-gap ) 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var( --c-border ) !important;
	border-radius: var( --cg-radius ) !important;
	background-color: var( --c-surface-2 ) !important;
}

.centerly-give .cg-summary__row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 16px !important;
	padding: 4px 0 !important;
	font-size: 15px !important;
	color: var( --c-ink-secondary ) !important;
}

.centerly-give .cg-summary__row--total {
	margin-top: 6px !important;
	padding-top: 10px !important;
	border-top: 1px solid var( --c-border ) !important;
	font-weight: 700 !important;
	color: var( --c-ink ) !important;
}

.centerly-give .cg-summary__value {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.centerly-give .cg-summary__note {
	margin: 8px 0 0 0 !important;
}

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

.centerly-give .cg-submit {
	min-height: 52px !important;
	padding: 15px 20px !important;
	border: 0 !important;
	border-radius: var( --cg-radius ) !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums;
	color: var( --c-on-primary ) !important;
	background-color: var( --c-primary ) !important;
	cursor: pointer !important;
	transition: background-color 120ms cubic-bezier( 0.2, 0.7, 0.2, 1 ), transform 50ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.centerly-give .cg-submit:hover {
	background-color: var( --c-primary-hover ) !important;
}

.centerly-give .cg-submit:active {
	transform: translateY( 1px );
}

.centerly-give .cg-submit:disabled {
	opacity: 0.7;
	cursor: default !important;
	transform: none;
}

.centerly-give .cg-secure {
	margin: 10px 0 0 0 !important;
	text-align: center !important;
	color: var( --c-ink-muted ) !important;
}

/* ---- Validation: at the field, never at the bottom ----------------- */

.centerly-give .cg-error {
	margin: 8px 0 0 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var( --c-critical ) !important;
}

.centerly-give .cg-error--form {
	margin: 0 0 12px 0 !important;
	padding: 12px 14px !important;
	border-radius: var( --cg-radius ) !important;
	background-color: var( --c-surface-2 ) !important;
}

/*
 * Hiding has to beat the layout rules above, which carry !important so a
 * hostile theme cannot flatten the form. Between two !important declarations
 * specificity decides, and `.centerly-give .cg-summary` (0,2,0) would otherwise
 * outrank `.centerly-give [hidden]` (0,1,1) — leaving the interval selector and
 * an empty summary on screen permanently. Repeating the attribute lifts this to
 * (0,2,1) without inventing a class that has to be kept in sync.
 *
 * The other half of the same rule: nothing that can be hidden may carry an
 * inline `display`, because an inline declaration beats any stylesheet at equal
 * importance. That is why the summary and the interval field have none.
 */
.centerly-give [hidden][hidden] {
	display: none !important;
}

/* The field that failed says so itself. */
.centerly-give .cg-field.is-invalid .cg-input,
.centerly-give .cg-field.is-invalid .cg-amount {
	border-color: var( --c-critical ) !important;
}

/* ---- Notices ------------------------------------------------------- */

.centerly-give .centerly-give__notice {
	padding: 14px 16px !important;
	margin: 0 0 18px 0 !important;
	border-radius: var( --cg-radius ) !important;
	border: 1px solid var( --c-border ) !important;
	background-color: var( --c-surface-2 ) !important;
	color: var( --c-ink ) !important;
}

.centerly-give .centerly-give__notice--success {
	border-color: var( --c-good ) !important;
	background-color: var( --c-primary-soft ) !important;
}

/* ---- Focus: visible, always ---------------------------------------- */

.centerly-give .cg-input:focus-visible,
.centerly-give .cg-chip:focus-visible,
.centerly-give .cg-submit:focus-visible {
	outline: 2px solid var( --cg-focus ) !important;
	outline-offset: 2px !important;
}

.centerly-give .cg-input:focus {
	border-color: var( --c-primary ) !important;
	box-shadow: 0 0 0 3px var( --c-primary-soft ) !important;
}

/* ---- Narrow screens ------------------------------------------------ */

@media ( max-width: 420px ) {
	.centerly-give .cg-row {
		flex-direction: column !important;
		gap: 0 !important;
	}

	.centerly-give .cg-amount__input {
		font-size: 34px !important;
	}
}

/* ---- Motion -------------------------------------------------------- */

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

	.centerly-give .cg-chip:active,
	.centerly-give .cg-submit:active {
		transform: none !important;
	}
}

/* The interval selector is revealed by JS, so it must not carry an inline
 * display of its own — see the [hidden] note above. Its layout lives here. */
.centerly-give .centerly-give__interval {
	display: block !important;
	box-sizing: border-box !important;
}

/* ---- Surfaces whose palette changes while they are on screen -------- */

/*
 * A CSS transition on a property fed by a custom property paints ONE CHANGE
 * BEHIND: swap the palette and the button keeps the previous community's
 * color while its label has already changed to the new one. Reproduced in
 * Chromium on both the `background` shorthand and the `background-color`
 * longhand; removing the transition makes it land immediately.
 *
 * A published giving page never hits this — its tokens are written once, in the
 * head, and never change — so it keeps the gentle fades the brief asks for.
 * A surface that RE-THEMES while it is visible must opt out, or it will show a
 * palette its viewer has already moved on from. The Brand Kit preview does
 * exactly that on every keystroke, so it sets this.
 *
 * If you ever add a light/dark toggle to the portal or the catalog: set this
 * attribute on the surface, or your toggle will be a frame behind.
 */
.centerly-give[data-live-theme],
.centerly-give[data-live-theme] * {
	transition: none !important;
}


/* ===================================================================
 * Reclaim the dead Divi sidebar on the giving surface (finish-pass item 2).
 *
 * Divi's default template reserves a ~29% right column with no widgets and
 * draws a 1px rule down the gap (.container::before). On the page that TAKES
 * MONEY that squeezed the form into ~560px of a 1536px screen beside a dead
 * column. This is the same reclaim events-public.css applies to its surface,
 * scoped by body:has(.centerly-give) so it only fires on a page that actually
 * carries the giving form (or its receipt), and never repaints anyone's theme
 * otherwise. Layout only — not one color, so this file's rule holds.
 *
 * :has() is in every evergreen browser since 2023; where it is missing the
 * page simply keeps the old narrow column, which is today's behavior — no
 * regression. The better fix (a full-width page template at page creation)
 * needs a giving-page creator that does not exist yet; the giving page is
 * authored by hand, so this reclaim is the practical one.
 * ================================================================ */
body:has( .centerly-give ) #main-content .container {
	width: 100% !important;
	max-width: 1240px !important;
}
body:has( .centerly-give ) #left-area {
	width: 100% !important;
	padding-right: 0 !important;
	float: none !important;
}
body:has( .centerly-give ) #sidebar {
	display: none !important;
}
body:has( .centerly-give ) #main-content .container::before {
	display: none !important;
}


/* ===================================================================
 * The receipt — what replaces the form after a completed gift.
 *
 * Styled to be kept: someone will print this, photograph it, or drop it
 * in a tax folder in April. So it reads as a document, not as a web
 * notice, and the print rules below produce a clean page with no site
 * chrome around it.
 * ================================================================ */

.centerly-give .cg-receipt {
	text-align: center;
	padding-block: 8px;
}

.centerly-give .cg-receipt__crest {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var( --c-on-primary );
	background-color: var( --c-primary );
}

.centerly-give .cg-receipt__title {
	margin: 0 0 8px;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var( --c-ink );
}

.centerly-give .cg-receipt__lede {
	margin: 0 auto 24px;
	max-width: 42ch;
	font-size: 17px;
	color: var( --c-ink-secondary );
}

.centerly-give .cg-receipt__recurring {
	margin: -8px auto 24px;
	max-width: 46ch;
	padding: 12px 16px;
	border-radius: var( --cg-radius );
	font-size: 14px;
	color: var( --c-ink );
	background-color: var( --c-accent-soft );
}

/* ---- The document itself ------------------------------------------ */

.centerly-give .cg-receipt__card {
	text-align: left;
	border: 1px solid var( --c-border );
	border-radius: var( --cg-radius );
	background-color: var( --c-surface );
	overflow: hidden;
}

.centerly-give .cg-receipt__head {
	display: grid;
	gap: 2px;
	padding: 18px 20px;
	border-bottom: 1px solid var( --c-border );
	background-color: var( --c-surface-2 );
}

.centerly-give .cg-receipt__org {
	font-size: 15px;
	font-weight: 700;
	color: var( --c-ink );
}

.centerly-give .cg-receipt__addr {
	font-size: 13px;
	line-height: 1.45;
	color: var( --c-ink-muted );
}

.centerly-give .cg-receipt__meta {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px 20px;
	margin: 0;
	padding: 18px 20px;
	border-bottom: 1px solid var( --c-border );
}

.centerly-give .cg-receipt__meta-item {
	min-width: 0;
}

.centerly-give .cg-receipt__meta dt {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var( --c-ink-muted );
}

.centerly-give .cg-receipt__meta dd {
	margin: 0;
	font-size: 14px;
	overflow-wrap: anywhere;
	color: var( --c-ink );
}

/* ---- Money ---------------------------------------------------------- */

.centerly-give .cg-receipt__lines {
	padding: 8px 20px 18px;
}

.centerly-give .cg-receipt__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	font-size: 15px;
	color: var( --c-ink-secondary );
}

.centerly-give .cg-receipt__line + .cg-receipt__line {
	border-top: 1px solid var( --c-border );
}

.centerly-give .cg-receipt__amount {
	/* Tabular figures so the column of numbers lines up on the decimal. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var( --c-ink );
}

.centerly-give .cg-receipt__line--total {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 2px solid var( --c-border-strong );
	font-size: 17px;
	font-weight: 700;
	color: var( --c-ink );
}

.centerly-give .cg-receipt__line--total .cg-receipt__amount {
	font-size: 20px;
}

/* ---- Note and legal -------------------------------------------------- */

.centerly-give .cg-receipt__note {
	margin: 0 20px 18px;
	padding: 14px 16px;
	border-left: 3px solid var( --c-primary );
	border-radius: 0 var( --cg-radius ) var( --cg-radius ) 0;
	background-color: var( --c-primary-soft );
}

.centerly-give .cg-receipt__note-label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var( --c-primary-text );
}

.centerly-give .cg-receipt__note p {
	margin: 0;
	font-size: 14px;
	color: var( --c-ink );
}

.centerly-give .cg-receipt__legal {
	margin: 0;
	padding: 16px 20px;
	border-top: 1px solid var( --c-border );
	font-size: 12px;
	line-height: 1.55;
	color: var( --c-ink-muted );
	background-color: var( --c-surface-2 );
}

.centerly-give .cg-receipt__pending {
	margin: 14px 0 0;
	font-size: 13px;
	color: var( --c-ink-muted );
}

/* ---- Actions --------------------------------------------------------- */

.centerly-give .cg-receipt__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.centerly-give .cg-receipt__print {
	width: 100%;
}

.centerly-give .cg-receipt__home {
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var( --c-primary-text );
}

.centerly-give .cg-receipt--bare {
	padding-block: 24px;
}

@media ( max-width: 420px ) {
	.centerly-give .cg-receipt__title {
		font-size: 28px;
	}
	.centerly-give .cg-receipt__meta {
		grid-template-columns: 1fr;
	}
}

/* ---- Print ------------------------------------------------------------
 *
 * This is the one place in the file that reaches outside `.centerly-give`,
 * and it is deliberate: printing the receipt means printing the receipt,
 * not the site header, the menu, the footer and three widgets. Hiding by
 * visibility rather than display keeps the layout boxes intact, so the
 * receipt can be lifted to the top of the sheet without the rest of the
 * page collapsing around it.
 *
 * Colors are forced to plain black on white here. Print is the one surface
 * where the community's palette costs the reader ink and legibility, and a
 * receipt is a document before it is a brand impression.
 * -------------------------------------------------------------------- */

@media print {
	body * {
		visibility: hidden !important;
	}

	.centerly-give,
	.centerly-give * {
		visibility: visible !important;
	}

	.centerly-give {
		position: absolute !important;
		inset: 0 auto auto 0;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.centerly-give .cg-receipt__actions,
	.centerly-give .cg-receipt__crest,
	.centerly-give .cg-receipt__pending {
		display: none !important;
	}

	.centerly-give .cg-receipt__title {
		font-size: 22pt;
	}

	.centerly-give .cg-receipt__card {
		border-color: #000 !important;
		background-color: #fff !important;
		break-inside: avoid;
	}

	.centerly-give .cg-receipt__head,
	.centerly-give .cg-receipt__legal,
	.centerly-give .cg-receipt__note {
		background-color: #fff !important;
	}

	.centerly-give .cg-receipt__title,
	.centerly-give .cg-receipt__lede,
	.centerly-give .cg-receipt__org,
	.centerly-give .cg-receipt__addr,
	.centerly-give .cg-receipt__line,
	.centerly-give .cg-receipt__amount,
	.centerly-give .cg-receipt__legal,
	.centerly-give .cg-receipt__meta dt,
	.centerly-give .cg-receipt__meta dd,
	.centerly-give .cg-receipt__note p,
	.centerly-give .cg-receipt__note-label {
		color: #000 !important;
	}
}