/* WERLA theme styles that theme.json cannot express.
   Colours, sizes and spacing come from theme.json presets (same names Kentwood used). */

:root {
	--werla-radius: 28px;
	--werla-radius-sm: 16px;
	--werla-shadow: 0 10px 30px rgba(2, 0, 72, 0.10);
	--werla-line: #bfdef3;
	--werla-field: #f5faff;
	--werla-focus: var(--wp--preset--color--sky);
	--werla-focus-dark: var(--wp--preset--color--sunrise);
}

/* ---------- Page frame: footer sits at the bottom even on short pages ---------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.wp-site-blocks > * {
	margin-block: 0;
}
.wp-site-blocks > main,
.wp-site-blocks > .werla-main {
	flex: 1 0 auto;
}
body.admin-bar .wp-site-blocks {
	min-height: calc(100vh - 32px);
}
@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks {
		min-height: calc(100vh - 46px);
	}
}

/* ---------- Sky backdrop behind every page, as on the old site ----------
   The see-through panels in the page content were designed to sit on this photo. It is a fixed
   layer rather than background-attachment: fixed, which phones ignore or draw slowly. Wide screens
   get the whole view; tall screens get a crop centred on the cypress. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--wp--preset--color--mist) url(../images/backdrop-wide.webp) 50% 40% / cover no-repeat;
}
@media (orientation: portrait) {
	body::before {
		background-image: url(../images/backdrop-tall.webp);
		background-position: 50% 55%;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------- Focus: always visible, high contrast on light and dark ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-element-button:focus-visible {
	outline: 3px solid var(--werla-focus);
	outline-offset: 3px;
}
:where(.has-primary-background-color, .has-secondary-background-color, .has-contrast-background-color, .has-marsh-background-color, .werla-hero, .werla-footer, .werla-overlay, .werla-thanks-band) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
:where(.has-primary-background-color, .has-secondary-background-color, .has-contrast-background-color, .has-marsh-background-color, .werla-hero, .werla-footer, .werla-overlay, .werla-thanks-band) .wp-element-button:focus-visible {
	outline-color: var(--werla-focus-dark);
}

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link {
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	padding: calc(0.8rem - 2px) calc(1.6rem - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}
:where(.has-primary-background-color, .has-secondary-background-color, .has-contrast-background-color, .has-marsh-background-color, .werla-hero) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ---------- Header ---------- */
.werla-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(2, 0, 72, 0.08), 0 6px 18px rgba(2, 0, 72, 0.05);
}
body.admin-bar .werla-site-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .werla-site-header {
		top: 46px;
	}
}
@media (max-width: 600px) {
	body.admin-bar .werla-site-header {
		top: 0;
	}
}
.werla-header {
	padding-block: 0.6rem;
	color: var(--wp--preset--color--primary);
}
.werla-header__inner {
	gap: 1rem;
}
.werla-brand {
	gap: 0.85rem;
	min-width: 0;
}
.werla-brand .wp-block-site-logo img {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #cfe0f3;
}
.werla-brand__name {
	max-width: 17rem;
	font-size: var(--wp--preset--font-size--small);
}
.werla-header__actions {
	gap: 1.5rem;
}
.werla-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	padding-block: 0.3rem;
	border-bottom: 2px solid transparent;
}
.werla-nav .wp-block-navigation-item__content:hover,
.werla-nav .current-menu-item > .wp-block-navigation-item__content,
.werla-nav [aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--sky);
}
.werla-donate .wp-block-button__link {
	padding: 0.65rem 1.3rem;
}
.werla-header .wp-block-navigation__responsive-container-open {
	border: 2px solid currentColor;
	border-radius: 999px;
	padding: 0.45rem;
	color: var(--wp--preset--color--primary);
}
.werla-header .wp-block-button__link {
	white-space: nowrap;
}
@media (max-width: 1100px) {
	.werla-brand__name {
		display: none;
	}
}
/* Use the menu button up to small laptops (WordPress switches only below 600px, which crowds tablets) */
@media (max-width: 1023px) {
	.werla-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.werla-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.werla-header__actions {
		gap: 0.6rem;
	}
	.werla-header__actions .werla-donate {
		order: -1;
	}
}
@media (max-width: 599px) {
	.werla-brand .wp-block-site-logo img {
		width: 52px;
		height: 52px;
	}
}

