/**
 * Editor content (.entry-content).
 *
 * THE SITE'S STYLE FOR ANYTHING THE CLIENT WRITES IN THE EDITOR, not the
 * privacy page's. The cookie policy and the terms will inherit every rule
 * here, and so will any future page whose body is typed rather than composed
 * from ACF fields. Nothing below is named or scoped for a particular document.
 *
 * It is the first of its kind: every page so far is ACF fields poured into
 * fixed markup, so until now the_content() had no style at all and fell back
 * to browser defaults - measured on the privacy policy as paragraphs at
 * margin: 0 and max-width: none, running the full 1312px container.
 *
 * ELEMENTS ONLY, NEVER PASTE ARTEFACTS. Word leaves class="p1" behind and
 * wraps heading text in <b>; the block editor leaves wp-block-paragraph and
 * wp-block-heading. None of them is styled here. They are junk in the source
 * document rather than structure, they differ with every paste and every
 * editor, and a rule that accommodated them would quietly make the mess
 * load-bearing. Style h2 because it is a heading; do not style .p1 because it
 * means nothing.
 *
 * THE MEASURE IS THE POINT. Legal text is read in long runs, so the whole
 * scope caps at .prose's 65ch rather than only its paragraphs. base.css notes
 * that .prose is for running text and that lists and media take the full
 * column - that holds where a list is a datasheet beside its own media. Here
 * every child IS running text: a numbered clause is a sentence, and breaking
 * it out of the measure the sentence above it uses would be arbitrary.
 */

.entry-content {
	max-width: 65ch; /* .prose's measure, applied to the whole document */
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * Vertical rhythm
 *
 * A HEADING BELONGS TO WHAT FOLLOWS IT, so every heading takes more space
 * above than below - otherwise it floats between two blocks and the reader has
 * to work out which one it introduces. Ratios below are 2.67x for h2 and 2x
 * for h3.
 *
 * Every value is a step the site already uses:
 *
 *   64px  the header-to-content step (.social-proof__stats, .contact__items
 *         and .visio-features__grid all open on it)
 *   32px  the eyebrow-to-headline step, and the CTA band's headline-to-body
 *   24px  the heading-to-copy step (.cfd-columns__title to its list, the
 *         centred section header to its description, the lightbox figure to
 *         its caption)
 *   16px  the title-to-text step inside a card (.cfd-boxes__title)
 *   12px  the site's list item spacing
 *
 * The ONE value with no precedent is the gap between two blocks of running
 * text, because no section on the site has ever had two paragraphs in a row -
 * every existing body is a single field. It takes 24px, the heading-to-copy
 * step, rather than a new number: the distance from a heading to its text and
 * the distance between two paragraphs are the same kind of gap, and inventing
 * a second one here would be the drift this file is supposed to prevent.
 * -------------------------------------------------------------------- */

.entry-content > * {
	margin-block: 24px 0;
}

/* The first block sits against whatever introduced it - the page title, or the
   section's own top padding - and adds nothing of its own. */
.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content h2 {
	margin-top: 64px;
	margin-bottom: 24px;
	/* The h3 token, one step DOWN from the site's h2. The site's h2 is a
	   section header on a marketing page, sized to be read from across a
	   scroll; inside a 65ch column it competes with the page title instead of
	   sitting under it. A document scale is the display scale shifted by one,
	   which is a token change rather than a new size. */
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-line);
	letter-spacing: var(--type-h3-spacing);
	font-weight: var(--type-h3-weight);
	color: var(--color-heading-text);
}

.entry-content h3 {
	margin-top: 32px;
	margin-bottom: 16px;
	font-size: var(--type-h4-size);
	line-height: var(--type-h4-line);
	letter-spacing: var(--type-h4-spacing);
	font-weight: var(--type-h4-weight);
	color: var(--color-heading-text);
}

.entry-content p,
.entry-content li {
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	font-weight: var(--type-body-weight);
}

/* --------------------------------------------------------------------
 * Inline
 * -------------------------------------------------------------------- */

/* 600, which is the weight the site emphasises with on the primary button and
   the h4. Bold body text at 700 reads as a heading that forgot its tag. */
.entry-content strong,
.entry-content b {
	font-weight: 600;
	color: var(--color-heading-text);
}

.entry-content em {
	font-style: italic;
}

/* The site's prose link: underlined by a border rather than text-decoration so
   the line sits clear of the descenders, and turning accent on hover. Third
   instance of this treatment after .cd__link and .docs__link, which are
   identical to it; worth promoting to one shared class the next time any of
   the three is touched. */
.entry-content a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-subtle);
	transition: color 150ms ease, border-color 150ms ease; /* the interaction tier */
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* --------------------------------------------------------------------
 * Lists
 *
 * UNORDERED lists take the site's own list treatment, the 60 degree accent
 * marker. Editor output carries no classes worth having, so .marker-list
 * reaches them by selector from base.css rather than being copied here - see
 * the note on that rule.
 *
 * ORDERED lists KEEP THEIR NUMBERS, and that is the one place this file parts
 * from .marker-list deliberately. A legal document refers to its own clauses
 * by number, so replacing "3." with a dash deletes information the text itself
 * depends on. The accent reaches them through ::marker instead, which colours
 * the number without removing it.
 * -------------------------------------------------------------------- */

.entry-content ol {
	margin-block: 24px 0;
	padding-left: var(--marker-indent, 28px); /* the marker-list indent, so both list types align */
	list-style: decimal;
}

.entry-content ol::marker,
.entry-content ol > li::marker {
	color: var(--color-accent);
}

.entry-content li + li {
	margin-top: 12px;
}

/* A nested list belongs to the item above it, not to the flow. */
.entry-content li > ul,
.entry-content li > ol {
	margin-top: 12px;
}

/* --------------------------------------------------------------------
 * Divider
 *
 * The site's hairline, at the section step above and below: it separates parts
 * of a document, so it needs more room than the heading that opens one.
 * -------------------------------------------------------------------- */

.entry-content hr {
	margin-block: 64px;
	border: 0;
	border-top: 1px solid var(--color-border-subtle);
}

/* Tables and blockquotes are deliberately NOT styled. Nothing on the site uses
   either yet, and a rule written for content that does not exist is a guess
   about what it will look like. Add them when a document arrives that needs
   them, against that document. */

@media (max-width: 1024px) {
	/* The type scale drops with the tokens on its own. What does not is the
	   rhythm, and 64px above a heading is a quarter of a phone screen: the
	   whole scale steps down one, to the values this file already uses lower
	   down rather than to new ones. */
	.entry-content h2 {
		margin-top: 48px; /* the stacking step the CFD and VISIO sections take here */
	}

	.entry-content hr {
		margin-block: 48px;
	}
}