/**
 * Global layout utilities.
 *
 * .twoCol — flex row of .col children; gap = theme Medium spacing.
 * .mhsi-balance-text — balanced line wrapping for headings/paragraphs.
 * .section — Content Layer: 2X-Large top/bottom padding; zero vertical margin.
 * .layer-intro — Layer Intro: zero vertical padding; X-Large bottom margin.
 * .collapse-top-padding — Collapse Top Padding: top padding 0 (wins over .section / .layer-intro).
 * .rounded-card — Rounded Card: 3rem padding, 20px radius; first/last child top/bottom spacing collapsed.
 * .privilege-table — Group with heading + list; star bullets + rules between items.
 * .privilege-table-minty / .privilege-table-soft-pink — 5px pastel stroke; teal / orange stars.
 * .fun-list — Joyful staged list; shared row fill; ul stars / ol big numbers.
 * .force-height — Image/figure fills parent height; nested img also height 100%.
 * .leadership-image — Offset black outline (who-column style); radii inherit from image.
 */

.mhsi-balance-text {
	text-wrap: balance;
}

/*
 * Force Height — opt-in on image or figure (e.g. .wp-block-image.force-height).
 * Stretches the block/figure to the parent height; nested img follows.
 */
img.force-height,
figure.force-height,
.wp-block-image.force-height,
.force-height {
	height: 100%;
}

.force-height img,
figure.force-height img,
.wp-block-image.force-height img {
	height: 100%;
}

/*
 * Leadership image — black offset outline via ::after (same idea as .mhsi-who-column).
 * Corner radii are NOT hardcoded: WP/block border-radius lives on the img; a render_block
 * mirror copies those decls onto the figure so ::after can inherit the same corners.
 * Rest: image down/left, outline up/right. Hover: soft realign to center.
 */
.wp-block-image.leadership-image {
	--mhsi-leadership-frame-shift: 4px;
	--mhsi-leadership-frame-border: 4px;
	position: relative;
	z-index: 1;
	overflow: visible;
	/* Room for opposing transforms so nothing clips. */
	padding: var(--mhsi-leadership-frame-shift);
}

.wp-block-image.leadership-image::after {
	content: "";
	position: absolute;
	inset: var(--mhsi-leadership-frame-shift);
	border: var(--mhsi-leadership-frame-border) solid var(--mhsi-color-black-text, #212121);
	/* Mirror figure radii (promoted from img) — do not invent values here. */
	border-radius: inherit;
	pointer-events: none;
	z-index: 2;
	box-sizing: border-box;
	transform: translate(
		var(--mhsi-leadership-frame-shift),
		calc(-1 * var(--mhsi-leadership-frame-shift))
	);
	transition: transform 700ms ease-in-out;
}

.wp-block-image.leadership-image img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
	/* border-radius: leave WP inline / block support untouched. */
	transform: translate(
		calc(-1 * var(--mhsi-leadership-frame-shift)),
		var(--mhsi-leadership-frame-shift)
	);
	transition: transform 700ms ease-in-out;
}

.wp-block-image.leadership-image:hover::after,
.wp-block-image.leadership-image:hover img {
	transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.leadership-image::after,
	.wp-block-image.leadership-image img {
		transition: none;
	}
}

/*
 * Beat WP layout gap rules (`:root :where(.is-layout-*) > * { margin-block-end: 0 }`)
 * by matching on .wp-block-group + helper class (0,2,0) and using logical margins.
 */
.wp-block-group.section {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
	margin-top: 0;
	margin-bottom: 0;
	margin-block-start: 0;
	margin-block-end: 0;
	box-sizing: border-box;
}

.wp-block-group.layer-intro {
	padding-top: 0;
	padding-bottom: 0;
	padding-block-start: 0;
	padding-block-end: 0;
	margin-bottom: var(--wp--preset--spacing--70);
	margin-block-end: var(--wp--preset--spacing--70);
	box-sizing: border-box;
}

