/*
 * Article typography: everything written in the editor (posts, guides,
 * pages, services, results, locations), inside .vef-prose. The same rules
 * style the block editor (inc/setup.php), so writing looks like the page.
 * Colors and fonts come from the brand tokens in core.css.
 */

.vef-prose { color: var(--vef-text); font-size: 18px; line-height: 1.7; overflow-wrap: break-word; }
.vef-prose > * { margin-top: 0; margin-bottom: 1.2em; }
.vef-prose > :first-child { margin-top: 0; }
.vef-prose > :last-child { margin-bottom: 0; }
.vef-prose :is(p, ul, ol, dl) { margin-top: 0; margin-bottom: 1.2em; }

/* Headings */
.vef-prose :is(h2, h3, h4, h5, h6) { color: var(--vef-ink); font-weight: 600; line-height: 1.25; }
.vef-prose h2 { margin: 1.8em 0 .6em; font-size: clamp(26px, 3vw, 32px); letter-spacing: -.01em; }
.vef-prose h3 { margin: 1.6em 0 .5em; font-size: clamp(21px, 2.2vw, 24px); }
.vef-prose h4 { margin: 1.5em 0 .4em; font-size: 19px; }
.vef-prose h5 { margin: 1.5em 0 .4em; color: var(--vef-accent-dark); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.vef-prose h6 { margin: 1.4em 0 .4em; font-size: 16px; }
.vef-prose > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }

