/*
Theme Name: VolunteerPress.org
Theme URI: https://volunteerpress.org/
Description: Lean block child theme of Twenty Twenty-Five for volunteerpress.org. Restyles the parent through theme.json to the VolunteerPress brand palette (BRAND.md), self-hosts the brand type as woff2 (all OFL): Merriweather for headings, Lato for everything else, Bricolage Grotesque for the wordmark only. Doubles as the chameleon demo host for the VolunteerPress plugin.
Author: VolunteerPress
Author URI: https://volunteerpress.org/
Template: twentytwentyfive
Version: 0.7.4
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: volunteerpress-org
*/

/*
 * Wordmark (header template part). The brand is wordmark-first (BRAND.md §1):
 * the wordmark stands alone in the header — no mark. Two-tone type per
 * BRAND.md §2 — "Volunteer" in Ink, "Press" in Pine, Bricolage SemiBold.
 * This is the ONLY front-end surface that uses Bricolage Grotesque; headings
 * are Merriweather and everything else is Lato (both via theme.json).
 */
.vp-wordmark {
	align-items: center;
	display: inline-flex;
	text-decoration: none;
}

.vp-wordmark__text {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: 1.4375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
}

.vp-wordmark__press {
	color: var(--wp--preset--color--primary);
}

/*
 * Hero (front page): a single centered stack — headline, subhead, CTAs. The
 * headline rides an alignwide slot so its measure isn't capped at content
 * width; the headline is an h1, so it renders Merriweather Bold via the
 * theme.json heading element (restrained — no 900 black). The serif runs a
 * touch wider than the old Bricolage, so at the 3.5rem cap one line holds
 * from roughly ~1050px viewports up, and balance keeps the narrower
 * two-line wrap graceful. The subhead stays at the theme's 680px content
 * size — that IS its measure.
 */
.vp-hero-title {
	font-size: clamp(2.375rem, 1.6rem + 3.9vw, 3.5rem);
	line-height: 1.12;
	text-wrap: balance;
}

.vp-hero .wp-block-buttons {
	margin-top: 1.25rem;
}

/*
 * Feature grid: four compact info cards, 2×2 at desktop, one column on
 * mobile. White-surfaced (accent-5), rounded, pine-tinted border, quiet
 * shadow; each carries a small pine stroke icon matching the plugin's
 * detail-icon style.
 */
