/*
 * People's Choice Awards — Fragrance Edition
 * Route stylesheet: Contact Us (spec §5.10).
 *
 * The filename is the underscored route key, which is how
 * Frontend\Assets::route_asset() finds it and enqueues it after public.css.
 *
 * Page-unique rules only. The maroon top banner, `.pcfa-panel`, `.pcfa-form`,
 * `.form-grid`, `.field` and its inputs, `.pcfa-form-message`, `.pcfa-hp-field`,
 * `.pcfa-captcha`, `.bi-row`, `.bi-columns` and the buttons all live in public.css
 * and are deliberately not repeated here.
 *
 * Metrics come from the approved prototype (`/home/claude/work/proto/contact.html`).
 * The one deliberate departure is the layout: the prototype put the publisher's
 * phone and address in a centred strip under the panel, and spec §5.10 asks for
 * them beside the form.
 */

/* ==========================================================================
   1. Layout
   ========================================================================== */

/*
 * Form and contact details side by side, with the details column sized to its
 * content: a half-and-half split left a 500px panel holding two short lines.
 */
.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 24px;
	align-items: start;
}

@media (max-width: 1023px) {
	/* The details drop under the form rather than beside it — at tablet width the
	   two-column form inside a narrowed panel is what suffers first. */
	.contact-layout {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   2. Contact details
   ========================================================================== */

.contact-aside {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.contact-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--magenta-deep);
}

.contact-item a:hover {
	color: var(--magenta);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Both languages of the label at one size and weight (spec §2.5); the shared
   `.bi-row` inside it handles the start/end placement. */
.contact-item-label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
}

/* An address is long and unbreakable, and in a 260px column it would otherwise
   push the panel wider than its grid track. */
.contact-item a[href^='mailto:'] {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   3. Arithmetic check (spec §5.10)
   ========================================================================== */

/*
 * The answer field is deliberately small and left at the start of its row: a
 * full-width input for a one-digit answer reads as a text field somebody is
 * expected to write in.
 */
.captcha-box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	background: var(--magenta-50);
}

.contact-form .captcha-box .captcha-answer {
	width: 90px;
	flex: none;
	text-align: center;
	/* Digits only, so they must not reorder inside an Arabic-direction form. */
	direction: ltr;
	unicode-bidi: isolate;
}

/* ==========================================================================
   4. Thank-you state
   ========================================================================== */

.contact-thanks {
	text-align: center;
	padding: 8px 0 4px;
}

.contact-thanks-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--magenta-50);
	color: var(--magenta-deep);
}

/*
 * The heading row is centred here rather than spread start-to-end: the whole panel
 * is centred copy, and a §2.5 justified row would push the two halves to opposite
 * edges of an otherwise symmetrical block. Both halves keep one size and weight,
 * which is the part of §2.5 that matters.
 */
.contact-thanks-heading {
	justify-content: center;
	margin-bottom: 14px;
	font-size: clamp(19px, 2.4vw, 22px);
	font-weight: 900;
}

.contact-thanks .bi-columns {
	text-align: start;
}