/* PB Watermarks: background image and colour overlay for Group, Columns and Column.
   Variables are set per block (see pb-watermarks.php and editor.js):
   --pbw-img image, --pbw-pos focal point, --pbw-ov-c overlay colour, --pbw-ov-a strength (0 to 1). */

.pbw-has-image,
.pbw-has-overlay {
	position: relative;
	isolation: isolate; /* the overlay sits above the block's own background but below its content */
}

.pbw-has-image {
	background-image: var(--pbw-img);
	background-size: cover;
	background-position: var(--pbw-pos, 50% 50%);
	background-repeat: no-repeat;
}

.pbw-has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	--pbw-mix: color-mix(in srgb, var(--pbw-ov-c, #000) calc(var(--pbw-ov-a, 0.4) * 100%), transparent);
	background: var(--pbw-mix);
}
.pbw-has-overlay.pbw-ov-bottom::before { background: linear-gradient(to top, var(--pbw-mix), transparent); }
.pbw-has-overlay.pbw-ov-top::before { background: linear-gradient(to bottom, var(--pbw-mix), transparent); }

/* Image block: the overlay sits above the picture. It is left off when the image has a caption,
   because the layer would cover the caption as well. */
.wp-block-image.pbw-has-overlay::before { z-index: 1; }
.wp-block-image.pbw-has-overlay:has(figcaption)::before { display: none; }
.editor-styles-wrapper .wp-block-image.pbw-has-overlay:has(figcaption)::before { display: block; }

/* Watermark shapes (Group, Columns, Column). The shape sits above the overlay and below the content.
   --pbw-sh-c colour, --pbw-sh-a strength (0 to 1), --pbw-sh-size size as % of the block's height,
   --pbw-shape the SVG file (set per block), --pbw-word and --pbw-mark (set for the whole site). */
.pbw-has-shape {
	position: relative;
	isolation: isolate;
}
.pbw-has-shape::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: 50%;
	height: calc(var(--pbw-sh-size, 80) * 1%);
	aspect-ratio: 1;
	max-width: 92%; /* the 4% side gap plus the same again keeps the shape inside the block */
	translate: 0 -50%;
	opacity: var(--pbw-sh-a, 0.12);
}
.pbw-has-shape.pbw-sh-right::after { right: 4%; }
.pbw-has-shape.pbw-sh-left::after { left: 4%; }
.pbw-has-shape.pbw-sh-center::after { left: 50%; translate: -50% -50%; }

.pbw-sh-svg::after {
	background-color: var(--pbw-sh-c, var(--wp--preset--color--accent, currentColor));
	-webkit-mask: var(--pbw-shape) center / contain no-repeat;
	mask: var(--pbw-shape) center / contain no-repeat;
}

/* The site logo is drawn as a one-colour silhouette in the shape colour, so a white logo (made for a dark header)
   still shows on a light section and colour variations restyle it. Logos are wide, so the box is wide, not square. */
.pbw-sh-mark::after {
	aspect-ratio: auto;
	width: calc(var(--pbw-sh-size, 80) * 0.7%);
	background-color: var(--pbw-sh-c, var(--wp--preset--color--accent, currentColor));
	-webkit-mask: var(--pbw-mark) center / contain no-repeat;
	mask: var(--pbw-mark) center / contain no-repeat;
}
.pbw-sh-mark.pbw-sh-right::after { -webkit-mask-position: right center; mask-position: right center; }
.pbw-sh-mark.pbw-sh-left::after { -webkit-mask-position: left center; mask-position: left center; }

.pbw-has-shape.pbw-sh-word { overflow: clip; }
.pbw-sh-word::after {
	content: var(--pbw-word, "");
	height: auto;
	aspect-ratio: auto;
	max-width: none;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	font-size: clamp(3rem, calc(var(--pbw-sh-size, 80) * 0.09vw), 16rem);
	color: var(--pbw-sh-c, var(--wp--preset--color--accent, currentColor));
}

