/**
 * CONTACT — Phase 7B
 *
 * The approved `design-reference/Contact.dc.html` layout. Loaded only on the
 * Contact page template, replacing article.css — see bsn_contact_stylesheet().
 *
 * -----------------------------------------------------------------------------
 * EVERY VALUE BELOW WAS EXTRACTED FROM THE REFERENCE, NOT APPROXIMATED
 *
 * Phase 7A's lesson: reaching for the nearest token in the shared scale
 * (24/36/48/64) lost 2-8px in twenty places and produced a visibly compressed
 * page. The reference's own numbers are used here, and the ones the global scale
 * does not contain live in scoped custom properties on `.contact`.
 *
 *   Hero          840px · 60/32/52 · eyebrow 11px +18 · h1 54px/1.05 +18
 *                 · standfirst 18px/1.55 on 600px
 *   Route grid    1280px · 48/32 · 4 columns · gap 28 · card padding 28
 *   Card label    10.5px/800/.2em · 12 below · body 15px/1.55 · 20 below
 *   Form band     #F4F0E6 · 1080px · 52/32 · 300px + 1fr · gap 56
 *   Form label    14px/800/.24em under a 3px rule · 12 below · note 15px/1.6
 *   Form rows     gap 16 · name/email 1fr 1fr gap 16
 *   Field label   10.5px/700/.12em · 6 above the control
 *   Field control 12/14 padding · 13.5px · 1px #C9BFA9
 *   Submit        14/32 · 11px/800/.16em
 *   Tip section   1080px · 56/32/64 · panel 44 · 1fr 1fr · gap 48
 *   Tip heading   34px/700/1.1 · eyebrow 11px +14 · lead 15px/1.6 +10
 *                 · caution 13px/1.6
 *   Tip fields    gap 14 · button padding 13
 *   Strip         +32 above · 20 padding-top · 12.5px · link gap 18
 * -----------------------------------------------------------------------------
 *
 * NO @layer. WordPress prints theme.json's `global-styles` unlayered and it would
 * win. This sheet is enqueued at priority 20, after it.
 *
 * SCOPED: every selector begins with a `contact-` class.
 */

.contact {
	--contact-space-section: 3.5rem;  /* 56px — tip section top             */
	--contact-space-band: 3.25rem;    /* 52px — hero bottom, form band      */
	--contact-space-grid: 1.75rem;    /* 28px — card gap and card padding   */
	--contact-space-panel: 2.75rem;   /* 44px — tip panel padding           */
	--contact-space-split: 3.5rem;    /* 56px — form band column gap        */
	--contact-space-cols: 3rem;       /* 48px — tip panel column gap        */
	--contact-field-gap: 1rem;        /* 16px — between form rows           */
}

/* =========================================================================
   HERO
   ====================================================================== */

.contact-hero {
	border-block-end: var(--bsn-hairline);
	text-align: center;
}

.contact-hero__inner {
	max-inline-size: 840px;
	padding-block: 3.75rem var(--contact-space-band); /* 60 / 52 */
	min-inline-size: 0;
}

