/* ==========================================================================
   Site Footer — Neil Kelly
   Figma ref: Claude Ui Library Work, node 284:5175 (1440×568)
   ========================================================================== */

.nk-footer {
	--nk-footer-input-width: var(--wp--custom--components--site-footer--input-width);
	--nk-footer-input-height: var(--wp--custom--components--site-footer--input-height);
	--nk-footer-btn-width: var(--wp--custom--components--site-footer--btn-width);
	--nk-footer-member-logo-height: var(--wp--custom--components--site-footer--member-logo-height);
	--nk-footer-logo-width: var(--wp--custom--components--site-footer--logo-width);
	--nk-footer-logo-height: var(--wp--custom--components--site-footer--logo-height);
	--nk-footer-heading-ls: var(--wp--custom--components--site-footer--heading-letter-spacing);
	--nk-footer-disclaimer-width: var(--wp--custom--components--site-footer--disclaimer-width);
	background: var(--wp--preset--color--surface-footer);
	width: 100%;
	font-family: var(--wp--preset--font-family--inter);
	padding: 0;
	margin: 0;
}

.nk-footer * { box-sizing: border-box; margin: 0; padding: 0; }
.nk-footer a { color: var(--wp--preset--color--brand-white); text-decoration: none; transition: opacity 150ms ease; }
.nk-footer a:hover { opacity: 0.7; }

/* Inner container — 63px top, 54px sides, 20px bottom per spec */
.nk-footer__inner {
	max-width: var(--wp--custom--layout--max-width);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--15-75) var(--wp--preset--spacing--13-5) var(--wp--preset--spacing--5);
}

/* Logo — 208×62 per Pencil */
.nk-footer__logo { display: block; }
.nk-footer__logo img {
	width: var(--nk-footer-logo-width);
	height: var(--nk-footer-logo-height);
	object-fit: contain;
	display: block;
}

/* Columns row — flex, padding [44,0,26,0] per Pencil.
   Uniform gutter gap between columns so the spacing stays even regardless of
   how long the (editor-managed) link labels are. */
.nk-footer__columns { display: flex; gap: var(--wp--preset--spacing--gutter); padding: var(--wp--preset--spacing--11) 0 var(--wp--preset--spacing--6-5) 0; }

/* Each column — heading + links with 18px gap between them */
.nk-footer__col { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4-5); min-width: 0; }
/* Nav columns size to their own content; the gutter gap above keeps the spacing
   between them even. The subscribe block is pushed to the right edge with
   margin-left:auto (small-desktop band below switches to space-between so the
   wider content can't overflow the narrower container). */
.nk-footer__col:nth-child(1),
.nk-footer__col:nth-child(2),
.nk-footer__col:nth-child(3) { flex: 0 0 auto; }
.nk-footer__col--right { flex: 0 0 auto; gap: 0; margin-left: auto; }

/* Links wrapper — 15px gap between individual links per Figma */
.nk-footer__col-links { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3-75); }

/* Column headings — 14px bold uppercase, 50% white, 2.27px letter-spacing */
.nk-footer__col-heading {
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--bold);
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 50%, transparent);
	text-transform: uppercase;
	letter-spacing: var(--nk-footer-heading-ls);
	line-height: 1.337;
}

/* Column links — 16px regular white, 24px row height per Figma */
.nk-footer__col a {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--brand-white);
	display: block;
	line-height: 1.5;
}

/* Proud Member section — 30px gap to newsletter per spec */
.nk-footer__member { margin-bottom: var(--wp--preset--spacing--7-5); }
.nk-footer__member-heading {
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--bold);
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 50%, transparent);
	text-transform: uppercase;
	letter-spacing: var(--nk-footer-heading-ls);
	line-height: 1.337;
	display: block;
	margin-bottom: var(--wp--preset--spacing--4-75);
}
.nk-footer__member-logos { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wp--preset--spacing--6); }
.nk-footer__member-logos img { height: var(--nk-footer-member-logo-height); width: auto; display: block; }

