/*
Theme Name: Nonprofit
Theme URI: https://colorlib.com/wp/themes/nonprofit/
Author: Colorlib
Author URI: https://colorlib.com/
Description: A block theme for charities, nonprofits and community groups. A full-height photograph under a deep veil, causes with a goal, an amount raised and a progress bar drawn from the figures you type, a page for each appeal, an impact page with figures, a volunteer team, a volunteer sign-up form and a donation pledge form that takes no payment, and a Donate button you can point at your own giving page. Eight colour palettes, five type pairings, visitor dark mode and WooCommerce support, and forms that need no plugin. Full site editing throughout.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Update URI: https://updates.colorlib.com/theme/nonprofit.json
Text Domain: nonprofit
Tags: blog, full-site-editing, block-patterns, block-styles, template-editing, wide-blocks, accessibility-ready, translation-ready, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, one-column, two-columns, right-sidebar, sticky-post, theme-options

Nonprofit WordPress Theme, (C) 2026 Colorlib.
Nonprofit is distributed under the terms of the GNU GPL v2 or later.

Nonprofit bundles the following third-party resources:

Playfair Display and Roboto
License: SIL Open Font License 1.1, https://openfontlicense.org/
Source: https://fontsource.org/

Tabler Icons
License: MIT, https://github.com/tabler/tabler-icons/blob/main/LICENSE
Source: https://tabler.io/icons

Photographs
License: Pexels License, https://www.pexels.com/license/ (one photograph under the Unsplash License, https://unsplash.com/license)
Source: https://www.pexels.com/ and https://unsplash.com/ (each file is credited in readme.txt)
*/

/*
 * A block theme styles itself from theme.json. What lives here is what
 * theme.json cannot express: the components behind the block style variations
 * registered in functions.php, the header that lies over the opening
 * photograph, the slanted edges the design cuts its sections with, the icons,
 * the cause cards and their progress bars, the red boxes that sit on the
 * photographs, the team's portraits, and the layout corrections a full-width
 * design needs.
 *
 * This file is also the editor stylesheet (add_editor_style), so a card, a
 * section title or a slanted band looks the same while it is being edited.
 *
 * Every colour is a palette variable. Nothing here is a literal colour except
 * white and black at low opacity for highlights and shadows, which is what
 * lets all eight palettes, and dark mode, restyle every component.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

body {
	/* The edge of anything a visitor operates -- a field, an outline button.
	   Half the text colour into the ground clears 3:1 (WCAG 1.4.11) in every
	   palette and turns over with dark mode. */
	--nonprofit-edge: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, var(--wp--preset--color--base));
	/* The height of the header bar, which the opening photograph runs up behind. */
	--nonprofit-header-h: 96px;
	/* The template's 3-degree slant: tan(3deg) of the width. */
	--nonprofit-slant: 5.2vw;
}

@media (max-width: 991px) {
	body {
		--nonprofit-header-h: 76px;
	}
}

/* ==========================================================================
   Screen reader text
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	height: auto;
	left: 6px;
	padding: 15px 23px 14px;
	top: 7px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Layout rhythm

   WordPress separates the top-level pieces of a page, and every full-width
   section inside a page's content, with the root block gap: a strip of bare
   page between every pair. Sections carry their own padding, so they meet
   edge to edge instead.
   ========================================================================== */

.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Two sections on the page ground share one gap, as the template's do. */
.nonprofit-section:not(.has-background) + .nonprofit-section:not(.has-background) {
	padding-top: 0 !important;
}

/* A page built from sections needs no padding of its own -- each section has
   it. A page of ordinary paragraphs still needs room to breathe. */
.nonprofit-page-content:not(:has(> .alignfull:first-child)) {
	padding-top: var(--wp--preset--spacing--70);
}

.nonprofit-page-content:not(:has(> .alignfull:last-child)) {
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Two columns that meet the container at both edges, as Bootstrap's offset
   columns do: the space between them, not after them. */
@media (min-width: 782px) {
	.nonprofit-split {
		justify-content: space-between;
	}
}

/* On a phone the photograph of a reversed row comes first, as in the others. */
@media (max-width: 781px) {
	.nonprofit-split--reverse {
		flex-direction: column-reverse;
	}
}

/* An <iframe> is inline, and auto margins do not centre an inline box. */
.nonprofit-map {
	display: block;
}

.nonprofit-section,
.nonprofit-banner,
.nonprofit-footer {
	position: relative;
	overflow-x: clip;
}

/* Photographs fill their column. */
.wp-block-image img {
	display: block;
	width: 100%;
}

/* ==========================================================================
   Slanted edges  (block styles: Slanted top edge, Slanted bottom edge)

   The template cuts its opening photograph, its blush bands and its volunteer
   band on a three-degree slant. A clip-path, not a skewed white bar laid over
   the edge: the bar would have to be the colour of whatever comes next, and
   that is different on every page and in dark mode.
   ========================================================================== */

.is-style-nonprofit-slant-bottom {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--nonprofit-slant)));
}

