/* Block: Leasing Footer (acf/leasing-footer)
   ---------------------------------------------------------------------------
   The rounded Deep Sea panel that closes the page. Unlike every other panel in
   this build it OVERLAPS the block above it — the one exception the approved
   plan allows — riding up over image-band B by 119px on desktop and 66px on
   mobile.

   Layout, in one sentence per breakpoint:
     mobile   one centred stack, no back-to-top mark (matches comp 122:347)
     desktop  three rows, each with a left-aligned brand column and a
              right-aligned info cluster (matches comp 81:71)

   Spacing is expressed as custom properties at the top of the block so the
   whole vertical rhythm can be retuned in one place. The values are the comp's
   gaps converted from its (padded) Figma text frames to real CSS line boxes.
   Both columns of numbers were reconciled against the panel height and add up
   exactly: 90 + 137 + 132 + 116 + 34 + 60 + 65 = 634 (desktop 81:75), and
   98 + 48 + ... + 59 = 1133 (mobile 122:347).

   Comp reference — desktop 81:71 @1512, mobile 122:347 @402.
--------------------------------------------------------------------------- */

.leasing-footer--section {
	/* Mobile (comp panel 403x1133 at y=2846) */
	--lf-pad-top: 98px;
	--lf-pad-bottom: 59px;

	--lf-gap-contacts: 48px; /* "Leasing" → Joe Gowan */
	--lf-contact-split: 53px; /* Joe block → Jim block (stacked) */
	--lf-gap-logos: 66px; /* Jim block → wordmark */
	--lf-partner-split: 76px; /* wordmark → Northwood */
	--lf-partner-gap: 28px; /* Northwood → JLL */
	--lf-gap-legal: 46px; /* JLL → legal links */
	--lf-legal-split: 52px; /* legal links → copyright */

	/* Within one contact card, the comp is a stack of three line boxes —
	   48 / 60 / 29 — and the spacing is carried entirely by the oversized middle
	   one, not by margins. Reproducing the line boxes verbatim is both simpler
	   and more faithful than converting them to margins: an earlier pass split
	   the phone's 31px of extra leading evenly above and below, which dropped
	   the email ~15px lower than the comp draws it. Total stays 137px. */
	--lf-name-line: 48px;
	--lf-phone-line: 60px;
	--lf-email-line: 29px;

	--lf-wordmark-w: 234px;
	--lf-northwood-w: 282px;
	--lf-jll-w: 110px;

	position: relative;
	z-index: 1;
	background-color: var(--wp--preset--color--deep-sea, #1b2632);
	border-radius: var(--lwh-panel-radius, 60px) var(--lwh-panel-radius, 60px) 0 0;
}

/* --- The overlap ----------------------------------------------------------
   The ONE negative margin in the build. It lives here, on the footer, and not
   on image-band B: Phase 4 owns that block and pulling the band down would
   move a full-bleed photograph rather than this panel.

   Fixed pixels per breakpoint, not a percentage: the comp's overlap is
   119/634 on desktop but 66/1133 on mobile — not the same fraction — and the
   real panel height is content-driven, so anything expressed as a proportion
   drifts the moment the copy changes. Measuring from the top edge makes the
   panel height irrelevant.

   Nothing clips the rounded top: the panel paints over the band rather than
   being masked by it, because it is `position: relative; z-index: 1` and comes
   later in the DOM (the hero below is z-index 0, and neither .main--section nor
   .splash--main creates a stacking context, so the footer — a sibling of <main>
   in the template — still stacks correctly from outside .wp-block-post-content).
   No ancestor sets overflow: hidden, which the hero's sticky already depends on.

   SPECIFICITY, and this is the trap that would silently kill the whole rule:
   style.css loads AFTER every block stylesheet and carries
   `:root .wp-block-acf-leasing-footer { margin-block-start: 0 }` in its
   margin-cancel list — (0,2,0). A plain `.leasing-footer--section` rule is
   (0,1,0) and loses. Qualifying with :root AND both classes makes it (0,3,0).

   `.overlap-mod` is added by the PHP only on the front page. parts/footer.html
   is global, so on the legal pages and the 404 this block would otherwise pull
   itself up over ordinary page copy with nothing there to overlap. */
:root .wp-block-acf-leasing-footer.overlap-mod {
	margin-block-start: -66px;
}

/* ...and the second half of the same fight, which is easy to miss because the
   overlap still *looks* roughly right when it is wrong.

   Core renders a template part wrapped in <footer class="wp-block-template-part">,
   and that wrapper is a child of .wp-site-blocks, whose root layout puts a 24px
   blockGap on every subsequent child. The wrapper has no border or padding, so
   this block's negative margin collapses THROUGH it — and collapsing does not
   add margins, it takes the most positive and the most negative and sums those:
   +24 and -119 resolve to -95. A fifth of the desktop overlap disappears, and on
   mobile +24 against -66 leaves -42, over a third of it gone.

   style.css's `:root .wp-block-acf-*` margin-cancel list does not reach this —
   it cancels the gap on the BLOCK, and the margin at fault is on the wrapper
   core generated around it.

   Scoped with :has() to the wrapper that actually holds this block, so the
   header part and every non-front-page route keep their normal blockGap.
   :has() has been Baseline since Dec 2023; if it ever fails to parse the rule
   simply drops and the overlap shallows by 24px rather than breaking. */
:root .wp-block-template-part:has(> .leasing-footer--section.overlap-mod) {
	margin-block-start: 0;
}

/* --- Content column ------------------------------------------------------ */

.leasing-footer--container {
	/* Containing block for the absolutely-positioned back-to-top mark. */
	position: relative;
	padding-top: var(--lf-pad-top);
	padding-bottom: var(--lf-pad-bottom);
	/* Mobile is one centred stack. Desktop resets this to `left` below. */
	text-align: center;
}

/* Reset the flow margins core and the reset stylesheet apply, then lay the
   comp's rhythm back on.

   The doubled `:is()` selector covers both DOM shapes this block renders in.
   ACF normally wraps InnerBlocks output in an extra
   <div class="acf-innerblocks-container">; the front end opts out of that (see
   lwh_unwrap_block_innerblocks in blocks/register-blocks.php) so
   [data-reveal-group] can see the three rows and stagger them, but the block
   editor still adds the wrapper client-side. Note the two PHP-rendered rows sit
   OUTSIDE that wrapper even in the editor, so they need the un-nested branch. */
:is(.leasing-footer--inner, .leasing-footer--inner > .acf-innerblocks-container) > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Row gaps are class-based rather than `* + *`, because in the editor DOM the
   lead row is not a sibling of the other two. (0,2,0) to clear the reset above,
   which :is() also puts at (0,2,0) — so these must also come after it. */
.leasing-footer--inner .leasing-footer--logos {
	margin-top: var(--lf-gap-logos);
}

/* The legal row is a sibling of .leasing-footer--inner, not a child of it — see
   the reveal-group note in leasing-footer.php. */
.leasing-footer--container > .leasing-footer--legal {
	margin-top: var(--lf-gap-legal);
}

/* --- Row 1: "Leasing" + the two contacts --------------------------------- */

/* Child combinator to out-specify style.css's `.h1–.h6 { margin: 0 }` group and
   core's own heading margins — see the stylesheet-order note in the header. */
.leasing-footer--lead > .leasing-footer--heading {
	margin: 0;
	/* The comp's 124px "Leasing" IS the h2 preset (48px fluid → 124px), so the
	   size comes from theme.json's h2 element styles. Nothing to set. */
}

.leasing-footer--lead > .leasing-footer--contacts {
	margin-top: var(--lf-gap-contacts);
}

.leasing-footer--contacts > .leasing-footer--contact + .leasing-footer--contact {
	margin-top: var(--lf-contact-split);
}

.leasing-footer--contact > .leasing-footer--contact-name {
	/* 48px Richmond Display — the h3 preset, from theme.json's h3 element. */
	margin: 0;
	line-height: var(--lf-name-line);
}

/* No margins at all: the three line boxes stack flush and their heights carry
   the rhythm, exactly as the comp's text frame does. */
.leasing-footer--contact > .leasing-footer--contact-line {
	margin: 0;
}

/* The phone is the first paragraph in the card, the email the second. */
.leasing-footer--contact > p.leasing-footer--contact-line {
	line-height: var(--lf-phone-line);
}

.leasing-footer--contact > p.leasing-footer--contact-line + p.leasing-footer--contact-line {
	line-height: var(--lf-email-line);
}

/* Phone and email are the entire point of a leasing page, so they are real
   anchors. The comp draws them as plain text, so the underline is held back
   until hover/focus — legitimate here because each one is a standalone line in
   a contact card, not a link buried in a paragraph. */
.leasing-footer--contact-line > a {
	text-decoration: none;
	/* Stops a wrapped email from being split mid-address on a narrow phone. */
	overflow-wrap: anywhere;
}

.leasing-footer--contact-line > a:hover,
.leasing-footer--contact-line > a:focus-visible {
	text-decoration: underline;
}

/* --- Row 2: brand marks -------------------------------------------------- */

.leasing-footer--wordmark {
	display: block;
	width: var(--lf-wordmark-w);
	height: auto;
	margin-inline: auto;
}

.leasing-footer--partners {
	margin-top: var(--lf-partner-split);
}

.leasing-footer--partner {
	display: block;
	height: auto;
	margin-inline: auto;
}

.leasing-footer--partner-northwood {
	width: var(--lf-northwood-w);
}

.leasing-footer--partner-jll {
	width: var(--lf-jll-w);
}

.leasing-footer--partners > .leasing-footer--partner + .leasing-footer--partner {
	margin-top: var(--lf-partner-gap);
}

/* --- Row 3: copyright + legal menu --------------------------------------- */

/* The comp puts these two at #ffffff rather than the Linen the rest of the
   panel inherits from theme.json. */
.leasing-footer--legal {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--wp--preset--color--white, #ffffff);
}

/* Mobile stacks legal links ABOVE the copyright (comp 122:342 at y=3788,
   122:343 at y=3893); desktop puts them side by side and swaps the reading
   order back. DOM order stays copyright-first so the document reads sensibly. */
.leasing-footer--legal > .leasing-footer--nav {
	order: -1;
}

.leasing-footer--legal > .leasing-footer--copyright {
	margin: var(--lf-legal-split) 0 0;
}

.leasing-footer--nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* The type has to be set HERE rather than on the anchor. Each <li> generates
	   its own strut from its OWN font-size and line-height, and an <li> left
	   inheriting the 20px/1.45 body metrics makes every row 29px tall instead of
	   the comp's 20px. That is 27px of invisible height across three links — it
	   grew the whole panel to 661px against the comp's 634 and pushed the
	   bottom-aligned copyright 28px down with it. Styling only the anchor does
	   not fix it, because the anchor sits inside that oversized line box. */
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--small, 15px);
	font-weight: 300;
	line-height: 1.333;
	text-transform: uppercase;
}