/* ---------- Mobile menu overlay ---------- */
.wp-block-navigation__responsive-container.is-menu-open:has(.werla-overlay) {
	background-color: var(--wp--preset--color--primary);
}
.werla-overlay {
	min-height: 100vh;
	padding: var(--wp--preset--spacing--50);
}
.werla-overlay__body {
	gap: 1.5rem;
	padding-top: 1rem;
}
.werla-overlay a {
	color: inherit;
}
.werla-overlay__nav .wp-block-navigation-item__content {
	font-weight: 700;
	padding-block: 0.35rem;
}
.werla-overlay__donate .wp-block-button__link {
	padding: 0.8rem 2rem;
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------- Footer ---------- */
.werla-footer {
	padding-block: var(--wp--preset--spacing--60);
}
.werla-footer a {
	color: inherit;
}
.werla-footer__name {
	font-size: var(--wp--preset--font-size--medium);
	margin-bottom: 0.5rem;
}
.werla-footer__contact {
	line-height: 1.7;
}
.werla-footer__mid {
	text-align: center;
}
.werla-footer__mid p {
	margin-top: 0.5rem;
}
.werla-footer__end {
	text-align: right;
}
.werla-footer__legal {
	opacity: 0.92;
	margin-top: 0.75rem;
}
@media (max-width: 781px) {
	.werla-footer__cols {
		text-align: center;
	}
	.werla-footer__end {
		text-align: center;
	}
	.werla-footer__end .wp-block-buttons,
	.werla-footer__end .wp-block-social-links {
		justify-content: center;
	}
}

/* ---------- Homepage ---------- */
/* The hero has no photo of its own: the sky backdrop shows through, so the page reads as one view. */
.werla-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(440px, 72vh, 680px);
	padding-block: clamp(3rem, 8vw, 6rem);
	color: var(--wp--preset--color--base);
}
.werla-hero > * {
	width: 100%;
}
/* Small white text needs its own navy pill to stay readable over bright sky and clouds. */
.werla-eyebrow {
	width: fit-content !important;
	max-width: 100%;
	margin-inline: auto !important;
	padding: 0.4em 1.1em 0.4em 1.4em;
	border-radius: 999px;
	background: rgba(2, 0, 72, 0.6);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}
@media (max-width: 599px) {
	.werla-eyebrow {
		padding-inline: 1em 0.85em;
		letter-spacing: 0.14em;
	}
}
.werla-hero__title {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto !important;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: rgba(2, 0, 72, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: clamp(2.1rem, 5.2vw, 4.4rem);
	line-height: 1.1;
}
.werla-hero__actions {
	margin-top: 1.75rem !important;
	gap: 0.75rem;
}
@media (max-width: 599px) {
	.werla-hero__title {
		border-radius: 48px;
		padding: 0.45em 0.7em;
	}
}

.werla-home-cards {
	padding-block: var(--wp--preset--spacing--60);
}
.werla-home-cards__cols {
	gap: 1.5rem;
}
.werla-photo-card {
	border-radius: var(--werla-radius);
	overflow: hidden;
	min-height: 100%;
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--werla-shadow);
}
@media (max-width: 781px) {
	.werla-photo-card {
		min-height: 440px;
	}
}
.werla-pill-panel {
	border-radius: 160px;
	padding: 3rem 1.75rem !important;
}
.werla-pill-panel h2 {
	margin-top: 0;
}
@media (max-width: 599px) {
	.werla-pill-panel {
		border-radius: 48px;
		padding: 2rem 1.25rem !important;
	}
}
.werla-home-cards__stack {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.werla-home-cards__stack > * {
	margin-block: 0 !important;
}
.werla-photo img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--werla-radius);
	box-shadow: var(--werla-shadow);
}
.werla-help-card {
	border-radius: var(--werla-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem) !important;
	box-shadow: var(--werla-shadow);
}
.werla-help-card h2 {
	margin-top: 0;
}

