/*
 * The Crypto Secret — the Contact page (Story 4.3).
 *
 * Source of truth: design/canvas/Contact.dc.html — a copy column (eyebrow,
 * h1, lede, three link rows, a black refund-reassurance card) beside a form
 * card rendering default / validation-error / sent.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * WHAT THIS FILE CONSUMES RATHER THAN RE-DECLARES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * sections.css owns .tcs-band / .tcs-band--cream / .tcs-band__inner(--narrow).
 * motion.css owns .tcs-btn / .tcs-btn--dark / .tcs-btn__shimmer / .tcs-row
 * (:hover). tokens.css owns every value that already has a name
 * (--tcs-error, --tcs-border-2, the focus ring at delivery.css:414-417 is
 * mirrored here since no generic focus token exists per the Code Map).
 *
 * THE FORM/ERROR STYLES ARE GREENFIELD — checkout.css:340-370 is the
 * label/input/focus model to mirror (no error styles exist there to reuse
 * verbatim), so this file introduces --tcs-error-bearing rules that do not
 * exist anywhere else in the codebase yet.
 *
 * Registered in tcs_child_stylesheets() AFTER tcs-faq (functions.php), per
 * the parallel contract's file-ownership rule for Story 4.3.
 */

/* ===========================================================================
 * 1. THE PAGE SHELL — copy column beside the form column.
 *
 * Contact.dc.html:102: a 1.05fr/.95fr grid, 70px apart — neither value is a
 * token anywhere in this codebase (the first page with this exact split),
 * so both are literals here.
 * ========================================================================= */

.tcs-contact-page__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 70px;
	align-items: start;
}

.tcs-contact-page__col {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.tcs-contact-page__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tcs-contact-page__eyebrow {
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: var(--tcs-ls-eyebrow);
	text-transform: var(--tcs-tt-eyebrow);
	color: var(--tcs-amber);
}

.tcs-contact-page__title {
	margin: 0;
	font-size: var(--tcs-fs-page-title);
	line-height: var(--tcs-lh-page-title);
	letter-spacing: var(--tcs-ls-page-title);
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-black);
}

.tcs-contact-page__lede {
	margin: 0;
	max-width: 460px;
	font-size: 17px;
	line-height: 1.66;
	color: var(--tcs-body);
}

/* ===========================================================================
 * 2. THE THREE LINK ROWS — Contact.dc.html:111-127.
 * ========================================================================= */

.tcs-contact-page__rows {
	display: flex;
	flex-direction: column;
}

.tcs-contact-page__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border-top: var(--tcs-border-width) solid var(--tcs-border);
	color: var(--tcs-black);
	text-decoration: none;
	min-height: var(--tcs-tap-min);
}

.tcs-contact-page__rows .tcs-contact-page__row:last-child {
	border-bottom: var(--tcs-border-width) solid var(--tcs-border);
}

.tcs-contact-page__row svg:first-child {
	flex-shrink: 0;
	color: var(--tcs-orange);
}

.tcs-contact-page__row-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex-grow: 1;
	min-width: 0;
}

.tcs-contact-page__row-title {
	font-size: 15.5px;
	font-weight: var(--tcs-fw-semibold);
}

.tcs-contact-page__row-meta {
	font-size: 13.5px;
	color: var(--tcs-muted);
}

.tcs-contact-page__row svg:last-child {
	flex-shrink: 0;
	color: var(--tcs-muted);
}

.tcs-contact-page__row:focus-visible {
	outline: 2px solid var(--tcs-orange);
	outline-offset: 3px;
}

/* ===========================================================================
 * 3. THE REFUND-REASSURANCE CARD — Contact.dc.html:129-137.
 * ========================================================================= */

.tcs-contact-page__refund-card {
	background: var(--tcs-black);
	border-radius: var(--tcs-radius-lg);
	padding: 26px 28px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.tcs-contact-page__refund-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--tcs-radius-full);
	background: var(--tcs-orange);
	color: var(--tcs-black);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tcs-contact-page__refund-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tcs-contact-page__refund-title {
	font-size: 15.5px;
	font-weight: var(--tcs-fw-semibold);
	color: var(--tcs-cream);
}

.tcs-contact-page__refund-text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--tcs-body-dark);
}

/* ===========================================================================
 * 4. THE FORM CARD — Contact.dc.html:140-154.
 * ========================================================================= */

.tcs-contact-page__form-col {
	position: sticky;
	top: 30px;
}

.tcs-contact-form,
.tcs-contact-form__panel {
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border);
	border-radius: var(--tcs-radius-lg);
	padding: 34px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tcs-contact-form__eyebrow {
	font-size: var(--tcs-fs-eyebrow);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--tcs-muted);
}

