/* =========================================================================
   BioEvidenceHub — prose

   The reading typography for anything written in the editor: single posts,
   static pages, and any content typed into the page assigned as the front
   page.

   This lives in its own stylesheet because all three of those views need it
   and none of them share a template stylesheet. It was previously duplicated
   in single.css and pages.css, which meant the homepage's editor band had no
   prose styles at all and rendered as raw browser defaults.
   ========================================================================= */

.beh-prose {
	font-family: var(--beh-font-editorial);
	font-size: 1.1875rem;
	line-height: var(--beh-lh-relaxed);
	/* A touch darker than the site body colour: serif text at this size needs
	   slightly more contrast than sans to read as comfortably. */
	color: #2b3550;
	max-inline-size: var(--beh-measure);
	/* Old-style figures sit better in running serif text than lining ones. */
	font-variant-numeric: oldstyle-nums proportional-nums;
}

/* The interface sans takes over when the Customizer turns the serif off. */
.beh-font-sans .beh-prose {
	font-family: var(--beh-font-ui);
	font-size: 1.0625rem;
	font-variant-numeric: normal;
}

.beh-prose > * {
	max-inline-size: var(--beh-measure);
}

.beh-prose p {
	margin-block-end: var(--beh-s-6);
}

/* The opening paragraph steps up in size — a standard editorial device that
   eases the reader in and marks where the article proper begins. */
.beh-prose > p:first-of-type {
	font-size: 1.3125rem;
	line-height: 1.62;
	color: var(--beh-navy);
}

.beh-prose :is(h2, h3, h4, h5, h6) {
	font-family: var(--beh-font-editorial);
	font-weight: 600;
	letter-spacing: -0.015em;
	/* Clears the sticky header when a table-of-contents link jumps here. */
	scroll-margin-block-start: calc(var(--beh-header-h) + var(--beh-admin-bar) + 2rem);
}

.beh-font-sans .beh-prose :is(h2, h3, h4, h5, h6) {
	font-family: var(--beh-font-ui);
	font-weight: 800;
}

.beh-prose h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.18;
	/* Asymmetric margin: far more space above a heading than below, so it
	   binds visually to the text it introduces rather than floating between
	   two blocks. */
	margin-block: var(--beh-s-14) var(--beh-s-4);
}

.beh-prose h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.25;
	margin-block: var(--beh-s-10) var(--beh-s-3);
}

.beh-prose h4 {
	font-size: 1.1875rem;
	margin-block: var(--beh-s-8) var(--beh-s-3);
}

.beh-prose :is(ul, ol) {
	margin-block-end: var(--beh-s-6);
	padding-inline-start: 1.4em;
}

.beh-prose li {
	margin-block-end: var(--beh-s-2);
}

.beh-prose li::marker {
	color: var(--beh-primary);
}

.beh-prose a {
	color: var(--beh-primary);
	text-decoration: underline;
	/* Enough offset to clear descenders, thin enough not to shout. */
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--beh-primary-200);
	transition: text-decoration-color var(--beh-dur-fast) var(--beh-ease);
}

.beh-prose a:hover {
	text-decoration-color: var(--beh-primary);
}

.beh-prose strong {
	font-weight: 650;
	color: var(--beh-navy);
}

.beh-prose blockquote {
	margin-block: var(--beh-s-10);
	padding-inline-start: var(--beh-s-6);
	border-inline-start: 3px solid var(--beh-primary);
	font-size: 1.3125rem;
	line-height: 1.5;
	color: var(--beh-navy);
}

.beh-prose blockquote p:last-child {
	margin-block-end: 0;
}

.beh-prose blockquote cite {
	display: block;
	margin-block-start: var(--beh-s-3);
	font-family: var(--beh-font-ui);
	font-size: var(--beh-fs-base);
	font-style: normal;
	font-weight: 700;
	color: var(--beh-muted);
}

.beh-prose :is(figure, .wp-block-image) {
	margin-block: var(--beh-s-10);
}

.beh-prose img {
	border-radius: var(--beh-r-md);
	/* Never let an oversized image push the column wider than its container. */
	max-inline-size: 100%;
	block-size: auto;
}

.beh-prose figcaption,
.beh-prose .wp-element-caption {
	margin-block-start: var(--beh-s-3);
	font-family: var(--beh-font-ui);
	font-size: var(--beh-fs-sm);
	color: var(--beh-muted);
}

/* -------------------------------------------------------------------------
   Wide content
   Tables, wide images and embeds are allowed to break past the reading
   measure and use the full width of the column.
   ---------------------------------------------------------------------- */

.beh-prose .alignwide {
	max-inline-size: min(56rem, 100%);
	margin-inline: auto;
}