/* Inline */
.vef-prose :is(strong, b) { color: var(--vef-ink); font-weight: 600; }
.vef-prose a { color: var(--vef-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vef-prose a:hover { color: var(--vef-accent-dark); text-decoration-thickness: 2px; }
.vef-prose mark { padding: 0 .2em; border-radius: var(--vef-radius-xs); background: color-mix(in srgb, var(--vef-accent) 18%, transparent); color: inherit; }
.vef-prose small { font-size: .85em; }
.vef-prose abbr[title] { text-decoration: underline dotted; cursor: help; }

/* A button inside the prose is a button, not a link in a sentence. The rules
   above are for words in a paragraph and they out-rank .vef-button, which is
   a single class — which is how a call-to-action panel dropped into an
   article ended up with an underlined label, and, left alone, would have put
   gold text on a gold button. Stated here rather than in core.css, next to
   the rules being excepted. */
.vef-prose .vef-button { text-decoration: none; }
.vef-prose .vef-button:hover { text-decoration: none; }
.vef-prose .vef-button:not(.vef-button--light, .vef-button--outline) { color: var(--vef-on-accent, #fff); }
.vef-prose :is(.vef-button--light, .vef-button--outline) { color: var(--vef-button-line, var(--vef-primary)); }
.vef-prose :not(pre) > code { padding: .15em .4em; border-radius: var(--vef-radius-xs); background: var(--vef-mute); color: var(--vef-ink); font: .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.vef-prose .has-drop-cap:not(:focus)::first-letter { float: left; margin: .08em .12em 0 0; color: var(--vef-accent); font-size: 3.6em; font-weight: 600; line-height: .8; }

/* Lists: accent markers; nested lists sit tight. */
.vef-prose :is(ul, ol) { padding-left: 1.4em; }
.vef-prose li { padding-left: .3em; }
.vef-prose li + li { margin-top: .45em; }
.vef-prose li::marker { color: var(--vef-accent); font-weight: 600; }
.vef-prose li :is(ul, ol) { margin: .45em 0 0; }
/* A nested bulleted list keeps a solid dot, not the browser's hollow ring. */
:is(.vef-prose, .vef-step__text) li ul { list-style-type: disc; }

/* A list in content — a list block, or a plain list in older HTML
   content — and a list in a process step is a quiet
   card: hairline and radius, no rule on top, since it carries on the text
   around it. Each item opens on a primary-tinted circle: a check in a
   bulleted list, its number in a numbered one (the browser's own count, so
   a list's start and reversed still hold). A list nested inside keeps
   plain markers. Key Takeaways is already a card, so its list takes the
   circles without the frame; the Contact tabs and a block with its own
   background keep plain markers; The circles are the primary unless the
   card around them sets --vef-list-tint and --vef-list-ink: a list in a
   card wears that card's colour, the one on its top rule and its icon; a list with a class
   of its own (a block's or a plugin's) is left alone. */
:is(.vef-prose :is(ul, ol):is(.wp-block-list, :not([class])), .vef-step__text :is(ul, ol)):not(.vef-prose li *, .vef-step__text li *, .vef-takeaways__body *, .vef-tabs__panel *, .has-background *) {
	display: grid; gap: 12px; padding: 20px 24px; list-style: none;
	border: 1px solid var(--vef-line); border-radius: var(--vef-radius-md); background: var(--vef-canvas);
}
.vef-prose.vef-takeaways__body > :is(ul, ol):is(.wp-block-list, :not([class])) { display: grid; gap: .55em; padding-left: 0; list-style: none; }
:is(.vef-prose :is(ul, ol):is(.wp-block-list, :not([class])), .vef-step__text :is(ul, ol)):not(.vef-prose li *, .vef-step__text li *, .vef-tabs__panel *, .has-background *) > li { position: relative; margin: 0; padding-left: 36px; line-height: 1.5; }
:is(.vef-prose :is(ul, ol):is(.wp-block-list, :not([class])), .vef-step__text :is(ul, ol)):not(.vef-prose li *, .vef-step__text li *, .vef-tabs__panel *, .has-background *) > li::before {
	content: ""; position: absolute; left: 0; top: .08em; width: 24px; height: 24px; border-radius: 50%;
	background: var(--vef-list-tint, color-mix(in srgb, var(--vef-primary) 14%, var(--vef-canvas)));
	color: var(--vef-list-ink, color-mix(in srgb, var(--vef-primary) 82%, #000));
	font-size: 13px; font-weight: 600; line-height: 24px; text-align: center; font-variant-numeric: tabular-nums;
}
:is(.vef-prose ul:is(.wp-block-list, :not([class])), .vef-step__text ul):not(.vef-prose li *, .vef-step__text li *, .vef-tabs__panel *, .has-background *) > li::after {
	content: ""; position: absolute; left: 8px; top: calc(.08em + 6px); width: 6px; height: 10px;
	border: solid var(--vef-list-ink, color-mix(in srgb, var(--vef-primary) 82%, #000)); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
:is(.vef-prose ol:is(.wp-block-list, :not([class])), .vef-step__text ol):not(.vef-prose li *, .vef-step__text li *, .vef-tabs__panel *, .has-background *) > li::before { content: counter(list-item); }
.vef-prose dt { color: var(--vef-ink); font-weight: 600; }
.vef-prose dd { margin: 0 0 .8em; }

/* Quote and pull quote
 *
 * A quote in an article is the same object as a review on the home page —
 * somebody else's words, set apart — so it wears the same card as the
 * takeaways and call-to-action blocks: the white ground, the 1px line, 28px,
 * a 12px radius, an icon block, and the accent edge — on the LEFT here,
 * where the takeaways and call-to-action cards wear theirs along the top.
 * Being tried that way round on purpose: a quote is read as an aside beside
 * the argument rather than as a card capping a section, and the left rule is
 * the older convention for one. Either way the edge needs the 1px line on
 * the other sides to cap against, or it reads as a stripe lying on a slab.
 *
 * One rule covers both editors. Gutenberg's quote block IS a <blockquote>
 * (with a wp-block-quote class the classic editor's lacks), so matching the
 * element rather than the class catches markup from either, including the
 * quotes already sitting in imported content. The pull quote is a different
 * object — a line lifted out and made loud — and keeps its own treatment
 * below, as does Gutenberg's "plain" style, which exists to opt out. */
.vef-prose blockquote {
	--vef-q-pad: 28px; --vef-q-icon: 56px; --vef-q-gap: 20px; --vef-q-mark: 26px;
	position: relative;
	/* The block beside it is 56px and a line of this is 26px, so a short
	   quote was sized by its icon: the card stood as tall as the block while
	   the words sat against its top edge, which read as a mistake rather
	   than a quote. The floor keeps the card the block's own height, and
	   centring the text puts one or two lines level with the mark instead of
	   above it. Three lines or more outgrow the floor and nothing moves. */
	min-height: calc(var(--vef-q-icon) + var(--vef-q-pad) * 2);
	display: flex; flex-direction: column; justify-content: center;
	margin: 1.8em 0; border-radius: var(--vef-radius-md);
	padding: var(--vef-q-pad) var(--vef-q-pad) var(--vef-q-pad)
		calc(var(--vef-q-pad) + var(--vef-q-icon) + var(--vef-q-gap));
	border: 1px solid var(--vef-line); border-left: 4px solid var(--vef-accent);
	background: var(--vef-canvas); color: var(--vef-ink);
	font-size: 16px; line-height: 1.65;
}
/* The mark the card carries instead of a review's stars. It has to be a
   pseudo-element: this is editor content, so there is no markup to hang an
   icon on, and a quote glyph needs no data to render — which stars would. */
/* The mark sits in the same tinted block the highlight cards give their
   icons, with the whole quote beside it. It is drawn as a masked shape
   rather than a typed “: in a display serif that character is about 8px of
   ink at 40px, set high above the baseline, so it cannot fill an icon box
   or be centred in one without fighting the font's metrics. The mask takes
   its colour from the token like every other icon.

   Two pseudo-elements, because this is editor content and there is no
   markup to put a box and a glyph in. Geometry is driven off the three
   custom properties, so the mobile rule only has to change the padding. */
.vef-prose blockquote::before,
.vef-prose blockquote::after { content: ""; position: absolute; }
.vef-prose blockquote::before {
	left: var(--vef-q-pad); top: var(--vef-q-pad);
	width: var(--vef-q-icon); height: var(--vef-q-icon); border-radius: var(--vef-radius-sm);
	background: color-mix(in srgb, var(--vef-accent) 12%, var(--vef-canvas));
}
.vef-prose blockquote::after {
	left: calc(var(--vef-q-pad) + (var(--vef-q-icon) - var(--vef-q-mark)) / 2);
	top: calc(var(--vef-q-pad) + (var(--vef-q-icon) - var(--vef-q-mark)) / 2);
	width: var(--vef-q-mark); height: var(--vef-q-mark);
	background: var(--vef-accent-dark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 6.5C6.4 7.9 4.6 10.6 4.6 13.7c0 2.2 1.5 3.8 3.5 3.8s3.4-1.5 3.4-3.5c0-1.9-1.3-3.3-3.1-3.4.4-1.2 1.4-2.3 2.9-3.1l-2-1Zm9.7 0c-2.9 1.4-4.7 4.1-4.7 7.2 0 2.2 1.5 3.8 3.5 3.8s3.4-1.5 3.4-3.5c0-1.9-1.3-3.3-3.1-3.4.4-1.2 1.4-2.3 2.9-3.1l-2-1Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.3 6.5C6.4 7.9 4.6 10.6 4.6 13.7c0 2.2 1.5 3.8 3.5 3.8s3.4-1.5 3.4-3.5c0-1.9-1.3-3.3-3.1-3.4.4-1.2 1.4-2.3 2.9-3.1l-2-1Zm9.7 0c-2.9 1.4-4.7 4.1-4.7 7.2 0 2.2 1.5 3.8 3.5 3.8s3.4-1.5 3.4-3.5c0-1.9-1.3-3.3-3.1-3.4.4-1.2 1.4-2.3 2.9-3.1l-2-1Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vef-prose blockquote p { margin: 0 0 .8em; }
.vef-prose blockquote > :last-child { margin-bottom: 0; }
/* Gutenberg's plain style is how an editor says "not a box". */
.vef-prose .wp-block-quote.is-style-plain {
	padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit;
}
.vef-prose :is(.wp-block-quote.is-style-plain, .wp-block-pullquote blockquote)::before,
.vef-prose :is(.wp-block-quote.is-style-plain, .wp-block-pullquote blockquote)::after { content: none; }
.vef-prose blockquote cite, .vef-prose .wp-block-pullquote cite {
	display: block; margin-top: 12px; color: var(--vef-text);
	font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.vef-prose .wp-block-pullquote { margin: 2.4em 0; padding: 40px 24px 36px; border-block: 2px solid var(--vef-line); text-align: center; }
.vef-prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; }
.vef-prose .wp-block-pullquote p { color: var(--vef-ink); font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.vef-prose .wp-block-pullquote p::before { content: "“"; display: block; margin-bottom: 4px; color: var(--vef-accent); font-size: 2em; line-height: .6; }

/* Tables — styled as a CORE card: 1px line, the card radius, the canvas
   ground, a muted header row and hairlines between rows only. WordPress's
   own block styles add a border on every cell; they're cleared here, so a
   table reads like the cards around it rather than a spreadsheet. */
.vef-prose .wp-block-table { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--vef-line); border-top: 5px solid var(--vef-primary); border-radius: var(--vef-radius-md); background: var(--vef-canvas); }
.vef-prose .wp-block-table thead { border-bottom: 0; }
.vef-prose table { width: 100%; border-collapse: collapse; border: 0; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.vef-prose :is(th, td) { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--vef-line); text-align: left; vertical-align: top; }
.vef-prose tbody tr:last-child :is(th, td) { border-bottom: 0; }
.vef-prose thead th, .vef-prose table:not(:has(thead)) tr:first-child th { background: var(--vef-mute); color: var(--vef-ink); font-weight: 600; }
.vef-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--vef-mute); }
.vef-prose .wp-block-table.is-style-stripes :is(th, td) { border-bottom: 0; }
.vef-prose .wp-block-table figcaption { margin: 0; padding: 10px 18px; border-top: 1px solid var(--vef-line); font-size: 14px; text-align: left; }

/* Buttons (the Buttons block) in the theme's button styles. */
.vef-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0; }
.vef-prose .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px;
	border: 0; border-radius: var(--vef-radius); background: var(--vef-accent); color: var(--vef-on-accent, #fff);
	font: 600 16px/1.2 var(--vef-font); text-decoration: none; transition: background-color .15s ease;
}
.vef-prose .wp-block-button__link:hover { background: var(--vef-accent-dark); color: var(--vef-on-accent, #fff); }
.vef-prose .is-style-outline .wp-block-button__link { background: transparent; color: var(--vef-ink); box-shadow: inset 0 0 0 2px var(--vef-ink); }
.vef-prose .is-style-outline .wp-block-button__link:hover { background: var(--vef-ink); color: #fff; }

/* Separator */
.vef-prose hr, .vef-prose .wp-block-separator { height: 1px; margin: 2.6em 0; border: 0; background: var(--vef-line); opacity: 1; }
.vef-prose .wp-block-separator.is-style-dots { height: auto; background: none; text-align: center; }
.vef-prose .wp-block-separator.is-style-dots::before { content: "···"; color: var(--vef-accent); font-size: 28px; letter-spacing: .6em; }

/* Code block */
.vef-prose pre { overflow-x: auto; margin: 1.8em 0; padding: 20px 24px; border-radius: var(--vef-radius-md); background: var(--vef-primary); color: #fff; font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Details block: a question that opens, like the FAQs. */
.vef-prose .wp-block-details { margin: 0; padding: 0; border-bottom: 1px solid var(--vef-line); }
.vef-prose .wp-block-details:first-of-type, .vef-prose :not(.wp-block-details) + .wp-block-details { border-top: 1px solid var(--vef-line); }
.vef-prose .wp-block-details summary { position: relative; padding: 18px 40px 18px 0; color: var(--vef-ink); font-weight: 600; cursor: pointer; list-style: none; }
.vef-prose .wp-block-details summary::-webkit-details-marker { display: none; }
.vef-prose .wp-block-details summary::after {
	content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
	border-right: 2px solid var(--vef-accent); border-bottom: 2px solid var(--vef-accent); transform: rotate(45deg); transition: transform .15s ease;
}
.vef-prose .wp-block-details[open] summary::after { margin-top: -1px; transform: rotate(-135deg); }
.vef-prose .wp-block-details > :not(summary) { margin: 0 0 1em; }

/* Media */
.vef-prose :is(img, video) { max-width: 100%; height: auto; border-radius: var(--vef-radius-md); }
.vef-prose .wp-block-embed { margin: 1.8em 0; }
.vef-prose .wp-block-embed iframe { border-radius: var(--vef-radius-md); }
.vef-prose .wp-block-embed figcaption, .vef-prose .wp-block-gallery figcaption, .vef-prose .wp-block-video figcaption { margin-top: 10px; font-size: 14px; text-align: left; }
.vef-prose .wp-block-gallery { margin: 1.8em 0; }

/* Alignments: left / right float beside the text; wide breaks out of the reading column; full spans the window. */
.vef-prose .alignleft { float: left; max-width: 50%; margin: .3em 1.6em 1em 0; }
.vef-prose .alignright { float: right; max-width: 50%; margin: .3em 0 1em 1.6em; }
.vef-prose .aligncenter { margin-inline: auto; text-align: center; }
.vef-prose .aligncenter > img { margin-inline: auto; }
.vef-prose::after { content: ""; display: table; clear: both; }
@media (min-width: 1024px) {
	.vef-rail--narrow .vef-prose .alignwide { width: calc(100% + 240px); max-width: calc(100vw - 2 * var(--vef-gutter)); margin-left: -120px; }
}
.vef-prose .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
.vef-prose .alignfull img { border-radius: 0; }

@media (max-width: 640px) {
	.vef-prose { font-size: 17px; }
	.vef-prose :is(.alignleft, .alignright) { float: none; max-width: 100%; margin: 1.6em 0; }
	/* Under 640px, 56px of block plus its gap leaves too narrow a measure, so
	   the mark moves above the words instead of beside them. */
	.vef-prose blockquote {
		--vef-q-pad: 20px;
		padding: calc(var(--vef-q-pad) + var(--vef-q-icon) + 14px) var(--vef-q-pad) var(--vef-q-pad);
		/* The mark is above the words here, not beside them, so the floor
		   would only add empty space under a short quote. */
		min-height: 0;
	}
	.vef-prose :is(th, td) { padding: 10px 12px; }
}