/*
 * Block content styles.
 *
 * The legacy stylesheet resets element styles for the whole document: no
 * margins or padding, no list markers, headings at inherited size and weight,
 * links without decoration. These rules give core block output the theme's
 * text look again, on the front end inside .cm-block-content and in the block
 * editor canvas (.editor-styles-wrapper). Colours, font families, font sizes
 * and heading values come from the design tokens built from Theme Settings.
 * The other values are the fixed values of the legacy stylesheet.
 *
 * Selectors are built on the content wrapper and on core block classes. Legacy
 * classes appear only inside exclusions, so legacy component rules are never
 * outranked. The content manager's own choices still win: preset classes carry
 * their own priority and custom values are inline styles.
 */

/*
 * Body text: the legacy body copy style, inherited by core blocks. The colour
 * is the navy that the legacy rich text areas inherit from the page body.
 */
.cm-block-content,
.editor-styles-wrapper {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body);
	font-style: normal;
	font-weight: 500;
	line-height: 1.375;
	letter-spacing: 0.02rem;
	color: var(--wp--preset--color--navy);
}

/*
 * Sections that follow each other at the top level of the content touch, as
 * the sections of the legacy pages do: the theme blocks that replace a legacy
 * section, the text sections below and top-level grids. Their own padding and
 * margins set the space between them. Other blocks keep the block gap. A
 * margin set on a block is an inline style and still wins. The second
 * selector is the block list of the post editor canvas, where a synced
 * pattern sits in its own wrapper.
 */
.cm-block-content > :where(.wp-block-acf-cm-alert, .wp-block-acf-cm-hero, .wp-block-acf-cm-breadcrumbs, .wp-block-acf-cm-card, .wp-block-acf-cm-accordion, .wp-block-acf-cm-important-message, .wp-block-acf-cm-warning-banner, .wp-block-acf-cm-banner, .wp-block-group.is-layout-grid, .wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"])) + :where(.wp-block-acf-cm-alert, .wp-block-acf-cm-hero, .wp-block-acf-cm-breadcrumbs, .wp-block-acf-cm-card, .wp-block-acf-cm-accordion, .wp-block-acf-cm-important-message, .wp-block-acf-cm-warning-banner, .wp-block-acf-cm-banner, .wp-block-group.is-layout-grid, .wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"])),
.is-root-container.wp-block-post-content > :where(.wp-block-acf-cm-alert, .wp-block-acf-cm-hero, .wp-block-acf-cm-breadcrumbs, .wp-block-acf-cm-card, .wp-block-acf-cm-accordion, .wp-block-acf-cm-important-message, .wp-block-acf-cm-warning-banner, .wp-block-acf-cm-banner, .wp-block-block, .wp-block-group.is-layout-grid, .wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"])) + :where(.wp-block-acf-cm-alert, .wp-block-acf-cm-hero, .wp-block-acf-cm-breadcrumbs, .wp-block-acf-cm-card, .wp-block-acf-cm-accordion, .wp-block-acf-cm-important-message, .wp-block-acf-cm-warning-banner, .wp-block-acf-cm-banner, .wp-block-block, .wp-block-group.is-layout-grid, .wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"])) {
	margin-block-start: 0;
}

/*
 * Content sections: a Group at the top level of the content, with the
 * constrained layout, no background colour and no block style (a text
 * section). It gets the vertical padding of the legacy text block, fluid
 * between the 390px and 1440px viewports like every theme size: 50px to 37px
 * above, 12px to 48px below. A padding set on the Group is an inline style
 * and still wins. Post headers (a Group rendered as a header element) keep
 * their own spacing. The second selector is the block list of the post
 * editor canvas.
 */
.cm-block-content > .wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"]),
.is-root-container.wp-block-post-content > .wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"]) {
	padding-top: clamp(2.3125rem, 3.4268rem - 1.2381vw, 3.125rem);
	padding-bottom: clamp(0.75rem, -0.0857rem + 3.4286vw, 3rem);
}

