/* =========================================================================
   BioEvidenceHub — pages, contact, 404, forms

   Static pages read like articles, so they inherit the same measure and the
   same reading typography from single.css's .beh-prose. The rules unique to
   them live here, along with the form system shared by the contact page,
   comments and search.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Page header and body
   ---------------------------------------------------------------------- */

.beh-page-head {
	padding-block: var(--beh-s-10) 0;
	background:
		radial-gradient(52rem 18rem at 20% -10%, var(--beh-pale), transparent 70%),
		var(--beh-surface);
}

.beh-page-head__inner {
	max-inline-size: 46rem;
}

.beh-page__title {
	font-family: var(--beh-font-editorial);
	font-weight: 600;
	font-size: clamp(2rem, 4.2vw, 3.125rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin-block-end: var(--beh-s-4);
}

.beh-font-sans .beh-page__title {
	font-family: var(--beh-font-ui);
	font-weight: 800;
	letter-spacing: var(--beh-tracking-snug);
}

.beh-page__standfirst {
	font-family: var(--beh-font-editorial);
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	line-height: 1.55;
	color: var(--beh-muted);
	max-inline-size: 40rem;
}

.beh-page__updated {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-block-start: var(--beh-s-4);
	font-size: var(--beh-fs-sm);
	font-weight: 700;
	color: var(--beh-accent);
}

.beh-page__hero {
	margin-block-start: var(--beh-s-8);
}

.beh-page__hero .beh-media {
	aspect-ratio: 16 / 9;
	border-radius: var(--beh-r-lg);
}

.beh-page__body {
	padding-block: var(--beh-s-12) var(--beh-s-20);
}

/* -------------------------------------------------------------------------
   2. Contact
   ---------------------------------------------------------------------- */

.beh-contact__body {
	padding-block: var(--beh-s-12) var(--beh-s-20);
}

.beh-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: var(--beh-s-16);
	align-items: start;
}

.beh-contact__intro {
	margin-block-end: var(--beh-s-10);
}

.beh-contact__card {
	padding: var(--beh-s-7);
	background: var(--beh-surface-soft);
	border: 1px solid var(--beh-line);
	border-radius: var(--beh-r-lg);
}

.beh-contact__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.beh-contact__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--beh-s-3);
	padding-block: var(--beh-s-4);
	border-block-end: 1px solid var(--beh-line);
}

.beh-contact__list li:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.beh-contact__list .beh-icon-tile {
	margin-block-end: 0;
}

.beh-contact__list strong {
	display: block;
	color: var(--beh-navy);
	font-size: var(--beh-fs-sm);
	margin-block-end: 0.125rem;
}

.beh-contact__list a,
.beh-contact__list span {
	font-size: var(--beh-fs-base);
	color: var(--beh-body);
}

.beh-contact__list a:hover {
	color: var(--beh-primary);
}

/* The "we do not give medical advice" panel. Warm-toned rather than blue so
   it reads as a caution and not as another content card. */
.beh-contact__notice {
	display: flex;
	gap: var(--beh-s-3);
	padding: var(--beh-s-5);
	margin-block-start: var(--beh-s-5);
	background: var(--beh-warn-050);
	border: 1px solid #f5dcb4;
	border-radius: var(--beh-r-md);
}

.beh-contact__notice .beh-icon-tile {
	background: #fbe6c4;
	color: var(--beh-warn);
	margin-block-end: 0;
	flex: none;
}

.beh-contact__notice p {
	margin: 0;
	font-size: var(--beh-fs-base);
	color: #7c4a10;
}

/* -------------------------------------------------------------------------
   3. Forms
   ---------------------------------------------------------------------- */

.beh-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--beh-s-4);
}

.beh-form__field,
.beh-form__consent,
.beh-form__actions {
	margin-block: 0 var(--beh-s-5);
}

