/**
 * AMPP Donate — donation landing page layout.
 * Uses ampp-core design tokens (--ampp-*). Side-by-side on desktop,
 * stacked on mobile. The WPForms form (#9633) skin lives in Customizer
 * Additional CSS; the overrides at the bottom adapt it to the right column.
 */

.ampp-donate {
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 0 48px;
	font-family: var(--ampp-font);
	color: var(--ampp-text);
	box-sizing: border-box;
}
.ampp-donate *,
.ampp-donate *::before,
.ampp-donate *::after { box-sizing: border-box; }

/* ---------- Gradient header (matches profile-kadence-header pattern) ---------- */
.ampp-donate__header {
	background: var(--ampp-gradient);
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding: 52px 20px 40px; /* top reduced from house 80px per request */
	margin-bottom: 40px;
	box-shadow: var(--ampp-shadow);
}
.ampp-donate__header-inner {
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 20px;
}
.ampp-donate__header-title {
	margin: 0;
	font-size: 42px; /* house standard (profile-intro h1) */
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
}

.ampp-donate__grid {
	display: grid;
	grid-template-columns: 1fr minmax(380px, 460px);
	gap: 48px;
	align-items: start;
	padding: 0 20px;
}

/* ---------- LEFT: case for support ---------- */
.ampp-donate__title {
	margin: 0 0 16px;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 700;
	color: var(--ampp-text);
}
.ampp-donate__lede {
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--ampp-text-secondary);
}

/* Stats strip */
.ampp-donate__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 32px;
}
.ampp-donate__stat {
	flex: 1 1 0;
	min-width: 110px;
	padding: 16px 14px;
	text-align: center;
	background: var(--ampp-bg-subtle);
	border: 1px solid var(--ampp-border);
	border-radius: var(--ampp-radius-section);
}
.ampp-donate__stat-num {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ampp-primary-dark);
}
.ampp-donate__stat-label {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ampp-text-secondary);
}

.ampp-donate__section { margin: 0 0 28px; }
.ampp-donate__section h2 {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--ampp-text);
}
.ampp-donate__section p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ampp-text-secondary);
}

/* Designations list */
.ampp-donate__designations {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.ampp-donate__designations li {
	padding: 14px 0;
	border-bottom: 1px solid var(--ampp-border-light);
}
.ampp-donate__designations li:last-child { border-bottom: 0; }
.ampp-donate__desig-name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--ampp-text);
}
.ampp-donate__desig-desc {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ampp-text-secondary);
}
.ampp-donate__desig-note {
	font-size: 14px;
	font-style: italic;
	color: var(--ampp-text-muted);
}

/* Quote — classic pull-quote (not an alert/callout) */
.ampp-donate__quote {
	position: relative;
	margin: 8px 0 32px;
	padding: 0 0 0 52px;
	background: none;
	border: 0;
}
.ampp-donate__quote::before {
	content: "\201C"; /* left double quotation mark */
	position: absolute;
	left: 0;
	top: 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 68px;
	line-height: 1;
	color: rgba(33, 150, 243, 0.22); /* soft brand tint */
}
.ampp-donate__quote p {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.55;
	font-style: italic;
	color: var(--ampp-text);
}
.ampp-donate__quote cite {
	display: block;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	color: var(--ampp-text-secondary);
}

/* Legal line */
.ampp-donate__legal {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ampp-text-muted);
}

/* ---------- RIGHT: form column ---------- */
.ampp-donate__form {
	position: sticky;
	top: 24px;
}

/* Adapt the form's standalone skin to fill this column (higher specificity
   than the Customizer #wpforms-9633 rule, so order doesn't matter). */
.ampp-donate .ampp-donate__form #wpforms-9633 {
	max-width: none;
	margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.ampp-donate__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* Form first on mobile so the ask is immediate. */
	.ampp-donate__form {
		position: static;
		order: -1;
	}
}

/* Header responsive — mirrors profile-kadence-header (@max-width:1023px). */
@media (max-width: 1023px) {
	.ampp-donate__header { padding: 80px 20px 20px; }
	.ampp-donate__header-inner { padding: 0; }
	.ampp-donate__header-title { font-size: 24px; }
}

@media (max-width: 480px) {
	.ampp-donate { padding: 0 0 32px; }
	.ampp-donate__stat { min-width: calc(50% - 6px); }
}

/* ---------- Post-donation splash (mirrors mentorship .application-success) ---------- */
.ampp-donate-success {
	text-align: center;
	padding: 48px 28px;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-radius: 16px;
	border: 1px solid #bae6fd;
}

.ampp-donate-success .success-icon {
	margin-bottom: 24px;
}

.ampp-donate-success .success-icon svg {
	color: #10b981;
	stroke-width: 1.5;
}

.ampp-donate-success .success-icon circle {
	fill: #d1fae5;
	stroke: #10b981;
}

.ampp-donate-success .success-icon path {
	stroke: #10b981;
}

.ampp-donate-success h2 {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 700;
	color: #0f172a;
}

.ampp-donate-success .success-message {
	margin: 0 0 24px;
	font-size: 16px;
	color: #475569;
}

.ampp-donate-success .success-message p {
	margin: 0;
}

.ampp-donate-success .success-status {
	margin-bottom: 32px;
}

.ampp-donate-success .status-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	color: #047857;
	background: #fff;
	border: 2px solid #10b981;
	border-radius: 24px;
}

.ampp-donate-success .status-badge::before {
	content: '';
	width: 8px;
	height: 8px;
	background: #10b981;
	border-radius: 50%;
}

.ampp-donate-success .success-next-steps {
	max-width: 500px;
	margin: 0 auto 32px;
	padding: 24px;
	background: #fff;
	border-radius: 12px;
	text-align: left;
}

.ampp-donate-success .success-next-steps h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: #0f172a;
}

.ampp-donate-success .success-next-steps ol {
	margin: 0;
	padding-left: 20px;
}

.ampp-donate-success .success-next-steps li {
	margin-bottom: 12px;
	font-size: 14px;
	color: #475569;
	line-height: 1.5;
}

.ampp-donate-success .success-next-steps li:last-child {
	margin-bottom: 0;
}

.ampp-donate-success .success-next-steps li strong {
	color: #0f172a;
}

.ampp-donate-success .success-contact {
	margin: 0;
	font-size: 14px;
	color: #64748b;
}

.ampp-donate-success .success-contact a {
	color: #0284c7;
	text-decoration: none;
	font-weight: 500;
}

.ampp-donate-success .success-contact a:hover {
	text-decoration: underline;
}

@media (max-width: 480px) {
	.ampp-donate-success {
		padding: 36px 20px;
	}
	.ampp-donate-success h2 {
		font-size: 24px;
	}
}