.is-style-nonprofit-slant-top {
	clip-path: polygon(0 var(--nonprofit-slant), 100% 0, 100% 100%, 0 100%);
}

.wp-block-group.is-style-nonprofit-slant-top {
	padding-top: calc(var(--wp--preset--spacing--70) + var(--nonprofit-slant)) !important;
}

/* ==========================================================================
   Header

   The template's header lies over the opening photograph in white, with no
   bar of its own, and once the page moves it becomes a deep red bar that stays
   at the top. Sticky rather than fixed, so it still holds its own height on a
   page that does not open with a photograph; the banners pull themselves up
   behind it.
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* The admin bar scrolls away on a phone, so the header must not wait for it. */
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.nonprofit-header {
	padding-inline: clamp(1rem, 2.5vw, 2.5rem);
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--overlay);
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Over an opening photograph the bar has no ground of its own. */
.wp-site-blocks:has(> header + .nonprofit-banner, > header + main > .nonprofit-banner:first-child, > header + main > .wp-block-post-content > .nonprofit-banner:first-child) > header .nonprofit-header {
	background-color: transparent;
}

.wp-site-blocks:has(> header + .nonprofit-banner, > header + main > .nonprofit-banner:first-child, > header + main > .wp-block-post-content > .nonprofit-banner:first-child) > header .nonprofit-header:has(.is-menu-open) {
	background-color: var(--wp--preset--color--dark);
}

/* Once the page moves, the deep bar -- whatever the page opens with. The
   :has() rule above outranks any plain selector, so this one has to insist:
   without it the bar stays transparent over white sections, white words on a
   white page. */
.nonprofit-scrolled .wp-site-blocks > header .nonprofit-header {
	background-color: var(--wp--preset--color--dark) !important;
	box-shadow: 0 3px 16px rgb(0 0 0 / 0.1);
}

.nonprofit-header__bar {
	min-height: var(--nonprofit-header-h);
}

/* The opening photograph, where a page starts with one, runs up behind the
   header -- in a template, or as the first block of a page's content. */
.wp-site-blocks > header + .nonprofit-banner,
.wp-site-blocks > header + main > .nonprofit-banner:first-child,
.wp-site-blocks > header + main > .wp-block-post-content > .nonprofit-banner:first-child {
	margin-top: calc(-1 * var(--nonprofit-header-h));
}

/* The name, with the template's two-hands mark before it unless a logo is set. */
.nonprofit-brand .wp-block-site-title {
	font-size: 1.5rem;
	white-space: nowrap;
}

.nonprofit-header .nonprofit-brand .wp-block-site-title a {
	color: var(--wp--preset--color--overlay);
}

.nonprofit-brand .wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	text-decoration: none;
}

.nonprofit-brand .wp-block-site-title a::before {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/heart-handshake.svg") center / contain no-repeat;
	mask: url("assets/icons/heart-handshake.svg") center / contain no-repeat;
}

.nonprofit-brand:has(.wp-block-site-logo img) .wp-block-site-title a::before {
	display: none;
}

.nonprofit-header .wp-block-navigation {
	color: var(--wp--preset--color--overlay);
}

.nonprofit-header .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 0;
}

.nonprofit-header .wp-block-navigation-item__content {
	position: relative;
	padding: 0.5rem 1.2rem;
	text-transform: capitalize;
}

/* The page you are on, and the one under the pointer. The template turned
   the word red, which on its deep veil was 2.1:1: here the word stays white
   and a short red rule marks it. */
.nonprofit-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 1.2rem;
	right: 1.2rem;
	bottom: 0.1rem;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.nonprofit-header .wp-block-navigation-item__content:hover::after,
.nonprofit-header .wp-block-navigation-item__content:focus-visible::after,
.nonprofit-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (max-width: 1279px) {
	.nonprofit-header .wp-block-navigation-item__content {
		padding-inline: 0.6rem;
	}

	.nonprofit-header .wp-block-navigation-item__content::after {
		left: 0.6rem;
		right: 0.6rem;
	}
}

/*
 * Core switches the navigation to its menu button below 600px. Seven links,
 * the name, the switch and the Donate button need about 1080px, so between
 * 600 and 1080 the links had nowhere to go but a second row. Collapse earlier.
 */