.beh-form label,
.beh-commentform label {
	display: block;
	margin-block-end: 0.4375rem;
	font-size: var(--beh-fs-base);
	font-weight: 700;
	color: var(--beh-navy);
}

.beh-form :is(input[type='text'], input[type='email'], input[type='url'], textarea),
.beh-commentform :is(input[type='text'], input[type='email'], input[type='url'], textarea) {
	inline-size: 100%;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--beh-line);
	border-radius: var(--beh-r-sm);
	background: var(--beh-surface);
	font-size: var(--beh-fs-md);
	color: var(--beh-navy);
	transition: border-color var(--beh-dur-fast) var(--beh-ease),
		box-shadow var(--beh-dur-fast) var(--beh-ease);
}

.beh-form :is(input, textarea):focus,
.beh-commentform :is(input, textarea):focus {
	outline: none;
	border-color: var(--beh-primary);
	box-shadow: 0 0 0 3px var(--beh-primary-050);
}

.beh-form textarea,
.beh-commentform textarea {
	resize: vertical;
	min-block-size: 9rem;
}

.required {
	color: #c2410c;
}

/* Consent checkbox: the label wraps the control so the whole line is a hit
   target, and the text is full size — shrinking consent copy is a dark
   pattern regulators specifically look for. */
.beh-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-weight: 500;
	font-size: var(--beh-fs-base);
	color: var(--beh-body);
	cursor: pointer;
	line-height: 1.55;
}

.beh-form__consent input[type='checkbox'] {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-block-start: 0.125rem;
	accent-color: var(--beh-primary);
	flex: none;
}

.beh-form__actions {
	margin-block-end: 0;
}

/* ---- Alerts ---- */

.beh-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--beh-s-3);
	padding: var(--beh-s-5);
	margin-block-end: var(--beh-s-6);
	border-radius: var(--beh-r-md);
	border: 1px solid;
}

.beh-alert p {
	margin: 0;
	font-size: var(--beh-fs-base);
}

.beh-alert .beh-i {
	flex: none;
	margin-block-start: 0.125rem;
}

.beh-alert--success {
	background: var(--beh-accent-050);
	border-color: #bfe6d3;
	color: #0f5c40;
}

.beh-alert--error {
	background: #fdeeee;
	border-color: #f6cccc;
	color: #9b1c1c;
}

/* -------------------------------------------------------------------------
   4. Search form
   ---------------------------------------------------------------------- */

.beh-searchform__submit {
	flex: none;
}

@media (max-width: 520px) {
	.beh-searchform__label {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   5. 404
   ---------------------------------------------------------------------- */

.beh-404 {
	padding-block: var(--beh-s-16) var(--beh-s-20);
}

.beh-404__head {
	max-inline-size: 40rem;
	margin-block-end: var(--beh-s-16);
}

.beh-404__code {
	display: block;
	font-size: clamp(4rem, 12vw, 7.5rem);
	font-weight: 850;
	line-height: 1;
	letter-spacing: -0.05em;
	/* The number is decoration, so it is tinted right back — it should not
	   compete with the sentence that actually explains what happened. */
	color: var(--beh-primary-100);
	font-variant-numeric: tabular-nums;
}

.beh-404__title {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	margin-block: var(--beh-s-3) var(--beh-s-4);
}

.beh-404__text {
	font-size: var(--beh-fs-lg);
	color: var(--beh-muted);
	margin-block-end: var(--beh-s-8);
}

.beh-404__block {
	margin-block-end: var(--beh-s-12);
}

.beh-404__block .beh-label {
	margin-block-end: var(--beh-s-4);
}

.beh-404__home {
	margin: 0;
}

/* -------------------------------------------------------------------------
   6. Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1000px) {
	.beh-contact__grid {
		grid-template-columns: 1fr;
		gap: var(--beh-s-10);
	}
}

@media (max-width: 640px) {
	.beh-form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.beh-page__body,
	.beh-contact__body {
		padding-block: var(--beh-s-8) var(--beh-s-14);
	}
}