/**
 * Shaped edges — the shared layer (1.17.0). Loaded by every block that
 * carries edges: the plugin's two blocks through block.json, a theme block
 * through ssec_edges_enqueue(). The per-instance mask itself is printed by
 * ssec_print_edge_css() from wp_footer; this file holds what is common.
 *
 * Site tokens a theme MAY set on :root (1.38.0), both read with fallbacks by
 * includes/screen-tiers.php and never declared by the plugin:
 *   --sx-edge-scale-ref    unitless NUMBER of CSS px, default 1920 — the
 *                          viewport width at which a "scale with screen
 *                          width" edge reaches its authored depth.
 *   --sx-edge-scale-floor  LENGTH, default 16px — the smallest a scaled
 *                          edge shrinks to.
 * Writing `1920px` for the ref makes the generated clamp() an invalid
 * calc(); --sx-edge-top/-bottom then resolve to that invalid stream (the
 * var() fallback is taken only when -tier is guaranteed-invalid, not when
 * its value is unusable), the band's padding collapses to 0 and the mask
 * vanishes on every scaled edge.
 */

/* Every edge-capable block. The depth defaults live here rather than on
   each block so a block that is merely OVERLAPPED by a neighbour's edge (no
   edges of its own) can still resolve the var() the neighbour pass hands it
   in --sx-overlap-top/-bottom. Arches are drawn at depth x ratio, so they
   need a bigger default than the other edges to read as an archway rather
   than a bump. */
.sx-edge-host {
	--sx-edge-default: clamp(24px, 4vw, 56px);
	--sx-edge-arch-default: clamp(72px, 11vw, 190px);
	--sx-edge-top: 0px;
	--sx-edge-bottom: 0px;

	/* Seal (1.38.0). The per-screen-size inputs that includes/screen-tiers.php
	   reads are custom properties, and custom properties inherit: without
	   these a band nested inside another band would pick up its parent's
	   depths. `initial` on an unregistered property is the guaranteed-invalid
	   value, which is "unset" to var(), so every chain falls through to its
	   own declared base. Inline data and the class-gated tier rules are
	   (0,2,0) or more and beat these (0,1,0) resets, so a band's own values
	   always win. The overlap inputs are sealed for the same reason; the
	   --sx-overlap-top/-bottom properties themselves are deliberately NOT
	   reset (a neighbour hands them down on purpose). */
	--sx-edge-top-tier: initial;
	--sx-edge-top-base: initial;
	--sx-edge-top-n: initial;
	--sx-edge-top-laptop: initial;
	--sx-edge-top-tablet: initial;
	--sx-edge-top-mobile: initial;
	--sx-edge-bottom-tier: initial;
	--sx-edge-bottom-base: initial;
	--sx-edge-bottom-n: initial;
	--sx-edge-bottom-laptop: initial;
	--sx-edge-bottom-tablet: initial;
	--sx-edge-bottom-mobile: initial;
	--sx-overlap-top-tier: initial;
	--sx-overlap-top-base: initial;
	--sx-overlap-top-n: initial;
	--sx-overlap-top-laptop: initial;
	--sx-overlap-top-tablet: initial;
	--sx-overlap-top-mobile: initial;
	--sx-overlap-bottom-tier: initial;
	--sx-overlap-bottom-base: initial;
	--sx-overlap-bottom-n: initial;
	--sx-overlap-bottom-laptop: initial;
	--sx-overlap-bottom-tablet: initial;
	--sx-overlap-bottom-mobile: initial;
}

/* ------------------------------------------------------------------ */
/* Fill: give the carved gap a colour of its own                        */
/* ------------------------------------------------------------------ */
/* A shaped edge is a hole cut through the block, so the gap shows
   whatever is painted behind — normally the page background. This wrapper
   (emitted by ssec_edges_render() only when a fill or an overlap is set)
   paints a band of the fill colour behind each carved edge, so the cut
   reveals that colour instead. The block sits above it and covers the band
   everywhere the mask has NOT cut away.

   z-index rather than source order: the bands are absolutely positioned
   and would otherwise paint over the static block. */
.sx-edge-fill {
	/* Repeated here as well as on .sx-edge-host: custom properties inherit
	   downward, and this element is the PARENT, so it cannot read the block's
	   copy. Without it --sx-edge-top resolves to an undefined var, the height
	   goes invalid at computed-value time, and the band silently collapses. */
	--sx-edge-default: clamp(24px, 4vw, 56px);
	--sx-edge-arch-default: clamp(72px, 11vw, 190px);

	/* Same seal as .sx-edge-host: this wrapper resolves its own copy of the
	   edge depth from its own inline inputs and must not read a parent
	   wrapper's. */
	--sx-edge-top-tier: initial;
	--sx-edge-top-base: initial;
	--sx-edge-top-n: initial;
	--sx-edge-top-laptop: initial;
	--sx-edge-top-tablet: initial;
	--sx-edge-top-mobile: initial;
	--sx-edge-bottom-tier: initial;
	--sx-edge-bottom-base: initial;
	--sx-edge-bottom-n: initial;
	--sx-edge-bottom-laptop: initial;
	--sx-edge-bottom-tablet: initial;
	--sx-edge-bottom-mobile: initial;

	position: relative;
	z-index: 0;
}

.sx-edge-fill > .sx-edge-host {
	position: relative;
	z-index: 1;
}

.sx-edge-fill::before,
.sx-edge-fill::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 0;
	pointer-events: none;
}

.sx-edge-fill::before {
	top: 0;
	height: var(--sx-edge-top, 0px);
	background: var(--sx-fill-top, transparent);
}

.sx-edge-fill::after {
	bottom: 0;
	height: var(--sx-edge-bottom, 0px);
	background: var(--sx-fill-bottom, transparent);
}

/* ------------------------------------------------------------------ */
/* Overlap: lay a shaped edge OVER the neighbouring block               */
/* ------------------------------------------------------------------ */
/* The wrapper pulls the neighbour under this block by the edge's depth
   and lifts the block above it, so whatever the neighbour paints — an
   image, a gradient, a slideshow — shows through the cut. A flat fill
   cannot do that, which is the whole reason this mode exists. The
   neighbour, when it is an edge block itself, receives the depth from the
   neighbour pass and pads its facing side by it (--sx-overlap-top/-bottom
   in its own stylesheet), so its content never sits under the shape. A
   core block under an overlapping edge keeps its own padding.

   z-index 1, not 0: the wrapper has to paint above the neighbour, which
   follows it in the DOM. The fill strips stay transparent on an
   overlapped edge (ssec_edges_render skips the fill there), so nothing of
   this wrapper covers the neighbour except the block's own opaque shape. */
.sx-edge-fill.is-overlap-top,
.sx-edge-fill.is-overlap-bottom {
	z-index: 1;
}

.sx-edge-fill.is-overlap-top {
	margin-top: calc(-1 * var(--sx-edge-top, 0px));
}

.sx-edge-fill.is-overlap-bottom {
	margin-bottom: calc(-1 * var(--sx-edge-bottom, 0px));
}

/* Old-browser fallback — same invalid-at-computed-value-time trap as the
   blocks' own stylesheets: static stand-ins for the fluid tokens. */
@supports not (padding: clamp(1px, 2px, 3px)) {
	.sx-edge-host,
	.sx-edge-fill {
		--sx-edge-default: 40px;
		--sx-edge-arch-default: 120px;
	}
}