/* Shared section background rendering. Loaded after every block stylesheet. */
.loa-has-section-background,
.loa-section-background-editor-shell,
.loa-section-background-editor-shell .loa-editor,
.loa-editor-has-section-background .loa-editor {
	background-image: var(--loa-section-background-image) !important;
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.loa-section-background-editor-shell {
	box-sizing: border-box;
	width: 100%;
}

/* Opaque Roof Types wrappers would otherwise hide the selected section image. */
.loa-has-section-background.loa-roof-types .loa-roof-types__items,
.loa-has-section-background.loa-roof-types .loa-roof-types__item-shell,
.loa-section-background-editor-shell .loa-roof-types__items,
.loa-section-background-editor-shell .loa-roof-types__item-shell,
.loa-editor-has-section-background .loa-roof-types__items,
.loa-editor-has-section-background .loa-roof-types__item-shell {
	background-color: transparent !important;
}

/* Block-level title color. The stored value is a CSS variable on the block root. */
.loa-has-title-color h1,
.loa-has-title-color h2,
.loa-has-title-color h3,
.loa-has-title-color h4,
.loa-has-title-color h5,
.loa-has-title-color h6,
.loa-has-title-color .loa-image-links__title,
.loa-has-title-color .loa-content-section__button-heading,
.loa-has-title-color .loa-footer-content__title-link,
.loa-editor-has-title-color .loa-editor h1,
.loa-editor-has-title-color .loa-editor h2,
.loa-editor-has-title-color .loa-editor h3,
.loa-editor-has-title-color .loa-editor h4,
.loa-editor-has-title-color .loa-editor h5,
.loa-editor-has-title-color .loa-editor h6,
.loa-editor-has-title-color .loa-editor .loa-image-links__title,
.loa-editor-has-title-color .loa-editor .loa-content-section__button-heading,
.loa-editor-has-title-color .loa-editor .loa-footer-content__title-link {
	color: var(--loa-title-color) !important;
}

/* Media always appears before its text column on phones, regardless of the desktop side setting. */
@media screen and (max-width: 782px), screen and (max-device-width: 782px) {
	.loa-two-column__media,
	.loa-roof-types__media,
	.loa-video-section__video,
	.loa-image-content-cta__image,
	.loa-edge-image-content__image,
	.loa-location-map__map {
		order: -1 !important;
	}

	.loa-two-column__content,
	.loa-roof-types__item-content,
	.loa-video-section__content,
	.loa-image-content-cta__content,
	.loa-edge-image-content__content,
	.loa-location-map__content {
		order: 0 !important;
	}
}