/*
 * schedule.css — "Start Your Path to Addiction Recovery Now": enquiry form
 * over the location map.
 *
 * Figma: "schedule visit" frame, node 45:1281. Content box 1631px wide — an
 * 841px left column, then a 744px form column — with the map running the full
 * width beneath and the form's lower half sitting over it.
 *
 * That overlap is grid placement, not positioning: the layout is two rows, the
 * form spans both, the map only the second. Both stay in flow, so nothing has
 * to be re-measured when the copy above changes length.
 */

.schedule {
	padding-bottom: 60px;
	background: var(--surface-frame);
	color: var(--ink);
}

.scheduleInner {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
	/*
	 * No top padding: this section sits directly under .areas on the same
	 * --surface-frame background (both close the footer area), so .areas' own
	 * bottom padding already provides the gap and a second top padding here
	 * would double it.
	 */
	padding-block: 0;
	display: grid;
	grid-template-columns: 841fr 744fr;
	column-gap: clamp(32px, 3.6vw, 46px);
	align-items: start;
}

.scheduleBody {
	grid-column: 1;
	grid-row: 1;
}

/*
 * Spans both rows so its lower half lands in the map's row, and carries the
 * section's own background so it reads as a solid panel over the map rather
 * than letting the map show through behind the fields (node 45:1281).
 *
 * Measured off the artboard: the panel's left edge sits 30px outside the
 * fields and its bottom edge 28px below the submit, on a 40px radius. It is
 * invisible above the map, where its fill matches the section's.
 *
 * The negative top margin cancels the panel's own top padding so the first
 * field stays level with the heading in the other column, as it is on the
 * artboard — the padding bleeds upward into the section's own top padding,
 * where the matching fill makes it invisible.
 *
 * align-items:start on the container keeps this content-height; without it a
 * row-spanning item would stretch to the full height of the map beneath.
 */
.scheduleForm {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: relative;
	z-index: 1;
	margin-top: -44px;
	padding: clamp(20px, 2.4vw, 30px);
	padding-inline: 0;
	padding-left: 25px;
	border-radius: 40px;
	border-bottom-right-radius: 0;
	background: var(--surface-frame);
}

.scheduleMap {
	grid-column: 1 / -1;
	grid-row: 2;
	margin-top: clamp(32px, 4vw, 62px);
}

/* ------------------------------------------------------------- Copy */

.scheduleEyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: 28px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
}

.scheduleEyebrow .eyebrowRule {
	color: var(--accent);
}

.scheduleTitle {
	margin-top: clamp(10px, 1.1vw, 16px);
	max-width: 15em;
	font-size: 42px;
	line-height: 1.267;
	font-weight: 400;
	text-transform: capitalize;
	text-wrap: balance;
	color: var(--ink);
}

.scheduleTitle span {
	color: inherit;
}

.scheduleIntro {
	margin-top: clamp(8px, 1vw, 14px);
	max-width: 722px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	color: var(--ink-muted);
}

/* ---------------------------------------------------------- Contacts */

/*
 * Stacked by default, three across only once the left column is genuinely
 * wide enough — see the min-width rule at the bottom of this file.
 *
 * A grid rather than a wrapping flex row, because the artboard separates the
 * three with a hairline rule (nodes 45:1327, 45:1328): border-left on a
 * wrapping flex row redraws that rule at the start of every wrapped line,
 * where it reads as a stray mark rather than a divider. Fixed columns cannot
 * wrap, so the rule only ever falls between two routes on the same line.
 */
.scheduleRoutes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: clamp(28px, 3.2vw, 46px) 0 0;
	padding: 0;
	list-style: none;
}

.scheduleRouteLabel {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	color: var(--ink);
}

.scheduleRouteValue {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 19px;
}

.scheduleRouteIcon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--surface-deep);
	color: var(--warm-sand);
}

.scheduleRouteIcon svg {
	width: 16px;
	height: 16px;
}

.scheduleRouteLink {
	font-size: 16px;
	white-space: nowrap;
	line-height: 1.625;
	color: var(--surface-deep);
	transition: color 0.18s var(--ease);
}

.scheduleRouteLink:hover,
.scheduleRouteLink:focus-visible {
	color: var(--accent-deep);
}

/* -------------------------------------------------------------- Form */

/*
 * Gravity Forms markup, scoped to this block. The plugin's own stylesheet is
 * dequeued site-wide (inc/forms.php), so these rules are all the form gets.
 */
/*
 * auto-fit rather than a fixed two columns on a breakpoint: this column is
 * narrow between about 1000px and 1250px (two-column section, no extra room)
 * and wide again below 1000px (single-column section, full width), so viewport
 * width alone does not describe when two fields fit. 240px is the narrowest a
 * field can be and still show its placeholder.
 */
.scheduleForm .gform_fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The message field runs the full width of the form column. */
.scheduleForm .gfield--type-textarea {
	grid-column: 1 / -1;
}

