/*
 * The pieces every campaign template is made of — the progress, the goal bar,
 * the closed notice, the donor wall's cards. A template's own `template.css`
 * decides where they go; this decides what they look like.
 *
 * The same light, quiet look as the Forms donation form: white surfaces,
 * hairlines and space rather than grey slabs, one blue accent and a wash of it
 * where something should stand out. The tokens are here once, on `.donations-page`
 * — the class every template puts on its <main> — so a theme that wants another
 * accent overrides `--donations-accent` and nothing else.
 *
 * Piece sizes are in `em` from a fixed 1rem, so a theme with a large body font
 * does not blow up a side column. Mobile first.
 */

.donations-page {
	--donations-ink: #101828;
	--donations-muted: #667085;
	--donations-accent: #2563eb;
	--donations-accent-wash: #eff4ff;
	--donations-wash: #f5f8ff;
	--donations-line: #e9edf3;
	--donations-line-accent: #dbe5fb;
	--donations-radius: 16px;
	--donations-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.12);
}

/* -- Skipping to it ------------------------------------------------------- */

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

.donations-skip:focus {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 0.5rem);
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.9em 1.4em;
	clip-path: none;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(16, 24, 40, 0.16);
	color: #101828;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

/* -- The picture and the words -------------------------------------------- */

.donations-hero {
	display: block;
}

.donations-hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: cover;
	border-radius: var(--donations-radius);
}

.donations-summary {
	margin: 0;
	color: var(--donations-muted);
	font-size: 1.1em;
	line-height: 1.5;
}

.donations-story > :first-child {
	margin-top: 0;
}

.donations-story > :last-child {
	margin-bottom: 0;
}

/* -- What has been raised ------------------------------------------------- */

.donations-progress {
	padding: 1.15em 1.25em 1.2em;
	border: 1px solid var(--donations-line-accent);
	border-radius: var(--donations-radius);
	background: linear-gradient(135deg, var(--donations-wash) 0%, var(--donations-accent-wash) 100%);
	color: var(--donations-ink);
	font-size: 1rem;
}

.donations-progress__label {
	margin: 0;
	color: var(--donations-muted);
	font-size: 0.875em;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* The loudest thing on the page beside the form: the argument that other people already gave. */
.donations-progress__amount {
	margin: 0.1em 0 0;
	color: var(--donations-accent);
	font-size: 2.5em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.donations-progress__track {
	height: 0.5em;
	margin-top: 0.9em;
	overflow: hidden;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--donations-line-accent);
}

.donations-progress__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--donations-accent);
}

.donations-progress__goal,
.donations-progress__when {
	margin: 0.5em 0 0;
	color: var(--donations-muted);
	font-size: 0.85em;
}

.donations-progress__goal strong {
	color: var(--donations-ink);
	font-variant-numeric: tabular-nums;
}

.donations-progress__when--ended,
.donations-progress__when--upcoming {
	font-weight: 600;
}

/* -- Where the form would be ---------------------------------------------- */

.donations-closed {
	padding: clamp(1.25rem, 3.5vw, 2rem);
	border: 1px solid var(--donations-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--donations-shadow);
	color: var(--donations-ink);
	font-size: 1.05rem;
	text-align: center;
}

.donations-closed p {
	margin: 0;
}

/* Only ever shown to somebody who can fix what it says. */
.donations-notice {
	margin: 0;
	padding: 1em 1.25em;
	border: 1px dashed #d0d5dd;
	border-radius: 14px;
	background: #fff;
	color: var(--donations-muted);
	font-size: 0.95rem;
}

/* -- The donor wall ------------------------------------------------------- */

.donations-wall {
	color: var(--donations-ink);
	font-size: 1rem;
}

/*
 * A template writes the wall's markup and its script fills it in, so the parts
 * that have nothing in them yet — the empty line, the button — are `hidden` in
 * the template and shown when there is something to show. Said here because a
 * rule below gives one of them a `display` of its own, which would win.
 */
.donations-wall [hidden] {
	display: none !important;
}

