/*
 * Accessibility refinements that theme.json cannot express directly:
 * a branded, contrast-checked focus ring, and a reduced-motion safeguard.
 */

/*
 * The root block-gap spacing applies between top-level site-blocks siblings
 * (header/main/footer). The template-part block doesn't reliably honour a
 * margin override via its own block attributes, so it's removed here instead.
 */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--charcoal);
	outline-offset: 2px;
}

/* On dark moss sections (hero, giving, footer) charcoal would be invisible, so switch to white. */
.has-moss-background-color :focus-visible,
.wp-block-cover :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * The core Query Loop's grid layout (columnCount) doesn't collapse to a
 * single column at narrow widths on its own, so it's overridden here for
 * the Weekly Service Sheets archive's three-tile grid.
 */
@media (max-width: 599px) {
	.weekly-sheets-grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

/*
 * CSS Grid stretches each row to a common height by default, but the card
 * inside each grid cell only grows to fit its own content unless told to
 * fill the cell — so excerpts of different lengths would otherwise produce
 * tiles of different heights.
 */
.weekly-sheets-grid .service-sheet-card {
	height: 100%;
	box-sizing: border-box;
}

/*
 * Footer "Support us" column: the logo sits at the bottom of the column
 * (level with the address column's last line) while the heading and Giving
 * link stay grouped together at the top.
 */
.footer-support-column {
	position: relative;
	padding-bottom: 100px;
}

.footer-logo-image img {
	width: 75px;
	height: 75px;
}

.footer-logo-image {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 !important;
}