/* Subscribe text — title + description stacked with no internal gap, 16px to form per spec */
.nk-footer__subscribe-text { margin-bottom: var(--wp--preset--spacing--4); }
.nk-footer__subscribe-title {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--preset--color--brand-white);
	display: block;
	line-height: 1.2;
}
.nk-footer__subscribe-desc {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--brand-white);
	line-height: 1.3;
	display: block;
	/* No max-width: the blurb wraps to its column, not to the email field's width
	   (removed 2026-08-06). --nk-footer-input-width still sizes the input itself and the
	   form row below, so it is not orphaned. */
}

/* Subscribe form — email + button side by side, 14px gap, 16px stack gap per spec */
.nk-footer__subscribe-form { display: flex; gap: var(--wp--preset--spacing--3-5); margin-bottom: var(--wp--preset--spacing--4); }

/* ---- Multi-field subscribe form (Salesforce Web-to-Lead) ------------------
   Two stacked blocks: __subscribe-main (the fields with Subscribe beside them) and the
   reCAPTCHA under both. The base .nk-footer__subscribe-form rule above is a single row
   from when this form was just email + button; the extra fields make it a stack.

   Unscoped because there is now exactly one subscribe form in the footer. It was briefly
   scoped to a -salesforce modifier while an older email-only form still rendered above
   this one; that form is gone, and so is the modifier. */
.nk-footer__subscribe-form { flex-direction: column; }

/* Fields left, Subscribe right. `align-items: flex-end` levels the button with the LAST
   field rather than the first, so it reads as the end of the stack — the button is the
   thing you reach after filling everything in. */
.nk-footer__subscribe-main {
	display: flex;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--3-5);
}

/* The fields column, capped at the single-field width so the button lands exactly where
   it did when the form was one email + button row. */
.nk-footer__subscribe-fields {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3-5);
	flex: 0 1 var(--nk-footer-input-width);
	min-width: 0;
}

.nk-footer__subscribe-row {
	display: flex;
	gap: var(--wp--preset--spacing--3-5);
}

/* Equal halves for First/Last. `flex: 1 1 0` overrides the shared input rule's
   `flex: 0 1 var(--nk-footer-input-width)` — without it both sit at the single-field
   width and leave a gap at the end of the row. min-width: 0 lets them reach half. */
.nk-footer__subscribe-row .nk-footer__subscribe-input {
	flex: 1 1 0;
	min-width: 0;
}

/* The email is a DIRECT child of the column, and this reset is load-bearing: in a column
   flex container the shared rule's `flex: 0 1 var(--nk-footer-input-width)` is read as a
   basis on the main axis — i.e. as a HEIGHT — and would stretch the field to the width
   token's value tall. Sizing goes back to the height/width declarations either side. */
.nk-footer__subscribe-fields > .nk-footer__subscribe-input {
	flex: 0 0 auto;
	width: 100%;
}

/* Sits under the fields AND the button, spanning both. reCAPTCHA's iframe is a fixed
   304px, so this keeps it from widening the footer column on narrow screens. */
.nk-footer__subscribe-captcha {
	max-width: 100%;
	overflow: hidden;
}

/* Visually-hidden labels for the subscribe fields. Same rule as the one in
   learning-hub-newsletter (defined per block — the theme has no shared utility sheet).
   position: absolute also keeps them out of the flex rows they sit in. */
.nk-footer .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* "Please confirm you're not a robot", revealed by the submit guard in view.js.
   It had NO styling at all, so it inherited near-black body text onto the black footer
   and was invisible — the form looked like it silently refused to submit.

   brand-red-on-dark, not feedback-error: the theme's on-dark red gives 6.79:1 here where
   feedback-error (#dc2626) manages only 4.35:1 against surface-footer and fails AA for
   body text. Same token the other on-dark accents use (team, location-team-group,
   project-cta-close). */
.nk-footer__subscribe-error {
	margin: var(--wp--preset--spacing--2) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--brand-red-on-dark);
}