/*
 * Collapse Top Padding — after .section / .layer-intro so equal-specificity
 * cascade wins; compound selectors beat either helper alone when both are on.
 */
.wp-block-group.collapse-top-padding,
.wp-block-group.section.collapse-top-padding,
.wp-block-group.layer-intro.collapse-top-padding {
	padding-top: 0;
	padding-block-start: 0;
}

/*
 * Rounded Card — 3rem padding, 20px radius; collapse first/last direct-child vertical edges.
 */
.wp-block-group.rounded-card {
	padding: 3rem;
	border-radius: 20px;
	box-sizing: border-box;
}

.wp-block-group.rounded-card > :first-child {
	margin-top: 0;
	margin-block-start: 0;
	padding-top: 0;
	padding-block-start: 0;
}

.wp-block-group.rounded-card > :last-child {
	margin-bottom: 0;
	margin-block-end: 0;
	padding-bottom: 0;
	padding-block-end: 0;
}

/*
 * Separator → hand-drawn stroke via ::after.
 *
 * Front-end render swaps <hr> for <div role="separator"> (see blocks.php):
 * Chromium does not paint hr::after. Host is zero-height; stroke breaks out
 * to the full display with 106vw / left calc(50% - 53vw) (3vw bleed).
 */
.wp-block-separator {
	--mhsi-separator-stroke-height: 9px;
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	height: 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	padding: 0 !important;
	padding-block: 0 !important;
	border: 0 !important;
	border-width: 0 !important;
	background: none !important;
	opacity: 1;
	overflow: visible;
	z-index: 5;
}

/* Beat WP layout gap (`> * { margin-block-start: … }`) — vertical only. */
:root :where(.is-layout-constrained) > .wp-block-separator,
:root :where(.is-layout-flow) > .wp-block-separator,
:root :where(.wp-block-group-is-layout-constrained) > .wp-block-separator,
:root :where(.wp-block-group-is-layout-flow) > .wp-block-separator {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	padding: 0 !important;
}

.wp-block-separator::after {
	content: "";
	position: absolute;
	top: 0;
	/* Full-display breakout from any constrained parent (+ 3vw bleed). */
	left: calc(50% - 53vw);
	transform: translateY(-50%);
	width: 106vw;
	min-width: 106vw;
	max-width: none;
	height: var(--mhsi-separator-stroke-height);
	/*
	 * Paint SVG as background (not mask): CSS mask treats black SVG fills as
	 * transparent under luminance, so the stroke disappears. SVG already uses
	 * fill="black" (= --mhsi-color-black) and preserveAspectRatio="none" so
	 * background-size can stretch X across the full-bleed box without Y scale.
	 */
	background-color: transparent;
	/* ?v= busts stale SVG cache after preserveAspectRatio=none. */
	background-image: url("../images/hand-drawn-stroke.svg?v=par-none");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 100% 100%;
	-webkit-mask-image: none;
	mask-image: none;
	pointer-events: none;
	box-sizing: border-box;
}


/* —— Privilege table (Group → heading + list) —— */
.privilege-table,
.wp-block-group.privilege-table {
	padding: 3rem;
	border: 1px solid var(--mhsi-color-grey, #e2e2e2);
	border-radius: 20px;
	box-sizing: border-box;
}

.privilege-table ul,
.privilege-table ol,
.privilege-table .wp-block-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.privilege-table li {
	list-style: none;
	position: relative;
	margin: 0;
	padding-top: var(--wp--preset--spacing--40); /* Small */
	padding-bottom: var(--wp--preset--spacing--40);
	/* Room for black newsletter-star ::before bullet. */
	padding-inline-start: 1.85rem;
	padding-inline-end: 0;
}

.privilege-table li::marker {
	content: none;
	display: none;
}

/*
 * Same asset as homepage .mhsi-newsletter-strip__star (yellow SVG).
 * Mask + black fill → solid black bullet; spins while the li is hovered.
 */
.privilege-table li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: calc(var(--wp--preset--spacing--40) + 0.2em);
	width: 1.1rem;
	height: 1.1rem;
	background-color: #000;
	-webkit-mask: url("../images/homepage/star-newsletter.svg") center / contain no-repeat;
	mask: url("../images/homepage/star-newsletter.svg") center / contain no-repeat;
	transform-origin: center;
	pointer-events: none;
}