.werla-thanks-band {
	gap: 0.75rem 1.25rem;
	align-items: center;
	padding: 1.6rem var(--wp--preset--spacing--50);
}
.werla-thanks-band p {
	margin: 0;
}
.werla-thanks-band__actions {
	gap: 0.75rem;
}

.werla-motto {
	min-height: 0;
	padding-block: clamp(2.5rem, 7vw, 4rem);
}
.werla-motto__text {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	letter-spacing: 0.28em;
	margin: 0;
}
@media (max-width: 599px) {
	.werla-motto__text {
		letter-spacing: 0.12em;
	}
}

/* ---------- Page content: existing pages, restyled without edits ---------- */
.werla-main--page,
.werla-main--single,
.werla-main--list,
.werla-main--404 {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
/* Pages often start with a full-width section that has its own top margin */
.werla-main--page .wp-block-post-content > :first-child {
	margin-top: 0;
}
/* A page that ends with a full-width coloured section (Resources) runs it straight into the footer,
   rather than leaving a thin strip of sky between them. */
.werla-main--page:has(.wp-block-post-content > .alignfull.has-background:last-child) {
	padding-bottom: 0;
}
.werla-main--page .wp-block-post-content > .alignfull.has-background:last-child {
	margin-bottom: 0;
}

/* Rounded cards for coloured panels that are not full width. Inline radius from the editor still wins. */
.wp-block-post-content :where(.wp-block-group.has-background:not(.alignfull), .wp-block-column.has-background, .wp-block-cover:not(.alignfull)) {
	border-radius: var(--werla-radius);
}
.wp-block-post-content :where(.wp-block-group.has-background:not(.alignfull), .wp-block-column.has-background) {
	padding: var(--wp--preset--spacing--50);
}
/* Panels with a custom (usually see-through) colour get a frosted-glass blur, so text stays readable
   where the photo behind it is busy (trees, water) without changing the colour staff picked. */
.wp-block-post-content :is(.wp-block-group, .wp-block-column).has-background:not([class*="-background-color"]) {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
/* Panels with a custom see-through colour and white text. Their pale tints leave white text hard to
   read over the bright sky, so they get a see-through navy instead: the sky still shows through
   and the text stays readable. Only affects panels whose text is set to white. */
.wp-block-post-content :is(.wp-block-group, .wp-block-column).has-background.has-base-color:not([class*="-background-color"]) {
	background-color: rgba(2, 0, 72, 0.72) !important;
}

.wp-block-post-content :where(.wp-block-image) img {
	border-radius: 18px;
}
.wp-block-post-content :where(.wp-block-video) video {
	border-radius: 18px;
}

/* Section styles that existing pages already use */
/* section-1 on full-width groups is only a wrapper; style it as a panel only when it is not full width */
.wp-block-group.is-style-section-1:not(.alignfull):not(.has-background),
.wp-block-group.is-style-card:not(.has-background) {
	background-color: var(--wp--preset--color--base);
}
.wp-block-group.is-style-section-1:not(.alignfull),
.wp-block-group.is-style-card {
	border-radius: var(--werla-radius);
	box-shadow: var(--werla-shadow);
	padding: var(--wp--preset--spacing--50);
}
.wp-block-group.is-style-section-2:not(.has-background) {
	background-color: var(--wp--preset--color--tertiary);
}
.wp-block-group.is-style-section-2 {
	border-radius: var(--werla-radius);
	padding: var(--wp--preset--spacing--50);
}

/* GoDaddy's Site Designer (only on GoDaddy hosting) recolours boxes that use the section-1 to
   section-5 styles, and the headings and paragraphs inside them, assuming those boxes are light.
   On this site those names come from Kentwood and can hold any colour (white text on Get Involved),
   so text in them follows its box again. White section-1 panels keep dark text. */
body .wp-site-blocks .wp-block-post-content :is(.wp-block-group, .wp-block-column)[class*="is-style-section-"]:not(.has-text-color),
body .wp-site-blocks .wp-block-post-content :is(.wp-block-group, .wp-block-column)[class*="is-style-section-"] :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, cite):not(.has-text-color) {
	color: inherit;
}
body .wp-site-blocks .wp-block-post-content .wp-block-group.is-style-section-1:not(.alignfull):not(.has-background):not(.has-text-color) {
	color: var(--wp--preset--color--contrast);
}
body .wp-site-blocks .wp-block-post-content .wp-block-group.is-style-section-2:not(.has-background) {
	background-color: var(--wp--preset--color--tertiary);
}

.wp-block-image.is-style-polaroid img {
	background: #fff;
	padding: 10px 10px 36px;
	border-radius: 4px;
	box-shadow: var(--werla-shadow);
	transform: rotate(-1.5deg);
}

/* Cards wiggle a little on hover (the campy touch borrowed from option B) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-card:hover,
	.wp-block-post-content .wp-block-column.has-background:hover {
		animation: werla-wiggle 0.45s ease;
	}
}
@keyframes werla-wiggle {
	0%, 100% { rotate: 0deg; }
	30% { rotate: -1deg; }
	70% { rotate: 1deg; }
}

/* Details (accordions) on Safe Practices */
.wp-block-details {
	background: var(--wp--preset--color--base);
	border-radius: var(--werla-radius-sm);
	padding: 0.9rem 1.2rem;
	box-shadow: var(--werla-shadow);
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.wp-block-details + .wp-block-details {
	margin-top: 0.75rem;
}

/* File downloads on Resources */
.wp-block-file {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
/* Keep the alignment chosen in the editor (the Resources download buttons are centred under their PDFs) */
.wp-block-file.aligncenter,
.wp-block-file.has-text-align-center {
	justify-content: center;
}
.wp-block-file.alignright,
.wp-block-file.has-text-align-right {
	justify-content: flex-end;
}
.wp-block-file .wp-block-file__button {
	margin-inline: 0; /* spacing comes from the gap above */
	border-radius: 999px;
	padding: 0.55rem 1.2rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

/*
 * PDF previews. WordPress hides them until a script checks for PDF support, then shows them,
 * which pushes the page down after it has drawn. Phones get the download button only (an
 * 805px tall PDF is not readable there, and Android never shows it anyway); larger screens
 * show the preview from the first paint so nothing moves.
 */
@media (max-width: 781px) {
	.wp-block-file .wp-block-file__embed {
		display: none !important;
	}
}
@media (min-width: 782px) {
	.wp-block-file .wp-block-file__embed[hidden] {
		display: block;
	}
}

/* Fullscreen video shows the whole frame (ported from the Kentwood Site Editor CSS) */
.wp-block-video video:fullscreen,
.wp-block-video video:-webkit-full-screen {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	transform: none !important;
	background: #000;
}

/* Search */
.wp-block-search__inside-wrapper {
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--werla-line);
	padding: 4px;
}
.wp-block-search__input {
	border: 0;
	background: transparent;
	padding-inline: 1rem;
	font: inherit;
}
.wp-block-search__button {
	border-radius: 999px;
	margin-left: 0;
}

/* ---------- Forms ---------- */
/* Contact Form 7 (Contact Us, Volunteer Information) */
.wpcf7 {
	width: 100%;
	max-width: 100% !important;
	margin-inline: 0 !important;
	padding: clamp(1.25rem, 4vw, 2rem);
	background: var(--wp--preset--color--base);
	border-radius: var(--werla-radius-sm);
	box-shadow: var(--werla-shadow);
	box-sizing: border-box;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}
.wpcf7 form p {
	margin: 0 0 1.25rem;
}
.wpcf7 form p:last-of-type {
	margin-bottom: 0;
}
.wpcf7 label {
	display: block;
	font-weight: 700;
}
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea),
.wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 0.9rem;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--werla-field);
	border: 2px solid var(--werla-line);
	border-radius: 10px;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.wpcf7 textarea {
	min-height: 140px;
	resize: vertical;
}
.wpcf7 :is(input, textarea)::placeholder {
	color: #5a7285;
	opacity: 1;
}
.wpcf7 :is(input, select, textarea):focus,
.wpforms-container :is(input, select, textarea):focus {
	outline: 3px solid var(--werla-focus);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--sky);
	background: #fff;
}
.wpcf7 input[type="file"] {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem;
	font: inherit;
	background: var(--werla-field);
	border: 2px dashed var(--werla-line);
	border-radius: 10px;
	box-sizing: border-box;
	cursor: pointer;
}
.wpcf7 input[type="file"]::file-selector-button {
	margin-right: 1rem;
	padding: 0.5rem 1rem;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}
