/**
 * Contact section — Gg (P10)  ·  node 14:160 (desktop) + 2012:197 (mobile)
 *
 * SCOPE — this partial owns ONLY the section layout + the contact-info type.
 * The Gravity Form embedded in the right column is styled entirely by F4
 * (assets/css/forms.css) — nothing here touches `.gform*`. Namespace: .kd-contact*.
 *
 * Structure (contact-section.php):
 *   .kd-section.kd-contact            → constrained content container (x112 gutter,
 *                                        content-max 1216, section rhythm) from global.css
 *     .kd-contact__inner              → the 2-col flex row
 *       .kd-contact__info             → left: email (mailto) + location
 *       .kd-contact__form             → right: <!-- wp:gravityforms/form 1 -->
 *
 * Node 14:160 @1440 (content-left = x112):
 *   - info col:  x112  w392  — "info@email.com" (y393) + "Based in Ottawa…" (y433)
 *   - form col:  x752  w535  — First/Last split (256+256, 23px gap) → spans to x1287
 *   - both top-aligned: email first line + form first label both at y393
 *   - the wide comp gap = free space between the two fixed columns (space-between)
 */

/* ── 2-col row ──────────────────────────────────────────────────────────────
   Fixed-basis columns + justify-content:space-between: at the 1216 container the
   392+535 columns sit flush-left / flush-right and the leftover (~289px) becomes
   the gap the comp shows. Columns may shrink (flex-shrink 1) on tablet widths. */
.kd-contact__inner {
	display: flex;
	align-items: flex-start;          /* info top-aligns with the form's first field (node y393) */
	justify-content: space-between;
	gap: var(--kd-space-lg);          /* 40px — minimum gutter once the columns get close */
	/* Node insets the form ~41px past the 112px gutter (form right x1287, not the
	   1328 content edge). Reproduce that inset with the nearest token so the form
	   lands at the node's right edge instead of flush to the container. Removed on
	   mobile, where the form is full content-width. */
	padding-inline-end: var(--kd-space-lg);   /* ≈ node's 153px right margin − 112px gutter */
}

/* Kill WP flow block-gap margins on the flex children (would push the form column
   down and break the top-align). .kd-contact__inner > * (0,1,0) beats WP's
   :where() block-gap (0,0,0) with no !important. */
.kd-contact__inner > * {
	margin-block: 0;
}

.kd-contact__info {
	flex: 0 1 392px;                  /* node info-col width; shrinkable on tablet */
	min-width: 0;
}

.kd-contact__form {
	flex: 0 1 535px;                  /* node form-col width (18:191–18:225); shrinkable */
	min-width: 0;
}

/* ── Contact info type — Public Sans Medium 20/40 black (nodes 18:185 / 18:184) ── */
.kd-contact__info > * {
	margin-block: 0;                  /* stack the two lines on line-height alone (node y393/y433 = 40 apart) */
}

.kd-contact__email,
.kd-contact__location {
	font-family: var(--kd-font-heading);     /* Public Sans */
	font-size: var(--kd-size-contact-info);  /* 20px */
	font-weight: var(--kd-fw-medium);        /* 500 */
	line-height: 2;                          /* 40/20 — one-off: no --kd-lh-* token equals 2.0 */
	color: var(--kd-color-body);             /* black */
}

/* Email = mailto link kept BLACK (not the global red-orange link colour).
   Global `a` = --kd-color-primary (0,0,1) + theme.json elements.link :where();
   .kd-contact__email a (0,2,0) wins over both — no !important. */
.kd-contact__email a {
	color: var(--kd-color-body);
	text-decoration: none;
}

.kd-contact__email a:hover,
.kd-contact__email a:focus-visible {
	color: var(--kd-color-body);      /* stays black on hover/focus */
	text-decoration: underline;       /* affordance without a colour change */
}

.kd-contact__email a:focus-visible {
	outline: 2px solid var(--kd-color-secondary);  /* maroon keyboard ring — matches F5/F6 */
	outline-offset: 2px;
}

/* ── Desktop 2-col first-line top-align (≥768, node 14:160) ───────────────────
   The email/location run at line-height:2 (40px line-box on 20px text) to build
   the 40px inter-line rhythm; that leaves ~10px top half-leading, dropping the
   email's first glyph ~7px below the form's first "Name" label (tight 18px
   leading). Node 14:160 top-aligns the two first lines (email + "Name" both at
   y393). Compensate with a one-off negative block-start on the info column so the
   email's first-line text-top matches the label's (measured ~0.7px apart after
   this pull @1440/1024). The line-height is untouched, so the 40px email→location
   rhythm is preserved.
   DESKTOP 2-COL ONLY: below 768 the info stacks ABOVE the form (node 2012:197);
   pulling it up there would eat the 40px top gap and crowd the P2 banner above.
   `> .kd-contact__info` (0,2,0) intentionally out-specifies the `.kd-contact__inner
   > *` margin reset above — order-independent, no !important. */
@media (min-width: 768px) {
	.kd-contact__inner > .kd-contact__info {
		margin-block-start: -7px;   /* first-line half-leading compensation (node geometry one-off) */
	}
}

/* ── Mobile (<768): stack — info ABOVE the form (node 2012:197); form goes
   full-width (F4 already makes First/Last + submit full-width <768). ────────── */
@media (max-width: 767.98px) {
	.kd-contact__inner {
		flex-direction: column;
		gap: var(--kd-space-lg);      /* 40px between the info block and the form */
		padding-inline-end: 0;        /* form is full content-width on mobile (node 2012:197) */
	}

	.kd-contact__info,
	.kd-contact__form {
		flex: 1 1 100%;
		width: 100%;
	}
}