/* Page title banner (Divi page-header section): mural behind the theme's H1.
   Only on pages sr-push has marked as converted (body class added in sr-blocks.php). */
body.sr-converted h1.main_title {
	margin-bottom: 30px;
	padding: 50px 16px;
	background: #fff url("/wp-content/uploads/2016/07/mural-header.jpg") center / cover no-repeat;
	color: #fff;
	font-size: clamp(32px, 6vw, 50px);
	font-weight: 700;
	line-height: 1em;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 3px 10px #000;
}
/* Divi's header row added 2% padding on desktop on top of the section's 50px. */
@media (min-width: 981px) {
	body.sr-converted h1.main_title {
		padding-top: calc(50px + 2vw);
		padding-bottom: calc(50px + 2vw);
	}
}

/* Divi Custom CSS makes .entry-content a flex column (for the homepage hero), which stops
   aligned images from floating. Normal flow on converted pages. */
body.sr-converted .entry-content {
	display: block;
}

/* Breathing room between the end of the content and the footer. */
body.sr-converted #main-content {
	padding-bottom: 30px;
}

/* Section banner (Divi super-subhead): mural strip, heading in a translucent white box.
   Under a classic theme the group's contents sit in .wp-block-group__inner-container. */
.wp-block-group.is-style-section-banner {
	clear: both;
	margin-top: 2.5em;
	margin-bottom: 1.5em;
	padding: 8px 0;
	border: 1px solid #333;
	border-left-width: 0;
	background-image: url("/wp-content/uploads/2016/05/cut-mural.jpg");
	text-align: left;
}
.wp-block-group.is-style-section-banner .wp-block-group__inner-container {
	display: inline-block;
	padding: 8px 8px 0 30px;
	background-color: rgba(255, 255, 255, 0.7);
}

/* Details blocks as Divi accordion items: bordered rows, closed ones on light grey. The padding
   goes on the summary rather than the details, so the whole row stays clickable. */
.wp-block-details {
	margin-top: 0;
	margin-bottom: 0;
	border: 1px solid #d9d9d9;
	border-radius: 3px;
	background-color: #fff;
}
.wp-block-details + .wp-block-details {
	margin-top: 10px;
}
.wp-block-details:not([open]) {
	background-color: #f4f4f4;
}
.wp-block-details > summary {
	padding: 16px 20px;
	color: #333;
	font-size: 1.1em;
	font-weight: 600;
	cursor: pointer;
}
.wp-block-details > :not(summary) {
	margin-right: 20px;
	margin-left: 20px;
}
.wp-block-details > :last-child:not(summary) {
	margin-bottom: 20px;
}

/* Paragraph spacing: one blank line after every paragraph. Divi gives paragraphs 1em and removes it
   from the last one in each container, even when a list or button follows. Only a paragraph that
   really ends its container has none. */
body.sr-converted .entry-content p {
	padding-bottom: 1.5em;
}
body.sr-converted .entry-content p:last-child {
	padding-bottom: 0;
}
body.sr-converted .entry-content > .wp-block-details + p,
body.sr-converted .entry-content > .wp-block-gallery + p {
	margin-top: 1.5em;
}

/* Small gap between list items, which Divi leaves at zero. */
body.sr-converted .entry-content .wp-block-list > li + li {
	margin-top: 0.5em;
}

/* Vertical spacing between top-level blocks. Under Divi, core's images, buttons and columns have
   no margins. After a paragraph, its padding counts towards the same 2.5em. */
body.sr-converted .entry-content > .wp-block-image,
body.sr-converted .entry-content > .wp-block-buttons,
body.sr-converted .entry-content > .wp-block-columns {
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}
body.sr-converted .entry-content > p + .wp-block-image,
body.sr-converted .entry-content > p + .wp-block-buttons,
body.sr-converted .entry-content > p + .wp-block-columns,
body.sr-converted .entry-content > p + .is-style-section-banner {
	margin-top: 1em;
}
body.sr-converted .entry-content > :first-child {
	margin-top: 0;
}

/* Buttons as Divi's: transparent with a border, blue unless a style or callout box says otherwise.
   Only on converted pages, and in the editor canvas. */
body.sr-converted .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
	padding: 0.3em 1em;
	border: 2px solid currentColor;
	border-radius: 3px;
	background-color: transparent;
	color: #2ea3f2;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.7em;
}
body.sr-converted .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button__link:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
body.sr-converted .wp-block-button.is-style-donate .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-donate .wp-block-button__link {
	color: #4f4182;
}

/* Callout box (Divi call-to-action): green box, centred black text, white buttons. Under a classic
   theme the group's contents sit in .wp-block-group__inner-container. Side-by-side boxes match height. */
.wp-block-group.is-style-callout-box {
	padding: 40px;
	background-color: rgba(101, 140, 46, 0.58);
	color: #000;
	text-align: center;
}
.wp-block-column > .wp-block-group.is-style-callout-box {
	box-sizing: border-box;
	height: 100%;
}
body.sr-converted .is-style-callout-box .wp-block-button__link,
.editor-styles-wrapper .is-style-callout-box .wp-block-button__link {
	color: #fff;
}
body.sr-converted .is-style-callout-box .wp-block-button__link:hover,
.editor-styles-wrapper .is-style-callout-box .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

/* Space between images stacked in a column (Divi's image modules had a bottom margin). */
.wp-block-column > .wp-block-image + .wp-block-image {
	margin-top: 1.5em;
}

/* Partner logos above their text (Easy Giving). */
.wp-block-image.sr-partner-logo {
	margin-bottom: 1.5em;
}
.wp-block-image.sr-partner-logo img {
	width: auto;
	max-height: 200px;
}

/* Spectra gallery carousel arrows: white circle behind the arrow, so it stands out on the photos.
   Spectra has no arrow background setting. The arrow colour itself is still Spectra's.
   !important because something on the page cleared the background except on hover. */
.spectra-image-gallery .uagb-slick-carousel .slick-arrow.spectra-image-gallery__control-arrows--carousel,
.spectra-image-gallery .uagb-slick-carousel .slick-arrow.spectra-image-gallery__control-arrows--carousel:hover,
.spectra-image-gallery .uagb-slick-carousel .slick-arrow.spectra-image-gallery__control-arrows--carousel:focus {
	display: flex;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background-color: #fff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Left/right-aligned images float beside the text, except on phones where they sit centred
   above it. Covers both image markups: figure.wp-block-image.alignleft and the older
   div.wp-block-image > figure.alignleft that Divi outputs. */
@media (min-width: 601px) {
	.wp-block-image.alignleft,
	.wp-block-image > .alignleft {
		float: left;
		margin: 0 1.5em 1em 0;
	}
	.wp-block-image.alignright,
	.wp-block-image > .alignright {
		float: right;
		margin: 0 0 1em 1.5em;
	}
}
@media (max-width: 600px) {
	.wp-block-image.alignleft,
	.wp-block-image.alignright,
	.wp-block-image > .alignleft,
	.wp-block-image > .alignright {
		display: table;
		float: none;
		margin: 0 auto 1em;
	}
}