/*
 * Inside a content section, blocks are 16px apart at 390px and 20px at
 * 1440px, the legacy text block spacing between its title, text and actions.
 * A row of blocks in the section (a button beside a text link) has the legacy
 * action row spacing, 16px to 24px, also when it wraps. Front end only, with
 * the rule structure of the paragraph spacing below: a block spacing chosen
 * on the Group or on the row still wins, and paragraphs and lists that follow
 * each other keep their 20px. The editor canvas keeps the block gap, which is
 * the 1440px value.
 */
.cm-block-content > :where(.wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"])) > * + * {
	margin-block-start: clamp(1rem, 0.9071rem + 0.381vw, 1.25rem);
}

.cm-block-content > :where(.wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"])) > :where(.wp-block-group.is-layout-flex) {
	gap: clamp(1rem, 0.8143rem + 0.7619vw, 1.5rem);
}

/*
 * A text link in that row, beside a button or alone at the end of the
 * section, has the text of the legacy action link: regular weight and the
 * normal line height. A weight or line height chosen on the paragraph is an
 * inline style and still wins.
 */
.cm-block-content > :where(.wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"])) > :where(.wp-block-group.is-layout-flex) > p,
.is-root-container.wp-block-post-content > .wp-block-group.is-layout-constrained:not(header):not(.has-background):not([class*="is-style-"]) > .wp-block-group.is-layout-flex > p {
	font-weight: 400;
	line-height: normal;
}

/*
 * Grids at the top level of the content (for example link columns) become
 * one column below 992px, the tablet breakpoint where the legacy multi-column
 * blocks collapse. Above it the Group keeps its own columns. Column and row
 * spans are released so the single column stays one track wide.
 */
@media (max-width: 61.99875em) {
	.cm-block-content > .wp-block-group.is-layout-grid,
	.is-root-container.wp-block-post-content > .wp-block-group.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-block-content > .wp-block-group.is-layout-grid > *,
	.is-root-container.wp-block-post-content > .wp-block-group.is-layout-grid > * {
		grid-column: auto;
		grid-row: auto;
	}
}

/*
 * Paragraphs and lists that follow each other are 20px apart, the fixed
 * spacing of the legacy rich text areas, instead of the fluid block gap.
 * Front end only: there this file loads after the global block gap rule and
 * before the block spacing a container sets for itself, so a block spacing
 * chosen on a Group or Column still wins. In the editor canvas both core
 * rules load after this file, so the canvas keeps the block gap.
 */
.cm-block-content > :where(p, ul.wp-block-list, ol.wp-block-list) + :where(p, ul.wp-block-list, ol.wp-block-list),
.cm-block-content :where(.is-layout-flow, .is-layout-constrained) > :where(p, ul.wp-block-list, ol.wp-block-list) + :where(p, ul.wp-block-list, ol.wp-block-list) {
	margin-block-start: 1.25rem;
}

/*
 * Theme blocks that reuse legacy markup inherit what the legacy body gives
 * them on Flexible Content pages, so their own class rules render exactly as
 * before. The rule has no specificity: every legacy class rule and every block
 * support on the same element wins over it. The selector is the class core
 * generates for each block, which sits on the element that carries the block
 * supports, both on the front end and in the editor.
 */
:where(.cm-block-content, .editor-styles-wrapper) :where(
	.wp-block-acf-cm-alert,
	.wp-block-acf-cm-hero,
	.wp-block-acf-cm-breadcrumbs,
	.wp-block-acf-cm-card,
	.wp-block-acf-cm-accordion,
	.wp-block-acf-cm-important-message,
	.wp-block-acf-cm-warning-banner,
	.wp-block-acf-cm-banner
) {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body);
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	color: var(--wp--preset--color--navy);
}

/*
 * Core headings and the core Post Title take the heading tokens of their
 * level. Headings with the numbered step style keep the look of that style.
 */
:where(.cm-block-content, .editor-styles-wrapper) h1:where(.wp-block-heading, .wp-block-post-title):not(.is-style-cm-step) {
	font-family: var(--wp--custom--heading-1--font-family);
	font-size: var(--wp--preset--font-size--heading-1);
	font-weight: var(--wp--custom--heading-1--font-weight);
	line-height: var(--wp--custom--heading-1--line-height);
	letter-spacing: var(--wp--custom--heading-1--letter-spacing);
	color: var(--wp--custom--heading-1--color);
}

