/* ════════════════════════════════════════════════
   dbi services · Contact page layer
   Loaded on pages embedding a Gravity Forms form
   (inc/enqueue.php, content-detected — no slugs).
   Consumes .dbi-scope tokens from dbi-blog.css;
   content classes are seeded (patterns/contact.php).
   ════════════════════════════════════════════════ */

/* ── Intro ──────────────────────────────────────── */
.dbi-contact-intro {
	font-size: 19px;
	line-height: 1.6;
	max-width: 760px;
	color: var( --muted );
}

/* ── Path cards (3-column) ──────────────────────── */
.dbi-contact-paths {
	gap: 24px;
}

.dbi-contact-paths .dbi-path-card {
	background: var( --bg-pure );
	border: 1px solid var( --border );
	border-radius: 16px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	transition: border-color var( --t, 240ms ) var( --ease, ease );
}

.dbi-contact-paths .dbi-path-card:hover {
	border-color: var( --teal );
}

.dbi-path-card h3 {
	margin: 0 0 10px;
	font-size: 26px;
}

.dbi-path-card p {
	flex: 1;
	color: var( --muted );
	margin: 0 0 20px;
}

.dbi-path-card .wp-block-buttons {
	margin: 0;
}

/* ── "What happens next" steps ──────────────────── */
.dbi-contact-steps {
	list-style: none;
	padding-left: 0;
	max-width: 760px;
	counter-reset: dbi-step;
}

.dbi-contact-steps > li {
	counter-increment: dbi-step;
	position: relative;
	padding: 2px 0 2px 56px;
	margin: 0 0 18px;
}

.dbi-contact-steps > li::before {
	content: counter( dbi-step );
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --border );
	border-radius: 999px;
	font-family: var( --f-display );
	font-size: 20px;
	color: var( --teal-dark );
	background: var( --bg-pure );
}

/* ── Form + rail band ───────────────────────────── */
.dbi-contact-band {
	gap: 40px;
	align-items: flex-start;
}

@media ( min-width: 782px ) {
	/* Reassurance rides along while the reader writes. */
	.dbi-contact-band .dbi-contact-aside {
		position: sticky;
		top: 24px;
	}
}

.dbi-contact-aside h2 {
	font-size: 28px;
	margin-top: 0;
}

.dbi-contact-aside h2 + .dbi-contact-steps {
	margin-top: 18px;
}

/* ── Form panel ─────────────────────────────────── */
.dbi-contact-form {
	background: var( --bg-pure );
	border: 1px solid var( --border );
	border-radius: 16px;
	padding: 36px 40px;
	max-width: 760px;
}

.dbi-contact-form h2 {
	margin-top: 0;
}

/* ── FAQ ────────────────────────────────────────── */
.dbi-contact-faq {
	max-width: 760px;
}

.dbi-contact-faq details {
	border-top: 1px solid var( --border );
	padding: 14px 0;
	margin: 0;
}

.dbi-contact-faq details:last-of-type {
	border-bottom: 1px solid var( --border );
}

.dbi-contact-faq summary {
	cursor: pointer;
	font-weight: 600;
}

.dbi-contact-faq summary::marker {
	color: var( --teal-dark );
}

.dbi-contact-faq details p {
	margin: 10px 0 0;
	color: var( --muted );
}

/* ── Small screens ──────────────────────────────── */
@media ( max-width: 781px ) {
	.dbi-contact-form {
		padding: 24px 20px;
	}
}

/* ── WCAG AA: path-card buttons ──
   The block buttons carry Neve's link-color preset (primary accent) with
   light text: 2.5:1. Same surface as every other text-carrying teal
   (enhancements #26). */
.dbi-scope .dbi-path-card .wp-block-button__link {
	background-color: var( --teal-dark ) !important; /* the block presets are !important */
	color: #fff !important;
}
.dbi-scope .dbi-path-card .wp-block-button__link:hover,
.dbi-scope .dbi-path-card .wp-block-button__link:focus-visible {
	background-color: var( --teal-deep ) !important;
}