.donations-wall__heading {
	margin: 1.5em 0 0.85em;
	color: var(--donations-ink);
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

.donations-wall__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr));
	gap: 0.75em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.donations-wall__card {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	box-sizing: border-box;
	height: 100%;
	margin: 0;
	padding: 1em 1.1em 1.1em;
	border: 1px solid var(--donations-line);
	border-radius: 14px;
	background: #fff;
}

.donations-wall__who {
	display: flex;
	align-items: center;
	gap: 0.7em;
}

.donations-wall__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* Six tints, chosen by the name, so a wall of cards is not a wall of one colour. */
.donations-wall__avatar--1 { background: #eff4ff; color: #1d4ed8; }
.donations-wall__avatar--2 { background: #ecfdf3; color: #047857; }
.donations-wall__avatar--3 { background: #fffaeb; color: #b45309; }
.donations-wall__avatar--4 { background: #fdf2fa; color: #c11574; }
.donations-wall__avatar--5 { background: #f4f3ff; color: #5925dc; }
.donations-wall__avatar--6 { background: #f0fdf9; color: #0e7569; }
.donations-wall__avatar--anonymous { background: #fff1f3; color: #e31b54; }

/* A donor who was signed in when they gave has a picture of their own. */
.donations-wall__avatar--photo {
	background: var(--donations-line);
	overflow: hidden;
}

.donations-wall__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.donations-wall__byline {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.donations-wall__name {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A chip rather than "· Monthly" after the date: in a narrow card it wraps whole. */
.donations-wall__repeats {
	padding: 0.05em 0.55em;
	border-radius: 999px;
	background: var(--donations-accent-wash);
	color: var(--donations-accent);
	font-size: 0.92em;
	font-weight: 600;
}

/* Its own row rather than trailing the name: in a narrow card it wraps whole. */
.donations-wall__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 0.5em;
	color: var(--donations-muted);
	font-size: 0.8em;
}

.donations-wall__amount {
	flex: none;
	padding: 0.3em 0.7em;
	border-radius: 999px;
	background: var(--donations-accent-wash);
	color: var(--donations-accent);
	font-size: 0.875em;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* The theme styles a bare blockquote; this one is a card's body text. */
.donations-wall__message {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font-style: normal;
	line-height: 1.55;
	quotes: none;
	/* Keeps the donor's own line breaks; the text is escaped, never HTML. */
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.donations-wall__message::before,
.donations-wall__message::after {
	content: none;
}

.donations-wall__empty {
	margin: 0;
	color: var(--donations-muted);
}

/*
 * The button under a batch: it loads the next one as it scrolls into view, or
 * when it is pressed, showing a spinner while it does.
 */
.donations-wall__more {
	position: relative;
	display: block;
	width: 100%;
	margin-top: 0.75em;
	padding: 0.8em 1em;
	border: 1px solid var(--donations-line);
	border-radius: 14px;
	background: #fff;
	color: var(--donations-accent);
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.donations-wall__more:hover {
	border-color: #9db6ea;
}

.donations-wall__more:focus-visible,
.donations-wall__scroller:focus-visible {
	outline: 2px solid var(--donations-accent);
	outline-offset: 2px;
}

.donations-wall.is-loading .donations-wall__more {
	color: transparent;
	pointer-events: none;
}

.donations-wall.is-loading .donations-wall__more::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 1.2em;
	height: 1.2em;
	margin: auto;
	border: 2px solid var(--donations-accent-wash);
	border-top-color: var(--donations-accent);
	border-radius: 50%;
	animation: donations-spin 0.7s linear infinite;
}

/* New cards rise into place, one a moment after the other. */
.donations-wall__list > li.is-new {
	animation: donations-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes donations-in {
	from {
		opacity: 0;
		transform: translateY(0.6em);
	}
}

@keyframes donations-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.donations-wall__list > li.is-new {
		animation: none;
	}

	.donations-wall.is-loading .donations-wall__more::after {
		animation-duration: 1.6s;
	}
}