.tcs-contact-form__notice {
	margin: 0;
	padding: 12px 14px;
	background: var(--tcs-declined-banner-bg);
	border: var(--tcs-border-width) solid var(--tcs-declined-banner-border);
	border-radius: var(--tcs-radius-sm);
	color: var(--tcs-error);
	font-size: 14px;
}

.tcs-contact-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.tcs-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.tcs-contact-form__field label {
	font-size: 13px;
	font-weight: var(--tcs-fw-medium);
	color: var(--tcs-body);
}

.tcs-contact-form__optional {
	color: var(--tcs-muted);
	font-weight: var(--tcs-fw-regular);
}

.tcs-contact-form__field input,
.tcs-contact-form__field textarea {
	width: 100%;
	min-height: var(--tcs-tap-min);
	padding: 13px 14px;
	background: var(--tcs-white);
	border: var(--tcs-border-width) solid var(--tcs-border-2);
	border-radius: var(--tcs-radius-sm);
	font-family: var(--tcs-font);
	font-size: 14.5px;
	color: var(--tcs-black);
}

.tcs-contact-form__field textarea {
	min-height: 118px;
	resize: vertical;
}

/* Same focus treatment checkout.css establishes for its own inputs
 * (checkout.css:340-370's model) — no generic focus token exists per the
 * Code Map, so the ring is mirrored from delivery.css:414-417 here too. */
.tcs-contact-form__field input:focus-visible,
.tcs-contact-form__field textarea:focus-visible {
	outline: none;
	border-color: var(--tcs-orange);
	box-shadow: 0 0 0 1.5px var(--tcs-orange);
}

/*
 * INVALID FIELDS TAKE THE ERROR BORDER — associated by aria-invalid /
 * aria-describedby in markup, never colour alone (epic-4-context.md's own
 * accessibility floor: "errors associated and announced, not colour-only").
 */
.tcs-contact-form__field input[aria-invalid="true"],
.tcs-contact-form__field textarea[aria-invalid="true"] {
	border-color: var(--tcs-error);
}

.tcs-contact-form__error {
	font-size: 12.5px;
	color: var(--tcs-error);
}

.tcs-contact-form__submit {
	width: 100%;
	padding: 16px 0;
	font-size: 15px;
}

.tcs-contact-form__privacy {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--tcs-muted);
	text-align: center;
}

/*
 * THE HONEYPOT. Off-screen, never `display:none` — the spec's own Never
 * constraint. The markup's `aria-hidden="true"` wrapper (page-contact.php)
 * already removes the whole field — including its "leave this empty"
 * label — from the accessibility tree, so no screen reader ever reaches
 * it; `tabindex="-1"` (in markup) keeps it out of the tab order for every
 * visitor navigating normally, sighted or not.
 */
.tcs-contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ===========================================================================
 * 5. STATE PANELS — sent / store_failed.
 * ========================================================================= */

.tcs-contact-form__panel {
	align-items: center;
	text-align: center;
	gap: 14px;
}

.tcs-contact-form__panel-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--tcs-radius-full);
	background: var(--tcs-orange);
	color: var(--tcs-black);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tcs-contact-form__panel-icon--error {
	background: var(--tcs-declined-banner-bg);
	color: var(--tcs-error);
	border: var(--tcs-border-width) solid var(--tcs-declined-banner-border);
}

/*
 * --tcs-fs-h2-mobile (34px) IS THE INTENDED VALUE HERE, not a mobile-only
 * fallback misapplied as the base — no @media override exists because none
 * is wanted. The full desktop --tcs-fs-h2 (54px) is sized for a full-width
 * section headline; this title lives inside the ~500px-wide form card
 * (.tcs-contact-form, contact.css above), where 54px would overflow or
 * force an awkward wrap. No artboard draws this state (Contact.dc.html
 * only shows the default form), so 34px is a judgment call, documented
 * here rather than left to look like an unexplained naming mismatch.
 */
.tcs-contact-form__panel-title {
	margin: 0;
	font-size: var(--tcs-fs-h2-mobile);
	font-weight: var(--tcs-fw-semibold);
	letter-spacing: -0.03em;
	color: var(--tcs-black);
}

.tcs-contact-form__panel-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tcs-body);
}

.tcs-contact-form__panel-text a {
	color: var(--tcs-amber);
	font-weight: var(--tcs-fw-semibold);
}

/* ===========================================================================
 * 6. MOBILE — 768px and below. Form card follows the link rows.
 * ========================================================================= */

@media (max-width: 768px) {

	.tcs-contact-page__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tcs-contact-page__form-col {
		position: static;
		top: auto;
	}

	.tcs-contact-form,
	.tcs-contact-form__panel {
		padding: 24px;
	}

	.tcs-contact-form__row {
		grid-template-columns: 1fr;
	}
}