.contact-hero__eyebrow {
	margin: 0 0 1.125rem; /* 18px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bsn-brass-text);
}

.contact-hero__title {
	margin: 0 0 1.125rem; /* 18px */
	/* 54px at desktop, fluid down. */
	font-size: clamp(1.9375rem, 4.2vw + 0.5rem, 3.375rem);
	font-weight: var(--bsn-weight-bold);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.contact-hero__standfirst {
	margin: 0 auto;
	max-inline-size: 600px;
	font-size: 1.125rem; /* 18px */
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

/* =========================================================================
   ROUTE CARDS
   ====================================================================== */

.contact-routes {
	padding-block: var(--bsn-space-xl); /* 48px */
}

.contact-routes__grid {
	display: grid;
	gap: var(--contact-space-grid);
	list-style: none;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

@media (min-width: 40rem) {
	.contact-routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.contact-routes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.contact-card {
	display: flex;
	flex-direction: column;
	padding: var(--contact-space-grid); /* 28px */
	margin: 0;
	min-inline-size: 0;
	border: var(--bsn-hairline);
	background: var(--bsn-surface);

	/* No radius, no shadow — the reference uses a 1px rule and a fill. */
}

.contact-card--dark {
	border-color: var(--bsn-dark);
	background: var(--bsn-dark);
	color: var(--bsn-on-dark);
}

.contact-card__label {
	margin: 0 0 var(--bsn-space-xs); /* 12px */
	font-family: var(--bsn-font-sans);
	font-size: 0.65625rem; /* 10.5px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: var(--bsn-section-label-tracking);
	text-transform: uppercase;
	color: var(--bsn-brass-text);
}

/* On the dark card the brass lightens to stay readable — 8.16:1. */
.contact-card--dark .contact-card__label { color: var(--bsn-brass-light); }

.contact-card__star { margin-inline-end: 0.35em; }

.contact-card__text {
	margin: 0 0 1.25rem; /* 20px */
	font-size: 0.9375rem; /* 15px */
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

.contact-card--dark .contact-card__text { color: var(--bsn-on-dark-muted); }

/*
 * The action sits at the bottom of the card, so four cards of different text
 * length still align their actions on one line — the reference's `margin-top:auto`.
 */
.contact-card__action { margin-block-start: auto; }

/* =========================================================================
   LINKS AND BUTTONS
   ====================================================================== */

.contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;

	/* 44px, WCAG 2.2 target size. The reference's 10.5px text is a small target. */
	min-block-size: 2.75rem;

	font-family: var(--bsn-font-sans);
	font-size: 0.65625rem;
	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bsn-brass-text);
}

.contact-link:hover,
.contact-link:focus-visible { color: var(--bsn-ink); }

.contact-link__arrow { transition: transform var(--bsn-duration) var(--bsn-ease); }

.contact-link:hover .contact-link__arrow,
.contact-button:hover .contact-link__arrow { transform: translateX(2px); }

.contact-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-block-size: 2.75rem;
	padding: 0.6875rem 1.125rem; /* 11 / 18 */
	border: 0;
	background: var(--bsn-brass);
	color: var(--bsn-ink);
	font-family: var(--bsn-font-sans);
	font-size: 0.65625rem;
	font-weight: var(--bsn-weight-black);
	letter-spacing: var(--bsn-tracking-label);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bsn-duration) var(--bsn-ease);
}

.contact-button:hover,
.contact-button:focus-visible {
	background: var(--bsn-brass-light);
	color: var(--bsn-ink);
}

.contact-button--block {
	inline-size: 100%;
	padding: 0.8125rem; /* 13px */
	font-size: var(--bsn-text-2xs);
	letter-spacing: 0.16em;
}

/* =========================================================================
   FORM BAND
   ====================================================================== */

.contact-form-band {
	background: var(--bsn-band);
	border-block: var(--bsn-hairline);
	padding-block: var(--contact-space-band); /* 52px */
}

.contact-form-band__inner {
	display: grid;
	gap: var(--bsn-space-md);
	min-inline-size: 0;
}

@media (min-width: 60rem) {
	.contact-form-band__inner {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: var(--contact-space-split); /* 56px */
	}
}

.contact-form-band__intro,
.contact-form-band > * { min-inline-size: 0; }

.contact-label {
	margin: 0 0 var(--bsn-space-xs); /* 12px */
	padding-block-start: 0.875rem;   /* 14px */
	border-block-start: 3px solid var(--bsn-ink);
	font-family: var(--bsn-font-sans);
	font-size: 0.875rem; /* 14px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.24em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--bsn-ink);
}

.contact-form-band__note {
	margin: 0;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.6;
	color: var(--bsn-ink-muted);
	max-inline-size: 40ch;
}

/* =========================================================================
   FORM CONTROLS
   ====================================================================== */

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--contact-field-gap);
	min-inline-size: 0;
}

/*
 * A fieldset is a replaced-ish element with its own default styling; this strips
 * it back so the rows lay out exactly as the reference's bare <form> does.
 */
.contact-form__fields,
.contact-tip__fields {
	display: flex;
	flex-direction: column;
	gap: var(--contact-field-gap);
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.contact-tip__fields { gap: 0.875rem; /* 14px */ }

/*
 * A disabled fieldset must LOOK unavailable as well as be unavailable. Without
 * this the controls render normally and only announce their state to assistive
 * technology — a sighted reader would start typing before discovering they
 * cannot submit.
 */
.contact-form__fields:disabled,
.contact-tip__fields:disabled { opacity: 0.55; }

.contact-form__fields:disabled .contact-field__control,
.contact-tip__fields:disabled .contact-field__control { cursor: not-allowed; }

.contact-form__row {
	display: grid;
	gap: var(--contact-field-gap);
	min-inline-size: 0;
}

@media (min-width: 30rem) {
	.contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem; /* 6px */
	margin: 0;
	min-inline-size: 0;
}

.contact-field__label {
	font-family: var(--bsn-font-sans);
	font-size: 0.65625rem; /* 10.5px */
	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bsn-ink-muted);
}

.contact-field__control {
	padding: 0.75rem 0.875rem; /* 12 / 14 */
	border: 1px solid var(--bsn-rule-strong);
	background: var(--bsn-surface);
	color: var(--bsn-ink);
	font-family: inherit;
	font-size: 0.84375rem; /* 13.5px */
	min-inline-size: 0;
	inline-size: 100%;

	/*
	 * 1.2, which lands the control box on the reference's height.
	 *
	 * 1.5 added 4px to every input and 26px to the textarea — most of why the form
	 * band first measured 162px taller. But `normal` then came out 2px SHORT per
	 * line, because the reference pulls Newsreader from Google Fonts while this
	 * theme self-hosts a subset, and the two report different default line boxes.
	 * An explicit ratio is the only value that renders the same in both.
	 */
	line-height: 1.2;
}

@media (max-width: 48rem) {
	/* 16px stops iOS Safari zooming when a field takes focus. */
	.contact-field__control { font-size: 1rem; }
}

.contact-field__control::placeholder {
	color: var(--bsn-ink-faint);
	opacity: 1;
}

.contact-field__control--textarea {
	resize: vertical;

	/*
	 * No min-height: the `rows` attribute governs, as it does in the reference —
	 * six rows on the contact form, five on the tip form. A CSS minimum would
	 * silently override whatever an editor sets there.
	 */
}

.contact-field__control--select {
	/* The UA arrow differs per platform; the reference shows the native control. */
	appearance: auto;
}

.contact-field__control--dark {
	border-color: var(--bsn-rule-dark);
	background: var(--bsn-dark-raised);
	color: var(--bsn-on-dark);
}

.contact-field__control--dark::placeholder { color: var(--bsn-on-dark-muted); }

.contact-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	padding: 0.875rem 2rem; /* 14 / 32 */
	border: 0;
	background: var(--bsn-ink);
	color: var(--bsn-on-dark);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--bsn-duration) var(--bsn-ease);
}

