/* Vertical rhythm shared by every page: hero/intro and section spacing. */
:root {
	--bdu-hero-space: min(144px, 10vw);
	--bdu-section-space: min(120px, 8.333333vw);
}

@media (max-width: 781px) {
	:root {
		--bdu-hero-space: 44px;
		--bdu-section-space: 56px;
	}
}

/* Match the front-page content width in every template and the block editor.
 * Desktop widths are defined in theme.json; mobile keeps 24px side gutters.
 */
@media (max-width: 781px) {
	body,
	.editor-styles-wrapper {
		--wp--style--global--content-size: calc(100vw - 48px);
		--wp--style--global--wide-size: calc(100vw - 48px);
	}
}

/* Primary buttons lift onto a hard offset shadow, like a block print, and
 * press flat when clicked. Coloured buttons keep their preset colours.
 */
.wp-element-button,
.wp-block-button__link {
	transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s cubic-bezier(.2, .8, .2, 1), background-color .18s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translate(-4px, -4px);
	box-shadow: 4px 4px 0 #111;
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: none;
	box-shadow: 0 0 0 #111;
	transition-duration: .06s;
}

/* Secondary buttons (the "Outline" style, and document downloads): the same
 * shape and lift as primary buttons, outlined instead of filled.
 */
.wp-block-button.is-style-outline > .wp-block-button__link,
.bdu-members .bdu-members__document .wp-block-button__link {
	border: 1px solid currentColor;
	border-radius: 0;
	background-color: var(--wp--preset--color--base) !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}

.bdu-members .bdu-members__document .wp-block-button__link {
	color: var(--wp--preset--color--bdu-burgundy) !important;
}

.wp-site-blocks a:where(:not(.wp-element-button)) {
	transition: text-decoration-color .18s ease, color .18s ease;
}

/* The designed pages carry their own large headline; the template's page
 * title becomes a quiet section label above it.
 */
main:has(.bdu-about, .bdu-contact, .bdu-newcomers, .bdu-members) .wp-block-post-title {
	color: var(--wp--preset--color--accent-4) !important;
	font-size: clamp(1rem, 1.25vw, 1.25rem) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	.wp-site-blocks a {
		transition: none;
	}

	/* Keep the shadow as the hover cue, without the movement. */
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}