:where(.cm-block-content, .editor-styles-wrapper) h2:where(.wp-block-heading, .wp-block-post-title):not(.is-style-cm-step) {
	font-family: var(--wp--custom--heading-2--font-family);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: var(--wp--custom--heading-2--font-weight);
	line-height: var(--wp--custom--heading-2--line-height);
	letter-spacing: var(--wp--custom--heading-2--letter-spacing);
	color: var(--wp--custom--heading-2--color);
}

:where(.cm-block-content, .editor-styles-wrapper) h3:where(.wp-block-heading, .wp-block-post-title):not(.is-style-cm-step) {
	font-family: var(--wp--custom--heading-3--font-family);
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: var(--wp--custom--heading-3--font-weight);
	line-height: var(--wp--custom--heading-3--line-height);
	letter-spacing: var(--wp--custom--heading-3--letter-spacing);
	color: var(--wp--custom--heading-3--color);
}

:where(.cm-block-content, .editor-styles-wrapper) h4:where(.wp-block-heading, .wp-block-post-title):not(.is-style-cm-step) {
	font-family: var(--wp--custom--heading-4--font-family);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: var(--wp--custom--heading-4--font-weight);
	line-height: var(--wp--custom--heading-4--line-height);
	letter-spacing: var(--wp--custom--heading-4--letter-spacing);
	color: var(--wp--custom--heading-4--color);
}

:where(.cm-block-content, .editor-styles-wrapper) h5:where(.wp-block-heading, .wp-block-post-title):not(.is-style-cm-step) {
	font-family: var(--wp--custom--heading-5--font-family);
	font-size: var(--wp--preset--font-size--heading-5);
	font-weight: var(--wp--custom--heading-5--font-weight);
	line-height: var(--wp--custom--heading-5--line-height);
	letter-spacing: var(--wp--custom--heading-5--letter-spacing);
	color: var(--wp--custom--heading-5--color);
}

:where(.cm-block-content, .editor-styles-wrapper) h6:where(.wp-block-heading, .wp-block-post-title):not(.is-style-cm-step) {
	font-family: var(--wp--custom--heading-6--font-family);
	font-size: var(--wp--preset--font-size--heading-6);
	font-weight: var(--wp--custom--heading-6--font-weight);
	line-height: var(--wp--custom--heading-6--line-height);
	letter-spacing: var(--wp--custom--heading-6--letter-spacing);
	color: var(--wp--custom--heading-6--color);
}

/*
 * The title field of the editor canvas is followed by the gap between blocks,
 * so a first block with a background never covers the descenders of the
 * title, whose heading 1 line height is below 1.
 */
.editor-styles-wrapper .editor-post-title {
	margin-bottom: var(--wp--preset--spacing--30);
}

/*
 * Core lists: the list look of the legacy rich text areas. Lists with the
 * checklist or checkmark styles draw their own markers, and lists inside a
 * .wysiwyg-content area (the Card body) already get the legacy rules there.
 */
:where(.cm-block-content, .editor-styles-wrapper) .wp-block-list:not(.is-style-cm-checklist, .is-style-cm-checkmark-list, .wysiwyg-content *) > li {
	position: relative;
}

:where(.cm-block-content, .editor-styles-wrapper) .wp-block-list:not(.is-style-cm-checklist, .is-style-cm-checkmark-list, .wysiwyg-content *) > li:not(:last-child) {
	margin-bottom: 1.25rem;
}

:where(.cm-block-content, .editor-styles-wrapper) .wp-block-list:not(.is-style-cm-checklist, .is-style-cm-checkmark-list, .wysiwyg-content *) > li > .wp-block-list {
	margin-top: 1.25rem;
}

/* Bulleted lists: a dot in a gutter that shrinks from 48px at 1440px to 35px at 390px. */
:where(.cm-block-content, .editor-styles-wrapper) ul.wp-block-list:not(.is-style-cm-checklist, .is-style-cm-checkmark-list, .wysiwyg-content *) > li {
	padding-left: clamp(2.1875rem, 1.8857142857rem + 1.2380952381vw, 3rem);
	list-style-type: none;
}

