/*
 * A weekly program's page (/weekly/jumuah/; templates/single-sr_weekly_program.html, plugin block
 * sacred-roots/weekly-program). It uses the single event page's markup and classes, so events.css lays
 * it out; this file only gives it the event pages' cream colors and sizes (events.css scopes those to
 * The Events Calendar's pages), plus the Qurʾān quote and some space above the footer.
 */
:root:has(> body.single-sr_weekly_program) {
	--sr-events-bg: var(--wp--preset--color--accent-3);
	--sr-events-ink: var(--wp--preset--color--accent-2);
	--sr-events-ink-soft: color-mix(in srgb, var(--wp--preset--color--accent-2) 70%, var(--wp--preset--color--accent-3));
	--sr-events-link: var(--wp--preset--color--accent-1);
	--sr-events-link-hover: var(--wp--preset--color--crimson-deep);
	--sr-events-gutter: 3vw;
	--sr-events-text: clamp(18.16px, 17.68px + 0.1234vw, 19.456px);
}

body.single-sr_weekly_program {
	background-color: var(--sr-events-bg);
	color: var(--sr-events-ink);
}

/* Event pages end with links to the previous and next events; this one just needs room above the footer. */
.sr-weekly-program {
	padding-bottom: 6.6vw;
}

/* The quote: centered, italic heading font, under a thin rule spanning the description and flyer
   (measured on the Squarespace Jumu'ah event page). */
.sr-weekly-program .sr-event__content blockquote {
	clear: both;
	margin: 44px 0 0;
	padding: 43px 0 0;
	border: 0;
	border-top: 1px solid currentColor;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--sr-events-text);
	font-style: italic;
	line-height: 1.39;
	text-align: center;
}

.sr-weekly-program .sr-event__content blockquote p {
	margin: 0;
}

@media (max-width: 781px) {
	:root:has(> body.single-sr_weekly_program) {
		--sr-events-gutter: 6vw;
	}

	.sr-weekly-program {
		padding-bottom: 76px;
	}
}