.leasing-footer--nav-list li {
	margin: 0;
}

.leasing-footer--nav-list a {
	text-decoration: none;
}

.leasing-footer--nav-list a:hover,
.leasing-footer--nav-list a:focus-visible {
	text-decoration: underline;
}

/* --- Back to top --------------------------------------------------------- */

/* Hidden below 992px to match the mobile comp, which has no counterpart for
   node 81:84. `display: none` (rather than visually-hidden) also takes it out
   of the tab order, so the mobile keyboard path doesn't stop at an invisible
   control — and it removes the only element that hangs outside the content
   column, which is what would otherwise risk a horizontal scrollbar at 402px. */
.leasing-footer--top {
	display: none;
}

/* --- Focus --------------------------------------------------------------- */

/* Linen against Deep Sea. Matches the ring image-band already uses on its
   track and arrows. */
.leasing-footer--container :focus-visible {
	outline: 2px solid var(--wp--preset--color--linen, #d7d0c7);
	outline-offset: 4px;
	border-radius: 2px;
}

/* --- Desktop ------------------------------------------------------------- */

@media (min-width: 992px) {
	.leasing-footer--section {
		/* comp panel 1512x634 at y=3127 */
		--lf-pad-top: 90px;
		--lf-pad-bottom: 65px;

		--lf-gap-logos: 132px; /* contacts block bottom (3354) → wordmark (3486) */
		--lf-gap-legal: 34px; /* wordmark bottom (3602) → legal links (3636) */
		--lf-contact-split: 67px; /* now a horizontal gutter: Joe → Jim */
		--lf-partner-gap: 52px; /* now horizontal: Northwood (ends 1221) → JLL (1273) */

		--lf-northwood-w: 340px;
	}

	:root .wp-block-acf-leasing-footer.overlap-mod {
		margin-block-start: -119px;
	}

	.leasing-footer--container {
		text-align: left;
	}

	/* Each row is a left-aligned brand column plus a right-aligned cluster.

	   space-between rather than a fixed grid: the comp's three rows do NOT share
	   a column template (the middle column starts at x=881 in rows 1 and 2 but
	   the third column starts at 1198 in row 1 and 1273 in row 2), so any single
	   grid would have to fight one row or the other. Anchoring each cluster to
	   the container's right edge reproduces the comp's read and lands every
	   element within 17–38px of its drawn position — the same tolerance band the
	   project already accepted for the left gutter when it standardised on
	   .theme-container. */
	.leasing-footer--row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.leasing-footer--lead > .leasing-footer--contacts,
	.leasing-footer--legal > .leasing-footer--copyright {
		margin-top: 0;
	}

	.leasing-footer--contacts {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: var(--lf-contact-split);
	}

	.leasing-footer--contacts > .leasing-footer--contact + .leasing-footer--contact {
		margin-top: 0;
	}

	/* Logos sit on a shared centre line: the comp centres the 47px partner logos
	   against the 116px wordmark (both centred on y≈3543.5). */
	.leasing-footer--logos {
		align-items: center;
	}

	.leasing-footer--wordmark,
	.leasing-footer--partner {
		margin-inline: 0;
	}

	.leasing-footer--partners {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--lf-partner-gap);
		margin-top: 0;
	}

	.leasing-footer--partners > .leasing-footer--partner + .leasing-footer--partner {
		margin-top: 0;
	}

	/* Copyright baseline (3695) and the last legal line (3696) are level in the
	   comp, so the row hangs from its bottom edge rather than its top. */
	.leasing-footer--legal {
		flex-direction: row;
		align-items: flex-end;
	}

	.leasing-footer--legal > .leasing-footer--nav {
		order: 0;
	}

	.leasing-footer--nav-list {
		text-align: right;
	}

	/* The mark hangs 46px above the panel edge on the right, over image-band B.
	   `right: 0` resolves against .theme-container's PADDING box — the 1280
	   max-width box, not the 1220 content column — which puts its right edge at
	   x=1396 on a 1512 board against the comp's 1419. */
	.leasing-footer--top {
		display: block;
		position: absolute;
		top: -46px;
		right: 0;
		width: 90px;
		height: 85px;
		line-height: 0;
	}

	.leasing-footer--top img {
		display: block;
		width: 100%;
		height: auto;
	}
}