.nk-footer__subscribe-input {
	flex: 0 1 var(--nk-footer-input-width);
	min-width: 0;
	height: var(--nk-footer-input-height);
	padding: 0 var(--wp--preset--spacing--4-5);
	font-size: var(--wp--preset--font-size--base);
	font-family: var(--wp--preset--font-family--inter);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-white) 30%, transparent);
	border-radius: var(--wp--custom--radius--default);
	background: transparent;
	color: var(--wp--preset--color--brand-white);
	outline: none;
}
.nk-footer__subscribe-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: -2px;
}
.nk-footer__subscribe-input::placeholder { color: color-mix(in srgb, var(--wp--preset--color--brand-white) 30%, transparent); }
.nk-footer__subscribe-btn {
	flex: 0 0 var(--nk-footer-btn-width);
	height: var(--nk-footer-input-height);
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	font-family: var(--wp--preset--font-family--inter);
	background: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--surface-footer);
	border: none;
	border-radius: var(--wp--custom--radius--default);
	cursor: pointer;
	white-space: nowrap;
}

/* Hover: white button settles one step toward grey (matches nk-person-cta-close__btn). */
.nk-footer__subscribe-btn:hover {
	background: var(--wp--preset--color--neutral-100);
}

/* Disclaimer — 12px, 50% white, 327px width for 2-line wrap per Pencil */
.nk-footer__disclaimer {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--regular);
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 50%, transparent);
	line-height: 1.5;
	max-width: var(--nk-footer-disclaimer-width);
}
.nk-footer__disclaimer a {
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 50%, transparent);
	text-decoration: underline;
}

/* Separator line — no margin; spacing handled by columns padding-bottom and bottom bar padding-top */
.nk-footer__sep {
	border: none;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--brand-white) 20%, transparent);
}

/* Bottom bar — padding-top 17px per Pencil */
.nk-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--wp--preset--spacing--4-25); }
.nk-footer__copyright {
	font-size: var(--wp--preset--font-size--sm-md);
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 50%, transparent);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	line-height: 1.429;
}
.nk-footer__social { display: flex; align-items: center; gap: var(--wp--preset--spacing--8); }
.nk-footer__social a {
	font-size: var(--wp--preset--font-size--sm-md);
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 50%, transparent);
	line-height: 1.5;
}

/* ---- Small desktop (1200–1439.98px) ---- */
/* Scale the accolade logos down to the -sm size and tighten their gap.
   Upper bound stops just below 1440px so the design width keeps full-size logos.
   Lower bound is 1200px — below that the footer switches to the wrapped tablet
   layout, so the single-row desktop composition never has to squeeze. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
	.nk-footer { --nk-footer-member-logo-height: var(--wp--custom--components--site-footer--member-logo-height-sm); }
	.nk-footer__member-logos { gap: var(--wp--preset--spacing--4); }
	/* Narrower container: distribute columns edge-to-edge with even gaps instead
	   of the fixed gutter + auto margin. space-between derives the gaps from the
	   free space (gap:0 keeps it from acting as a minimum and overflowing). */
	.nk-footer__columns { gap: 0; justify-content: space-between; }
	.nk-footer__col--right { margin-left: 0; }
}