@media (max-width: 1079px) {
	.nonprofit-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.nonprofit-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.nonprofit-header__bar > .nonprofit-nav {
		order: 3;
	}

	.nonprofit-header__bar > .nonprofit-brand {
		margin-right: auto;
	}
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.nonprofit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.nonprofit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	left: 0;
	right: auto;
	width: 2.5rem;
}

.nonprofit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.nonprofit-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.nonprofit-header__actions {
	flex-wrap: nowrap;
	gap: 0.75rem;
}

/* The dark mode switch: an icon, in white. */
.nonprofit-header .nonprofit-scheme-toggle > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--overlay);
}

.nonprofit-header .nonprofit-header__donate > .wp-block-button__link {
	padding: 0.8rem 2.25rem;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

@media (max-width: 781px) {
	.nonprofit-header__bar {
		gap: 0.5rem !important;
	}

	.nonprofit-header .nonprofit-header__donate > .wp-block-button__link {
		padding: 0.45rem 0.8rem;
	}

	.nonprofit-header__actions {
		gap: 0.25rem;
	}
}

@media (max-width: 400px) {
	.nonprofit-header .nonprofit-scheme-toggle > .wp-block-button__link {
		width: 36px;
	}

	.nonprofit-header .nonprofit-brand .wp-block-site-title {
		font-size: 1.2rem;
	}
}

/* ==========================================================================
   Buttons

   The default button is the template's "Donate Now": a square red box with a
   white label (theme.json). Outline (block style) is its "Donate Now" on the
   cause cards: a red edge and a red label that fill on hover. Outline, light
   is the header's white box; Outline, on the brand colour is the "Join Now"
   inside the red volunteer box.
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.wp-block-button.is-style-nonprofit-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--primary);
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-nonprofit-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-nonprofit-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.wp-block-button.is-style-nonprofit-outline-light > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--overlay);
	background-color: transparent;
	color: var(--wp--preset--color--overlay);
}

.wp-block-button.is-style-nonprofit-outline-light > .wp-block-button__link:hover,
.wp-block-button.is-style-nonprofit-outline-light > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--overlay);
	background-color: var(--wp--preset--color--overlay);
	color: var(--wp--preset--color--dark);
}

.wp-block-button.is-style-nonprofit-outline-on-primary > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--on-primary);
	background-color: transparent;
	color: var(--wp--preset--color--on-primary);
}

.wp-block-button.is-style-nonprofit-outline-on-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-nonprofit-outline-on-primary > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--primary);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
	outline-offset: 3px;
}

.nonprofit-banner .wp-block-button__link:focus-visible,
.nonprofit-header .wp-block-button__link:focus-visible,
.nonprofit-cta__box .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--overlay);
}

/* ==========================================================================
   Icons

   Tabler Icons, used as masks: the SVG supplies the shape and the element's
   own text colour fills it, so an icon takes whatever palette is active and
   turns over in dark mode with no extra files. The class sits on the block
   itself -- the editor draws a block's classes, but not an empty span inside
   its text, which is how an icon tile ends up reading "Type / to choose a
   block". An editor changes an icon under Advanced > Additional CSS class(es).
   ========================================================================== */

.nonprofit-icon--basket { --nonprofit-icon: url("assets/icons/basket.svg"); }
.nonprofit-icon--soup { --nonprofit-icon: url("assets/icons/soup.svg"); }
.nonprofit-icon--home-heart { --nonprofit-icon: url("assets/icons/home-heart.svg"); }
.nonprofit-icon--mail { --nonprofit-icon: url("assets/icons/mail.svg"); }
.nonprofit-icon--home { --nonprofit-icon: url("assets/icons/home.svg"); }
.nonprofit-icon--device-tablet { --nonprofit-icon: url("assets/icons/device-tablet.svg"); }
.nonprofit-icon--user { --nonprofit-icon: url("assets/icons/user.svg"); }
.nonprofit-icon--folder { --nonprofit-icon: url("assets/icons/folder.svg"); }
.nonprofit-icon--calendar-event { --nonprofit-icon: url("assets/icons/calendar-event.svg"); }

.nonprofit-service__icon[class*="nonprofit-icon--"]::before,
.nonprofit-line[class*="nonprofit-icon--"]::before,
.nonprofit-meta[class*="nonprofit-icon--"]::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--nonprofit-icon) center / contain no-repeat;
	mask: var(--nonprofit-icon) center / contain no-repeat;
}

/* A line with its icon in front: the icon hangs in the margin, so a line that
   wraps stays one block of text. */
.nonprofit-line[class*="nonprofit-icon--"] {
	position: relative;
	padding-left: 2.4em;
}

.nonprofit-line[class*="nonprofit-icon--"]::before {
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.5em;
	height: 1.5em;
	color: var(--wp--preset--color--muted);
}

.nonprofit-line {
	line-height: 1.7;
}