.wpcf7 input[type="submit"],
.wpforms-container .wpforms-submit {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	min-height: 0 !important;
	width: auto !important;
	padding: 0.85rem 2rem !important;
	font: inherit !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	background: var(--wp--preset--color--primary) !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.15s, background-color 0.15s;
}
.wpcf7 input[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
	background: var(--wp--preset--color--secondary) !important;
	transform: translateY(-2px);
}
.wpcf7 .wpcf7-spinner {
	display: none;
	margin: 0.75rem auto 0;
}
.wpcf7 form.submitting .wpcf7-spinner {
	display: block;
}
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: 0.9em;
	color: #b3261e;
}
.wpcf7 .wpcf7-not-valid {
	border-color: #b3261e !important;
}
.wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border-width: 2px;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #2e7d4f;
	background: #eefaf3;
	color: #1d5e3a;
}
.wpcf7 form:is(.invalid, .failed, .unaccepted, .spam) .wpcf7-response-output {
	border-color: #b3261e;
	background: #fdf0f0;
	color: #8f2525;
}

/* WPForms (Volunteer Application), modern markup */
.wpforms-container {
	--wpforms-field-border-radius: 10px;
	--wpforms-field-border-color: var(--werla-line);
	--wpforms-field-background-color: var(--werla-field);
	--wpforms-field-text-color: var(--wp--preset--color--contrast);
	--wpforms-label-color: var(--wp--preset--color--contrast);
	--wpforms-label-sublabel-color: #4b5568;
	--wpforms-label-error-color: #b3261e;
	--wpforms-button-background-color: var(--wp--preset--color--primary);
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: 999px;
	--wpforms-field-size-font-size: 1.05rem;
	--wpforms-label-size-font-size: 1.05rem;
	background: var(--wp--preset--color--base);
	border-radius: var(--werla-radius-sm);
	box-shadow: var(--werla-shadow);
	padding: clamp(1.25rem, 4vw, 2rem) !important;
	box-sizing: border-box;
	font-family: inherit;
}
/* WPForms fixes field heights in px, which clips text in this font */
.wpforms-container :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select) {
	height: auto !important;
	min-height: 2.9rem;
	line-height: 1.3 !important;
}
.wpforms-container .wpforms-field-label,
.wpforms-container legend {
	font-weight: 700 !important;
}
.wpforms-container .wpforms-error {
	color: #b3261e !important;
}

