/* Shared rich text for Lean plugins and Elementor Framework. Literal token
   defaults keep this stylesheet usable without Elementor Framework installed.
   Prose links remain readable inline text: variant-aware underline and tonal
   feedback preserve natural wrapping without turning phrases into cartouches.
   The outbound icon is reserved for links that explicitly open a new window.

   The two `:not()` clauses beat the `:where(...) a:not():not()` link-reset
   in base.css on specificity ((0,3,1) > (0,2,1)) so prose links win inside
   `.ef-card-body` without `!important`. Native CSS nesting collapses the
   five rules that used to repeat this long selector into one parent + `&`
   rules; every `&` expands to the full parent at parse time, so each rule's
   specificity (base / hover+focus-visible / ::after / :hover::after) matches
   the un-nested form. */
:is(.lean-prose, .ef-prose) a:not([class*="ef-buttons-item"]):not([class*="ef-button"]) {
	color: var(--_surface-link, var(--lean-prose-color-white_link, #165a91));
	/* Elementor kit link typography may carry its own size/family. Prose links are
	   inline emphasis inside authored copy, so keep the surrounding text metrics
	   and vary only the link affordance below. */
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: var(--lean-prose-border-default, 1px);
	text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
	text-underline-offset: 0.16em;
	border-radius: var(--lean-prose-radius-s, 0.25rem);
	transition: color var(--lean-prose-motion-fast, 150ms) var(--lean-prose-ease-out, ease-out), background-color var(--lean-prose-motion-fast, 150ms) var(--lean-prose-ease-out, ease-out), text-decoration-color var(--lean-prose-motion-fast, 150ms) var(--lean-prose-ease-out, ease-out);

	&:focus-visible {
		outline: var(--lean-prose-focus-ring, 2px solid currentColor);
		outline-color: currentColor;
		outline-offset: var(--lean-prose-focus-ring-offset, 2px);
	}

	&:active {
		background-color: color-mix(in srgb, currentColor 12%, transparent);
	}
}

@media (hover: hover) {
	:is(.lean-prose, .ef-prose) a:not([class*="ef-buttons-item"]):not([class*="ef-button"]):hover {
		background-color: color-mix(in srgb, currentColor 7%, transparent);
		text-decoration-color: currentColor;
	}
}

:is(.lean-prose, .ef-prose) a[target="_blank"]:not([class*="ef-buttons-item"]):not([class*="ef-button"])::after {
	--_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13 13 3M3 3h10v10'/%3E%3C/svg%3E");
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-inline-start: 0.2em;
	background-color: currentColor;
	-webkit-mask: var(--_icon) center / contain no-repeat;
	        mask: var(--_icon) center / contain no-repeat;
}

:is(.lean-prose, .ef-prose) {
	/* Themes may reset list markers. Authored lists retain their semantics. */
	ul { list-style-type: disc; }
	ol { list-style-type: decimal; }
	li { display: list-item; }
	/* Reading measure — cap long-form body copy at ~70ch so article text doesn't
	   run the full 1400px container (≈175ch lines, well past the 45-75ch optimum,
	   §4.1). Reset inside cards (below), where the card already governs width. */
	max-width: var(--lean-prose-measure, 70ch);
	/* Flow rhythm — long-form rich text had no vertical spacing (consecutive
	   paragraphs touched, margin-bottom:0). The lobotomized-owl applies one
	   consistent flow gap between any two consecutive blocks without adding a
	   trailing margin that fights the container padding. */
	> * + * { margin-block-start: var(--lean-prose-space-m, 1rem); }

	/* Headings group with the content BELOW them: more space above than the
	   default flow gap, tighter below, so a heading reads as a section opener
	   rather than floating between two paragraphs. */
	> :is(h2, h3, h4, h5, h6) + * { margin-block-start: var(--lean-prose-space-s, 0.75rem); }
	> * + :is(h2, h3, h4, h5, h6) { margin-block-start: var(--lean-prose-space-l, 1.5rem); }

	/* List indent + item rhythm so bullets read as a set, not a wall. */
	:is(ul, ol) { padding-inline-start: var(--lean-prose-space-l, 1.5rem); }
	:is(ul, ol) > li + li { margin-block-start: var(--lean-prose-space-xs, 0.5rem); }

	/* Native bold tags consume the same token as component emphasis, scoped to
	   body-copy contexts so heading emphasis can keep the heading weight. */
	p strong,
	p b,
	li strong,
	li b,
	blockquote strong,
	blockquote b,
	dd strong,
	dd b,
	td strong,
	td b {
		font-weight: var(--lean-prose-weight-strong, 700);
	}

	/* Blockquote: a quiet accent rail rather than italic-everything. */
	blockquote {
		padding-inline-start: var(--lean-prose-space-m, 1rem);
		border-inline-start: var(--lean-prose-border-strong, 2px) solid var(--lean-prose-color-primary_light, #dbeafe);
		color: inherit;
	}

	table {
		/* A prose table is an editorial surface, not a bare grid. The strong/on-
		   strong pair is published by variant-bearing EF surfaces (notably Card
		   bodies), so a solid card automatically receives an inverse light header
		   while light/white contexts use their hue. Standalone prose falls back to
		   the canonical primary pair. */
		--_prose-table-strong: var(--_context-strong, var(--lean-prose-color-primary_surface, #243244));
		--_prose-table-on-strong: var(--_context-on-strong, var(--lean-prose-color-primary_contrast, #fff));
		--_prose-table-rule: color-mix(in srgb, currentColor 16%, transparent);
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		margin-block: var(--lean-prose-space-s, 0.75rem);
		border: var(--lean-prose-border-default, 1px) solid var(--_prose-table-rule);
		border-radius: var(--lean-prose-radius-m, 0.5rem);
		overflow: hidden;
		font-size: 0.9em;
	}

	:is(th, td) {
		padding: var(--lean-prose-space-s, 0.75rem);
		border-block-end: var(--lean-prose-border-default, 1px) solid var(--_prose-table-rule);
		/* Logical, not `left`: the rest of this file is written in logical
		   properties, and a physical `left` keeps an RTL article's columns
		   ragged against the wrong edge. */
		text-align: start;
		/* Clipping guard: an authored URL longer than its column would other-
		   wise paint outside the cell box and be unreadable. `break-word`, NOT
		   the `anywhere` used by `.ef-compare-table`. Both stop the escape
		   (measured: a 75px fixed-layout cell holding a 149px URL keeps
		   scrollWidth == clientWidth under either), but `anywhere` also counts
		   break opportunities toward min-content, which shrinks an auto-layout
		   table to fit and then hyphen-free-splits ordinary words: on the
		   matcha-grades table at 390px it broke 7 real words ("Harvest",
		   "Balanced,", "(nibancha)") mid-word and grew the table 571px -> 641px.
		   `.ef-compare-table` can afford `anywhere` because it is
		   `table-layout: fixed`, where columns cannot grow anyway. Prose tables
		   are auto-layout inside the scroll region below, so they are allowed
		   to be wider than the viewport and scroll. */
		overflow-wrap: break-word;
		vertical-align: top;
	}

	th { font-weight: var(--lean-prose-weight-strong, 700); }

	thead th {
		border-block-end-width: var(--lean-prose-border-strong, 2px);
		border-block-end-color: color-mix(in srgb, var(--_prose-table-on-strong) 28%, transparent);
		background: var(--_prose-table-strong);
		color: var(--_prose-table-on-strong);
		vertical-align: bottom;
	}

	thead th a:not([class*="ef-buttons-item"]):not([class*="ef-button"]) { color: inherit; }

	/* Row headers need more hierarchy than body data, but repeating the saturated
	   header plane down the first column would overpower compact tables. */
	tbody th {
		background: color-mix(in srgb, var(--_prose-table-strong) 9%, transparent);
		color: inherit;
	}

	tfoot :is(th, td) {
		border-block-start: var(--lean-prose-border-strong, 2px) solid var(--_prose-table-rule);
		border-block-end: 0;
		font-weight: var(--lean-prose-weight-strong, 700);
	}

	/* Preserve authored numeric semantics. The obsolete-but-still-supported HTML
	   `align` attribute is emitted by some rich-text/table tools; make its visual
	   result logical for RTL and give figures a stable reading rhythm. */
	:is(th, td)[align="right"] {
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	:is(th, td) code {
		padding: var(--lean-prose-space-2xs, 0.25rem) var(--lean-prose-space-xs, 0.5rem);
		border-radius: var(--lean-prose-radius-s, 0.25rem);
		background: color-mix(in srgb, currentColor 8%, transparent);
	}

	:is(th, td):empty {
		background-image: linear-gradient(color-mix(in srgb, currentColor 3%, transparent), color-mix(in srgb, currentColor 3%, transparent));
	}

	tbody tr:last-child > :is(th, td) { border-block-end: 0; }

	tbody:has(+ tfoot) tr:last-child > :is(th, td) { border-block-end: var(--lean-prose-border-default, 1px) solid var(--_prose-table-rule); }

	caption {
		/* Same visual language as `.ef-compare-caption` so the two table
		   surfaces do not describe themselves differently. The scroll region
		   borrows this element as its accessible name, so it is real content,
		   not decoration. */
		padding-block-end: var(--lean-prose-space-s, 0.75rem);
		color: inherit;
		font-size: var(--lean-prose-font-small, 0.875rem);
		font-weight: var(--lean-prose-weight-strong, 700);
		text-align: start;
	}

	/* Row banding ------------------------------------------------------------
	   A comparison row is read across its full width, and with no banding the
	   eye loses the line on a wide table. The tint is mixed from `currentColor`
	   rather than a fixed neutral so it follows whatever text channel it lands
	   in: on white it resolves to ~#F6F6F7 (the value of `--lean-prose-color-gray_light`),
	   and inside a card it tints against `--_card-text` instead of painting a
	   light wash over a dark variant.

	   Both states drive ONE declaration through `--_prose-row-tint`, so hover
	   and banding never fight: the two setters carry equal specificity and the
	   later (hover) simply wins on a banded row. No specificity escalation. */
	tbody tr {
		background-color: color-mix(in srgb, currentColor var(--_prose-row-tint, 0%), transparent);
		transition: background-color var(--lean-prose-motion-fast, 150ms) var(--lean-prose-ease-out, ease-out);
	}

	tbody tr:nth-child(even) { --_prose-row-tint: 4%; }

	/* Wide tables scroll inside the labelled region emitted by
	   `includes/render/prose-tables.php`; the `<table>` itself stays a real
	   `display: table` at every width. The region is the scroller, so it is
	   also what carries `tabindex="0"` — a scroll container no keyboard user
	   can reach is WCAG 2.1.1 (axe `scrollable-region-focusable`), and CSS
	   alone cannot make anything focusable. */
	:is(.lean-prose-table-scroll, .ef-prose-table-scroll) {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	:is(.lean-prose-table-scroll, .ef-prose-table-scroll):focus-visible {
		/* `currentColor`, like the prose link ring above: the shared ring token
		   resolves to `--lean-prose-color-primary`, which is near-black and would sink
		   into a dark card variant. The inset offset keeps the ring inside the
		   box so a card's `overflow: clip` cannot shave it off. */
		outline: var(--lean-prose-focus-ring, 2px solid currentColor);
		outline-color: currentColor;
		outline-offset: calc(-1 * var(--lean-prose-focus-ring-offset, 2px));
		border-radius: var(--lean-prose-radius-s, 0.25rem);
	}

	/* A table that is NOT wrapped (no rich-text filter in front of it, e.g. the
	   admin token preview) keeps the original self-scrolling behaviour, so it
	   still cannot push the document sideways on a phone. */
	@media (max-width: 767.98px) {
		> table {
			display: block;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}
	}

	@media (hover: hover) {
		tbody tr:hover { --_prose-row-tint: 7%; }
	}

	@media (prefers-reduced-motion: reduce) {
		tbody tr { transition: none; }
	}
}

.lean-prose--numbered {
	counter-reset: lean-prose-h2 lean-prose-h3;
}

.lean-prose--numbered h2 {
	counter-increment: lean-prose-h2;
	counter-set: lean-prose-h3 0;
}

.lean-prose--numbered h3 {
	counter-increment: lean-prose-h3;
}

.lean-prose--numbered h2::before {
	content: counter(lean-prose-h2) ". ";
}

.lean-prose--numbered h3::before {
	content: counter(lean-prose-h2) "." counter(lean-prose-h3) ". ";
}