/* =========================================================================
   BioEvidenceHub — homepage

   Reproduces the existing homepage design. The measurements, the split
   gradient behind the hero, the orbit ring, the tilted document stack and the
   threaded process line are all carried over deliberately — this page is the
   brand's established look and the brief was to stay close to it.

   Where the original used a Unicode glyph (⚕ ⌬ ∞ ◎ ◐ ✦) an inline SVG now
   stands in its place at the same optical size, so the layout is unchanged
   but the marks render identically on every platform.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Hero
   ---------------------------------------------------------------------- */

.beh-hero {
	/* The diagonal split at 52% is the signature of the current design: the
	   headline sits on white, the illustration on the faintest blue. */
	background: linear-gradient(115deg, #fff 52%, #f3f8ff 52%);
	padding-block: 4.75rem 4rem;
	overflow: hidden;
}

/* In RTL the gradient has to run the other way, or the tinted half lands
   behind the headline instead of behind the illustration. */
[dir='rtl'] .beh-hero {
	background: linear-gradient(245deg, #fff 52%, #f3f8ff 52%);
}

.beh-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 4.375rem;
}

.beh-hero__title {
	font-size: var(--beh-fs-h1);
	letter-spacing: var(--beh-tracking-tight);
	line-height: var(--beh-lh-tight);
}

.beh-hero__title span {
	color: var(--beh-primary);
}

.beh-lead {
	font-size: var(--beh-fs-lg);
	max-inline-size: 43rem;
	margin-block: var(--beh-s-6) var(--beh-s-8);
}

.beh-actions {
	display: flex;
	gap: var(--beh-s-3);
	flex-wrap: wrap;
}

/* ---- Hero illustration ---- */

.beh-hero__visual {
	position: relative;
	display: grid;
	place-items: center;
	min-block-size: 25.625rem;
}

/* The orbit ring with two nodes on it. Pure CSS: no image request, and it
   scales without ever going soft. */
.beh-hero__orbit {
	position: absolute;
	inline-size: 23.125rem;
	block-size: 23.125rem;
	border: 1px solid var(--beh-primary-200);
	border-radius: 50%;
}

.beh-hero__orbit::before,
.beh-hero__orbit::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background: var(--beh-primary);
	box-shadow: 0 0 0 10px rgb(36 83 230 / 10%);
}

.beh-hero__orbit::before {
	inline-size: 14px;
	block-size: 14px;
	inset-block-start: 2.625rem;
	inset-inline-end: 3.5rem;
}

.beh-hero__orbit::after {
	inline-size: 10px;
	block-size: 10px;
	inset-block-end: 3.4375rem;
	inset-inline-start: 2.8125rem;
}

.beh-hero__card {
	position: relative;
	inline-size: 20.625rem;
	max-inline-size: 100%;
	padding: 1.875rem;
	background: var(--beh-surface);
	border: 1px solid var(--beh-line);
	border-radius: var(--beh-r-xl);
	box-shadow: var(--beh-shadow-lg);
	rotate: -2deg;
}

[dir='rtl'] .beh-hero__card {
	rotate: 2deg;
}

.beh-hero__card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--beh-s-3);
	color: var(--beh-primary);
	font-size: var(--beh-fs-sm);
	font-weight: 800;
}

/* Three placeholder text lines of decreasing width. */
.beh-hero__lines {
	margin-block: 1.6875rem;
}

.beh-hero__lines i {
	display: block;
	block-size: 7px;
	margin-block: 0.625rem;
	border-radius: 4px;
	background: #e8edf5;
}

.beh-hero__lines i:nth-child(2) { inline-size: 82%; }
.beh-hero__lines i:nth-child(3) { inline-size: 91%; }

/* A rising trend line drawn with a hard-stop gradient. */
.beh-hero__chart {
	position: relative;
	block-size: 6.25rem;
	border-inline-start: 1px solid var(--beh-line-strong);
	border-block-end: 1px solid var(--beh-line-strong);
}