/* Site plan: a faint grid on the block's own background, plus building outlines drawn as a shape (the ::after layer),
   so Size and Position move the outlines and the grid squares follow Size too. The outlines are hidden on phones. */
.pbw-sh-plan {
	--pbw-grid: color-mix(in srgb, var(--pbw-sh-c, var(--wp--preset--color--accent, currentColor)) calc(var(--pbw-sh-a, 0.12) * 40%), transparent);
	background-image:
		linear-gradient(var(--pbw-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--pbw-grid) 1px, transparent 1px);
	background-size: calc(var(--pbw-sh-size, 80) * 0.6px) calc(var(--pbw-sh-size, 80) * 0.6px); /* size 80 = 48px squares */
}
.pbw-has-image.pbw-sh-plan {
	background-image:
		linear-gradient(var(--pbw-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--pbw-grid) 1px, transparent 1px),
		var(--pbw-img);
	background-size: calc(var(--pbw-sh-size, 80) * 0.6px) calc(var(--pbw-sh-size, 80) * 0.6px), calc(var(--pbw-sh-size, 80) * 0.6px) calc(var(--pbw-sh-size, 80) * 0.6px), cover;
}
.pbw-sh-plan::after {
	aspect-ratio: 600 / 360;
	width: calc(var(--pbw-sh-size, 80) * 0.7%);
	background-color: var(--pbw-sh-c, var(--wp--preset--color--accent, currentColor));
	-webkit-mask: url("shapes/general/plan.svg") center / contain no-repeat;
	mask: url("shapes/general/plan.svg") center / contain no-repeat;
}
@media (max-width: 781px) {
	.pbw-sh-plan::after { display: none; }
}

/* Alongside the band theme's "Watermark image" Group style: its colour layer sits at z-index 0, so the shape goes above it. */
.wp-block-group.is-style-watermark.pbw-has-shape::after { z-index: 0; }

/* ---------- Divider strips (0.4.0) ----------
   A thin, empty Group between two sections. The Group's own background colour is one section's colour; the shape
   (wave, zigzag, ...) is drawn over it in the other's. --pbw-st-h height in px, --pbw-st-c shape colour, --pbw-st the
   shape (an SVG address). The 1px negative margin hides hairline gaps between the strip and its neighbours. */
.pbw-strip {
	position: relative;
	height: calc(var(--pbw-st-h, 80) * 1px);
	min-height: 0;
	padding-block: 0 !important;
	margin-block: -1px !important;
	overflow: hidden;
}
.pbw-strip::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--pbw-st-c, currentColor);
	-webkit-mask: var(--pbw-st) center / 100% 100% no-repeat;
	mask: var(--pbw-st) center / 100% 100% no-repeat;
}
@media (max-width: 781px) {
	.pbw-strip { height: calc(var(--pbw-st-h, 80) * 0.6px); }
}

/* ---------- Offset frame for Image blocks (0.4.0) ----------
   A block, outline or dashed outline the same size as the picture, shifted towards a corner and drawn behind it.
   --pbw-fr-x / --pbw-fr-y the shift, --pbw-fr-c colour, --pbw-fr-w outline width, --pbw-fr-r corner radius. */
.pbw-has-frame {
	position: relative;
	isolation: isolate;
}
.wp-block-image.pbw-has-frame:not(.alignfull):not(.alignwide) {
	width: fit-content;
	max-width: 100%;
}
.pbw-has-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	box-sizing: border-box;
	translate: var(--pbw-fr-x, 20px) var(--pbw-fr-y, -20px);
	border-radius: var(--pbw-fr-r, 0);
	background: var(--pbw-fr-c, currentColor);
}
.pbw-fr-outline::after,
.pbw-fr-dashed::after {
	background: none;
	border: var(--pbw-fr-w, 4px) solid var(--pbw-fr-c, currentColor);
}
.pbw-fr-dashed::after { border-style: dashed; }
@media (max-width: 599px) {
	.pbw-has-frame::after { translate: calc(var(--pbw-fr-x, 20px) * 0.5) calc(var(--pbw-fr-y, -20px) * 0.5); }
}