.contact-submit:hover,
.contact-submit:focus-visible {
	background: var(--bsn-brass);
	color: var(--bsn-ink);
}

.contact-form__actions { margin: 0; }

/*
 * The spam trap. Hidden from sight and from assistive technology, and removed
 * from the tab order in markup — never `display:none`, which some bots detect
 * and skip.
 */
.contact-form__trap {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: -1px;
	padding: 0;
	border: 0;
}

/* --- The not-connected notice ----------------------------------------- */

.contact-form__notice {
	margin: 0;
	padding: var(--bsn-space-sm);
	border-inline-start: 3px solid var(--bsn-brass-deep);
	background: var(--bsn-surface);
	font-size: var(--bsn-text-sm);
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

.contact-form__notice strong {
	display: block;
	color: var(--bsn-ink);
	font-weight: var(--bsn-weight-bold);
}

.contact-form__notice--dark {
	background: var(--bsn-dark-raised);
	border-inline-start-color: var(--bsn-brass);
	color: var(--bsn-on-dark-muted);
	margin-block-end: 0.875rem;
}

.contact-form__notice--dark strong { color: var(--bsn-on-dark); }

/* =========================================================================
   NEWS TIP
   ====================================================================== */

.contact-tip {
	padding-block: var(--contact-space-section) var(--bsn-space-2xl); /* 56 / 64 */
}

.contact-tip__panel {
	display: grid;
	gap: var(--bsn-space-md);
	padding: var(--contact-space-panel); /* 44px */
	background: var(--bsn-dark);
	color: var(--bsn-on-dark);
	min-inline-size: 0;
}

@media (min-width: 52rem) {
	.contact-tip__panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--contact-space-cols); /* 48px */
		align-items: center;
	}
}

.contact-tip__intro,
.contact-tip__form { min-inline-size: 0; }

.contact-tip__eyebrow {
	margin: 0 0 0.875rem; /* 14px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bsn-brass-light);
}

.contact-tip__heading {
	margin: 0 0 0.875rem; /* 14px */
	/* 34px at desktop, fluid down. */
	font-size: clamp(1.5rem, 1.8vw + 1rem, 2.125rem);
	font-weight: var(--bsn-weight-bold);
	line-height: 1.1;
	color: var(--bsn-on-dark);
	text-wrap: balance;
}