.privilege-table li:hover::before {
	animation: mhsi-privilege-star-spin 1.5s linear infinite;
}

@keyframes mhsi-privilege-star-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 1px medium-grey rule between items (not above the first / below the last). */
.privilege-table li + li {
	border-top: 1px solid var(--mhsi-color-grey, #e2e2e2);
}

/*
 * Privilege table color variants — on the .privilege-table Group itself, or on
 * a wrapping Group. Outer stroke 5px pastel; stars use contrast tokens
 * (minty → teal, soft-pink → orange).
 */
.privilege-table.privilege-table-minty,
.wp-block-group.privilege-table.privilege-table-minty,
.privilege-table-minty .privilege-table,
.wp-block-group.privilege-table-minty .privilege-table {
	border: 5px solid var(--mhsi-color-minty, #e3faf0);
}

.privilege-table-minty li::before,
.wp-block-group.privilege-table-minty li::before {
	background-color: var(--mhsi-color-teal, #18808e);
}

.privilege-table.privilege-table-soft-pink,
.wp-block-group.privilege-table.privilege-table-soft-pink,
.privilege-table-soft-pink .privilege-table,
.wp-block-group.privilege-table-soft-pink .privilege-table {
	border: 5px solid var(--mhsi-color-soft-pink, #ffeae9);
}

.privilege-table-soft-pink li::before,
.wp-block-group.privilege-table-soft-pink li::before {
	background-color: var(--mhsi-color-orange, #ff7151);
}

/*
 * Fun list — joyful staged list (StoryWell / process steps).
 *
 * Apply `fun-list` on the list (`ul.fun-list` / `ol.fun-list`) or on a
 * wrapping Group (`.wp-block-group.fun-list` → nested list). Distinct from
 * `.privilege-table`: shared soft yellow row fill; ul → brand stars; ol → big numbers.
 * Body copy stays uniform (no first-line / title color treatment).
 */
.fun-list,
.wp-block-group.fun-list {
	box-sizing: border-box;
}

.fun-list ul,
.fun-list ol,
.fun-list .wp-block-list,
ul.fun-list,
ol.fun-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: calc(var(--wp--preset--spacing--30, 0.75rem) * 2); /* was spacing--30 / 0.75rem */
}

.fun-list ol,
ol.fun-list {
	counter-reset: fun-list;
}

.fun-list li {
	list-style: none;
	position: relative;
	margin: 0;
	padding-block: calc(var(--wp--preset--spacing--40, 1rem) * 2); /* was spacing--40 / 1rem */
	padding-inline-start: 4.7rem; /* was 2.35rem */
	padding-inline-end: calc(var(--wp--preset--spacing--40, 1rem) * 2); /* was spacing--40 / 1rem */
	border-radius: 14px;
	background: #FFD88554;
	color: var(--mhsi-color-black-text, #212121);
	box-sizing: border-box;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fun-list ol > li,
ol.fun-list > li {
	counter-increment: fun-list;
	padding-inline-start: 6.2rem; /* was 3.1rem */
}

.fun-list li::marker {
	content: none;
	display: none;
}

/*
 * Unordered: newsletter star (same SVG as privilege-table / homepage strip),
 * tinted coral → teal → blue → orange → pink.
 */
.fun-list ul > li::before,
ul.fun-list > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 1.4rem; /* was 0.7rem — tracks doubled padding */
	top: calc(var(--wp--preset--spacing--40, 1rem) * 2 + 0.15em);
	width: 1rem;
	height: 1rem;
	background-color: var(--mhsi-color-primary, #ff7151);
	-webkit-mask: url("../images/homepage/star-newsletter.svg") center / contain no-repeat;
	mask: url("../images/homepage/star-newsletter.svg") center / contain no-repeat;
	transform-origin: center;
	pointer-events: none;
}

.fun-list ul > li:nth-child(5n + 2)::before,
ul.fun-list > li:nth-child(5n + 2)::before {
	background-color: var(--mhsi-color-teal, #18808e);
}

.fun-list ul > li:nth-child(5n + 3)::before,
ul.fun-list > li:nth-child(5n + 3)::before {
	background-color: var(--mhsi-color-blue-med, #7ab7fe);
}

.fun-list ul > li:nth-child(5n + 4)::before,
ul.fun-list > li:nth-child(5n + 4)::before {
	background-color: var(--mhsi-color-yellow-orange, #eaa76a);
}

.fun-list ul > li:nth-child(5n + 5)::before,
ul.fun-list > li:nth-child(5n + 5)::before {
	background-color: var(--mhsi-color-pink, #f3aad2);
}

/*
 * Ordered: large expressive black counters.
 * Equal inset from the li’s top + start edges (matches li padding-block).
 */
.fun-list ol > li::before,
ol.fun-list > li::before {
	--mhsi-fun-list-num-inset: calc(var(--wp--preset--spacing--40, 1rem) * 2); /* 2rem */
	content: counter(fun-list);
	position: absolute;
	inset-inline-start: var(--mhsi-fun-list-num-inset);
	top: var(--mhsi-fun-list-num-inset);
	width: auto;
	height: auto;
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--mhsi-color-black, #000000);
	background: none;
	-webkit-mask: none;
	mask: none;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.fun-list li:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 14px color-mix(in srgb, var(--mhsi-color-black, #000) 8%, transparent);
	}

	.fun-list ul > li:hover::before,
	ul.fun-list > li:hover::before {
		animation: mhsi-fun-list-star-spin 1.5s linear infinite;
	}
}

@keyframes mhsi-fun-list-star-spin {
	to {
		transform: rotate(360deg);
	}
}

.twoCol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	width: 100%;
	box-sizing: border-box;
}

.twoCol > .col {
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
}

@media (max-width: 781px) {
	.twoCol {
		flex-direction: column;
		align-items: stretch;
	}

	.twoCol > .col {
		flex-basis: auto;
		width: 100%;
	}
}

/*
 * Block editor text colors win over theme section/heading/paragraph rules.
 *
 * WP always adds .has-text-color for palette + custom text colors. Theme CSS
 * often forces `color` on descendants (or uses higher specificity), which
 * blocks inheritance from a colored parent and can wash out editor colors.
 * !important here only reasserts inherit so high-specificity theme rules
 * (e.g. page-hero on-dark headings) cannot re-force a section color.
 */
.has-text-color h1:not(.has-text-color),
.has-text-color h2:not(.has-text-color),
.has-text-color h3:not(.has-text-color),
.has-text-color h4:not(.has-text-color),
.has-text-color h5:not(.has-text-color),
.has-text-color h6:not(.has-text-color),
.has-text-color p:not(.has-text-color),
.has-text-color li:not(.has-text-color),
.has-text-color .wp-block-heading:not(.has-text-color),
.has-text-color .wp-block-post-title:not(.has-text-color),
.has-text-color .wp-block-site-title:not(.has-text-color) {
	color: inherit !important;
}

/* Links: keep editor text color when the block/link has one (unless link color is set). */
.has-text-color:not(.has-link-color) a:where(:not(.wp-element-button)):not(.has-text-color),
a.has-text-color:where(:not(.wp-element-button)) {
	color: inherit;
}