/*
 * Elementor compatibility.
 *
 * entrust.css was written for the original markup:
 *
 *     section.text > .container > .row.blocks > .col-xs-12.col-md-6
 *
 * Elementor produces its own nesting instead:
 *
 *     section.text > .elementor-container > .elementor-column > .elementor-widget-wrap
 *
 * Most of the original CSS is descendant based (.text, p.intro,
 * .icon-and-content-blocks h2) and carries over untouched. This file only
 * bridges the handful of rules that depended on that old structure, so the
 * converted front page matches the hand built one.
 *
 * Only sections carrying .entrust-section are affected, so ordinary Elementor
 * pages are left alone.
 */

/* --- Container -------------------------------------------------------
 * Elementor's container is a fixed 1140px. The original .container steps
 * through the Bootstrap widths, which is what the section padding and the
 * heading width were designed around.
 */
.entrust-section > .elementor-container {
	padding-right: 15px;
	padding-left: 15px;
	width: auto;
	max-width: none;

	/* Elementor only wraps columns below 1024px. These sections put a full
	   width heading above a pair of half width columns, so they must wrap at
	   every size or the three would squash onto one row. */
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.entrust-section > .elementor-container {
		width: 750px;
	}
}

@media (min-width: 992px) {
	.entrust-section > .elementor-container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.entrust-section > .elementor-container {
		width: 1170px;
	}
}

/* --- Block spacing ---------------------------------------------------
 * Replaces .blocks > * and .blocks.triple-spacing > *, which relied on the
 * columns being direct children of the .blocks row.
 */
.entrust-section > .elementor-container > .elementor-column {
	margin-bottom: 1.1rem;
}

.icon-and-content-blocks.entrust-section > .elementor-container > .elementor-column {
	margin-bottom: 3rem;
}

/* --- Heading ---------------------------------------------------------
 * The h1 was a direct child of the section, outside .container. Its column
 * is pulled back out to the full section width so the bar still runs to the
 * section edges, and the padding the container added is removed.
 */
.entrust-heading-col {
	margin-right: -15px;
	margin-left: -15px;
}

.entrust-heading-col > .elementor-widget-wrap {
	padding: 0;
}

.entrust-heading-col .elementor-widget-heading {
	margin-bottom: 0;
}

/* Elementor wraps the heading in its own container, which would otherwise
   break the flex layout h1 relies on */
.entrust-heading-col .elementor-widget-heading .elementor-widget-container {
	display: flex;
}

/* --- Text --------------------------------------------------------------
 * Text Editor widgets add a bottom margin of their own on top of the
 * paragraph spacing entrust.css already applies.
 */
.entrust-section .elementor-widget-text-editor {
	margin-bottom: 0;
}

.entrust-section .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* --- Icon blocks -------------------------------------------------------
 * The icons and headings were centred by .icon-and-content-blocks img's auto
 * margins; Elementor's image widget needs telling.
 */
.icon-and-content-blocks .elementor-widget-image {
	margin-bottom: 0;
}

.icon-and-content-blocks .elementor-widget-image .elementor-widget-container {
	text-align: center;
}

.icon-and-content-blocks .elementor-widget-heading {
	margin-bottom: 0;
}

/* --- Full bleed sections ----------------------------------------------
 * The banner widget renders its own full width <section>, so the Elementor
 * wrapper around it must not constrain or pad it.
 */
.entrust-bare > .elementor-container {
	width: 100%;
	max-width: none;
	padding: 0;
}

.entrust-bare .elementor-widget-wrap {
	padding: 0;
}

.entrust-bare .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

/* --- Editor: the banner ------------------------------------------------
 * On the front end the banner needs two scripts before anything is visible:
 * Flickity adds .is-selected to lift a cell from opacity 0, and Blazy swaps
 * data-src in and adds .b-loaded to lift the image from opacity 0. Until
 * then all you see is .banner .carousel's own #f0f0f0 at 48vw tall, which is
 * the grey block that shows in the editor.
 *
 * So in the editor the banner is shown statically instead, the same way the
 * theme already handles no-JS: first cell only, fully opaque. The widget
 * renders real src/srcset in the editor to match, so no script is needed.
 */
.elementor-editor-active .banner .carousel .cell {
	display: none;
	opacity: 1;
	left: 0;
}

.elementor-editor-active .banner .carousel .cell:first-child {
	display: block;
}

.elementor-editor-active .banner .carousel .cell img {
	opacity: 1;
}

/* Flickity may not have run, so the viewport it would normally size needs a
   height of its own */
.elementor-editor-active .banner .carousel .flickity-viewport {
	min-height: 48vw;
}

/* Everything stays visible while editing.
 *
 * ScrollReveal hides each element it is given with inline styles until it
 * scrolls into view, which never happens reliably in the editor preview, so
 * headings and paragraphs would be invisible while being edited. entrust.js
 * now skips ScrollReveal in the editor; these rules are the safety net for
 * anything it reached first, and need !important to beat its inline styles.
 */
.elementor-editor-active [class*="js-scroll-reveal"] {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	-webkit-transform: none !important;
	filter: none !important;
	-webkit-filter: none !important;
}

/* Anything else still carrying .b-lazy in the editor (a Blazy image outside
   the banner widget) is shown rather than left at opacity 0. */
.elementor-editor-active .b-lazy {
	opacity: 1;
}

/* Note: .icon-and-content-blocks carries .hidden-xs, which only applies under
   @media (max-width: 767px). It is visible at editor width already, and is
   deliberately left hidden in the mobile preview so the editor matches the
   front end. */