/*
 * Contact page styles.
 *
 * A one-to-one conversion of the Tailwind utilities in
 * frontend/src/app/contact/page.js (and the primitives used by
 * frontend/src/components/sections/ContactForm.js). Every value below came
 * from a utility on the original, so the result matches rather than
 * approximates it.
 *
 * Tokens: primary #0B1B3D  accent #2563EB  text #1A1A2E
 *         muted   #6B7280  light  #F5F6F8  border rgba(229,231,235,.8)
 */

/*
 * The page template drops post content into a constrained layout capped at
 * theme.json's 820px contentSize. These sections are full-bleed bands, so they
 * opt out of that cap — the inner .gvd-container still holds the 80rem measure.
 */
.gvd-contact__hero,
.gvd-contact__band {
	max-width: none;
	width: 100%;
}

/* ================================================================== hero == */

/* relative bg-[#0B1B3D] overflow-hidden */
.gvd-contact__hero {
	position: relative;
	background: #0b1b3d;
	overflow: hidden;
}

/* radial-gradient(ellipse at top right, rgba(37,99,235,0.18) 0%, transparent 55%) */
.gvd-contact__heroglow {
	background: radial-gradient(ellipse at top right, rgba(37, 99, 235, 0.18) 0%, transparent 55%);
}

/* py-16 lg:py-20 */
.gvd-contact__heroinner {
	position: relative;
	z-index: 1;
	padding-block: 4rem;
}

@media (min-width: 1024px) {
	.gvd-contact__heroinner { padding-block: 5rem; }
}

.gvd-contact__herocopy { text-align: center; }

/* bg-accent/15 border-accent/20 mb-5 — the dark-surface chip. */
.gvd-contact__herocopy .gvd-eyebrow {
	margin-bottom: 1.25rem;
	background: rgba(37, 99, 235, 0.15);
	border: 1px solid rgba(37, 99, 235, 0.2);
}

/* max-w-3xl mx-auto (sizing comes from .gvd-hero__title) */
.gvd-contact__herotitle {
	max-width: 48rem;
	margin-inline: auto;
}

/* mt-6 text-lg text-white/70 max-w-2xl mx-auto leading-relaxed */
.gvd-contact__herolede {
	max-width: 42rem;
	margin: 1.5rem auto 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.125rem;
	line-height: 1.625;
}

/* mt-3 text-white/45 text-sm italic */
.gvd-contact__heroquote {
	margin: 0.75rem 0 0;
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.875rem;
	font-style: italic;
}

/* mt-7 flex flex-wrap items-center justify-center gap-2.5 */
.gvd-contact__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	margin-top: 1.75rem;
}

/* px-3 py-1.5 rounded-full border-white/15 bg-white/5 text-white/75 text-sm font-medium */
.gvd-contact__chip {
	padding: 0.375rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
}

/* ================================================================= bands == */

/* py-14 lg:py-20 */
.gvd-contact__band { padding-block: 3.5rem; }

@media (min-width: 1024px) {
	.gvd-contact__band { padding-block: 5rem; }
}

