/* ─────────────────────────────────────────────────────────────
   contact.css — Contact page template only (enqueued conditionally)
   Ground truth: ui-blueprints/contact-2-26.txt / contact-3-32.txt /
   contact-14-32.txt / contact-19-32.txt (live computed-style dumps,
   makingyousmile.nyc/contact/). .odx-page-header rules live in
   components.css (shared across interior pages); the office / map /
   accordion / FluentForm / hours panel is shared with the
   neighborhood template and lives in office-panel.css (Ruling A) —
   only contact-specific rules remain here.

   Block name is `.odx-contact-page` (not `.odx-contact`) — the shorter
   name is already the footer's global "contact strip" BEM block
   (assets/css/navigation.css:336). Reusing it collided font-size /
   line-height rules onto this template's markup (e.g. `.odx-contact__address`
   already carries `font-size: var(--font-size-sm)` there).
   ─────────────────────────────────────────────────────────── */

/* live: #headline-8-32 color:#182f6c;font-size:27.2px(1.7em);font-weight:500;line-height:1.6 */
.odx-contact-page__heading {
	color: var(--color-navy);
	font-size: 1.7em;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 15px;
}

/* ── FLUENTFORMS — contact-only extras (the shared overrides are in
   office-panel.css) ─────────────────────────────────────────── */
.odx-contact-page textarea.ff-el-form-control {
	min-height: 90px;
	resize: vertical;
}

.odx-contact-page .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-charcoal);
	font-weight: 400;
	cursor: pointer;
}

.odx-contact-page .ff_tc_label p {
	margin: 0;
	color: var(--color-charcoal);
}

/* ── TRANSIT / DIRECTIONS — section-19-32 ───────────────────
   live: white section, narrow 1120px rail (margin:0 160px inside the
   1280px container == effectively ~1120px content width at 1440),
   padding:50px 20px 75px. Each block margin-top:25px (except first).
   ─────────────────────────────────────────────────────────── */
.odx-contact-page__directions {
	padding-top: 50px;
	padding-bottom: 75px;
}

/* live: inner rail 1120px wide with 20px gutters (content = 1080px) —
   page-scoped override of .odx-container's 1280px / 24px defaults so
   paragraph line-wrap points match live exactly. Global tokens untouched. */
.odx-contact-page__directions-inner {
	max-width: 1120px;
	padding-left: 20px;
	padding-right: 20px;
}

.odx-contact-page__directions-block {
	margin-top: 25px;
}

.odx-contact-page__directions-block:first-child {
	margin-top: 0;
}

/* live: #headline-22-32 color:#182f6c;font-size:24px(1.5em);font-weight:500;line-height:1.6 */
.odx-contact-page__directions-heading {
	color: var(--color-navy);
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1.6;
	margin-bottom: 0;
}

/* live: A "Murray Hill Dentist Location" color:#28b2f5 (blue), not the navy heading color */
.odx-contact-page__directions-heading a {
	color: var(--color-blue);
}

.odx-contact-page__directions-text {
	margin-top: 10px;
	margin-bottom: 0;
}

/* ── RESPONSIVE — 767px ─────────────────────────────────────── */
@media ( max-width: 767px ) {
	/* live @767 (computed): section-19-32 wrap pad 30px 20px 75px */
	.odx-contact-page__directions {
		padding-top: 30px;
		padding-bottom: 75px;
	}
}