.nonprofit-line strong {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--playfair-display);
	font-weight: 400;
}

.nonprofit-meta[class*="nonprofit-icon--"] {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

/* ==========================================================================
   Section titles

   The template's small red line with wide tracking ("Upcoming Cause") over a
   46px Playfair title in the maroon.
   ========================================================================== */

.nonprofit-eyebrow {
	margin-bottom: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.14em;
}

.nonprofit-eyebrow + .nonprofit-title {
	margin-block-start: 0.5rem;
}

.nonprofit-title {
	line-height: 1.22;
}

/* A space before every <br> in a heading: below 992px the breaks go and the
   words must not run together. */
@media (max-width: 991px) {
	.nonprofit-title br,
	.nonprofit-hero__title br {
		display: none;
	}
}

.nonprofit-link-more a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.nonprofit-link-more a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Banners: the photograph under the deep veil, running up behind the header

   The hero is a full screen tall, as the template's 1000px is at 1440; the
   page banners about two thirds of that.
   ========================================================================== */

.wp-block-cover.nonprofit-banner {
	min-height: clamp(24rem, 46vw, 40rem);
	padding-top: calc(var(--nonprofit-header-h) + var(--wp--preset--spacing--50));
	padding-bottom: calc(var(--wp--preset--spacing--60) + var(--nonprofit-slant));
}

.wp-block-cover.nonprofit-hero {
	min-height: clamp(38rem, 100vh, 62.5rem);
}

.nonprofit-banner .wp-block-cover__inner-container {
	width: 100%;
}

.nonprofit-banner .wp-block-cover__image-background {
	filter: grayscale(0.15);
}

.nonprofit-banner .wp-block-post-title,
.nonprofit-banner h1 {
	font-weight: 700;
	text-transform: capitalize;
}

.nonprofit-hero .nonprofit-hero__title {
	max-width: 12em;
	font-weight: 900;
	line-height: 1.125;
}

.nonprofit-hero .nonprofit-hero__lede {
	max-width: 36em;
	margin-block-start: 0.5rem;
	line-height: 1.6;
}

.nonprofit-hero .nonprofit-hero__actions {
	margin-block-start: clamp(1.5rem, 4vw, 3.75rem);
}

.nonprofit-hero .nonprofit-hero__cta > .wp-block-button__link {
	padding: 1.05rem 3.1rem;
	/* The template's red box on its red veil is 1.45:1 against the photograph:
	   it read as a patch of colour, not a control. A white hairline gives it
	   an edge (WCAG 1.4.11) without changing the design. */
	border-color: var(--wp--preset--color--overlay);
}

.nonprofit-banner__terms a {
	color: var(--wp--preset--color--overlay);
	text-decoration: none;
}

.nonprofit-banner--post .wp-block-post-title {
	text-transform: none;
}

/* The volunteer in the banner photograph stands in its right third: a long
   title wraps before it reaches his face. On a phone the crop leaves him out. */
@media (min-width: 782px) {
	.nonprofit-banner .nonprofit-banner__copy > * {
		max-width: min(13em, 64%);
	}

	.nonprofit-banner--post .nonprofit-banner__copy > .wp-block-post-title {
		max-width: min(18em, 64%);
	}

	.nonprofit-hero .nonprofit-banner__copy > * {
		max-width: min(36em, 64%);
	}
}

/* ==========================================================================
   Causes: goal and raised, typed on the page, and the bar drawn from them
   (inc/causes.php)
   ========================================================================== */

.nonprofit-figures {
	align-items: flex-end;
	row-gap: 1rem;
}

.nonprofit-figure > * {
	margin: 0 !important;
}

.nonprofit-figure .nonprofit-figure__label {
	margin-bottom: 0.5rem !important;
	color: var(--wp--preset--color--muted);
}

.nonprofit-figure .nonprofit-figure__value {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

/* The featured cause's figures stand in pale boxes, as the template's do. */
.nonprofit-figures--chips .nonprofit-figure__value {
	padding: 0.7rem 1.4rem;
	background-color: var(--wp--preset--color--tint);
	font-weight: 500;
}

.nonprofit-featured-cause__foot {
	align-items: flex-end;
	row-gap: 1.5rem;
}

.nonprofit-featured-cause__actions .wp-block-button__link {
	padding: 0.72rem 1.3rem;
	font-size: var(--wp--preset--font-size--large);
}

/* The bar: a pale track, the red share, and the figure in a red disc at its
   end. The share's width comes from the element's --nonprofit-progress,
   which the server sets from the figures beside it. */
.nonprofit-progress {
	--nonprofit-bar: var(--nonprofit-progress, 50%);
	--nonprofit-disc: 3.75rem;
	position: relative;
	height: 10px;
	margin: 0;
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--on-primary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.nonprofit-progress::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--nonprofit-bar);
	background-color: var(--wp--preset--color--primary);
	transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nonprofit-progress__value {
	position: absolute;
	top: 50%;
	left: clamp(var(--nonprofit-disc), var(--nonprofit-bar), 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--nonprofit-disc);
	height: var(--nonprofit-disc);
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	transform: translate(-100%, -50%);
	transition: left 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Waiting to scroll into view (assets/js/interactions.js): empty, then fill. */
.nonprofit-progress.is-waiting::before {
	width: 0;
}

.nonprofit-progress.is-waiting .nonprofit-progress__value {
	left: var(--nonprofit-disc);
}

/* In the editor the server has not drawn it yet: the stored figure sits
   under the track, so it can still be read... */
.nonprofit-progress:not(:has(.nonprofit-progress__value)) {
	height: auto;
	padding: 1rem 0 0;
	background: linear-gradient(var(--wp--preset--color--tint), var(--wp--preset--color--tint)) top / 100% 10px no-repeat;
	color: var(--wp--preset--color--primary);
}

/* ...and the red share is left out: the editor cannot work it out from the
   figures, and a bar drawn at a guess would disagree with them. */
.nonprofit-progress:not(:has(.nonprofit-progress__value))::before {
	display: none;
}

.nonprofit-cause-card .nonprofit-progress {
	--nonprofit-disc: 2.75rem;
	height: 6px;
	margin-block: 1.75rem 0.5rem;
	font-size: 0.8125rem;
}

/* The featured cause: a tall photograph with the bar along its foot, pulled
   up over the hero's slanted edge as the template's is. */
.nonprofit-cause__photo {
	padding-bottom: 1.875rem;
}

.nonprofit-cause__photo > .wp-block-image {
	margin: 0;
}

.nonprofit-cause__photo > .nonprofit-progress {
	margin: 0;
}

@media (min-width: 1024px) {
	.nonprofit-hero + .nonprofit-featured-cause {
		position: relative;
		z-index: 2;
		margin-top: -8.125rem;
		padding-top: 0 !important;
	}
}

.nonprofit-cause-detail__kicker {
	font-size: var(--wp--preset--font-size--x-large);
}

/* ==========================================================================
   Cause cards: a photograph, the title, the figures, the bar and an outline
   Donate button, lifting on hover as the template's do
   ========================================================================== */

.nonprofit-cause-grid > .wp-block-column {
	display: flex;
}

.nonprofit-cause-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	transition: box-shadow 0.4s ease, background-color 0.4s ease;
}

.nonprofit-cause-card > .wp-block-image {
	margin: 0;
}

.nonprofit-cause-card > .nonprofit-cause-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 1.875rem;
}

/* The body is a flex column, and the constrained layout's auto margins would
   shrink every child to its content and centre it: the bar vanished to its
   disc. Children run edge to edge instead. */
.nonprofit-cause-card > .nonprofit-cause-card__body > * {
	margin-inline: 0 !important;
}

.nonprofit-cause-card__title {
	line-height: 1.4;
}

.nonprofit-cause-card__title a {
	color: inherit;
	text-decoration: none;
}

.nonprofit-cause-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

.nonprofit-cause-card__actions {
	margin-top: auto !important;
	padding-top: 0.5rem;
}

.nonprofit-cause-card__actions > .wp-block-button {
	width: 100%;
}

.nonprofit-cause-card__actions .wp-block-button__link {
	width: 100%;
}

.nonprofit-cause-card:hover {
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}

@media (max-width: 781px) {
	.nonprofit-cause-card > .nonprofit-cause-card__body {
		padding-inline: 0;
	}

	.nonprofit-cause-card:hover {
		background-color: transparent;
		box-shadow: none;
	}
}

/* ==========================================================================
   About: the photograph with its red box, and the two-photograph opening of
   the About page
   ========================================================================== */

.nonprofit-about__media {
	position: relative;
}

.nonprofit-about__media > .wp-block-image {
	margin: 0;
}

.nonprofit-about__media > .nonprofit-served {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max-content;
	max-width: calc(100% - 2rem);
	margin: 0 !important;
	padding: 2.25rem 2rem;
	transform: translate(-50%, -50%);
}

.nonprofit-served > * {
	margin: 0 !important;
}

.nonprofit-served .nonprofit-served__value {
	margin-block: 0.25rem !important;
	font-size: var(--wp--preset--font-size--heading);
	line-height: 1.2;
}

.nonprofit-about-intro__photos {
	row-gap: 1.5rem;
}

.nonprofit-about-intro__photos .wp-block-image {
	margin: 0;
}

/* ==========================================================================
   What we do: an icon in a pale ring that fills red under the pointer
   ========================================================================== */

.nonprofit-service {
	padding-inline: 1.25rem;
}

.nonprofit-service > .wp-block-heading {
	margin-block-start: 1.5rem;
}

.nonprofit-service .nonprofit-service__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6.125rem;
	height: 6.125rem;
	margin-inline: auto !important;
	border-radius: 50%;
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
	font-size: 2.75rem;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.nonprofit-service:hover .nonprofit-service__icon {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.nonprofit-services-section.has-surface-background-color .nonprofit-service__icon {
	background-color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	.nonprofit-services > .wp-block-column + .wp-block-column {
		margin-top: 1.5rem;
	}
}

/* ==========================================================================
   Volunteers: a portrait whose veil slides up with the links, as the
   template's does
   ========================================================================== */

.nonprofit-team > .wp-block-column {
	min-width: 0;
}

.nonprofit-member__media {
	position: relative;
	overflow: hidden;
}

.nonprofit-member__media > .wp-block-image {
	margin: 0;
}

.nonprofit-member__media > .nonprofit-member__social {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	margin: 0 !important;
	padding: 1.1rem 0;
	gap: 1.25rem;
	background-color: color-mix(in srgb, var(--wp--preset--color--dark) 72%, transparent);
	/* Transparent, not hidden: the links must stay reachable by Tab, and
	   focusing one is what raises the veil for a keyboard user. */
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.nonprofit-member:hover .nonprofit-member__social,
.nonprofit-member:focus-within .nonprofit-member__social {
	opacity: 1;
	transform: none;
}

.nonprofit-member__social .wp-social-link a {
	padding: 0.35rem;
}

/* On a screen with no pointer to hover, and on any phone-sized screen, the
   links sit under the portrait in the open, without the veil. */
@media (hover: none), (max-width: 781px) {
	.nonprofit-member__media > .nonprofit-member__social {
		position: static;
		padding: 0.9rem 0 0;
		background: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nonprofit-member__social .wp-social-link {
		color: var(--wp--preset--color--primary) !important;
	}
}

.nonprofit-member > .nonprofit-member__name {
	margin-block-start: 1.25rem;
}

.nonprofit-member > .nonprofit-member__role {
	margin-block-start: 0.25rem;
}

@media (max-width: 781px) {
	.nonprofit-team > .wp-block-column + .wp-block-column {
		margin-top: 1.5rem;
	}
}

/* ==========================================================================
   Become a volunteer: the red box over a photograph
   ========================================================================== */

.wp-block-cover.nonprofit-cta {
	min-height: 0;
	padding-block: calc(var(--wp--preset--spacing--70) + var(--nonprofit-slant)) var(--wp--preset--spacing--70);
}

.nonprofit-cta .nonprofit-cta__box {
	max-width: 780px;
	margin-inline: auto !important;
	padding: clamp(2rem, 5vw, 4.25rem) clamp(1.5rem, 6.5vw, 5.9rem);
}

.nonprofit-cta__box > .wp-block-heading {
	margin-bottom: 0;
}

/* ==========================================================================
   Impact: figures as headlines, and the row of four
   ========================================================================== */

.nonprofit-impact .wp-block-image {
	margin: 0;
}

.nonprofit-stat > * {
	margin: 0 !important;
}

.nonprofit-stat .nonprofit-stat__value {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.1;
}

.nonprofit-stat .nonprofit-stat__label {
	margin-top: 0.75rem !important;
}

@media (max-width: 781px) {
	.nonprofit-stats > .wp-block-column + .wp-block-column {
		margin-top: 1.5rem;
	}
}

/* ==========================================================================
   Forms on the page: the pledge and the volunteer sign-up sit in a panel
   ========================================================================== */

.nonprofit-form-panel {
	box-shadow: var(--wp--preset--shadow--card);
}

@media (max-width: 600px) {
	.nonprofit-form-panel {
		padding: 1.5rem 1.25rem !important;
	}
}

.wp-block-list.is-style-nonprofit-ticks {
	padding-left: 0;
	list-style: none;
}

.wp-block-list.is-style-nonprofit-ticks li {
	position: relative;
	margin-bottom: 0.6rem;
	padding-left: 2rem;
}

.wp-block-list.is-style-nonprofit-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.15em;
	height: 1.15em;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("assets/icons/check.svg") center / contain no-repeat;
	mask: url("assets/icons/check.svg") center / contain no-repeat;
}

/* Questions about giving: plain rules, a red marker. */
.nonprofit-faq {
	padding-block: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--divider);
}

.nonprofit-faq summary {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--playfair-display);
	font-size: var(--wp--preset--font-size--large);
	cursor: pointer;
}

.nonprofit-faq summary::marker {
	color: var(--wp--preset--color--primary);
}

.nonprofit-faq > p {
	margin-block: 0.75rem 0;
}

/* The contact page's details: icons in the text colour, the template's grey. */
.nonprofit-contact .wp-block-heading {
	font-weight: 700;
}

/* ==========================================================================
   The blog list: a wide photograph with the date in a red box over its
   corner, then the words in a panel with a soft shadow
   ========================================================================== */

.nonprofit-post-list > li + li {
	margin-top: 2.25rem;
}

.nonprofit-post-card__media {
	position: relative;
}

.nonprofit-post-card__media > .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.nonprofit-post-card__media > .wp-block-post-featured-image img {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nonprofit-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.nonprofit-post-card__media > .nonprofit-date-tab {
	position: absolute;
	left: clamp(1.25rem, 3vw, 2.5rem);
	bottom: -1.25rem;
	z-index: 1;
	max-width: none;
	margin: 0 !important;
	padding: 0.5rem 1.4rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	text-align: center;
}

/* A post with no featured image: the tab sits in the flow and overlaps the
   panel below, instead of floating over nothing. */
.nonprofit-post-card__media:not(:has(img)) > .nonprofit-date-tab {
	position: relative;
	bottom: auto;
	display: inline-block;
	margin: 0 0 -1.25rem clamp(1.25rem, 3vw, 2.5rem) !important;
}

.nonprofit-date-tab > * {
	margin: 0 !important;
}

.nonprofit-date-tab__day {
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.2;
}

.nonprofit-date-tab__month {
	font-size: 1.125rem;
	line-height: 1.4;
}

.nonprofit-post-card > .wp-block-group.nonprofit-post-card__body {
	margin-block-start: 0;
	padding: clamp(2.5rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 1.75rem) 2rem;
	box-shadow: var(--wp--preset--shadow--card);
}

.nonprofit-post-card__body .wp-block-post-title {
	font-weight: 400;
}

.nonprofit-post-card__body .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.nonprofit-post-meta {
	color: var(--wp--preset--color--muted);
}

.nonprofit-post-meta a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.nonprofit-post-meta a:hover {
	color: var(--wp--preset--color--primary);
}

.nonprofit-pagination {
	margin-top: 3.125rem;
	gap: 0.6rem;
}

.nonprofit-pagination .page-numbers,
.nonprofit-pagination .wp-block-query-pagination-previous,
.nonprofit-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.8rem;
	height: 2.8rem;
	padding: 0 0.8rem;
	border: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nonprofit-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--surface);
}

