/* ==========================================================================
   Contact Location — Form + Steps (neilkelly/contact-location-form)
   CLONE OF blocks/conversion-form/style.css (2026-08-19). Same band, renamed
   selectors, for templates/page-contact-location.html only.

   IT REUSES THE --components--conversion--* TOKENS rather than copying their
   values, so the two bands cannot drift apart on height, split width or the
   Calendly nudge while they are meant to look identical. Deliberate: if this
   block ever diverges visually, fork the tokens into a
   --components--contact-location-form--* set at that point, not before — that is
   what blocks/contact-form did once Figma gave it its own measurements.

   KEEP IN STEP WITH blocks/conversion-form/style.css until they diverge.
   Figma: 32 — CONV PAGES / Calendly-Steps-Section
          Schedule a Design Consultation (6905:185), frame 1440x716
          Start My Project               (6905:439), frame 1440x716

   Desktop is 1:1 with the frame. Measured values:

     band        1440x716 on white, 80 block / 72 inline padding
     split       1180 wide, 40 between the columns, tops aligned
     form col    fills the remainder, 20 above its caption
     embed       520 tall on surface-subtle
     steps col   450 fixed, 24 between heading / intro / list
     step row    22 from the number to the copy, 20 above / 22 below
     rules       1px border-default above every step and below the last

   Every colour in the frame is an existing token — surface-subtle (#f5f5f5),
   ink-secondary (#595959), ink-on-dark-muted (#8c8c8c), ink-primary (#111),
   brand-red (#d9281e), border-default (#d9d9d9) — so nothing new was added.
   ========================================================================== */

.nk-contact-location-form {
	/* WP core gives blocks a 24px margin-block-start; these are full-bleed bands
	   that must butt against their neighbours. */
	margin: 0;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--gutter);
	background-color: var(--wp--preset--color--brand-white);
	font-family: var(--wp--preset--font-family--inter);
}

.nk-contact-location-form__container {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--custom--components--conversion--split-gap);
	width: 100%;
	max-width: var(--wp--custom--components--conversion--split-max);
}

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

.nk-contact-location-form__form-col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	/* Takes the width the fixed steps column leaves behind. */
	flex: 1 1 0;
	min-width: 0;
}

/* The frame is reserved at its designed height whether Calendly has been wired
   up or not, so the page does not reflow when the embed is switched on. */
.nk-contact-location-form__embed {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--wp--custom--components--conversion--embed-height);
	background-color: var(--wp--preset--color--surface-subtle);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Live Calendly widget.
   The design frames the embed at 520 (6905:188), but Calendly's scheduler does
   not fit in that — neilkelly.com/contact runs the container at 1500 with the
   inner iframe forced to 1800. Those are the numbers that actually work, so the
   real widget takes them and the 520 stays as the unwired placeholder height.
   Sizing is done here rather than with the inline style attribute production
   uses, because the theme disallows inline styles.
   -------------------------------------------------------------------------- */
.nk-contact-location-form__embed.has-widget {
	display: block;
	height: auto;
	/* Only the design's reserve. The widget below carries the taller pre-script box,
	   so this never fights it; once Calendly has resized the container to the real
	   form height, the frame follows it down instead of holding open the difference
	   as white space. */
	min-height: var(--wp--custom--components--conversion--embed-height);
	background-color: transparent;
	overflow: visible;
}

/* Calendly's own script owns the height from here: it builds the iframe at
   height="100%" and, because the block asks for data-resize, writes the measured page
   height onto THIS element inline. So the value below is only the box reserved before
   their script answers — an author rule on the iframe would beat their 100% attribute
   and pin it to a height the container no longer has, which is the internal scrollbar
   we were seeing. Production forces the iframe to 1800 instead, but production does
   not ask for resize and parks a 200px spacer under it to absorb the overhang.

   Calendly's iframe carries its own chrome above the card, so the card lands
   ~56 below the top of our frame and stops lining up with the steps heading
   beside it. The iframe is cross-origin, so that space cannot be styled from
   here — the widget is pulled up by the same amount instead, which is what puts
   the card's top edge back on the heading's baseline. Tokenised because it is a
   Calendly-dependent nudge: if they change their header, this is the one value
   to re-measure. */
