/*
 * Rich text block styles for core blocks: the "Callout: Warning" and
 * "Callout: Info" Group styles, the "Checklist" and "Checkmark list" List
 * styles and the "Numbered step" Heading style.
 *
 * They reproduce the content elements of the accordion answers. Every rule is
 * scoped to a block style class (is-style-cm-*) inside block content: the page
 * and post wrapper (.cm-block-content) on the front end and the editor canvas
 * (.editor-styles-wrapper). Colours read the same --cm-* custom properties as
 * the accordion answers, so the colour overrides of Theme Settings apply here.
 *
 * Values are the ones an accordion answer renders, where the element rules and
 * the rich text container rules (.wysiwyg-content) apply together. Selectors
 * outrank those container rules, the block gap margins of core layouts and the
 * core list and heading rules of block content, so an element looks the same
 * in plain block content and in a Card body, which is a .wysiwyg-content
 * container. Spacing between a styled block and its neighbours follows the
 * container, as for any other block.
 */

/* Numbered steps restart in every block content area, Group and Column. */
.cm-block-content,
.wp-block-group,
.wp-block-column {
	counter-reset: step;
}

/* Core resets the footnotes counter on the editor canvas root, so both are reset there. */
:root .editor-styles-wrapper {
	counter-reset: footnotes step;
}

/* Callouts: a Group with the "Callout: Warning" or "Callout: Info" style. */
:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group:is(.is-style-cm-callout-warning, .is-style-cm-callout-info) {
	margin-top: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-left: 0.1875rem solid;
	border-radius: 0 0.5rem 0.5rem 0;
	font-size: 1rem;
	line-height: 1.3;
}

/* Blocks inside a callout take no block gap above them, as in an accordion answer. */
:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group:is(.is-style-cm-callout-warning, .is-style-cm-callout-info) > * {
	margin-top: 0;
}

/* Paragraphs and lists followed by another block keep the rich text spacing below them. */
:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group:is(.is-style-cm-callout-warning, .is-style-cm-callout-info) > :is(p, ul, ol):not(:last-child) {
	margin-bottom: 1.25rem;
}

/* The first paragraph is the bold heading line, with the icon drawn inline before it on the text baseline. */
:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group:is(.is-style-cm-callout-warning, .is-style-cm-callout-info) > p:first-child {
	font-weight: 700;
	margin: 0 0 0.1875rem;
}

:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group:is(.is-style-cm-callout-warning, .is-style-cm-callout-info) > p:first-child::before {
	content: "";
	display: inline-block;
	width: 1.0625rem;
	height: 1.0625rem;
	margin-right: 0.4375rem;
	background: no-repeat center / contain;
}

:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group:is(.is-style-cm-callout-warning, .is-style-cm-callout-info) > p:last-child {
	margin-bottom: 0;
}

:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group.is-style-cm-callout-warning {
	background: var(--cm-callout-warning-bg, #f6f0e3);
	border-left-color: var(--cm-callout-warning-border, var(--gold));
}

:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group.is-style-cm-callout-warning > p:first-child {
	color: var(--cm-callout-warning-heading, #8b6820);
}

:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group.is-style-cm-callout-warning > p:first-child::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238b6820' d='M12 2 1 21h22L12 2z'/%3E%3Crect x='11' y='9' width='2' height='6' fill='%23f6f0e3'/%3E%3Crect x='11' y='16.5' width='2' height='2' fill='%23f6f0e3'/%3E%3C/svg%3E");
}

:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group.is-style-cm-callout-info {
	background: var(--cm-callout-info-bg, #e9eff7);
	border-left-color: var(--cm-callout-info-border, #3e506d);
}

:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group.is-style-cm-callout-info > p:first-child {
	color: var(--cm-callout-info-heading, inherit);
}

:is(.cm-block-content, .editor-styles-wrapper) .wp-block-group.is-style-cm-callout-info > p:first-child::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233e506d' d='M9 21c0 .6.4 1 1 1h4c.6 0 1-.4 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-2.3c1.8-1.2 3-3.3 3-5.7 0-3.9-3.1-7-7-7z'/%3E%3C/svg%3E");
}

/*
 * Numbered step: a Heading with the "Numbered step" style. It reads like body
 * text in bold, with the running number drawn in a thin circle before it.
 */
:is(.cm-block-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6).wp-block-heading.is-style-cm-step {
	counter-increment: step;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0.375rem;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: inherit;
	color: var(--cm-step-color, var(--navy));
	line-height: 1.3;
}

:is(.cm-block-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6).wp-block-heading.is-style-cm-step::before {
	content: counter(step);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 0.09375rem solid currentColor;
	border-radius: 50%;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
}

/*
 * Checklist: a List with the "Checklist" style. The checklist script turns each
 * item into a checkbox row (label.checklist__item) and the paragraph right
 * before the list into a master checkbox row (p.checklist__master). Master and
 * item checkboxes share one left-aligned column.
 */
:is(.cm-block-content, .editor-styles-wrapper) p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist) {
	margin: 1rem 0 1.25rem;
	font-size: 1rem;
}

:is(.cm-block-content, .editor-styles-wrapper) :is(p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist) .checklist__master-label, ul.wp-block-list.is-style-cm-checklist .checklist__item) {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	cursor: pointer;
}