.beh-hero__chart::after {
	content: '';
	position: absolute;
	inset: 20px 10px 10px;
	background: linear-gradient(
		160deg,
		transparent 46%,
		var(--beh-primary) 47%,
		var(--beh-primary) 50%,
		transparent 51%
	);
}

.beh-hero__card-foot {
	margin-block-start: var(--beh-s-4);
	margin-block-end: 0;
	font-size: var(--beh-fs-base);
}

.beh-hero__card-foot b {
	color: var(--beh-navy);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   2. Principles strip
   ---------------------------------------------------------------------- */

.beh-principles__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.beh-principle {
	padding: 1.6875rem 1.375rem;
	border-inline-end: 1px solid var(--beh-line);
}

.beh-principle:last-child {
	border-inline-end: 0;
}

/* The gutter padding would otherwise double up against the shell's own. */
.beh-principle:first-child {
	padding-inline-start: 0;
}

.beh-principle:last-child {
	padding-inline-end: 0;
}

.beh-principle__title {
	display: block;
	color: var(--beh-navy);
	font-weight: 800;
	margin-block-end: 0.25rem;
}

.beh-principle__text {
	display: block;
	font-size: var(--beh-fs-sm);
	color: var(--beh-muted);
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
   3. Topic cards
   ---------------------------------------------------------------------- */

.beh-topic {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.beh-topic__title {
	margin-block: 0 var(--beh-s-3);
	font-size: var(--beh-fs-xl);
}

.beh-topic p {
	margin-block-end: var(--beh-s-5);
}

/* Pushes the link to the bottom so every card in a row ends on the same
   baseline no matter how long its description is. */
.beh-topic .beh-link {
	margin-block-start: auto;
}

/* -------------------------------------------------------------------------
   4. Compound cards
   ---------------------------------------------------------------------- */

.beh-compound {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Generated artwork instead of stock photography. Four variants so a row of
   cards does not read as the same image repeated. */
.beh-compound__art {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 8.4375rem;
	margin-block-end: var(--beh-s-5);
	border-radius: var(--beh-r-md);
	color: var(--beh-primary);
	background:
		radial-gradient(circle at 20% 30%, var(--beh-primary) 0 6px, transparent 7px),
		radial-gradient(circle at 70% 60%, #8fb6ff 0 9px, transparent 10px),
		linear-gradient(135deg, var(--beh-pale), #f8fbff);
}

.beh-compound__art--2 {
	background:
		radial-gradient(circle at 78% 26%, var(--beh-primary) 0 5px, transparent 6px),
		radial-gradient(circle at 26% 68%, #8fb6ff 0 10px, transparent 11px),
		linear-gradient(200deg, var(--beh-pale), #f8fbff);
}

.beh-compound__art--3 {
	background:
		radial-gradient(circle at 50% 22%, var(--beh-primary) 0 7px, transparent 8px),
		radial-gradient(circle at 18% 74%, #8fb6ff 0 8px, transparent 9px),
		radial-gradient(circle at 82% 70%, #b9d2ff 0 6px, transparent 7px),
		linear-gradient(150deg, #f2f8ff, var(--beh-pale));
}

.beh-compound__art--4 {
	background:
		radial-gradient(circle at 32% 32%, #8fb6ff 0 11px, transparent 12px),
		radial-gradient(circle at 72% 66%, var(--beh-primary) 0 5px, transparent 6px),
		linear-gradient(115deg, var(--beh-pale), #f6faff);
}

.beh-compound__art .beh-i {
	opacity: 0.9;
}

.beh-compound__title {
	margin-block-end: var(--beh-s-3);
	font-size: var(--beh-fs-xl);
}

.beh-compound p {
	margin-block-end: var(--beh-s-3);
}

.beh-compound__badge {
	margin-block-end: var(--beh-s-5);
}

.beh-compound .beh-link {
	margin-block-start: auto;
}

/* -------------------------------------------------------------------------
   5. Banner (research library + closing CTA)
   ---------------------------------------------------------------------- */

.beh-banner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 3.4375rem;
	padding: 3.25rem;
	background: var(--beh-pale);
	border: 1px solid #cfe0f1;
	border-radius: var(--beh-r-2xl);
}

.beh-banner--center {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

.beh-banner--center .beh-lead {
	margin-inline: auto;
}

.beh-banner--center .beh-actions {
	justify-content: center;
}

/* The tilted stack of evidence-type cards. */
.beh-library {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	rotate: 2deg;
}

[dir='rtl'] .beh-library {
	rotate: -2deg;
}

.beh-library__doc {
	display: block;
	padding: 1.25rem;
	background: var(--beh-surface);
	border: 1px solid var(--beh-line);
	border-radius: var(--beh-r-md);
	box-shadow: var(--beh-shadow-sm);
	color: var(--beh-body);
	transition: transform var(--beh-dur) var(--beh-ease),
		box-shadow var(--beh-dur) var(--beh-ease);
}

a.beh-library__doc:hover {
	transform: translateY(-2px);
	box-shadow: var(--beh-shadow-md);
	color: var(--beh-body);
}

.beh-library__icon {
	display: block;
	color: var(--beh-primary);
	margin-block-end: 0.5rem;
}

.beh-library__doc b {
	display: block;
	color: var(--beh-navy);
	font-size: var(--beh-fs-base);
}

.beh-library__doc small {
	font-size: var(--beh-fs-xs);
	color: var(--beh-muted);
}

/* -------------------------------------------------------------------------
   6. Process
   ---------------------------------------------------------------------- */

.beh-process {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--beh-steps, 4), minmax(0, 1fr));
	gap: var(--beh-s-6);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Drives the auto-numbering below. */
	counter-reset: beh-step;
}

/* The line threading the steps together. Inset by 5% at each end so it starts
   and stops inside the first and last markers rather than running off. */
.beh-process::before {
	content: '';
	position: absolute;
	inset-inline: 5%;
	inset-block-start: 1.375rem;
	block-size: 2px;
	background: #bfd0fa;
}

.beh-process__step {
	position: relative;
	counter-increment: beh-step;
}

/* Numbers come from a CSS counter, not from the content: reorder or delete a
   step in the Customizer and the rest renumber themselves. */
.beh-process__num {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 2.875rem;
	block-size: 2.875rem;
	margin-block-end: var(--beh-s-5);
	border-radius: 50%;
	background: var(--beh-primary);
	color: #fff;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
}

.beh-process__num::before {
	/* decimal-leading-zero renders 01, 02, 03 — matching the current site. */
	content: counter(beh-step, decimal-leading-zero);
}

.beh-process__title {
	margin-block-end: var(--beh-s-3);
	font-size: var(--beh-fs-xl);
}

/* -------------------------------------------------------------------------
   7. Editorial standards
   ---------------------------------------------------------------------- */

.beh-standard__title {
	margin-block-end: var(--beh-s-3);
	font-size: var(--beh-fs-xl);
}

/* -------------------------------------------------------------------------
   8. Authors and review
   ---------------------------------------------------------------------- */

.beh-authors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 4.375rem;
}

.beh-review-art {
	display: grid;
	place-items: center;
	min-block-size: 20.625rem;
	border: 1px solid var(--beh-line);
	border-radius: var(--beh-r-2xl);
	background: linear-gradient(145deg, var(--beh-pale), #f8fbff);
}

.beh-review-art__card {
	inline-size: 72%;
	padding: 1.875rem;
	background: var(--beh-surface);
	border-radius: 1.125rem;
	box-shadow: var(--beh-shadow-lg);
}

.beh-review-art__card h3 {
	margin-block-end: var(--beh-s-4);
	font-size: var(--beh-fs-xl);
}

.beh-review-art__line {
	display: block;
	block-size: 8px;
	margin-block: 0.75rem;
	border-radius: 5px;
	background: #e4eaf3;
}

.beh-review-art__line:nth-of-type(3) {
	inline-size: 75%;
}

.beh-review-art__card p {
	margin-block-start: var(--beh-s-4);
	margin-block-end: 0;
	font-size: var(--beh-fs-sm);
	color: var(--beh-muted);
}

/* -------------------------------------------------------------------------
   9. FAQ
   ---------------------------------------------------------------------- */

.beh-faq {
	max-inline-size: 56.25rem;
}

.beh-faq__title {
	margin-block-end: var(--beh-s-8);
}

.beh-faq__item {
	margin-block: 0.75rem;
	padding: 0;
	background: var(--beh-surface);
	border: 1px solid var(--beh-line);
	border-radius: var(--beh-r-md);
	transition: border-color var(--beh-dur) var(--beh-ease),
		box-shadow var(--beh-dur) var(--beh-ease);
}

.beh-faq__item[open] {
	border-color: var(--beh-primary-200);
	box-shadow: var(--beh-shadow-sm);
}

.beh-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--beh-s-4);
	padding: 1.1875rem 1.375rem;
	color: var(--beh-navy);
	font-weight: 750;
	cursor: pointer;
	/* Removes the native disclosure triangle in every engine — the chevron
	   below replaces it. */
	list-style: none;
}

.beh-faq__item summary::-webkit-details-marker {
	display: none;
}

/*
 * Neutralise any inherited ::before/::after on the summary.
 *
 * The site's previous hand-written homepage was pasted into the page editor
 * as a block of HTML with its own <style>, and it used the same `beh-` prefix
 * as this theme — including `.beh-faq summary:after { content: '+' }`. While
 * that block remains in the front page content its rule still matches this
 * FAQ, so every question showed a stray plus sign beside the theme's chevron.
 *
 * The real fix is to delete that leftover block from the page (the theme
 * renders the whole homepage itself now), but the component should not depend
 * on someone remembering to.
 */
.beh-faq__item summary::before,
.beh-faq__item summary::after {
	content: none !important;
	float: none !important;
}

.beh-faq__item summary .beh-i {
	flex: none;
	color: var(--beh-primary);
	transition: rotate var(--beh-dur) var(--beh-ease);
}

.beh-faq__item[open] summary .beh-i {
	rotate: 180deg;
}

.beh-faq__answer {
	padding: 0 1.375rem 1.375rem;
}

.beh-faq__answer p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   10. Editor content band
   ---------------------------------------------------------------------- */

.beh-home-editor .beh-prose {
	font-size: var(--beh-fs-lg);
}

/* -------------------------------------------------------------------------
   11. Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.beh-hero__grid {
		gap: var(--beh-s-10);
	}

	.beh-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--beh-s-10);
	}

	.beh-process::before {
		display: none;
	}
}

@media (max-width: 860px) {
	.beh-hero {
		padding-block: 3.25rem;
		/* The diagonal split does not survive a single column, so the two
		   tones become a straight vertical fade instead. */
		background: linear-gradient(#fff, #f5f9ff);
	}

	[dir='rtl'] .beh-hero {
		background: linear-gradient(#fff, #f5f9ff);
	}

	.beh-hero__grid,
	.beh-banner,
	.beh-authors {
		grid-template-columns: 1fr;
	}

	.beh-hero__visual {
		min-block-size: 20rem;
	}

	.beh-hero__orbit {
		inline-size: 18.125rem;
		block-size: 18.125rem;
	}

	.beh-hero__card {
		inline-size: 17.5rem;
	}

	.beh-principles__grid,
	.beh-process {
		grid-template-columns: 1fr;
	}

	.beh-principle {
		padding-inline: 0;
		border-inline-end: 0;
		border-block-end: 1px solid var(--beh-line);
	}

	.beh-principle:last-child {
		border-block-end: 0;
	}

	.beh-banner {
		padding: var(--beh-s-8);
	}

	.beh-review-art {
		min-block-size: 16rem;
	}

	.beh-review-art__card {
		inline-size: 84%;
	}
}

@media (max-width: 520px) {
	.beh-library {
		grid-template-columns: 1fr;
		rotate: none;
	}

	.beh-actions .beh-btn {
		flex: 1 1 100%;
	}
}