/* ============================================================
   Powershift · Cover block behaviours
   Pairs with theme.json (presets) + /styles/blocks/*.json (style chips).
   Enqueue via enqueue_block_assets so it applies on the front end
   AND inside the editor canvas — see functions-snippet.php.
   Requires :has() — WP 6.3+ editor iframe, all evergreen browsers.
   ============================================================ */

/* ---- Links inside covers follow the cover's text colour ---- */
.wp-block-cover a:not(.wp-element-button) {
	color: currentColor;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.wp-block-cover a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--green-light, #7ec252);
}

/* ---- Legibility: flip to Deep Grey ink on light overlays ----
   Overlay classes live on the background span, hence :has(). */
.wp-block-cover:has(> .wp-block-cover__background:is(
	.has-base-background-color,
	.has-grey-bright-background-color,
	.has-grey-light-gradient-background)) {
	color: var(--wp--preset--color--contrast, #0f212c);
}
.wp-block-cover:has(> .wp-block-cover__background:is(
	.has-base-background-color,
	.has-grey-bright-background-color,
	.has-grey-light-gradient-background)) a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--orange-dark, #f05a28);
}

/* ---- Text alignment follows the content position ----
   Centre column → centred text · right column → right-aligned text.
   Inherited values only, and :where() keeps specificity below core's
   justification classes — a per-block alignment set in the editor
   always wins. */
.wp-block-cover:not([class*="is-position-"]) .wp-block-cover__inner-container,
.wp-block-cover:is(.is-position-top-center, .is-position-center-center, .is-position-bottom-center) .wp-block-cover__inner-container {
	text-align: center;
}
.wp-block-cover:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .wp-block-cover__inner-container {
	text-align: right;
}
/* Buttons rows are flex, so they follow via justification */
:where(.wp-block-cover:not([class*="is-position-"])) .wp-block-buttons,
:where(.wp-block-cover:is(.is-position-top-center, .is-position-center-center, .is-position-bottom-center)) .wp-block-buttons {
	justify-content: center;
}
:where(.wp-block-cover:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right)) .wp-block-buttons {
	justify-content: flex-end;
}

/* ============================================================
   is-style-pwr-scrim — "Protection scrim"
   A Deep-Grey protection gradient that enters from the CONTENT's
   side of the cover, so text stays legible over photography.
   Recipe: set the overlay opacity to 0 and let the scrim work.
   ============================================================ */
.wp-block-cover.is-style-pwr-scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(15,33,44,0.92) 0%, rgba(15,33,44,0.5) 38%, rgba(15,33,44,0) 72%);
}
/* content on the right → scrim enters from the right */
.wp-block-cover.is-style-pwr-scrim:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right)::after {
	background: linear-gradient(270deg, rgba(15,33,44,0.92) 0%, rgba(15,33,44,0.5) 38%, rgba(15,33,44,0) 72%);
}
/* content centred / bottom-centre → scrim rises from the base */
.wp-block-cover.is-style-pwr-scrim:not([class*="is-position-"])::after,
.wp-block-cover.is-style-pwr-scrim:is(.is-position-center-center, .is-position-bottom-center)::after {
	background: linear-gradient(0deg, rgba(15,33,44,0.92) 0%, rgba(15,33,44,0.55) 42%, rgba(15,33,44,0) 78%);
}
/* content top-centre → scrim falls from the top */
.wp-block-cover.is-style-pwr-scrim.is-position-top-center::after {
	background: linear-gradient(180deg, rgba(15,33,44,0.92) 0%, rgba(15,33,44,0.55) 42%, rgba(15,33,44,0) 78%);
}

/* ============================================================
   is-style-pwr-hazard — "Hazard strip"
   Brand hazard chevrons (hazard-repeat.svg as a mask) run the
   base edge. Orange by default; flips to Light Green on orange
   overlays. Override anywhere with --pwr-hazard: <color>.
   ============================================================ */
.wp-block-cover.is-style-pwr-hazard::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(12px, 1.4vw, 20px);
	z-index: 0;
	pointer-events: none;
	background-color: var(--pwr-hazard, var(--wp--preset--color--orange, #f58228));
	-webkit-mask-image: url("hazard-repeat.svg");
	mask-image: url("hazard-repeat.svg");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-position: left bottom;
	mask-position: left bottom;
}
.wp-block-cover.is-style-pwr-hazard:has(> .wp-block-cover__background:is(
	.has-orange-background-color,
	.has-orange-dark-background-color,
	.has-orange-gradient-background,
	.has-orange-diag-gradient-background))::after {
	background-color: var(--pwr-hazard, var(--wp--preset--color--green-light, #7ec252));
}

/* ============================================================
   is-style-pwr-watermark — "Icon watermark"
   The Powershift icon, oversized per brand rules (≥200% of the
   next-largest element), ghosted and bleeding off the edge
   OPPOSITE the content. White on dark, ink on light overlays.
   ============================================================ */
.wp-block-cover.is-style-pwr-watermark {
	overflow: clip;
}
.wp-block-cover.is-style-pwr-watermark::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	height: 145%;
	aspect-ratio: 17 / 25.52;
	right: -4%;
	bottom: -28%;
	background-color: rgba(255, 255, 255, 0.13);
	-webkit-mask-image: url("cover-icon.svg");
	mask-image: url("cover-icon.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}
/* content on the right → icon ghosts off the left edge */
.wp-block-cover.is-style-pwr-watermark:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right)::after {
	right: auto;
	left: -4%;
}
/* ink ghost on light overlays */
.wp-block-cover.is-style-pwr-watermark:has(> .wp-block-cover__background:is(
	.has-base-background-color,
	.has-grey-bright-background-color,
	.has-grey-light-gradient-background))::after {
	background-color: rgba(15, 33, 44, 0.08);
}