.beh-prose .alignfull {
	max-inline-size: none;
}

/* -------------------------------------------------------------------------
   Tables

   Two shapes, handled differently, decided server-side by column count in
   beh_enhance_tables():

     .beh-table--fit   up to 4 columns — a comparison. Fills the measure and
                       wraps; never scrolls sideways.
     .beh-table--wide  5+ columns — a data grid. Sizes to its content inside a
                       scroller, because squeezing it makes every cell three
                       lines tall.

   Below 700px a --fit table stops being a table and becomes one card per row,
   each value labelled with its column heading. Side-scrolling to read a
   comparison on a phone is the single worst table experience there is.
   ---------------------------------------------------------------------- */

.beh-prose :is(.beh-table-fit, .beh-table-scroll) {
	/* Both break past the reading measure to the full column width. */
	max-inline-size: 100%;
	inline-size: 100%;
	margin-block: var(--beh-s-8);
}

.beh-prose .beh-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	border: 1px solid var(--beh-line);
	border-radius: var(--beh-r-lg);
	/*
	 * No edge shadows.
	 *
	 * The usual trick paints a soft dark gradient just inside the left and
	 * right edges to hint at more content. Sitting immediately inside a
	 * visible border it reads as a second, blurrier frame — a doubled outer
	 * border. One clean line is better than a scroll hint that looks like a
	 * mistake; the scrollbar and the cut-off column already communicate it.
	 */
}

.beh-prose .beh-table-scroll:focus-visible {
	outline: 2px solid var(--beh-primary);
	outline-offset: 2px;
}

/* A fit table draws its own frame, since it has no scroller around it. */
.beh-prose .beh-table-fit {
	border: 1px solid var(--beh-line);
	border-radius: var(--beh-r-lg);
	overflow: hidden;
}

/*
 * A frame is drawn once, by the outermost wrapper only.
 *
 * Nesting the two wrappers paints two rounded borders a couple of pixels
 * apart and, worse, traps the inner wrapper's block margin inside the outer
 * one's overflow:hidden, so a strip of empty framed space appears above and
 * below the table. Neutralising the inner box here means no amount of
 * double-wrapping — by a stale cached script, a plugin, or pasted markup that
 * already carries our classes — can bring that back.
 */
.beh-prose :is(.beh-table-fit, .beh-table-scroll) :is(.beh-table-fit, .beh-table-scroll) {
	border: 0;
	border-radius: 0;
	margin-block: 0;
}

/* A Gutenberg table figure must not add a second scroller of its own. */
.beh-prose figure.wp-block-table {
	overflow: visible;
	max-inline-size: 100%;
	margin-block: var(--beh-s-8);
}

.beh-prose table {
	font-family: var(--beh-font-ui);
	font-size: var(--beh-fs-base);
	font-variant-numeric: tabular-nums;
	border-collapse: collapse;
	inline-size: 100%;
	margin: 0;
}

/* Wide data grids size to their content; the scroller handles the overflow. */
.beh-prose .beh-table--wide {
	inline-size: max-content;
	min-inline-size: 100%;
	max-inline-size: none;
}

.beh-prose :is(th, td) {
	padding: 0.8125rem 1rem;
	border: 0;
	border-block-end: 1px solid var(--beh-line);
	text-align: start;
	vertical-align: top;
	overflow-wrap: break-word;
}

.beh-prose thead th {
	background: var(--beh-surface-soft);
	color: var(--beh-navy);
	font-weight: 750;
	font-size: var(--beh-fs-sm);
	letter-spacing: 0.02em;
	border-block-end: 1px solid var(--beh-line-strong);
	/* Position sticky needs a background to paint over scrolled rows. */
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
}

/* Only a wide table scrolls vertically inside its own box, so only there does
   a sticky header earn its keep. */
.beh-prose .beh-table--fit thead th {
	position: static;
}

/* The row-label column of a comparison table. */
.beh-prose .beh-table__rowhead {
	background: var(--beh-surface-alt);
	color: var(--beh-navy);
	font-weight: 700;
	white-space: normal;
	inline-size: 1%;
	min-inline-size: 8rem;
}

/* A wide grid keeps its column headings on one line so the columns stay
   readable; a fit table must be free to wrap. */
.beh-prose .beh-table--wide thead th {
	white-space: nowrap;
}

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

/* A quiet zebra makes a long comparison far easier to track across. */
.beh-prose tbody tr:nth-child(even) {
	background: rgb(246 248 251 / 55%);
}

.beh-prose tbody tr:nth-child(even) .beh-table__rowhead {
	background: var(--beh-surface-soft);
}

