/**
 * Page Contact — templates/template-contact.php only.
 *
 * Reused as-is, nothing redefined: color/spacing/type/radius tokens,
 * .container, .section, .breadcrumb / .page-header* (main.css component
 * 12), .card, .form-label/.form-input/.form-error (main.css component
 * 14), .btn/.btn--primary/.btn--secondary, .link-arrow, .visually-hidden.
 * Only this page's own new pieces live here: the two-column layout, the
 * form status banner, the honeypot's off-screen hiding, and the
 * contact-method cards. No new tokens.
 */

/* =========================================================
   Two-column layout — form first in the DOM (see the template's
   docblock for why), contact methods visually promoted above it on
   mobile via `order`, the exact technique assets/css/pricing-cards.css
   already established for its "Populaire" card.
   ========================================================= */

.contact-layout__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}

.contact-methods {
	order: -1;
}

@media (min-width: 1024px) {
	.contact-layout__grid {
		grid-template-columns: 1.2fr 1fr;
		gap: var(--space-11);
		align-items: start;
	}

	.contact-methods {
		order: 0;
	}
}

.contact-form-section__title,
.contact-methods__title {
	margin-bottom: var(--space-6);
}

/* =========================================================
   Form status banner — server-rendered on the no-JS admin-post.php
   redirect (see the template's PHP), or populated + revealed by
   assets/js/contact-form.js on the AJAX path. Same container either
   way, so there's exactly one place this message can render, not two.
   ========================================================= */

.contact-form__status {
	display: none;
	margin-bottom: var(--space-5);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
	background: color-mix(in srgb, var(--color-success) 12%, transparent);
	color: var(--color-text);
	font-size: var(--fs-sm);
}

.contact-form__status.is-visible {
	display: block;
}

.contact-form__status--error {
	border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
	background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

.contact-form__required-note {
	margin-bottom: var(--space-5);
	color: var(--color-text-faint);
	font-size: var(--fs-xs);
}

/* =========================================================
   Form — same field-spacing recipe as .order-widget__form (gap-based
   flex column), slightly roomier gap since this is a full-page form,
   not a compact floating panel.
   ========================================================= */

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.contact-form__submit {
	width: 100%;
	margin-top: var(--space-2);
}

/* Honeypot — off-screen, not display:none (some bots skip invisible
   fields entirely; positioning it off-canvas still lets a naive
   form-filler script "see" and fill it via the DOM). aria-hidden +
   tabindex="-1" on the input itself (in the template) keep it fully out
   of reach for real keyboard/AT users. */
.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =========================================================
   Contact methods — WhatsApp/e-mail/hours cards + the FAQ cross-link.
   ========================================================= */

.contact-methods__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.contact-method-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-1);
}

.contact-method-card__icon {
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}

.contact-method-card__title {
	font-size: var(--fs-lg);
	line-height: var(--lh-lg);
}

.contact-method-card__text {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.contact-method-card__cta {
	width: 100%;
	margin-top: var(--space-4);
}

/* WhatsApp is the fastest path (per this page's own reassurance copy) —
   the one card that gets the same bold-border + HARD offset shadow
   emphasis .pricing-card--popular already established (NOT a soft glow —
   this brand explicitly rules that out), for the same reason: make the
   best/fastest option visually obvious at a glance. */
.contact-method-card--whatsapp {
	border: 2px solid var(--color-accent);
	box-shadow: var(--shadow-hard);
}

.contact-methods__faq-link {
	margin-top: var(--space-6);
}