/**
 * Component: editor content (the_content) on content templates.
 *
 * Styled by element inside .firm-content: a documented exception to the
 * "style by class" rule, because editors pick the tags in the editor. The
 * same file loads in the block editor (add_editor_style), where the content
 * root is .is-root-container, so the editor matches the front end.
 *
 * Content headings: h2–h4 in the display family, primary color. Body text
 * at the body size and line height; lists with discs; underlined links in
 * the text color (text links only, never button-styled links). Spacing: 16px between blocks; 32px before a heading (or
 * the eyebrow above it) from laptop.
 */

:is(.firm-content, .is-root-container) {
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.firm-content > * {
	margin-block: 0;
}

.firm-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

:is(.firm-content, .is-root-container) :is(h2, h3, h4) {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--content-heading);
	letter-spacing: var(--wp--custom--letter-spacing--none);
}

:is(.firm-content, .is-root-container) h2 {
	font-size: var(--wp--preset--font-size--h-2);
}

:is(.firm-content, .is-root-container) h3 {
	font-size: var(--wp--preset--font-size--h-3);
}

:is(.firm-content, .is-root-container) h4 {
	font-size: var(--wp--preset--font-size--h-4);
}

/* Eyebrow: the small line above some headings (paragraph block style). */
:is(.firm-content, .is-root-container) .is-style-eyebrow {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--caption);
	text-transform: uppercase;
}

:is(.firm-content, .is-root-container) :is(ul, ol) {
	padding-inline-start: calc(var(--wp--preset--spacing--50) + var(--wp--preset--spacing--10));
}

:is(.firm-content, .is-root-container) ul {
	list-style: disc;
}

:is(.firm-content, .is-root-container) li + li {
	margin-block-start: 0;
}

/* Text links only: button-styled links (theme buttons, core/button, the
   firm/cta button bar, .firm-button) keep their own colors, underline and
   hover. Inside :where(), so the exclusions add no specificity. */
:is(.firm-content, .is-root-container) a:where(:not(.wp-element-button, .wp-block-button__link, .firm-button, .firm-cta__button)) {
	color: inherit;
	text-decoration: underline;
}

:is(.firm-content, .is-root-container) a:where(:not(.wp-element-button, .wp-block-button__link, .firm-button, .firm-cta__button)):hover {
	color: var(--wp--preset--color--primary);
}

:is(.firm-content, .is-root-container) strong {
	font-weight: 700;
}

:is(.firm-content, .is-root-container) img {
	border-radius: var(--wp--custom--radius--sm);
}

:is(.firm-content, .is-root-container) figure {
	margin-inline: 0;
}

:is(.firm-content, .is-root-container) figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--custom--text--subtle, var(--wp--preset--color--muted));
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
}

:is(.firm-content, .is-root-container) blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--50);
	border-inline-start: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--line-height--body-lg);
}

/* Tables (e.g. penalty tables): scroll sideways on small screens. */
:is(.firm-content, .is-root-container) .wp-block-table {
	overflow-x: auto;
}

:is(.firm-content, .is-root-container) table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--line-height--body-sm);
}

:is(.firm-content, .is-root-container) :is(th, td) {
	padding: var(--wp--preset--spacing--30);
	border: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--divider);
	text-align: start;
	vertical-align: top;
}

:is(.firm-content, .is-root-container) th {
	background: var(--wp--preset--color--surface);
	font-weight: 700;
}

/* Editor only: the body column at its front-end width (793 of the 1500px
   container), so line lengths and block widths preview as published. */
.block-editor-block-list__layout.is-root-container {
	max-inline-size: calc(var(--wp--style--global--content-size) * 793 / 1500);
	margin-inline: auto;
}

/* laptop: more room before each new section of the text. */
@media (min-width: 64em) {
	.firm-content > :is(h2, .is-style-eyebrow):not(:first-child) {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	/* The CTA block sits 32px away from the text around it, as in Figma. */
	.firm-content > .firm-cta,
	.firm-content > .firm-cta + * {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	.firm-content > .is-style-eyebrow + h2 {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	/* Figma: caption size, but the body-lg line height on desktop. */
	:is(.firm-content, .is-root-container) .is-style-eyebrow {
		line-height: var(--wp--custom--line-height--body-lg);
	}
}