/* -------------------------------------------------------------------------
   Stacked tables on small screens
   ---------------------------------------------------------------------- */

@media (max-width: 700px) {
	.beh-prose .beh-table-fit {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.beh-prose .beh-table--stack,
	.beh-prose .beh-table--stack tbody,
	.beh-prose .beh-table--stack tr,
	.beh-prose .beh-table--stack td,
	.beh-prose .beh-table--stack th {
		display: block;
		inline-size: auto;
		/* Explicitly cleared: a stacked table is a column of cards and must
		   never carry a minimum width from the table rules above. */
		min-inline-size: 0;
		max-inline-size: 100%;
	}

	/* The column headings are repeated above each value, so the header row
	   itself is redundant — hidden visually, still read by assistive tech. */
	.beh-prose .beh-table--stack thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Each row becomes a card. */
	.beh-prose .beh-table--stack tr {
		border: 1px solid var(--beh-line);
		border-radius: var(--beh-r-lg);
		margin-block-end: var(--beh-s-4);
		padding: var(--beh-s-2) var(--beh-s-5) var(--beh-s-4);
		background: var(--beh-surface);
	}

	.beh-prose .beh-table--stack tbody tr:nth-child(even) {
		background: var(--beh-surface);
	}

	.beh-prose .beh-table--stack tr:last-child {
		margin-block-end: 0;
	}

	.beh-prose .beh-table--stack :is(td, th) {
		border: 0;
		padding: var(--beh-s-3) 0 0;
	}

	/* The row label becomes the card's title. */
	.beh-prose .beh-table--stack .beh-table__rowhead {
		background: none;
		min-inline-size: 0;
		padding-block: var(--beh-s-3) var(--beh-s-2);
		margin-block-end: var(--beh-s-2);
		border-block-end: 1px solid var(--beh-line-soft);
		font-family: var(--beh-font-editorial);
		font-size: 1.125rem;
		font-weight: 600;
		color: var(--beh-navy);
	}

	.beh-font-sans .beh-prose .beh-table--stack .beh-table__rowhead {
		font-family: var(--beh-font-ui);
		font-weight: 750;
	}

	/* Every value carries its column heading above it. */
	.beh-prose .beh-table--stack td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-block-end: 0.25rem;
		font-size: var(--beh-fs-xs);
		font-weight: 800;
		letter-spacing: var(--beh-tracking-label);
		text-transform: uppercase;
		color: var(--beh-primary);
	}
}

/* -------------------------------------------------------------------------
   Code
   ---------------------------------------------------------------------- */

.beh-prose :is(pre, code) {
	font-variant-numeric: normal;
}

.beh-prose pre {
	padding: var(--beh-s-5);
	overflow-x: auto;
	background: var(--beh-navy);
	color: #e6edf8;
	border-radius: var(--beh-r-md);
	font-size: var(--beh-fs-base);
	line-height: 1.6;
	max-inline-size: 100%;
}

.beh-prose :not(pre) > code {
	padding: 0.15em 0.4em;
	background: var(--beh-surface-soft);
	border: 1px solid var(--beh-line);
	border-radius: 5px;
	font-size: 0.875em;
	overflow-wrap: break-word;
}

.beh-prose hr {
	margin-block: var(--beh-s-14);
}

/* Footnote and citation superscripts. */
.beh-prose sup a {
	text-decoration: none;
	font-weight: 700;
	padding-inline: 0.15em;
}

/* Embeds keep their aspect ratio and never overflow. */
.beh-prose :is(iframe, video, embed, object) {
	max-inline-size: 100%;
}

.beh-prose .wp-block-embed__wrapper iframe {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	block-size: auto;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 860px) {
	.beh-prose {
		font-size: 1.0625rem;
	}

	.beh-prose > p:first-of-type {
		font-size: 1.1875rem;
	}

	.beh-prose h2 {
		margin-block: var(--beh-s-10) var(--beh-s-3);
	}

	.beh-prose blockquote {
		margin-block: var(--beh-s-8);
		font-size: 1.1875rem;
	}
}

@media (max-width: 520px) {
	/*
	 * A minimum width applies only to the wide grids, which scroll inside
	 * their own container. It must NOT apply to a stacked table: those are
	 * display:block by then, so a min-width would push the card past the
	 * screen edge and clip every cell — which is exactly what it did.
	 */
	.beh-prose .beh-table--wide {
		min-inline-size: 30rem;
	}

	.beh-prose :is(th, td) {
		padding: 0.625rem 0.75rem;
	}

	.beh-prose .beh-table--stack :is(th, td) {
		padding: var(--beh-s-3) 0 0;
	}
}