:where(.cm-block-content, .editor-styles-wrapper) ul.wp-block-list:not(.is-style-cm-checklist, .is-style-cm-checkmark-list, .wysiwyg-content *) > li::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	left: 1.25rem;
	width: 0.375rem;
	height: 0.375rem;
	background-color: currentColor;
	border-radius: 50%;
}

/*
 * Numbered lists keep their numbers (start value, reversed order and number
 * type stay the editor's choice) and place them in the same gutter.
 */
:where(.cm-block-content, .editor-styles-wrapper) ol.wp-block-list:not(.is-style-cm-checklist, .is-style-cm-checkmark-list, .wysiwyg-content *) > li {
	margin-left: clamp(2.1875rem, 1.8857142857rem + 1.2380952381vw, 3rem);
}

/*
 * Core buttons fade between their normal and hover colours like the legacy
 * buttons. The colours themselves come from the button element style and the
 * button block styles.
 */
:where(.cm-block-content, .editor-styles-wrapper) .wp-block-button__link {
	transition: all 0.3s ease-in-out;
}

/*
 * Links in core paragraphs, list items and headings: the drawn underline and
 * hover fade of the legacy rich text areas. Buttons are left alone. Links
 * inside theme blocks that reuse legacy markup, and inside .wysiwyg-content
 * areas, keep their legacy styles. The legacy reset already makes links
 * inline blocks, so the drawn underline spans the link box. The link colour
 * is inherited, or set by the block's link colour setting.
 */
:where(.cm-block-content, .editor-styles-wrapper) :is(p, .wp-block-list li, .wp-block-heading, .wp-block-post-title) a:not(.button):not([class*="button"]):not(:is(.wysiwyg-content, .wp-block-acf-cm-alert, .wp-block-acf-cm-hero, .wp-block-acf-cm-breadcrumbs, .wp-block-acf-cm-card, .wp-block-acf-cm-accordion, .wp-block-acf-cm-important-message, .wp-block-acf-cm-warning-banner, .wp-block-acf-cm-banner) *) {
	position: relative;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

:where(.cm-block-content, .editor-styles-wrapper) :is(p, .wp-block-list li, .wp-block-heading, .wp-block-post-title) a:not(.button):not([class*="button"]):not(:is(.wysiwyg-content, .wp-block-acf-cm-alert, .wp-block-acf-cm-hero, .wp-block-acf-cm-breadcrumbs, .wp-block-acf-cm-card, .wp-block-acf-cm-accordion, .wp-block-acf-cm-important-message, .wp-block-acf-cm-warning-banner, .wp-block-acf-cm-banner) *)::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transition: transform 0.3s ease;
	transform-origin: center;
}

@media (any-hover: hover) {
	:where(.cm-block-content, .editor-styles-wrapper) :is(p, .wp-block-list li, .wp-block-heading, .wp-block-post-title) a:not(.button):not([class*="button"]):not(:is(.wysiwyg-content, .wp-block-acf-cm-alert, .wp-block-acf-cm-hero, .wp-block-acf-cm-breadcrumbs, .wp-block-acf-cm-card, .wp-block-acf-cm-accordion, .wp-block-acf-cm-important-message, .wp-block-acf-cm-warning-banner, .wp-block-acf-cm-banner) *):hover {
		opacity: 0.8;
	}

	:where(.cm-block-content, .editor-styles-wrapper) :is(p, .wp-block-list li, .wp-block-heading, .wp-block-post-title) a:not(.button):not([class*="button"]):not(:is(.wysiwyg-content, .wp-block-acf-cm-alert, .wp-block-acf-cm-hero, .wp-block-acf-cm-breadcrumbs, .wp-block-acf-cm-card, .wp-block-acf-cm-accordion, .wp-block-acf-cm-important-message, .wp-block-acf-cm-warning-banner, .wp-block-acf-cm-banner) *):hover::after {
		transform: scaleX(0);
	}
}