/* ---- Tablet (≤1199.98px) ---- */
@media (max-width: 1199.98px) {
	.nk-footer__inner { padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--6) var(--wp--preset--spacing--5); }
	.nk-footer__columns { flex-wrap: wrap; gap: var(--wp--preset--spacing--8); justify-content: flex-start; }
	.nk-footer__col:nth-child(1),
	.nk-footer__col:nth-child(2),
	.nk-footer__col:nth-child(3) { flex: 0 0 45%; }
	.nk-footer__col--right { flex: 0 0 100%; margin-left: 0; }
	.nk-footer__subscribe-form { flex-wrap: wrap; }
	.nk-footer__subscribe-input { width: 100%; max-width: var(--nk-footer-input-width); }

	/* Subscribe form: one field per row, full width, Subscribe under them.

	   Applied across the whole tablet-and-down band, not just mobile, because the
	   right column is NARROWER on tablet than on a phone: 768-1199.98 gives it
	   flex: 0 0 45%, which is 324 at 768 against a 375 phone's 327. The row layout
	   needs 441 (295 + 14 + 132) and 45% does not reach that until ~1028, so the
	   squeeze ran 768-1027 as well: First/Last at 82 each, the button taking 40% of
	   the column. At 375 it was 83 each, and at 320 the button (132) was wider than
	   the fields it submits (126).

	   Every flex basis below has to be unset, not just re-pointed: once these
	   containers are columns, `flex: 0 1 <width token>` is read on the main axis —
	   i.e. as a HEIGHT — so the fields column would stand 295 tall, the button 132,
	   and the `flex: 1 1 0` halves would collapse to nothing. Same trap the email
	   input's own reset documents further up. Widths come back from width: 100%.

	   The per-input max-width above is dropped and the stack capped as a whole, so
	   the fields, the button and the 304 reCAPTCHA under them stay in proportion —
	   uncapped the inputs reached 719 at 767. The cap binds above ~428 only; a 375
	   column is 327 and is unaffected. */
	.nk-footer__subscribe-main {
		flex-direction: column;
		align-items: stretch;
		max-width: var(--wp--custom--components--site-footer--subscribe-max-width-sm);
	}
	.nk-footer__subscribe-row { flex-direction: column; }
	.nk-footer__subscribe-fields { flex: 0 0 auto; width: 100%; }
	.nk-footer__subscribe-row .nk-footer__subscribe-input,
	.nk-footer__subscribe-input { flex: 0 0 auto; width: 100%; max-width: none; }
	.nk-footer__subscribe-btn { flex: 0 0 auto; width: 100%; }
	.nk-footer__bottom { flex-direction: column; gap: var(--wp--preset--spacing--4); align-items: flex-start; }
}

/* Tablet only: 768–1199.98px — col-right sits as the second column beside col-3 */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.nk-footer { --nk-footer-member-logo-height: var(--wp--custom--components--site-footer--member-logo-height-sm); }
	.nk-footer__col--right { flex: 0 0 45%; }
}

/* ---- Mobile (≤767px) ---- */
@media (max-width: 767px) {
	.nk-footer { --nk-footer-member-logo-height: var(--wp--custom--components--site-footer--member-logo-height-sm); }
	.nk-footer__col:nth-child(1),
	.nk-footer__col:nth-child(2),
	.nk-footer__col:nth-child(3) { flex: 0 0 100%; }
	.nk-footer__social { gap: var(--wp--preset--spacing--5); }
}

/* --------------------------------------------------------------------------
   page-careers — close the footer seam, whichever section ends the page.

   The footer's template-part wrapper is a direct child of .wp-site-blocks and
   core gives it margin-block-start: 24px, because theme.json defines no
   blockGap. main's own blockGap is 0, so only this last seam shows. Adjacent
   margins collapse to their sum when one is negative, so -24px cancels it.

   POSITIONAL, not hung on a block name, because every section on this template
   is smart: locservice-designers (render.php:53) and its neighbours return early
   and emit no DOM when their fields are empty, so which block ends the page
   varies per page. :last-child matches the RENDERED DOM, so it follows that.

   Lives here rather than in a section block's stylesheet for the same reason —
   the seam belongs to the footer, not to whichever section happens to precede
   it. Scoped to page-careers: the identical rule is duplicated in 79 block
   stylesheets today, and unifying those is a separate pass.

   Specificity (0,2,2) beats core's
   `:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }` (0,2,0)
   outright rather than on source order.
   -------------------------------------------------------------------------- */
.page-template-page-careers main > section:last-child {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--6));
}