.nk-contact-location-form__embed-widget {
	/* Calendly's scheduler needs room, hence the 320 floor — but the floor cannot exceed
	   the column, or the widget hangs out of it. At a 320px viewport the band's own
	   spacing--6 gutters leave 272px, so a flat 320 put 48px of the booking form outside
	   its container; nothing scrolled to reveal it either, because the site-wide
	   `html, body { overflow-x: hidden }` (blocks/hero/style.css) simply clipped it.
	   min() keeps the 320 wherever there is space for it and yields to the column where
	   there is not — no breakpoint needed, and the same idiom the header uses for its
	   inline padding. */
	min-width: min( var(--wp--custom--components--conversion--embed-min-width), 100% );
	height: var(--wp--custom--components--conversion--embed-height-live);
	margin-top: calc( -1 * var(--wp--custom--components--conversion--embed-widget-offset) );
}

.nk-contact-location-form__embed-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   Pasted embed (a form tool other than Calendly).
   The markup is the provider's, so this styles only the frame around it: the
   reserved box becomes a minimum rather than a fixed height, because a form we
   did not build can be any length and the alternative is clipping it. The
   iframe is stretched to the column and floored at the design's height, which
   is what an embed that ships without a height attribute would otherwise
   collapse to (150, the HTML default).
   -------------------------------------------------------------------------- */
.nk-contact-location-form__embed.has-embed-code {
	display: block;
	height: auto;
	min-height: var(--wp--custom--components--conversion--embed-height);
	background-color: transparent;
	overflow: visible;
}

.nk-contact-location-form__embed-code,
.nk-contact-location-form__embed-code iframe {
	display: block;
	width: 100%;
}

.nk-contact-location-form__embed-code iframe {
	min-height: var(--wp--custom--components--conversion--embed-height);
	border: 0;
}

.nk-contact-location-form__embed-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	padding-inline: var(--wp--preset--spacing--6);
	text-align: center;
}

.nk-contact-location-form__embed-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--lg-tight);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-on-dark-muted);
}

.nk-contact-location-form__embed-note,
.nk-contact-location-form__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

/* ---------- Design-center card (right column) ----------
   Figma: Design-Center-Info-Card (6837:1425), 450 wide.
   Values that map exactly to tokens: the #e5e7eb border and divider are neutral-200, the
   11px labels are ui-label, 13/15/16/18 are sm / ui-nav / base / md-base, the map radius 6
   is radius--md, and the greys are ink-secondary and ink-on-dark-muted.
   TWO DELIBERATE DEVIATIONS, both because Figma used values the scale does not carry:
   the 22px card title takes md (20px) — 25px would overpower a sidebar card — and the
   card's 12px corner takes radius--lg (8px) rather than radius--card (16px), since 12 has
   no token and 16 is the full-width card radius used on the Contact page. Raise either if
   the difference reads. */

.nk-contact-location-form__side-col {
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--wp--custom--components--conversion--steps-width);
	max-width: var(--wp--custom--components--conversion--steps-width);
}

.nk-contact-location-form__dc {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--7);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--surface-card);
	box-sizing: border-box;
}

.nk-contact-location-form__dc-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
}

/* Each row carries its own bottom rule; the last one drops it, so the stack closes on
   the card's own padding rather than a dangling line. */
.nk-contact-location-form__dc-stack {
	display: flex;
	flex-direction: column;
}

.nk-contact-location-form__dc-row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1-5);
	padding-block: var(--wp--preset--spacing--3);
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.nk-contact-location-form__dc-row:last-child {
	border-bottom: 0;
}

.nk-contact-location-form__dc-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--ui-label);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--lg-tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-secondary);
}

.nk-contact-location-form__dc-value {
	margin: 0;
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--md-tight);
	color: var(--wp--preset--color--ink-primary);
}

.nk-contact-location-form__dc-value--strong {
	font-weight: var(--wp--custom--font-weight--semibold);
}