.nonprofit-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.6rem;
}

/* The three newest posts (pattern: Latest news). */
.nonprofit-news .wp-block-post-featured-image {
	margin: 0;
}

.nonprofit-kicker {
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ==========================================================================
   Sidebar  (block style: core/group › Widget panel)
   ========================================================================== */

.wp-block-group.is-style-nonprofit-widget {
	padding: 1.875rem;
	background-color: var(--wp--preset--color--surface);
}

.nonprofit-sidebar > .is-style-nonprofit-widget + .is-style-nonprofit-widget {
	margin-block-start: 1.875rem;
}

.is-style-nonprofit-widget > .nonprofit-widget__title {
	margin-bottom: 0;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	font-weight: 500;
}

.is-style-nonprofit-widget .wp-block-categories,
.is-style-nonprofit-widget .wp-block-latest-posts {
	padding-left: 0;
	list-style: none;
}

.is-style-nonprofit-widget .wp-block-categories li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.is-style-nonprofit-widget .wp-block-categories li:first-child {
	padding-top: 0;
}

.is-style-nonprofit-widget .wp-block-categories a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.is-style-nonprofit-widget .wp-block-categories a:hover {
	color: var(--wp--preset--color--primary);
}

.is-style-nonprofit-widget .wp-block-latest-posts li {
	display: flow-root;
	margin-bottom: 1.25rem;
}

.is-style-nonprofit-widget .wp-block-latest-posts__featured-image.alignleft {
	margin: 0 1.25rem 0 0;
}

.is-style-nonprofit-widget .wp-block-latest-posts__featured-image img {
	width: 80px;
	height: 80px;
	object-fit: cover;
}

.is-style-nonprofit-widget .wp-block-latest-posts__post-title {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
}

.is-style-nonprofit-widget .wp-block-latest-posts__post-title:hover {
	color: var(--wp--preset--color--primary);
}

.is-style-nonprofit-widget .wp-block-latest-posts__post-date {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.is-style-nonprofit-widget .wp-block-tag-cloud a {
	margin: 0 0.2rem 0.5rem 0;
	padding: 0.25rem 1.1rem;
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem !important;
	text-decoration: none;
}

.is-style-nonprofit-widget .wp-block-tag-cloud a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.nonprofit-widget--search .wp-block-search__inside-wrapper {
	flex-direction: column;
	gap: 1rem;
}

.nonprofit-widget--search .wp-block-search__button,
.nonprofit-widget--search .wp-block-search__input {
	width: 100%;
	margin: 0;
}

.nonprofit-widget--search .wp-block-search__button {
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================================
   Single post
   ========================================================================== */

.nonprofit-post-meta.is-layout-flex {
	margin-block-start: 1.5rem;
}

.nonprofit-entry blockquote.wp-block-quote {
	margin: 2rem 0;
	padding: 1.9rem 1.9rem 1.9rem 2.2rem;
	background-color: var(--wp--preset--color--surface);
}

.nonprofit-entry blockquote.wp-block-quote p {
	margin: 0;
}

.nonprofit-tags a {
	display: inline-block;
	margin: 0 0.3rem 0.4rem 0;
	padding: 0.2rem 0.9rem;
	border: 1px solid var(--wp--preset--color--divider);
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.nonprofit-tags .wp-block-post-terms__separator {
	display: none;
}

.nonprofit-post-nav {
	padding-block: 1.9rem;
	border-top: 1px solid var(--wp--preset--color--divider);
	border-bottom: 1px solid var(--wp--preset--color--divider);
	font-weight: 500;
}

.nonprofit-post-nav a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.nonprofit-post-nav a:hover {
	color: var(--wp--preset--color--primary);
}

/* A post with no author (an import, a script) renders an empty author block:
   no panel for it either. */
.nonprofit-author-box:not(:has(.wp-block-post-author)) {
	display: none;
}

.nonprofit-author .wp-block-post-author__avatar img {
	border-radius: 50%;
}

.nonprofit-author .wp-block-post-author__name {
	font-weight: 600;
}

.nonprofit-author .wp-block-post-author__bio {
	color: var(--wp--preset--color--muted);
}

.nonprofit-comments .nonprofit-comment {
	margin-block: 1.9rem 0;
}

.nonprofit-comments .wp-block-comment-content p {
	margin-top: 0;
	color: var(--wp--preset--color--muted);
}

.nonprofit-comment .wp-block-comment-date a,
.nonprofit-comment__reply a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	text-transform: uppercase;
}

/* ==========================================================================
   Footer: the deep ground, four columns and a newsletter
   ========================================================================== */

.nonprofit-footer .nonprofit-footer__title {
	margin-bottom: clamp(1rem, 2.5vw, 2.25rem);
}

.nonprofit-footer__links {
	padding-left: 0;
	list-style: none;
}

.nonprofit-footer__links li {
	margin: 0;
	line-height: 2.4;
}

.nonprofit-footer__links--strong li {
	font-weight: 500;
	line-height: 1.9;
}

.nonprofit-footer .nonprofit-footer__detail {
	margin-block: 0 1rem;
	line-height: 1.75;
}

.nonprofit-footer a:not(.wp-element-button) {
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
	text-underline-offset: 0.25em;
}

.nonprofit-footer a:not(.wp-element-button):hover,
.nonprofit-footer a:not(.wp-element-button):focus-visible {
	color: var(--wp--preset--color--overlay);
	text-decoration: underline;
}

.nonprofit-footer .nonprofit-footer__social {
	justify-content: flex-start !important;
	margin-top: 1.5rem;
	gap: 1rem;
}

.nonprofit-footer .wp-block-separator.nonprofit-footer__rule {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-block: clamp(2rem, 5vw, 4rem) 1.9rem;
	border: 0;
	border-top: 1px solid rgb(255 255 255 / 0.2);
	background: none;
	opacity: 1;
}

.nonprofit-footer__copy {
	margin: 0;
}

/* ==========================================================================
   Scroll reveals (assets/js/interactions.js)

   Hidden only once the script has run, and only for what is below the first
   screen, so a visitor without JavaScript, a crawler, or anyone looking at the
   top of the page sees content immediately.
   ========================================================================== */

.nonprofit-motion .nonprofit-reveal {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--nonprofit-reveal-delay, 0ms);
}

.nonprofit-motion .nonprofit-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Reduced motion: no movement anywhere, content shown at once.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nonprofit-motion .nonprofit-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nonprofit-progress::before,
	.nonprofit-progress__value,
	.nonprofit-member__media > .nonprofit-member__social,
	.nonprofit-cause-card,
	.nonprofit-service__icon,
	.nonprofit-header .wp-block-navigation-item__content::after,
	.wp-block-post-featured-image img {
		transition: none;
	}

	.nonprofit-post-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}