.contact-tip__lead {
	margin: 0 0 0.625rem; /* 10px */
	font-size: 0.9375rem; /* 15px */
	line-height: 1.6;
	color: var(--bsn-on-dark-muted);
}

/*
 * The caution line. Smaller than the lead, as the reference has it — but never
 * so faint that it reads as fine print: this is the sentence that stops somebody
 * treating an unprotected form as a protected channel.
 */
.contact-tip__caution {
	margin: 0;
	font-size: 0.8125rem; /* 13px */
	line-height: 1.6;
	color: var(--bsn-on-dark-muted);
}

/* =========================================================================
   CLOSING STRIP
   ====================================================================== */

.contact-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--bsn-space-xs); /* 12px */
	margin-block-start: var(--bsn-space-2xs);
	padding-block-start: 1.25rem; /* 20px */
	border-block-start: var(--bsn-hairline);
	font-family: var(--bsn-font-sans);
	font-size: 0.78125rem; /* 12.5px */
	color: var(--bsn-ink-muted);
}

/* The reference's 32px above the rule. */
.contact-strip { margin-block-start: 2rem; }

.contact-strip__place { margin: 0; min-inline-size: 0; }
.contact-strip__place strong { color: var(--bsn-ink); font-weight: var(--bsn-weight-bold); }
.contact-strip__sep { margin-inline: 0.35em; color: var(--bsn-rule-strong); }

.contact-strip__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.125rem; /* 18px */
	margin: 0;
	min-inline-size: 0;
}

.contact-strip__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	color: var(--bsn-ink-muted);
	font-weight: var(--bsn-weight-semibold);
	text-decoration: none;
	border-block-end: 1px solid var(--bsn-rule-strong);
}

.contact-strip__link:hover,
.contact-strip__link:focus-visible {
	color: var(--bsn-brass-text);
	border-block-end-color: var(--bsn-brass);
}

/* =========================================================================
   EDITOR PROSE — not in the reference
   ====================================================================== */

.contact-body { padding-block: 0 var(--bsn-space-xl); }

.contact-body__prose {
	max-inline-size: 66ch;
	font-size: 1.03125rem;
	line-height: 1.6;
	color: var(--bsn-ink-soft);
}

.contact-body__prose > :first-child { margin-block-start: 0; }
.contact-body__prose > :last-child { margin-block-end: 0; }
.contact-body__prose p { overflow-wrap: anywhere; }

/* =========================================================================
   MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.contact-link__arrow,
	.contact-button,
	.contact-submit { transition: none; }

	.contact-link:hover .contact-link__arrow,
	.contact-button:hover .contact-link__arrow { transform: none; }
}

/* =========================================================================
   CONTACT DETAILS — what stands in for the news-tip form

   The forms are not offered (owner decision, 26 September 2026), so the panel's
   right-hand column carries the verified email, telephone and postal address
   instead. Same dark treatment, same rhythm, no empty form area.
   ====================================================================== */

.contact-details {
	display: flex;
	flex-direction: column;
	gap: var(--bsn-space-sm);
	min-inline-size: 0;
}

.contact-details__row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem; /* 6px — matches the form's label-to-control gap */
	margin: 0;
	padding-block-end: var(--bsn-space-sm);
	border-block-end: 1px solid var(--bsn-rule-dark);
	min-inline-size: 0;
}

.contact-details__row:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

/* The same label treatment as the form's field labels, for continuity. */
.contact-details__label {
	font-family: var(--bsn-font-sans);
	font-size: 0.65625rem; /* 10.5px */
	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bsn-brass-light);
}

.contact-details__value {
	font-size: var(--bsn-text-base);
	line-height: 1.5;
	color: var(--bsn-on-dark);

	/* An email address is one long unbreakable token on a narrow screen. */
	overflow-wrap: anywhere;
}

.contact-details__link {
	display: inline-flex;
	align-items: center;

	/* 44px target, as everywhere else on this page. */
	min-block-size: 2.75rem;

	text-decoration: none;
	border-block-end: 1px solid var(--bsn-rule-dark);
}

.contact-details__link:hover,
.contact-details__link:focus-visible {
	color: var(--bsn-brass-light);
	border-block-end-color: var(--bsn-brass);
}

.contact-details__address {
	/* <address> is italic by default in every browser; the design is not. */
	font-style: normal;

	/* The setting is one line per line, as an envelope is written. */
	white-space: pre-line;
}