.gvd-contact__band--white { background: #fff; }

/* bg-secondary border-t border-gray-100 */
.gvd-contact__band--light {
	background: #f5f6f8;
	border-top: 1px solid #f3f4f6;
}

/* ================================================ form + what happens next */

/* grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-12 */
.gvd-contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

@media (min-width: 1024px) {
	.gvd-contact__layout {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 3rem;
	}

	.gvd-contact__formcol { grid-column: span 3 / span 3; }
	.gvd-contact__nextcol { grid-column: span 2 / span 2; }
}

/* rounded-2xl border-gray-200/80 bg-white p-8 shadow-[0_1px_3px_rgba(15,23,42,0.04)] */
.gvd-contact__formcard {
	padding: 2rem;
	border: 1px solid rgba(229, 231, 235, 0.8);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* text-2xl font-heading font-bold tracking-tight mb-2 */
.gvd-contact__panetitle {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: -0.02em;
	color: #1a1a2e;
}

.gvd-contact__panetitle--rail { margin-bottom: 1.5rem; }

/* text-text-muted text-sm mb-6 */
.gvd-contact__panetext {
	margin: 0 0 1.5rem;
	color: #6b7280;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* space-y-5 */
.gvd-contact__steps {
	display: grid;
	gap: 1.25rem;
}

/* flex items-start gap-4 */
.gvd-contact__step {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.gvd-contact__stepbadge {
	position: relative;
	flex-shrink: 0;
}

/* w-11 h-11 rounded-xl bg-accent/10 */
.gvd-contact__stepicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
}

/* absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-accent text-[10px] font-bold */
.gvd-contact__stepnum {
	position: absolute;
	top: -0.375rem;
	right: -0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	background: #2563eb;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.gvd-contact__steptitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: #1a1a2e;
}

/* text-sm text-text-muted leading-relaxed mt-1 */
.gvd-contact__steptext {
	margin: 0.25rem 0 0;
	color: #6b7280;
	font-size: 0.875rem;
	line-height: 1.625;
}

/* mt-6 rounded-2xl border-gray-200/80 bg-secondary/60 p-6 */
.gvd-contact__direct {
	margin-top: 1.5rem;
	padding: 1.5rem;
	border: 1px solid rgba(229, 231, 235, 0.8);
	border-radius: 1rem;
	background: rgba(245, 246, 248, 0.6);
}

.gvd-contact__directlabel {
	margin: 0 0 0.75rem;
	color: #1a1a2e;
	font-size: 0.875rem;
	font-weight: 500;
}

/* flex items-center gap-2.5 text-sm text-text-muted hover:text-accent */
.gvd-contact__directlink {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: #6b7280;
	font-size: 0.875rem;
	text-decoration: none;
	transition: color 0.2s ease;
	overflow-wrap: anywhere;
}

.gvd-contact__directlink + .gvd-contact__directlink { margin-top: 0.5rem; }
.gvd-contact__directlink .gvd-svg { color: #2563eb; }
.gvd-contact__directlink:hover { color: #2563eb; }

/* ============================================================== the form == */
/*
 * The form markup belongs to the mu-plugin. These scoped rules only pull its
 * controls back to the proportions of the base-ui primitives the React
 * ContactForm used (h-8, rounded-lg, px-2.5, text-sm).
 */

/* space-y-5 between fields — but a two-up row spaces its pair with the grid
   gap alone, so the fields inside one must not add their own margin. */
.gvd-contact__formcard .gvd-form__field { margin-bottom: 1.25rem; }
.gvd-contact__formcard .gvd-form__row { margin-bottom: 1.25rem; }
.gvd-contact__formcard .gvd-form__row .gvd-form__field { margin-bottom: 0; }

.gvd-contact__formcard .gvd-form__field label { line-height: 1.2; }

.gvd-contact__formcard .gvd-form__field input,
.gvd-contact__formcard .gvd-form__field textarea {
	padding: 0.25rem 0.625rem;
	border-color: #e5e7eb;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gvd-contact__formcard .gvd-form__field input { height: 2rem; }

.gvd-contact__formcard .gvd-form__field textarea {
	min-height: 7.5rem;
	padding-block: 0.5rem;
	resize: vertical;
}

.gvd-contact__formcard .gvd-form__field input::placeholder,
.gvd-contact__formcard .gvd-form__field textarea::placeholder {
	color: #9ca3af;
}

/* variant="accent" size="default" className="w-full" */
.gvd-contact__formcard .gvd-form__actions { margin: 0; }

.gvd-contact__formcard .gvd-form__actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	width: 100%;
	min-height: 2rem;
	padding: 0.25rem 0.625rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	background: #2563eb;
	color: #fff;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gvd-contact__formcard .gvd-form__actions button:hover { background: #1d4ed8; }

/* The Send glyph that sat inside the original button, as a mask so it
   inherits the button's text colour. */
.gvd-contact__formcard .gvd-form__actions button::before {
	content: "";
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--gvd-send) center / contain no-repeat;
	mask: var(--gvd-send) center / contain no-repeat;
	--gvd-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");
}

.gvd-contact__formcard .gvd-form__notice { font-size: 0.875rem; }

/* ============================================================== offices === */

/* text-center max-w-3xl mx-auto mb-10 */
/*
 * Left-aligned so this band does not repeat the centred-head rhythm the hero
 * and the map below it already use. Widened to the office grid so the heading
 * starts on the same edge as the first card.
 */
.gvd-contact__officeshead {
	max-width: 72rem;
	margin: 0 auto 2.5rem;
	text-align: left;
}

/*
 * The shared map section takes its eyebrow as an argument; this page passes an
 * empty one because the heading beneath already says it is about locations.
 */

/* grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto */
.gvd-contact__offices {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	max-width: 72rem;
	margin-inline: auto;
}

@media (min-width: 640px) {
	.gvd-contact__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.gvd-contact__offices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The reveal wrapper must not break the h-full card. */
.gvd-contact__offices > * { height: 100%; }

/* h-full rounded-2xl border-gray-200/80 bg-white p-8 shadow + hover lift */
.gvd-contact__office {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2rem;
	border: 1px solid rgba(229, 231, 235, 0.8);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gvd-contact__office:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.4);
	box-shadow: 0 20px 48px -20px rgba(37, 99, 235, 0.22);
}

/* flex items-center justify-between mb-5 */
.gvd-contact__officehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.gvd-contact__officeid {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

/* w-11 h-11 rounded-xl bg-accent/10 */
.gvd-contact__officeicon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
}

/* text-xl font-heading font-bold leading-tight */
.gvd-contact__officename {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: #1a1a2e;
}

.gvd-contact__officelocal {
	color: #6b7280;
	font-size: 0.75rem;
}

/* text-xs font-medium uppercase tracking-wider accent chip */
.gvd-contact__officetype {
	flex-shrink: 0;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
}

/* space-y-3 text-sm */
.gvd-contact__officebody {
	display: grid;
	gap: 0.75rem;
	font-size: 0.875rem;
}

/* flex items-start gap-3 text-text-muted leading-relaxed */
.gvd-contact__officeline {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	color: #6b7280;
	font-size: 0.875rem;
	line-height: 1.625;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

/* mt-0.5 flex-shrink-0 text-accent */
.gvd-contact__officeline .gvd-svg {
	margin-top: 0.125rem;
	flex-shrink: 0;
	color: #2563eb;
}

.gvd-contact__officelink:hover { color: #2563eb; }

/* text-center text-sm text-text-muted mt-8 */
.gvd-contact__soon {
	margin: 2rem 0 0;
	text-align: center;
	color: #6b7280;
	font-size: 0.875rem;
}

.gvd-contact__soon strong {
	color: #1a1a2e;
	font-weight: 500;
}