/* ─────────────────────────────────────────────────────────────
   office-panel.css — shared office/hours panel (Ruling A, 2026-08-06)
   The contact page and the neighborhood pages paint the same live
   office block (section-3-32: map + details + accordion form) and
   hours block (section-14-32). These rules were byte-identical in
   contact.css / neighborhood.css and are hoisted here with both
   template blocks' selectors grouped — markup and computed styles
   unchanged. Page-specific rules stay in contact.css /
   neighborhood.css; both enqueue this file as a dependency.
   Ground truth: ui-blueprints/section-3-32 / section-14-32
   .styles.json (makingyousmile.nyc live computed-style dumps).
   ─────────────────────────────────────────────────────────── */

/* ── OFFICE / MAP — section-3-32 ────────────────────────────
   live: inner-wrap padding 75px 20px; 2-col grid, map 515px LEFT,
   details column 600px RIGHT.
   ─────────────────────────────────────────────────────────── */
.odx-contact-page__office,
.odx-neighborhood__office {
	padding-top: 75px;
	padding-bottom: 75px;
}

.odx-contact-page__office-grid,
.odx-neighborhood__office-grid {
	display: grid;
	grid-template-columns: minmax(0, 675px) minmax(0, 690px);
	column-gap: 50px;
	align-items: start;
	justify-content: center;
}

.odx-contact-page__map,
.odx-neighborhood__map {
	display: flex;
	justify-content: flex-end;
}

.odx-contact-page__map img,
.odx-neighborhood__map img {
	width: 100%;
	max-width: 515px;
	height: auto;
	object-fit: cover;
}

.odx-contact-page__details,
.odx-neighborhood__details {
	font-style: normal;
	max-width: 600px;
}

/* live: address link fixed 355px, #28b2f5, padding-bottom:15px */
.odx-contact-page__address,
.odx-neighborhood__address {
	display: block;
	width: 355px;
	max-width: 100%;
	color: var(--color-blue);
	padding-bottom: 15px;
	line-height: 1.6;
}

/* live: flex-row label + value, padding-bottom:15px on the phone row */
.odx-contact-page__row,
.odx-neighborhood__row {
	display: flex;
	align-items: center;
	gap: 5px;
	padding-bottom: 15px;
}

.odx-contact-page__row-label,
.odx-neighborhood__row-label {
	color: var(--color-navy);
}

.odx-contact-page__row-value,
.odx-neighborhood__row-value {
	color: var(--color-blue);
}

/* live: book button bg:#28b2f5;padding:10px 16px;radius:50px;margin:15px 0 */
.odx-contact-page__book,
.odx-neighborhood__book {
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 10px 16px;
}

.odx-contact-page__blurb,
.odx-neighborhood__blurb {
	margin-top: 10px;
	margin-bottom: 15px;
}

/* ── SEND-A-MESSAGE ACCORDION ───────────────────────────────
   live trigger: width 445px @1440 / 318px @≤767, 3px #84c3e3 border,
   #f9f9fa bg, 50px radius, pad 7px 20px, Merriweather 16px, label
   fw600 #404040. Panel is a plain disclosure, collapsed by default.
   ─────────────────────────────────────────────────────────── */
.odx-contact-page__accordion,
.odx-neighborhood__accordion {
	margin-top: 15px;
}

.odx-contact-page__accordion-heading,
.odx-neighborhood__accordion-heading {
	margin: 0;
	font-size: 1em;
	font-family: var(--font-serif);
	font-weight: 400;
}

.odx-contact-page__accordion-trigger,
.odx-neighborhood__accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 445px;
	max-width: 100%;
	background-color: var(--color-panel);
	border: 3px solid var(--color-blue-light);
	border-radius: var(--radius-pill);
	padding: 7px 20px;
	font-family: var(--font-serif);
	font-size: 1em;
	font-weight: 600;
	text-align: center;
	color: var(--color-charcoal);
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.odx-contact-page__accordion-trigger:hover,
.odx-contact-page__accordion-trigger[aria-expanded="true"],
.odx-neighborhood__accordion-trigger:hover,
.odx-neighborhood__accordion-trigger[aria-expanded="true"] {
	background-color: var(--color-eggshell);
}

.odx-contact-page__accordion-panel,
.odx-neighborhood__accordion-panel {
	margin-top: 20px;
}

/* ── FLUENTFORMS OVERRIDES — scoped to each template block
   live: input/textarea bg:#fff, radius:7px, padding:11px 15px,
   color:#606266; label #404040 fw500; submit bg:#409eff radius:7px.
   ─────────────────────────────────────────────────────────── */
.odx-contact-page .ff-el-input--label label,
.odx-neighborhood .ff-el-input--label label {
	color: var(--color-charcoal);
	font-size: 1em;
	font-weight: 500;
	margin-bottom: 4px;
}