/*
 * The artboard carries each field's meaning in its placeholder and shows no
 * label. The label still has to reach a screen reader, so it is clipped
 * rather than display:none'd — and the placeholder alone would not be an
 * accessible name.
 */
.scheduleForm .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.scheduleForm input[type="text"],
.scheduleForm input[type="email"],
.scheduleForm input[type="tel"],
.scheduleForm select,
.scheduleForm textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 58px;
	padding: 15px clamp(20px, 2.6vw, 40px);
	/*
	 * Borderless, as the artboard draws them. The fill alone measures 1.1:1
	 * against the panel behind it, under the 3:1 WCAG 1.4.11 asks of a
	 * control's boundary — kept this way at the client's explicit direction.
	 * The focus ring below is what makes a field's edge unambiguous.
	 */
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(246, 242, 234, 0.85);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	color: var(--ink);
}

.scheduleForm textarea {
	min-height: 176px;
	border-radius: 30px;
	resize: vertical;
}

.scheduleForm input::placeholder,
.scheduleForm textarea::placeholder {
	/* 7.4:1 on the field fill, measured. */
	color: var(--ink-muted);
	opacity: 1;
}

.scheduleForm input:focus-visible,
.scheduleForm select:focus-visible,
.scheduleForm textarea:focus-visible {
	outline: 2px solid var(--accent-deep);
	outline-offset: 2px;
}

/* The select's caret, matching the hero's treatment — a data URI rather than
   an inline SVG, because a native select cannot contain markup. */
.scheduleForm select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231c1c1c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right clamp(16px, 2vw, 32px) center;
	background-size: 12px 8px;
	padding-right: clamp(40px, 4.4vw, 60px);
}

.scheduleForm .gform_footer {
	margin-top: 5px;
}

/*
 * Full-width submit (node 45:1293): the label is centred across the whole bar
 * while the circle stays pinned to the right edge, so the circle comes out of
 * the flex flow rather than sitting beside the label as it does on the
 * inline-sized pills elsewhere.
 */
.scheduleForm .gform_footer .pillBtn {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 4px 56px;
}

.scheduleForm .gform_footer .pillBtnCircle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

.scheduleForm .gform_footer .pillBtn:hover .pillBtnCircle,
.scheduleForm .gform_footer .pillBtn:focus-visible .pillBtnCircle {
	transform: translateY(-50%) translateX(2px);
}

.scheduleForm .gfield_required {
	color: var(--accent-deep);
}

.scheduleForm .validation_message,
.scheduleForm .gform_validation_errors {
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: #a1231c;
	text-decoration: underline;
}

/* --------------------------------------------------------------- Map */

.scheduleMapFrame {
	display: block;
	width: 100%;
	height: clamp(320px, 38vw, 583px);
	border: 0;
	border-radius: 32px;
	/* Belt-and-suspenders alongside border-radius: an iframe's own embedded
	   content (Google's map tiles, not this document) needs the element to
	   actually clip, not just draw a rounded border around square content. */
	overflow: hidden;
}

/* --------------------------------------------------------------- Small */

@media (max-width: 1000px) {
	/* One column: the form no longer has a second column to overlap into, so
	   every block takes its own row in source order. */
	.scheduleInner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(32px, 4vw, 48px);
	}

	.scheduleBody,
	.scheduleForm,
	.scheduleMap {
		grid-column: 1;
		grid-row: auto;
	}

	.scheduleMap {
		margin-top: 0;
	}

	.scheduleTitle {
		font-size: 30px;
		line-height: 1.4;
	}
}

@media (max-width: 767px) {
	.scheduleBody,
	.scheduleForm,
	.scheduleMap {
		margin: 0;
		padding: 0;
	}

	.scheduleRouteValue {
		margin-top: 5px;
	}

	.scheduleRoutes {
		gap: 15px;
	}

	.scheduleForm textarea {
		min-height: auto;
		max-height: 70px;
	}

	.scheduleForm input[type="text"],
	.scheduleForm input[type="email"],
	.scheduleForm input[type="tel"],
	.scheduleForm select,
	.scheduleForm textarea {
		padding: 12px 22px;
		font-size: 15px;
	}
}

@media (max-width: 640px) {
	.scheduleTitle {
		font-size: 26px;
	}

}

/*
 * Three routes need roughly 620px between them; the left column is about 53%
 * of the container, so that only happens past a ~1200px viewport. Below it
 * they stay stacked rather than overlapping.
 */
@media (min-width: 1200px) {
	.scheduleRoutes {
		grid-template-columns: repeat(3, minmax(0, auto));
		justify-content: start;
		gap: clamp(20px, 2.4vw, 40px);
	}

	.scheduleRoute + .scheduleRoute {
		padding-left: clamp(20px, 2.4vw, 40px);
		border-left: 1px solid rgba(28, 28, 28, 0.16);
	}
}