/**
 * Diagonal section finishes (“slanted / angled dividers”).
 *
 * Not a block style (so colour modes stay available). Controlled via the
 * “Section slant” inspector setting → classes has-slant-{auto|none|top|bottom|both}.
 *
 * Auto (default): top-level Groups/Covers in post content, the editor root,
 * and FSE template <main> get Both; nested Groups get no slant until set
 * explicitly.
 *
 * Slope direction: lower on the left / higher on the right (matches comps).
 * Consecutive sections overlap by --sohk-slant-offset so joins have no white gap.
 */

:root {
	--sohk-content-angle: -1.8deg;
	/* Vertical drop of the slant across the viewport (tan(1.8°) ≈ 0.0314). */
	--sohk-slant-offset: clamp(12px, 3.15vw, 60px);
}

/* Bottom only — left side lower */
.has-slant-bottom {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--sohk-slant-offset)),
		0 100%
	);
	padding-bottom: calc(var(--sohk-slant-offset) + var(--wp--preset--spacing--section, 4rem)) !important;
}

/* Top only — left side lower (same direction as bottom) */
.has-slant-top {
	clip-path: polygon(
		0 var(--sohk-slant-offset),
		100% 0,
		100% 100%,
		0 100%
	);
	padding-top: calc(var(--sohk-slant-offset) + var(--wp--preset--spacing--section, 4rem)) !important;
}

/* Both — parallel edges, both lower on the left */
.has-slant-both,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) {
	clip-path: polygon(
		0 var(--sohk-slant-offset),
		100% 0,
		100% calc(100% - var(--sohk-slant-offset)),
		0 100%
	);
	padding-top: calc(var(--sohk-slant-offset) + var(--wp--preset--spacing--section, 4rem)) !important;
	padding-bottom: calc(var(--sohk-slant-offset) + var(--wp--preset--spacing--section, 4rem)) !important;
}

/* Opt-out */
.has-slant-none {
	clip-path: none;
}

/**
 * Nest consecutive slanted sections so clip-path triangles never reveal
 * the page background. Earlier siblings stack above later ones so each
 * bottom edge paints over the next section’s top cut.
 */
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-audience-tabs-sohk,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image) {
	position: relative;
}

:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-audience-tabs-sohk {
	z-index: 1;
}

/*
 * Nest only when the previous section has a bottom slant (bottom / both /
 * auto-both). Flat bottoms (top-only, none) must not pull the next section up.
 */
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-bottom + .wp-block-group:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-bottom + .wp-block-cover:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-bottom + .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-bottom + .wp-block-sohk-audience-tabs-sohk,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-bottom + .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-both + .wp-block-group:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-both + .wp-block-cover:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-both + .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-both + .wp-block-sohk-audience-tabs-sohk,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .has-slant-both + .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-group:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-cover:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-audience-tabs-sohk,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-group:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-cover:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-audience-tabs-sohk,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-group:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-cover:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-audience-tabs-sohk,
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none):not(.has-slant-top):not(.has-slant-bottom):not(.has-slant-both) + .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image) {
	margin-top: calc(-1 * var(--sohk-slant-offset) - 2px) !important;
}

/**
 * First section’s top slant would otherwise reveal the page background
 * under the flat sticky header — tuck it up so the wedge sits behind the header.
 * Skip when the section has no top slant (None / Bottom only).
 */
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-group:first-child:not(.has-slant-none):not(.has-slant-bottom),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-cover:first-child:not(.has-slant-none):not(.has-slant-bottom),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-hero-carousel-sohk:first-child:not(.has-slant-none):not(.has-slant-bottom) {
	margin-top: calc(-1 * var(--sohk-slant-offset) - 2px) !important;
}

/* Earlier siblings stack above later ones (per-index rules via sohk_slant_stacking_css). */

/* Text ticker overlays the section join — never participate in decreasing stack. */
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image) {
	z-index: 60;
	margin-bottom: calc(-1 * var(--sohk-slant-offset) - 2px) !important;
}

/*
 * Section after a text ticker: do not pull it up behind the yellow band.
 * (Older rule used -(ticker-height + slant), which filled rotation wedges
 * with the next section — black triangles on dark modes.)
 * Keep a light nest for the section join only; ticker z-index covers the seam.
 */
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image) + .wp-block-group:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image) + .wp-block-cover:not(.has-slant-none),
:is(.wp-block-post-content, .is-root-container, main.wp-block-group) > .wp-block-sohk-stats-ticker-sohk:not(.is-mode-image) + .wp-block-sohk-hero-carousel-sohk:not(.has-slant-none) {
	margin-top: 0 !important;
}