/*
 * Contact page (/contact/) — templates/page-contact.html +
 * patterns/contact-page.php.
 *
 * Unlayered on purpose (same approach as main.css). Tokens only.
 * NOTE: the space scale has no -7/-9 steps — an undefined var() inside
 * clamp() silently zeroes the whole declaration.
 */

.dr-contact-hero {
	background: var(--dr-color-ink-900);
	padding-block: clamp(var(--dr-space-6), 8vw, var(--dr-space-8)) clamp(var(--dr-space-5), 6vw, var(--dr-space-8));
}

/* Neutralize core blockGap; restate the intended rhythm. */
.wp-block-group.dr-contact-hero__content > * {
	margin-block: 0;
}

.dr-contact-hero .dr-contact-hero__eyebrow {
	color: var(--dr-color-premium);
}

.wp-block-group.dr-contact-hero__content > .dr-contact-hero__title {
	color: var(--dr-color-text-inverse);
	font-size: var(--dr-display-2);
	font-weight: var(--dr-font-weight-bold);
	letter-spacing: var(--dr-tracking-display-2);
	line-height: var(--dr-line-height-heading);
	margin-block-start: var(--dr-space-2);
}

.wp-block-group.dr-contact-hero__content > .dr-contact-hero__lead {
	color: color-mix(in srgb, var(--dr-color-text-inverse) 84%, transparent);
	font-size: clamp(var(--dr-font-size-300), 1.3vw, var(--dr-font-size-400));
	margin-block-start: var(--dr-space-2);
	max-width: 40rem;
}

/* ---------------------------------------------------------------------------
 * Layout: form + aside
 * ------------------------------------------------------------------------ */

.dr-contact-layout {
	display: grid;
	gap: var(--dr-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
	.dr-contact-layout {
		align-items: start;
		gap: var(--dr-space-5);
		grid-template-columns: minmax(0, 1fr) 20rem;
	}
}

.dr-contact-form-card {
	background: var(--dr-color-surface);
	border: var(--dr-border-width-1) solid var(--dr-color-border);
	border-radius: var(--dr-radius-5);
	box-shadow: var(--dr-shadow-1);
	padding: clamp(var(--dr-space-4), 4vw, var(--dr-space-6));
}

.dr-contact-form {
	display: grid;
	gap: var(--dr-space-3);
}

.dr-contact-form__row {
	display: grid;
	gap: var(--dr-space-3);
	grid-template-columns: 1fr;
}

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

.dr-contact-form .dr-field {
	display: grid;
	gap: var(--dr-space-1);
	margin: 0;
}

/* Honeypot: visually removed, still in the DOM for bots. */
.dr-contact-form__hp {
	height: 0;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.dr-contact-form__submit {
	margin: var(--dr-space-1) 0 0;
}

/* ---------------------------------------------------------------------------
 * Notices
 * ------------------------------------------------------------------------ */

.dr-contact-notice {
	border: var(--dr-border-width-1) solid transparent;
	border-radius: var(--dr-radius-3);
	margin-block-end: var(--dr-space-3);
	padding: var(--dr-space-2) var(--dr-space-3);
}

.dr-contact-notice p {
	margin: 0;
}

.dr-contact-notice--success {
	background: var(--dr-color-success-bg);
	border-color: color-mix(in srgb, var(--dr-color-success) 32%, transparent);
	color: var(--dr-color-success);
}

.dr-contact-notice--error {
	background: var(--dr-color-danger-bg);
	border-color: color-mix(in srgb, var(--dr-color-danger) 32%, transparent);
	color: var(--dr-color-danger);
}

/* ---------------------------------------------------------------------------
 * Aside
 * ------------------------------------------------------------------------ */

.dr-contact-aside {
	display: grid;
	gap: var(--dr-space-3);
}

/* Static cards — no action, no hover lift (design-system rule). */
.dr-contact-aside__card {
	background: var(--dr-color-surface);
	border: var(--dr-border-width-1) solid var(--dr-color-border);
	border-radius: var(--dr-radius-4);
	padding: var(--dr-space-4);
}

.dr-contact-aside__title {
	font-size: var(--dr-font-size-400);
	font-weight: var(--dr-font-weight-semibold);
	letter-spacing: -0.01em;
	margin: 0 0 var(--dr-space-1);
}

.dr-contact-aside__card p {
	color: var(--dr-color-text-muted);
	margin: 0;
}

.dr-contact-aside__card p + p {
	margin-block-start: var(--dr-space-2);
}

.dr-contact-aside__link {
	color: var(--dr-color-accent);
	font-weight: var(--dr-font-weight-semibold);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}