/* GiveWP donation form embed (the form itself is styled from inside its frame by the werla-site plugin) */
.wp-block-give-donation-form,
.givewp-donation-form-embed,
.root-data-givewp-embed {
	max-width: 640px;
	margin-inline: auto;
}
.wp-block-give-donation-form iframe,
.givewp-donation-form-embed iframe {
	border-radius: var(--werla-radius-sm);
	box-shadow: var(--werla-shadow);
}

/* GiveWP receipt shortcode on the confirmation pages */
#give_donation_receipt,
.give_receipt_wrapper,
.give-receipt {
	background: var(--wp--preset--color--base);
	border-radius: var(--werla-radius-sm);
	box-shadow: var(--werla-shadow);
	padding: clamp(1rem, 3vw, 1.75rem);
	border-collapse: separate;
	width: 100%;
}

/* Jetpack slideshow on Volunteer Information */
.wp-block-jetpack-slideshow {
	border-radius: 18px;
	overflow: hidden;
}

/* WP Call Button block on the homepage (the plugin puts its class on the wrapper and the link) */
.wp-call-button-block-button a,
a.wp-call-button-block-button {
	border-radius: 999px !important;
	padding: 0.8rem 1.8rem !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: transform 0.2s ease;
}
.wp-call-button-block-button a:hover,
a.wp-call-button-block-button:hover {
	transform: translateY(-2px);
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-call-button-block-button:hover {
		transform: none;
	}
}