.vp-cards {
	align-items: stretch;
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 782px) {
	.vp-cards {
		gap: 2rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Equal heights per row: the group renders as is-layout-flow, so core's
 * block-gap rule (:root :where(.is-layout-flow) > *) puts margin-block-start
 * on every card but the first. Inside the grid that margin offsets a card
 * within its stretched track, so boxes in the same row stop matching. The
 * grid gap owns all spacing here — zero the injected margins.
 */
.vp-cards > .vp-card {
	margin-block-start: 0;
}

.vp-card {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgba(23, 82, 68, 0.06);
	padding: 2rem;
}

.vp-card__icon {
	color: var(--wp--preset--color--primary);
	display: block;
	height: 1.75rem;
	margin-bottom: 0.25rem;
	width: 1.75rem;
}

.vp-card__title {
	font-size: 1.25rem;
}

/*
 * Live-demo container: the real plugin blocks on the Home page, presented on
 * a Cream panel so they read as product, not page. Cream is deliberate — it
 * is one of only two Cream surfaces left (the other is Home's "Free. GPL.
 * Yours." band); everything else sits on the warm-white canvas.
 * Wide-aligned in content.
 */
.vp-demo {
	background: var(--wp--preset--color--cream);
	border-radius: 0.75rem;
	box-shadow:
		0 1px 2px rgba(23, 82, 68, 0.06),
		0 6px 16px rgba(23, 82, 68, 0.07),
		0 20px 48px rgba(23, 82, 68, 0.08);
	padding: 1.5rem;
}

@media (min-width: 782px) {
	.vp-demo {
		padding: 2.25rem 2.5rem;
	}
}

/*
 * Demo-card header: the LIVE DEMO label rides a tinted, hairlined strip that
 * bleeds to the card edges (negative margins mirror the card padding at both
 * breakpoints), so the card reads as a framed exhibit — chrome above, product
 * below. Top corners follow the card radius so the tint never pokes past it.
 */
.vp-demo__header {
	background: color-mix(in srgb, #175244 3%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 0.75rem 0.75rem 0 0;
	margin: -1.5rem -1.5rem 1.5rem;
	padding: 0.875rem 1.5rem;
}

@media (min-width: 782px) {
	.vp-demo__header {
		margin: -2.25rem -2.5rem 2rem;
		padding: 1rem 2.5rem;
	}
}

.vp-demo__label {
	background: color-mix(in srgb, #175244 8%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--primary);
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 0;
	padding: 0.4375rem 0.75rem;
	text-transform: uppercase;
}

.vp-demo__note {
	color: var(--wp--preset--color--accent-4);
	font-size: 0.8125rem;
	margin: 1rem 0 0;
}

/* The calendar intentionally uses the full card; its note centers under it. */
.vp-demo--calendar > .vp-demo__note {
	text-align: center;
}

/*
 * Demo containment (Home's centerpiece calendar): the demo must never
 * navigate away from Home. Scoped strictly to .vp-demo--calendar — a class
 * that exists only in Home's markup — so the same plugin markup on
 * /calendar/, /volunteer/, and opportunity pages keeps every link working.
 * vp-site.js adds a capture-phase click guard for the keyboard path.
 */

/* "View details" links (agenda rows + the shift dialog): hidden outright —
   the dialog-launching signup button is the row's primary affordance. */
.vp-demo--calendar .vpress-calendar__signup {
	display: none;
}

/* Opportunity-title links (agenda rows + dialog header): read as plain
   text; pointer-events blocks mouse follows and context-menu targeting. */
.vp-demo--calendar .vpress-calendar__opportunity-link {
	color: inherit;
	cursor: default;
	pointer-events: none;
	text-decoration: none;
}

/* Month-cell entries: hydration already strips these hrefs (they become
   plain content of the day-panel cell); this is the no-JS belt. */
.vp-demo--calendar .vpress-calendar__cell-link {
	pointer-events: none;
}

/*
 * Exit row under the Home demo card: a solid Pine button into the full demo
 * (/volunteer/) with a quiet text link to one live opportunity page beside
 * it. Deliberately OUTSIDE .vp-demo--calendar so the containment rules above
 * never touch it — these must navigate normally. The quiet-link styles are
 * scoped to direct children so they never bleed into the button's anchor.
 */
.vp-demo-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.5rem;
	justify-content: center;
	margin-top: 1.25rem;
}

.vp-demo-links > a {
	color: var(--wp--preset--color--primary);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration-color: var(--wp--preset--color--accent-6);
	text-underline-offset: 0.2em;
}

.vp-demo-links > a:hover {
	text-decoration-color: currentColor;
}

/*
 * Pine button variant: same shape/type scale as the default (Amber) button —
 * Amber stays exclusive to the Download CTA — but Pine with warm-white
 * text, hover Leaf (matching the theme.json button hover).
 */
.vp-btn-pine .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.vp-btn-pine .wp-block-button__link:hover,
.vp-btn-pine .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

/*
 * "For coordinators" (Home): three alternating image/text rows between the
 * demo exits and the GPL band, tightened so the three read as one band.
 * Each screenshot is a core image block with "expand on click" — the figure
 * is capped at 560px on a 3/2 column split so rows stay short. Screenshots
 * sit in white cards carrying the feature cards' surface treatment —
 * accent-5 on a pine-tinted accent-6 hairline with the same quiet shadow —
 * plus an always-visible zoom badge in the bottom-right corner. Cream stays
 * reserved for its two accent surfaces. Below the tablet breakpoint each
 * row stacks image-above-text (source order), and the alternating flip
 * only exists at desktop.
 *
 * Every figure rule below is scoped under .vp-coord-row: the core lightbox
 * overlay (printed at wp_footer) clones the figure's class list, so an
 * unscoped max-width cap or corner badge would leak into the enlarged view.
 */
.vp-coord-rows {
	display: grid;
	gap: 2.5rem;
}

/* Same fix as .vp-cards: the flow layout's injected block-gap margins would
   fight the grid gap — the grid owns all spacing here, for the rows and for
   the two cells inside each row. */
.vp-coord-rows > .vp-coord-row,
.vp-coord-row > * {
	margin-block-start: 0;
}

.vp-coord-row {
	align-items: center;
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 782px) {
	.vp-coord-rows {
		gap: 3rem;
	}

	.vp-coord-row {
		gap: 3rem;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	/* Flipped rows keep the image dominant: the wide track moves to the
	   second column and the image reorders into it. */
	.vp-coord-row--flip {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.vp-coord-row--flip .vp-coord-row__media {
		order: 2;
	}
}

.vp-coord-row .vp-coord-row__media {
	margin: 0 auto;
	max-width: 560px;
	position: relative;
	width: 100%;
}

.vp-coord-row .vp-coord-row__media img {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgba(23, 82, 68, 0.06);
	display: block;
	height: auto;
	width: 100%;
}

/* Zoom affordance: always visible (touch devices have no hover), decorative
   only — pointer-events: none keeps the whole figure as the lightbox
   trigger. Pine magnifier-plus glyph on white, on the card hairline. */
.vp-coord-row .vp-coord-row__media::after {
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23175244' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M10.5 7.75v5.5M7.75 10.5h5.5M15.3 15.3 20 20'/%3E%3C/svg%3E") center / 1rem 1rem no-repeat;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 0.5rem;
	bottom: 0.625rem;
	box-shadow: 0 1px 2px rgba(23, 82, 68, 0.06);
	content: "";
	height: 2rem;
	pointer-events: none;
	position: absolute;
	right: 0.625rem;
	width: 2rem;
}

/* Belt and braces for the class-cloning above: never draw the badge inside
   the open lightbox. */
.wp-lightbox-overlay .vp-coord-row__media::after {
	content: none;
}

.vp-coord-row__title {
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}

.vp-coord-row__text p {
	margin: 0;
}

/*
 * Micro-motion layer. vp-site.js adds .vp-motion to <html> ONLY when the
 * visitor allows motion (prefers-reduced-motion: no-preference) — so with
 * reduced motion set, or without JS, everything below is fully static.
 */
.vp-motion .vp-fade {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.vp-motion .vp-fade.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.vp-demo,
	.vp-card {
		transition: box-shadow 0.25s ease, transform 0.25s ease;
	}

	.vp-demo:hover {
		box-shadow:
			0 2px 4px rgba(23, 82, 68, 0.07),
			0 10px 24px rgba(23, 82, 68, 0.09),
			0 28px 64px rgba(23, 82, 68, 0.1);
		transform: translateY(-3px);
	}

	/* Info cards lift a notch more gently than the demo surfaces. */
	.vp-card:hover {
		box-shadow:
			0 2px 4px rgba(23, 82, 68, 0.07),
			0 10px 24px rgba(23, 82, 68, 0.09);
		transform: translateY(-2px);
	}

	.wp-block-button__link {
		transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
	}

	.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		box-shadow: 0 6px 18px rgba(232, 163, 61, 0.35);
		transform: translateY(-1px);
	}

	/* The Pine variant lifts the same but glows Leaf, not Amber. */
	.wp-block-button.vp-btn-pine .wp-block-button__link:hover {
		box-shadow: 0 6px 18px rgba(46, 125, 91, 0.35);
	}
}

/*
 * Guided demo tour (inc/demo-tour.php). The bar sits in flow directly under
 * the header — part of the page, not a fixed overlay — a Pine band with
 * warm-white text, and the Amber Download link as its only CTA. The inner row
 * mirrors the header's alignwide measure so the bar's content lines up with
 * the wordmark above it. Everything wraps at narrow widths; the generic
 * intro sentence drops out below 600px (the per-page framing copy carries
 * the same message on-page).
 */
.vp-tour {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	/* Rendered outside theme.json's reach — pin the bar (and everything in
	   it) to Lato explicitly; it must never pick up a heading serif. */
	font-family: var(--wp--preset--font-family--lato);
	font-size: 0.875rem;
	line-height: 1.4;
}

.vp-tour__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
	padding: 0.625rem var(--wp--style--root--padding-right, 1.5rem) 0.625rem var(--wp--style--root--padding-left, 1.5rem);
}

.vp-tour__intro {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	margin: 0;
}

.vp-tour__badge {
	background: color-mix(in srgb, #FDFCFA 16%, transparent);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 0.375rem 0.625rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.vp-tour__note {
	opacity: 0.9;
}

@media (max-width: 600px) {
	.vp-tour__note {
		display: none;
	}
}

.vp-tour__nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.vp-tour__step {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, #FDFCFA 45%, transparent);
	text-underline-offset: 0.2em;
}

.vp-tour__step:hover {
	text-decoration-color: currentColor;
}

.vp-tour__count {
	opacity: 0.75;
	white-space: nowrap;
}

.vp-tour__cta {
	background: var(--wp--preset--color--accent-1);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	padding: 0.4375rem 0.9375rem;
	text-decoration: none;
	white-space: nowrap;
}

.vp-tour__cta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 92%, #1D2327 8%);
}

.vp-tour a:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* Per-page framing copy: the muted lead-in under a demo page's title. */
.vp-tour-framing {
	color: var(--wp--preset--color--accent-4);
	font-size: 1.0625rem;
	margin-top: 0.75rem;
}

/*
 * MailerLite embed placeholder on the Download page — a visibly unfinished
 * block so it cannot be mistaken for a working form.
 */
.vp-embed-placeholder {
	background: var(--wp--preset--color--accent-5);
	border: 2px dashed var(--wp--preset--color--accent-1);
	border-radius: 0.5rem;
	padding: 2rem;
	text-align: center;
}