/* The frame is opt-in: only the header/hero composition uses it. */
.wp-site-blocks {
	--concord-page-frame: 20px;
	--concord-page-gutter: var(--concord-page-frame);
	--concord-block-gap: 48px;
}

/*
 * Global space between the page's own content blocks (Hero, Latest News,
 * Testimonial Carousel, etc.), so back-to-back sections never sit flush
 * against each other regardless of their own background color - this is
 * separate from (and in addition to) each block's own internal top/bottom
 * padding. Scoped to .wp-block-post-content specifically (not
 * .wp-site-blocks) so it never touches the header/footer template parts -
 * only the actual content blocks between them. The last block gets none,
 * so it doesn't get pushed away from the footer.
 *
 * !important because several blocks (contact-form, custom-stores,
 * icon-cards, solutions-carousel, statement-banner, stats,
 * two-column-banner) zero their own margin-bottom with !important already
 * (to fight WordPress's own default block margin) - without matching
 * !important here, this rule would silently lose to theirs and those
 * blocks alone would get no gap.
 */
.wp-block-post-content > * {
	margin-bottom: var(--concord-block-gap) !important;
}

.wp-block-post-content > *:last-child {
	margin-bottom: 0 !important;
}

@media (max-width: 900px) {

	.wp-site-blocks {
		--concord-block-gap: 36px;
	}
}

@media (max-width: 600px) {

	.wp-site-blocks {
		--concord-block-gap: 24px;
	}
}

/*
 * WordPress serializes editor-selected button colors as utility classes with
 * !important.  Give those buttons the same front-end hover treatment as the
 * default Button style, while keeping the editor's normal state untouched.
 */
.wp-site-blocks .wp-element-button {
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.wp-site-blocks .wp-element-button.has-light-green-background-color:hover {
	border-color: var(--wp--custom--color--button-hover-light-green) !important;
	color: var(--wp--preset--color--dark-green) !important;
	background-color: var(--wp--custom--color--button-hover-light-green) !important;
}

.wp-site-blocks .wp-element-button.has-dark-green-background-color:hover {
	border-color: var(--wp--custom--color--button-hover-dark-green) !important;
	color: var(--wp--preset--color--white) !important;
	background-color: var(--wp--custom--color--button-hover-dark-green) !important;
}

.wp-site-blocks .wp-element-button.has-blue-background-color:hover {
	border-color: var(--wp--custom--color--button-hover-blue) !important;
	color: var(--wp--preset--color--white) !important;
	background-color: var(--wp--custom--color--button-hover-blue) !important;
}

.wp-site-blocks .wp-element-button.has-burgundy-background-color:hover {
	border-color: var(--wp--custom--color--button-hover-burgundy) !important;
	color: var(--wp--preset--color--white) !important;
	background-color: var(--wp--custom--color--button-hover-burgundy) !important;
}

.wp-site-blocks .wp-element-button.has-white-background-color:hover,
.wp-site-blocks .wp-element-button.has-gray-background-color:hover {
	border-color: var(--wp--custom--color--button-hover-white) !important;
	color: var(--wp--preset--color--dark-green) !important;
	background-color: var(--wp--custom--color--button-hover-white) !important;
}