:is(.cm-block-content, .editor-styles-wrapper) p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist) .checklist__master-label .checklist__text {
	font-weight: 700;
	color: var(--cm-checklist-heading, #696d3e);
}

:is(.cm-block-content, .editor-styles-wrapper) ul.wp-block-list.is-style-cm-checklist {
	list-style: none;
	margin: 0;
	padding-left: 1.875rem;
	line-height: 1.6;
	font-size: 1rem;
}

/* A checklist followed by another block keeps the rich text spacing below it. */
:is(.cm-block-content, .editor-styles-wrapper) ul.wp-block-list.is-style-cm-checklist:not(:last-child) {
	margin-bottom: 1.25rem;
}

:is(.cm-block-content, .editor-styles-wrapper) ul.wp-block-list.is-style-cm-checklist li {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/* Items are spaced like the items of a rich text list. */
:is(.cm-block-content, .editor-styles-wrapper) ul.wp-block-list.is-style-cm-checklist li:not(:last-child) {
	margin-bottom: 1.25rem;
}

:is(.cm-block-content, .editor-styles-wrapper) ul.wp-block-list.is-style-cm-checklist li::before {
	content: none;
	display: none;
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul.wp-block-list.is-style-cm-checklist, p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist)) .checklist__text {
	flex: 1 1 auto;
}

/* Checkbox control shared by the master and the items. */
:is(.cm-block-content, .editor-styles-wrapper) :is(ul.wp-block-list.is-style-cm-checklist, p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist)) .checklist__box {
	flex: 0 0 auto;
	appearance: none;
	-webkit-appearance: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	border: 0.09375rem solid #9aa0a6;
	border-radius: 0.1875rem;
	background: #fff;
	cursor: pointer;
	position: relative;
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul.wp-block-list.is-style-cm-checklist, p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist)) .checklist__box:checked {
	border-color: var(--cm-checklist-check, var(--navy));
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul.wp-block-list.is-style-cm-checklist, p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist)) .checklist__box:checked::after {
	content: "";
	position: absolute;
	left: 0.3125rem;
	top: 0.0625rem;
	width: 0.3125rem;
	height: 0.625rem;
	border: solid var(--cm-checklist-check, var(--navy));
	border-width: 0 0.125rem 0.125rem 0;
	transform: rotate(45deg);
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul.wp-block-list.is-style-cm-checklist, p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist)) .checklist__box:indeterminate {
	border-color: var(--cm-checklist-check, var(--navy));
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul.wp-block-list.is-style-cm-checklist, p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist)) .checklist__box:indeterminate::after {
	content: "";
	position: absolute;
	left: 0.1875rem;
	right: 0.1875rem;
	top: 50%;
	height: 0.125rem;
	background: var(--cm-checklist-check, var(--navy));
	transform: translateY(-50%);
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul.wp-block-list.is-style-cm-checklist, p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist)) .checklist__box:focus-visible {
	outline: 0.125rem solid var(--navy);
	outline-offset: 0.125rem;
}

/* Completed state: every item ticked turns the master box and its text to the done colour. */
:is(.cm-block-content, .editor-styles-wrapper) p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist) .checklist__master-label .checklist__box--master:checked {
	border-color: var(--cm-checklist-done, #2f8a3b);
}

:is(.cm-block-content, .editor-styles-wrapper) p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist) .checklist__master-label .checklist__box--master:checked::after {
	border-color: var(--cm-checklist-done, #2f8a3b);
}

:is(.cm-block-content, .editor-styles-wrapper) p.checklist__master:has(+ ul.wp-block-list.is-style-cm-checklist) .checklist__master-label .checklist__box--master:checked ~ .checklist__text {
	color: var(--cm-checklist-done, #2f8a3b);
}

/*
 * Checkmark list: a List with the "Checkmark list" style. Static ticks replace
 * the bullets, drawn like the tick of a checked checklist box and centred on
 * the first line of each item.
 */
:is(.cm-block-content, .editor-styles-wrapper) :is(ul, ol).wp-block-list.is-style-cm-checkmark-list {
	list-style: none;
	margin: 1rem 0;
	padding-left: 0;
	line-height: 1.6;
	font-size: 1rem;
}

/* A checkmark list followed by another block keeps the rich text spacing below it. */
:is(.cm-block-content, .editor-styles-wrapper) :is(ul, ol).wp-block-list.is-style-cm-checkmark-list:not(:last-child) {
	margin-bottom: 1.25rem;
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul, ol).wp-block-list.is-style-cm-checkmark-list li {
	list-style: none;
	position: relative;
	padding-left: 1.75rem;
	margin: 0 0 0.375rem;
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul, ol).wp-block-list.is-style-cm-checkmark-list li:not(:last-child) {
	margin-bottom: 0.375rem;
}

:is(.cm-block-content, .editor-styles-wrapper) :is(ul, ol).wp-block-list.is-style-cm-checkmark-list li::before {
	content: "";
	position: absolute;
	left: 0.3125rem;
	top: 0.4375rem;
	width: 0.375rem;
	height: 0.6875rem;
	background: none;
	border: solid var(--cm-checkmark-list, var(--navy));
	border-width: 0 0.125rem 0.125rem 0;
	border-radius: 0;
	transform: rotate(45deg);
}