.odx-contact-page .ff-el-form-control,
.odx-neighborhood .ff-el-form-control {
	width: 100%;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: 7px;
	padding: 11px 15px;
	color: rgb(96, 98, 102);
	font-family: var(--font-serif);
	font-size: 1em;
	line-height: 1;
}

.odx-contact-page .ff-el-form-control:focus,
.odx-neighborhood .ff-el-form-control:focus {
	outline: 2px solid var(--color-blue);
	outline-offset: 1px;
	border-color: var(--color-blue);
}

.odx-contact-page .ff-btn-submit,
.odx-neighborhood .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #409eff;
	border: none;
	border-radius: 7px;
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: 1em;
	font-weight: 500;
	padding: 8px 20px;
	cursor: pointer;
	transition: background-color var(--transition-base);
}

.odx-contact-page .ff-btn-submit:hover,
.odx-neighborhood .ff-btn-submit:hover {
	background-color: var(--color-blue);
}

/* ── OFFICE HOURS — section-14-32 ───────────────────────────
   live: bg #f7f7f7, inner-wrap padding 50px 20px, 2-col grid gap 20px.
   ─────────────────────────────────────────────────────────── */
.odx-contact-page__hours,
.odx-neighborhood__hours {
	background-color: var(--color-off-white);
	padding-top: 50px;
	padding-bottom: 50px;
}

.odx-contact-page__hours-grid,
.odx-neighborhood__hours-grid {
	display: grid;
	grid-template-columns: 515px 600px;
	column-gap: 20px;
	justify-content: center;
}

.odx-contact-page__hours-col:first-child,
.odx-neighborhood__hours-col:first-child {
	max-width: 515px;
}

.odx-contact-page__hours-col:last-child,
.odx-neighborhood__hours-col:last-child {
	max-width: 600px;
}

.odx-contact-page__hours-list,
.odx-neighborhood__hours-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* live: each row 50px tall (76px when the day label wraps),
   padding-bottom:15px, flex space-between */
.odx-contact-page__hours-row,
.odx-neighborhood__hours-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding-bottom: 15px;
}

.odx-contact-page__hours-day,
.odx-neighborhood__hours-day {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	gap: 15px;
	color: var(--color-blue);
	font-size: 1.2em;
	line-height: 1.6;
}

.odx-contact-page__hours-day span,
.odx-neighborhood__hours-day span {
	display: block;
	min-width: 0;
	overflow-wrap: break-word;
}

.odx-contact-page__hours-day img,
.odx-neighborhood__hours-day img {
	width: 35px;
	height: 35px;
	flex-shrink: 0;
}

/* live: time value color:#182f6c(navy), font-size:1.2em. The 35px floor makes
   the time share the day label's box height, so both sit on live's single
   35px row line instead of riding 2px low. */
.odx-contact-page__hours-time,
.odx-neighborhood__hours-time {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 35px;
	color: var(--color-navy);
	font-size: 1.2em;
	line-height: 1.6;
	white-space: nowrap;
}

/* ── RESPONSIVE — 991px ─────────────────────────────────────── */
@media ( max-width: 991px ) {
	.odx-contact-page__office-grid,
	.odx-neighborhood__office-grid {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	.odx-contact-page__map,
	.odx-neighborhood__map {
		justify-content: flex-start;
	}

	.odx-contact-page__details,
	.odx-neighborhood__details {
		max-width: 100%;
	}

	.odx-contact-page__hours-grid,
	.odx-neighborhood__hours-grid {
		grid-template-columns: minmax(0, 600px);
		justify-content: flex-start;
		row-gap: 40px;
	}
}

/* ── RESPONSIVE — 767px (mobile flip) ────────────────────────
   live: columns keep intrinsic desktop widths (515px/600px) and stack;
   long day labels wrap inside a ~250px box; text size stays 1.2em.
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	/* live @767 (computed): section-3-32 wrap pad 50px 20px 75px */
	.odx-contact-page__office,
	.odx-neighborhood__office {
		padding-top: 50px;
		padding-bottom: 75px;
	}

	.odx-contact-page__map img,
	.odx-neighborhood__map img {
		max-width: 515px;
	}

	/* live @767 (computed): section-14-32 wrap pad stays 50px 20px */
	.odx-contact-page__hours,
	.odx-neighborhood__hours {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.odx-contact-page__hours-grid,
	.odx-neighborhood__hours-grid {
		row-gap: 80px;
	}

	/* live @767: day-label box ~250px wide, wrapping the long
	   "…- Additional Customer Service Hours" labels to 2 lines */
	.odx-contact-page__hours-day span,
	.odx-neighborhood__hours-day span {
		max-width: 250px;
	}

	.odx-contact-page__accordion-trigger,
	.odx-neighborhood__accordion-trigger {
		width: 318px;
	}
}