/**
 * Contact page: full-width brand hero, three contact cards, then the WPForms
 * form beside the map. Loaded only on the Contact page (see inc/enqueue.php).
 */
/* The hero replaces the theme's default page title and runs edge to edge. */
article:has(.contact-page) .page-header { display: none; }
body:has(.contact-page) { overflow-x: clip; }
.contact-page { padding-block-end: var(--space-8, 64px); }

/* Hero */
.contact-hero {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block-start: calc(-1 * var(--space-6));
	padding: var(--space-8, 64px) var(--container-padding-inline) calc(var(--space-8, 64px) + 48px);
	text-align: center;
	color: #fff;
	overflow: hidden;
	background:
		radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--color-accent) 38%, transparent), transparent 45%),
		radial-gradient(circle at 8% 110%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 40%),
		linear-gradient(125deg, var(--color-primary), var(--color-primary-strong));
}
.contact-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 2l26 15v30L28 62 2 47V17zM28 62v34M2 47L0 48m56-1l2 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
.contact-hero > * { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.contact-hero__eyebrow {
	display: inline-block;
	color: #fff;
	margin-block-end: var(--space-4);
	padding: 6px 16px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.14);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
}
.contact-hero__title { color: #fff; font-size: var(--text-2xl); margin-block-end: var(--space-3); }
.contact-hero__text { color: rgba(255, 255, 255, 0.82); font-size: var(--text-md); margin: 0 auto; }

/* Contact cards overlap the hero */
/* WordPress wraps group content in .wp-block-group__inner-container: the grids live there. */
.contact-cards { position: relative; z-index: 2; margin-block-start: -56px; }
.contact-cards > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}
.contact-card > .wp-block-group__inner-container { min-width: 0; }
.contact-card {
	display: flex;
	column-gap: var(--space-4);
	align-items: center;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-md);
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.contact-card::before {
	content: '';
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: var(--color-accent-tint);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
}
.contact-card--address::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385601F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.contact-card--phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385601F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.contact-card--mail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385601F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.contact-card h3 { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.contact-card p { margin: 2px 0 0; font-weight: var(--font-weight-bold); color: var(--color-primary); overflow-wrap: anywhere; }
.contact-card a { color: inherit; text-decoration: none; }
.contact-card a:hover { color: var(--color-accent-strong); }

/* Form + map */
.contact-main { margin-block-start: var(--space-7); }
.contact-main > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--space-6);
	align-items: stretch;
}
.contact-map-card > .wp-block-group__inner-container { height: 100%; }
.contact-form-card {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-sm);
}
.contact-form-card h2 { font-size: var(--text-xl); margin-block-end: var(--space-5); }
.contact-map-card { min-height: 420px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.contact-map-card iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }

/* WPForms look */
.contact-page .wpforms-container { margin: 0; }
.contact-page .wpforms-container .wpforms-field { padding: 0 0 var(--space-4); }
.contact-page .wpforms-container .wpforms-field-label { font-weight: var(--font-weight-medium); color: var(--color-primary); font-size: var(--text-sm); margin-block-end: 6px; }
.contact-page .wpforms-container input[type="text"],
.contact-page .wpforms-container input[type="email"],
.contact-page .wpforms-container textarea {
	width: 100%;
	max-width: none;
	padding: 12px 14px;
	font: inherit;
	font-size: 16px;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: none;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.contact-page .wpforms-container textarea { min-height: 150px; }
.contact-page .wpforms-container input:focus,
.contact-page .wpforms-container textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.contact-page .wpforms-container .wpforms-submit-container { padding: 0; }
/* WPForms colours its button from these variables with high specificity. */
.contact-page div.wpforms-container-full {
	--wpforms-button-background-color: var(--color-accent-action);
	--wpforms-button-background-color-alt: var(--color-accent-strong);
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: var(--radius-md);
	--wpforms-button-border-color: transparent;
	--wpforms-button-size-height: 48px;
}
.contact-page div.wpforms-container-full .wpforms-form button[type="submit"].wpforms-submit,
.contact-page .wpforms-container .wpforms-submit {
	width: 100%;
	padding: 14px 32px;
	font: inherit;
	font-weight: var(--font-weight-bold);
	color: #fff;
	background: var(--color-accent-action);
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.contact-page div.wpforms-container-full .wpforms-form button[type="submit"].wpforms-submit:hover,
.contact-page .wpforms-container .wpforms-submit:hover { background: var(--color-accent-strong); transform: translateY(-1px); }
.contact-page .wpforms-confirmation-container-full {
	padding: var(--space-4);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-md);
	background: var(--color-accent-tint);
	color: var(--color-primary);
}
.contact-page .wpforms-error { font-size: var(--text-sm); }

@media (max-width: 991px) {
	.contact-cards { margin-block-start: -40px; }
	.contact-cards > .wp-block-group__inner-container { grid-template-columns: 1fr; }
	.contact-main { margin-block-start: var(--space-5); }
	.contact-main > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: var(--space-5); }
	.contact-hero { padding-block: var(--space-7) calc(var(--space-7) + 40px); }
	.contact-form-card { padding: var(--space-5); }
	.contact-map-card, .contact-map-card iframe { min-height: 300px; }
}