.nk-contact-location-form__dc-note {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--md-tight);
	color: var(--wp--preset--color--ink-on-dark-muted);
}

/* Red and underlined per the design — this one IS a link, unlike the phone number on the
   Contact page's cards, which sits inside an anchor already. */
.nk-contact-location-form__dc-phone {
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--preset--color--brand-red);
	text-decoration: underline;
}

.nk-contact-location-form__dc-phone:hover,
.nk-contact-location-form__dc-phone:focus-visible {
	color: var(--wp--preset--color--brand-red-hover);
}

/* Fixed height so the card's rhythm holds whether the value is an iframe or an image. */
.nk-contact-location-form__dc-map {
	position: relative;
	width: 100%;
	height: var(--wp--custom--components--contact-location-form--map-height);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.nk-contact-location-form__dc-map iframe,
.nk-contact-location-form__dc-map-image {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.nk-contact-location-form__dc-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.nk-contact-location-form__dc-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
}

.nk-contact-location-form__dc-link:hover {
	color: var(--wp--preset--color--brand-red-hover);
}

/* Focus is SPLIT from hover on purpose. Hover shifts the colour and nudges the arrow,
   which is enough for a pointer — but colour alone is not a focus indicator, so keyboard
   focus gets the outline the theme uses elsewhere (people-location-routing's card,
   location-hero's buttons) rather than inheriting hover's colour-only treatment. */
.nk-contact-location-form__dc-link:focus-visible {
	color: var(--wp--preset--color--brand-red-hover);
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

.nk-contact-location-form__dc-arrow {
	transition: transform 200ms ease;
}

.nk-contact-location-form__dc-link:hover .nk-contact-location-form__dc-arrow {
	transform: translateX( var(--wp--preset--spacing--1) );
}

.nk-contact-location-form__dc-divider {
	height: 1px;
	width: 100%;
	background-color: var(--wp--preset--color--neutral-200);
}

.nk-contact-location-form__dc-tollfree {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

.nk-contact-location-form__dc-tollfree-num {
	margin: 0;
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-primary);
}

.nk-contact-location-form__dc-tollfree-link {
	color: inherit;
	text-decoration: none;
}

.nk-contact-location-form__dc-tollfree-link:hover,
.nk-contact-location-form__dc-tollfree-link:focus-visible {
	text-decoration: underline;
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
	.nk-contact-location-form {
		padding-inline: var(--wp--preset--spacing--12);
	}

	/* The 450 card column and the embed stop sharing a row well before the copy does, so
	   the band becomes a stack and the card gives up its fixed width. */
	.nk-contact-location-form__container {
		flex-direction: column;
		gap: var(--wp--preset--spacing--12);
	}

	.nk-contact-location-form__side-col {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.nk-contact-location-form {
		padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--6);
	}

	/* The embed keeps a workable height rather than the desktop 520. */
	.nk-contact-location-form__embed {
		height: var(--wp--custom--components--conversion--embed-height-mobile);
	}

	/* Both live routes hold their height as a floor rather than setting it, so both take
	   the mobile reserve — otherwise a phone reserves the desktop 520 for a form that has
	   already reflowed to fit. has-widget needs saying explicitly: a media query adds no
	   specificity, so the (0,2,0) desktop rule above outranks the bare
	   .nk-contact-location-form__embed (0,1,0) height at the top of this block and would keep the
	   desktop floor on mobile. */
	.nk-contact-location-form__embed.has-widget,
	.nk-contact-location-form__embed.has-embed-code,
	.nk-contact-location-form__embed-code iframe {
		min-height: var(--wp--custom--components--conversion--embed-height-mobile);
	}
}

/* Last section in <main> (the closing CTA below it smart-hides while it has no heading or
   body): pull the footer up 24px to close the block-gap seam above it — the same rule the
   CTA-close blocks carry. Only fires when this is genuinely the last child, so the seam
   stays intact once that CTA renders. */
.wp-block-neilkelly-contact-location-form:last-child {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--6));
}