/* Unimento Shape Dividers 2.2.0 */

/* ================= FRONTEND ================= */
.usd-shape-host {
	position: relative !important;
	isolation: isolate;
	width: 100%;
	max-width: none;
	overflow: visible !important;
}

.usd-shape-host.usd-host-has-top { padding-top: var(--usd-top-reserve, 0px); }
.usd-shape-host.usd-host-has-bottom { padding-bottom: var(--usd-bottom-reserve, 0px); }
.usd-shape-host > :not(.usd-divider) { margin-top: 0; margin-bottom: 0; }

.usd-divider {
	position: absolute;
	left: 50%;
	width: var(--usd-width, 100%);
	height: var(--usd-height, 110px);
	color: var(--usd-color, #fff);
	pointer-events: none;
	z-index: 50;
	line-height: 0;
	transform-origin: center;
}
.usd-divider svg { display:block; width:100%; height:100%; overflow:visible; }
.usd-divider-bottom { bottom: calc(0px - var(--usd-offset, 0px)); transform: translateX(-50%); }
.usd-divider-bottom.usd-divider-flip { transform: translateX(-50%) scaleX(-1); }
.usd-divider-top { top: var(--usd-offset, 0px); transform: translateX(-50%) scaleY(-1); }
.usd-divider-top.usd-divider-flip { transform: translateX(-50%) scale(-1,-1); }

.usd-shape-host .wp-block-cover__image-background,
.usd-shape-host .wp-block-cover__video-background,
.usd-shape-host .wp-block-cover__background { z-index:0; }
.usd-shape-host .wp-block-cover__inner-container { position:relative; z-index:1; }

body:not(.wp-admin) .usd-shape-host.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* ================= EDITOR =================
 * 2.2.0 deliberately DOES NOT wrap BlockEdit.
 * Gutenberg keeps its native block-list DOM, title spacing and alignfull math.
 * The divider is painted on Gutenberg's own block wrapper via pseudo-elements.
 */
.editor-styles-wrapper .usd-editor-shape-host {
	position: relative !important;
	overflow: visible !important;
	isolation: isolate;
}

.editor-styles-wrapper .usd-editor-shape-host.usd-editor-has-top {
	margin-top: var(--usd-top-reserve, 0px) !important;
}
.editor-styles-wrapper .usd-editor-shape-host.usd-editor-has-bottom {
	margin-bottom: var(--usd-bottom-reserve, 0px) !important;
}

.editor-styles-wrapper .usd-editor-shape-host::before,
.editor-styles-wrapper .usd-editor-shape-host::after {
	content: "";
	position: absolute;
	left: 50%;
	pointer-events: none;
	z-index: 20;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	transform-origin: center;
}

.editor-styles-wrapper .usd-editor-shape-host.usd-editor-has-top::before {
	display: block;
	width: var(--usd-top-width, 100%);
	height: var(--usd-top-height, 110px);
	top: calc(0px - var(--usd-top-reserve, 0px) + var(--usd-top-offset, 0px));
	background-image: var(--usd-top-image);
	transform: translateX(-50%) scaleY(-1) var(--usd-top-flip, scaleX(1));
}
.editor-styles-wrapper .usd-editor-shape-host.usd-editor-has-bottom::after {
	display: block;
	width: var(--usd-bottom-width, 100%);
	height: var(--usd-bottom-height, 110px);
	bottom: calc(0px - var(--usd-bottom-reserve, 0px) - var(--usd-bottom-offset, 0px));
	background-image: var(--usd-bottom-image);
	transform: translateX(-50%) var(--usd-bottom-flip, scaleX(1));
}

/* Keep dividers behind Gutenberg selection UI but above the image. */
.editor-styles-wrapper .usd-editor-shape-host > .block-editor-block-list__block-edit,
.editor-styles-wrapper .usd-editor-shape-host > .block-editor-block-list__block-selection-button {
	position: relative;
	z-index: 21;
}

.usd-control-heading { font-size:11px; font-weight:700; letter-spacing:.08em; margin:14px 0 8px; opacity:.65; }
.usd-control-separator { border:0; border-top:1px solid #ddd; margin:18px 0 14px; }
