/* ==========================================================================
   Site Header — Megamenu
   Extracted from style.css for maintainability.
   ========================================================================== */

/* ---------- Base styles ---------- */
.nk-site-header .nk-megamenu {
	position: absolute;
	top: var(--nk-megamenu-offset);
	left: 0;
	right: 0;
	z-index: 99;
	display: none;
	opacity: 0;
	transform: translateY(var(--nk-megamenu-translate));
	transition: opacity 200ms ease, transform 200ms ease;
}

.nk-site-header .nk-megamenu.is-open {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.nk-megamenu__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

.nk-megamenu__inner > * {
	background-color: var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--elev-3);
}

/* Megamenu panels */
.nk-megamenu__panel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--wp--custom--components--site-header--megamenu-panel-col-min), 1fr));
	gap: var(--wp--preset--spacing--8);
	padding: var(--wp--preset--spacing--8);
	background-color: var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--elev-3);
}

.nk-megamenu__heading {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--ink-secondary);
	margin: 0 0 var(--wp--preset--spacing--3) 0;
}

.nk-site-header .nk-megamenu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.nk-site-header .nk-megamenu__link {
	display: block;
	padding: var(--wp--preset--spacing--1) 0;
	color: var(--wp--preset--color--ink-primary);
	font-size: var(--wp--preset--font-size--sm);
	font-family: var(--wp--preset--font-family--inter);
	line-height: var(--wp--custom--line-height--sm);
	text-decoration: none;
}

.nk-site-header .nk-megamenu__link:hover {
	color: var(--wp--preset--color--brand-red);
}

/* Featured card in megamenu */
.nk-megamenu__col--featured {
	min-width: var(--wp--custom--components--site-header--megamenu-featured-min-width);
}

.nk-megamenu__feature-card {
	background-color: var(--wp--preset--color--surface-subtle);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--4);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.nk-megamenu__feature-img {
	width: 100%;
	height: var(--nk-card-img-sm-height);
	background-color: var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--default);
}

.nk-megamenu__feature-title {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	color: var(--wp--preset--color--ink-primary);
	margin: 0;
}

.nk-megamenu__feature-desc {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-secondary);
	line-height: var(--wp--custom--line-height--xs);
	margin: 0;
}

.nk-megamenu__feature-link {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--semibold);
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
}

.nk-megamenu__feature-link:hover {
	text-decoration: underline;
}

/* View all CTA column */
.nk-megamenu__col--cta {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.nk-megamenu__view-all {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--semibold);
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
	white-space: nowrap;
}

.nk-megamenu__view-all:hover {
	text-decoration: underline;
}

/* ---------- Sticky megamenu ---------- */
.nk-site-header.is-sticky .nk-megamenu {
	z-index: 200;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	/* Hide desktop megamenus on mobile */
	.nk-site-header .nk-megamenu,
	.nk-site-header .nk-megamenu.is-open {
		display: none;
	}
}

/* ---------- WP global style overrides (high specificity) ---------- */

/* --- Megamenu Panels --- */
header.wp-block-neilkelly-site-header .nk-megamenu { display: none; position: absolute; top: calc(var(--nk-megamenu-offset) + var(--nk-megamenu-gap)); left: 0; right: 0; z-index: 200; max-width: var(--wp--custom--layout--max-width); margin-left: auto; margin-right: auto; margin-inline: auto; padding: 0 var(--wp--custom--components--site-header--cta-to-edge); padding-inline: var(--wp--custom--components--site-header--cta-to-edge); box-sizing: border-box; }
header.wp-block-neilkelly-site-header .nk-megamenu.is-open { display: block; }
/* Every panel is capped to the viewport and scrolls the remainder. Without this the
   taller panels ran off the bottom with no way to reach it: Locations overflowed by
   375px at 1024x768 and still by 79px at 1440x900, Projects by 41px at 1024x768.
   Page scroll is no escape — scrolling is what sets .is-sticky, and view.js then
   pins the open panel with position: fixed, so the overflow stays unreachable in
   both states.

   The ceiling here is the RESTING one: --nk-megamenu-offset includes the announcement
   bar plus the header's top pad, and the panel opens --nk-megamenu-gap below that. The
   sticky state starts 51 higher and gets its own, taller ceiling below. overflow-x
   stays hidden so the rounded corners keep clipping; only the block axis scrolls.
   Panels that set their own overflow below must therefore set overflow-x alone, or
   they reinstate the clip.

   Each ceiling is declared TWICE, vh then dvh, and the order is the point: a browser
   without dvh drops the second and keeps the first. dvh matters on a touch tablet,
   which is the width this menu appears at — iOS Safari reports vh as the LARGE
   viewport, toolbars excluded, so a vh-only cap left the last ~60-80 under the browser
   chrome. Unreachable, because the panel scrolls internally and the page does not. */
header.wp-block-neilkelly-site-header .nk-megamenu__panel { --nk-mm-panel-max-height: calc(100vh - var(--nk-megamenu-offset) - var(--nk-megamenu-gap) - var(--wp--preset--spacing--4)); --nk-mm-panel-max-height: calc(100dvh - var(--nk-megamenu-offset) - var(--nk-megamenu-gap) - var(--wp--preset--spacing--4)); background: var(--wp--preset--color--brand-white); border-radius: var(--wp--custom--radius--default); box-shadow: var(--wp--custom--shadow--elev-3); margin: 0; overflow-x: hidden; overflow-y: auto; max-height: var(--nk-mm-panel-max-height); padding: 0; }

/* Sticky hides the announcement bar and drops the top pad, and view.js anchors the
   panel at the fixed bar's bottom edge instead of the resting offset — 114 rather than
   165. Holding the resting ceiling there wasted that difference: the panel stopped 67
   short of the fold instead of 16, so 51px of Locations scrolled that did not have to.
   This ceiling is measured off what the sticky bar actually occupies: the header height
   plus its own padding-block, both sides, then the same bottom breathing room.

   COUPLED ACROSS FILES: that padding-block is set on .is-sticky .nk-header in
   style.css (the sticky rule, currently spacing--6). Nothing here reads it — this calc
   restates it. Change the padding there and this ceiling drifts silently: no error, no
   visual cue, until a panel overflows the fold again. Keep the two in step. */
header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-megamenu__panel { --nk-mm-panel-max-height: calc(100vh - var(--nk-header-height) - 2 * var(--wp--preset--spacing--6) - var(--wp--preset--spacing--4)); --nk-mm-panel-max-height: calc(100dvh - var(--nk-header-height) - 2 * var(--wp--preset--spacing--6) - var(--wp--preset--spacing--4)); }

/* Logged-in admin bar: the sticky header is pushed down 32 (see the .admin-bar rule in
   style.css), so the panel starts 32 lower and the ceiling has to give that back. The
   megamenu is desktop-only (>=1024), where WP's admin bar is always the fixed 32 tall
   variant, so no mobile case to carve out. */
.admin-bar header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-megamenu__panel { --nk-mm-panel-max-height: calc(100vh - var(--nk-header-height) - 2 * var(--wp--preset--spacing--6) - var(--wp--preset--spacing--4) - 32px); --nk-mm-panel-max-height: calc(100dvh - var(--nk-header-height) - 2 * var(--wp--preset--spacing--6) - var(--wp--preset--spacing--4) - 32px); }
header.wp-block-neilkelly-site-header .nk-megamenu__panel--projects { width: 100%; border-radius: var(--wp--custom--radius--default); overflow-x: hidden; }
header.wp-block-neilkelly-site-header .nk-megamenu__panel--locations { width: 100%; border-radius: var(--wp--custom--radius--default); overflow-x: hidden; }
/* min-height, not height: the link titles wrap (see .nk-mm-res-link-title), so the
   columns grow past the Figma panel height on narrower viewports. A fixed height
   plus overflow:hidden clipped the wrapped lines off the bottom. The viewport cap and
   the block-axis scroll come from the shared .nk-megamenu__panel rule above; this
   panel only has to clamp its own floor, because min-height beats max-height per
   spec — without min() a window shorter than the Figma height overflows anyway. */
header.wp-block-neilkelly-site-header .nk-megamenu__panel--resources { display: flex; flex-direction: row; gap: var(--wp--preset--spacing--2-5); padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--3); border-radius: var(--wp--custom--radius--default); background: var(--wp--preset--color--brand-white); box-shadow: var(--wp--custom--shadow--panel); overflow-x: hidden; overflow-y: auto; width: 100%; min-height: min( var(--nk-megamenu-panel-resources-height), var(--nk-mm-panel-max-height) ); max-height: var(--nk-mm-panel-max-height); box-sizing: border-box; }
header.wp-block-neilkelly-site-header .nk-megamenu--why-nk { left: 0; right: 0; }
/* min-height matches the Resources panel above. Note it's a floor only: this panel's
   children (.nk-mm-why-dark / -side / -links) are absolutely positioned, so content
   can't push it taller — extra Theme Settings links would still clip until the panel
   moves to flow layout. */
header.wp-block-neilkelly-site-header .nk-megamenu__panel--why-nk { width: var(--nk-megamenu-panel-why-nk-width); min-height: min( var(--nk-megamenu-panel-why-nk-height), var(--nk-mm-panel-max-height) ); position: relative; padding: 0; margin: 0; border-radius: var(--wp--custom--radius--default); overflow-x: hidden; background: var(--wp--preset--color--brand-white); box-shadow: var(--wp--custom--shadow--elev-2); }
header.wp-block-neilkelly-site-header .nk-megamenu span,
header.wp-block-neilkelly-site-header .nk-megamenu p { margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
header.wp-block-neilkelly-site-header .nk-megamenu a { transition: background-color 150ms ease, color 150ms ease; border-radius: var(--wp--custom--radius--default); background-color: transparent; padding: var(--wp--preset--spacing--1-5) var(--wp--preset--spacing--2); box-sizing: border-box; margin: calc(-1 * var(--wp--preset--spacing--1-5)) calc(-1 * var(--wp--preset--spacing--2)); }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-card,
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-btn,
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-city-header,
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-city-svc-link,
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-loc-svc-card,
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-res-cta-btn,
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-res-link,
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-why-dark-btn,
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-why-link { margin: 0; }
header.wp-block-neilkelly-site-header .nk-megamenu a:hover { background-color: var(--wp--preset--color--surface-subtle); color: var(--wp--preset--color--brand-red); }
header.wp-block-neilkelly-site-header .nk-megamenu a:hover .nk-mm-title { color: var(--wp--preset--color--brand-red); }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-svc-link { background-color: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-svc-link:hover { background-color: var(--wp--preset--color--surface-subtle); }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-loc-pill { background-color: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-loc-pill:hover { background-color: var(--wp--preset--color--surface-subtle); }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-svc-card { background-color: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-svc-card:hover { background-color: var(--wp--preset--color--surface-subtle); }

/* --- Megamenu inner elements (replaces inline style="" attributes) --- */

/* Shared */
header.wp-block-neilkelly-site-header .nk-megamenu__panel { background: var(--wp--preset--color--brand-white); font-family: 'Inter', sans-serif; }
header.wp-block-neilkelly-site-header .nk-mm-inner { display: flex; flex-direction: column; padding: var(--wp--preset--spacing--4); }
header.wp-block-neilkelly-site-header .nk-mm-inner--projects { gap: var(--wp--preset--spacing--8); }
header.wp-block-neilkelly-site-header .nk-mm-inner--locations { gap: var(--wp--custom--components--site-header--mm-loc-inner-gap); padding: var(--wp--preset--spacing--4); }
header.wp-block-neilkelly-site-header .nk-mm-section { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
header.wp-block-neilkelly-site-header .nk-mm-heading-row { display: flex; align-items: center; justify-content: space-between; }
header.wp-block-neilkelly-site-header .nk-mm-heading-row--h36 { height: var(--nk-heading-row-height); }
header.wp-block-neilkelly-site-header .nk-mm-heading-row__actions { display: flex; align-items: center; }
header.wp-block-neilkelly-site-header .nk-mm-heading-row__actions .nk-mm-btn + .nk-mm-btn { margin-left: var(--wp--preset--spacing--3); }
header.wp-block-neilkelly-site-header .nk-mm-heading { font-size: var(--wp--preset--font-size--md); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--brand-black); line-height: var(--wp--custom--line-height--mm-heading); letter-spacing: var(--wp--custom--letter-spacing--normal); text-transform: uppercase; }
header.wp-block-neilkelly-site-header .nk-mm-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--wp--preset--color--brand-black); color: var(--wp--preset--color--brand-black); padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--font-size--base); font-weight: var(--wp--custom--font-weight--medium); line-height: 1.25; text-decoration: none; background: transparent; height: var(--nk-mm-btn-height); box-sizing: border-box; box-shadow: var(--wp--custom--shadow--elev-1); }
header.wp-block-neilkelly-site-header .nk-mm-btn:hover { background-color: var(--wp--preset--color--surface-subtle); }
header.wp-block-neilkelly-site-header .nk-megamenu__panel--projects .nk-mm-btn { width: var(--wp--custom--components--site-header--mm-proj-btn-width); }

/* "Small Projects" CTA mirrors the Services block filter button (.nk-services__filter):
   neutral outlined pill, no box-shadow, content-width, hover darkens the border. Scoped via
   `.nk-megamenu a.nk-mm-btn--filter` so it outranks the generic `a` / `a:hover` and the rules above. */
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-btn--filter { width: auto; height: var(--wp--preset--spacing--12); padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6); font-size: var(--wp--preset--font-size--sm-md); line-height: var(--wp--custom--line-height--base); color: var(--wp--preset--color--ink-primary); background: none; border: 1px solid var(--wp--preset--color--border-default); box-shadow: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-btn--filter:hover { background: none; border-color: var(--wp--preset--color--ink-primary); color: var(--wp--preset--color--ink-primary); }
header.wp-block-neilkelly-site-header .nk-mm-desc { 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-black) 50%, transparent); line-height: var(--wp--custom--line-height--md-tight); display: block; }
/* Intro Copy is now a WYSIWYG (HTML) field — its content arrives wrapped in <p>. Collapse
   those margins so the block reads as it did as plain text; links inherit the menu style. */
header.wp-block-neilkelly-site-header .nk-mm-desc p { margin: 0; }
header.wp-block-neilkelly-site-header .nk-mm-desc p + p { margin-top: var(--wp--preset--spacing--2); }
header.wp-block-neilkelly-site-header .nk-mm-row { display: flex; gap: var(--wp--preset--spacing--4); }
header.wp-block-neilkelly-site-header .nk-mm-row--center { align-items: center; }
header.wp-block-neilkelly-site-header .nk-mm-row--gap8 { gap: var(--wp--preset--spacing--2); }
header.wp-block-neilkelly-site-header .nk-mm-col { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); }
header.wp-block-neilkelly-site-header .nk-mm-arrow { flex-shrink: 0; color: var(--wp--preset--color--brand-red); }
header.wp-block-neilkelly-site-header .nk-mm-title { font-size: var(--wp--preset--font-size--base); font-weight: var(--wp--custom--font-weight--medium); color: var(--wp--preset--color--brand-black); line-height: 1.422; }

/* Projects panel */
header.wp-block-neilkelly-site-header .nk-mm-desc-col { flex: 0 0 var(--nk-megamenu-desc-col-width); align-self: flex-start; }
header.wp-block-neilkelly-site-header .nk-mm-card { flex: 1; text-decoration: none; color: var(--wp--preset--color--brand-black); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); }
header.wp-block-neilkelly-site-header .nk-mm-card-img { width: 100%; height: var(--nk-card-img-lg-height); object-fit: cover; border-radius: var(--wp--custom--radius--default); display: block; }
header.wp-block-neilkelly-site-header .nk-mm-pill { flex: 1; display: flex; align-items: center; justify-content: space-between; border-radius: var(--wp--custom--radius--default); text-decoration: none; color: var(--wp--preset--color--brand-black); height: var(--nk-pill-height); box-sizing: border-box; background: transparent; }
header.wp-block-neilkelly-site-header .nk-mm-pill:hover { background-color: var(--wp--preset--color--surface-subtle); }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-pill { padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3) var(--wp--preset--spacing--1) var(--wp--preset--spacing--1); margin: 0; }
/* Project Type pills: fixed quarter-row width (4 per row, 3 gaps), independent of label length. */
header.wp-block-neilkelly-site-header .nk-mm-col .nk-mm-pill { flex: 0 0 calc((100% - var(--wp--preset--spacing--4) * 3) / 4); min-width: 0; }

/* Locations panel */
header.wp-block-neilkelly-site-header .nk-mm-cities { display: flex; gap: var(--wp--preset--spacing--6); align-items: flex-start; }
header.wp-block-neilkelly-site-header .nk-mm-divider { width: 0; display: flex; justify-content: center; align-self: stretch; flex-shrink: 0; }
header.wp-block-neilkelly-site-header .nk-mm-divider-line { width: 1px; background: var(--wp--preset--color--neutral-200); height: 100%; }
header.wp-block-neilkelly-site-header .nk-mm-city { flex: 1; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
header.wp-block-neilkelly-site-header .nk-mm-city--offset { padding: var(--wp--preset--spacing--1); }
header.wp-block-neilkelly-site-header .nk-mm-city-header { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); height: var(--nk-city-header-height); text-decoration: none; color: inherit; }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-city-header { padding: 0; }
/* No gray hover fill on city cards — overrides the generic `.nk-megamenu a:hover` background. */
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-city-header:hover { background-color: transparent; }
/* flex-shrink: 0 is load-bearing. .nk-mm-city-header is a fixed-height flex column
   (--nk-city-header-height), so any content over that budget is taken out of the
   flex items that can give — and with the default flex-shrink: 1 and an automatic
   min-height of 0, the image was the only one giving. A city whose description
   wrapped to a fourth line (Eugene, once the columns narrow below ~1200px) pushed
   the column 14px over and its image alone rendered 120px against its neighbours'
   134px. The clamp below keeps that overflow from happening in the first place;
   this keeps the image out of it either way. */
header.wp-block-neilkelly-site-header .nk-mm-city-img { width: 100%; height: var(--nk-city-img-height); flex-shrink: 0; object-fit: cover; border-radius: var(--wp--custom--radius--default); display: block; }

/* Three lines, ellipsised — the same -webkit-box clamp used in newsroom-news and
   learning-hub-articles; unprefixed `line-clamp` still isn't safe alone. Scoped to
   the city header because that box has a fixed height: a fourth line here doesn't
   reflow, it shrinks the image above (see above) and crowds the service list below.
   Other .nk-mm-desc instances sit in auto-height boxes and stay uncapped. */
header.wp-block-neilkelly-site-header .nk-mm-city-info .nk-mm-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
header.wp-block-neilkelly-site-header .nk-mm-city-info { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--1-5); }
header.wp-block-neilkelly-site-header .nk-mm-city-name { font-size: var(--wp--preset--font-size--lg); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--brand-black); line-height: 0.917; }
header.wp-block-neilkelly-site-header .nk-mm-city-svcs { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); }
header.wp-block-neilkelly-site-header .nk-mm-city-svc-link { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--4); box-sizing: border-box; text-decoration: none; color: var(--wp--preset--color--brand-black); border-radius: var(--wp--custom--radius--default); }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-city-svc-link { padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3) var(--wp--preset--spacing--1) var(--wp--preset--spacing--1); }
header.wp-block-neilkelly-site-header .nk-mm-loc-svc-card { flex: 1; display: flex; align-items: center; gap: var(--wp--preset--spacing--3); border-radius: var(--wp--custom--radius--default); text-decoration: none; color: var(--wp--preset--color--brand-black); box-sizing: border-box; overflow: hidden; }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-loc-svc-card { padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3) var(--wp--preset--spacing--1) var(--wp--preset--spacing--1); }
header.wp-block-neilkelly-site-header .nk-mm-loc-svc-thumb { width: var(--nk-thumb-width); height: var(--wp--custom--components--site-header--mm-loc-svc-card-height); min-width: var(--nk-thumb-width); object-fit: cover; display: block; border-radius: 0; }
header.wp-block-neilkelly-site-header .nk-mm-loc-svc-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* Resources panel — flexbox layout */
/* min-height so the card stretches with the panel (default flex align-items: stretch)
   instead of leaving white space beneath it when the columns wrap taller. The image
   and gradient are bottom-pinned, so they follow the taller card. */
header.wp-block-neilkelly-site-header .nk-mm-res-cta { flex-shrink: 0; width: var(--nk-megamenu-res-cta-width); min-height: var(--nk-megamenu-res-cta-height); background: var(--wp--preset--color--brand-black); border-radius: var(--wp--custom--radius--md); overflow: hidden; position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); padding: var(--wp--preset--spacing--5); box-sizing: border-box; }
header.wp-block-neilkelly-site-header .nk-mm-res-cta-heading { font-size: var(--wp--preset--font-size--lg); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--brand-white); line-height: var(--wp--custom--line-height--lg-tight); position: relative; z-index: 2; text-transform: uppercase; display: block; }
header.wp-block-neilkelly-site-header .nk-mm-res-cta-desc { font-size: var(--wp--preset--font-size--sm-md); font-weight: var(--wp--custom--font-weight--regular); color: var(--wp--preset--color--brand-white); line-height: var(--wp--custom--line-height--md-tight); margin-top: 0; position: relative; z-index: 2; display: block; white-space: pre-line; }
header.wp-block-neilkelly-site-header .nk-mm-res-cta-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--font-size--sm-md); font-weight: var(--wp--custom--font-weight--medium); line-height: var(--wp--custom--line-height--md-tight); text-decoration: none; margin-top: 0; position: relative; z-index: 2; align-self: flex-start; box-sizing: border-box; }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-res-cta-btn { background: var(--wp--preset--color--brand-red); color: var(--wp--preset--color--brand-white); padding: var(--wp--preset--spacing--2-5) var(--wp--preset--spacing--5); margin: 0; }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-res-cta-btn:hover { background: var(--wp--preset--color--brand-red-hover); color: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header .nk-mm-res-cta-img { width: 100%; height: var(--nk-megamenu-res-img-height); object-fit: cover; display: block; position: absolute; bottom: 0; left: 0; z-index: 0; }
header.wp-block-neilkelly-site-header .nk-mm-res-cta::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--nk-megamenu-res-img-height); background: linear-gradient(to bottom, var(--wp--preset--color--brand-black) 0%, transparent 64.5%); z-index: 1; pointer-events: none; }
header.wp-block-neilkelly-site-header .nk-mm-res-columns { flex: 1; display: flex; min-width: 0; }
header.wp-block-neilkelly-site-header .nk-mm-res-col { flex: 1; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--2) 0 var(--wp--preset--spacing--2); min-width: 0; }
header.wp-block-neilkelly-site-header .nk-mm-res-col + .nk-mm-res-col { border-left: 0.5px solid var(--wp--preset--color--neutral-300); padding-left: var(--wp--preset--spacing--2-5); }
header.wp-block-neilkelly-site-header .nk-mm-res-col-header { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--1); }
header.wp-block-neilkelly-site-header .nk-mm-res-col-heading { font-size: var(--wp--preset--font-size--md); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--brand-black); line-height: var(--wp--custom--line-height--lg-tight); text-transform: uppercase; }
header.wp-block-neilkelly-site-header .nk-mm-res-col-desc { 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-black) 50%, transparent); line-height: var(--wp--custom--line-height--snug); }
header.wp-block-neilkelly-site-header .nk-mm-res-links { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
header.wp-block-neilkelly-site-header .nk-mm-res-link { display: flex; flex-direction: column; text-decoration: none; color: var(--wp--preset--color--brand-black); }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-res-link { padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--1-5); margin: 0 calc(-1 * var(--wp--preset--spacing--1-5)); }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-res-link:hover { background-color: var(--wp--preset--color--surface-subtle); color: var(--wp--preset--color--brand-red); }
header.wp-block-neilkelly-site-header .nk-mm-res-link:hover .nk-mm-res-link-title { color: var(--wp--preset--color--brand-red); }
header.wp-block-neilkelly-site-header .nk-mm-res-link-row { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--2); }
header.wp-block-neilkelly-site-header .nk-mm-res-link-row .nk-mm-arrow { flex-shrink: 0; }
/* Titles wrap: the longest Theme Settings labels ("Customer Stories & Review",
   "Pricing & Cost Calculators") overrun the column even at the 1440 design width, and
   the panel's overflow:hidden sliced them off at the right edge. */
header.wp-block-neilkelly-site-header .nk-mm-res-link-title { font-size: var(--wp--preset--font-size--md-sm); font-weight: var(--wp--custom--font-weight--medium); color: var(--wp--preset--color--brand-black); line-height: var(--wp--custom--line-height--label); flex: 1; min-width: 0; }
header.wp-block-neilkelly-site-header .nk-mm-res-link-sub { 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-black) 50%, transparent); line-height: var(--wp--custom--line-height--snug); }

/* Why NK panel — absolute positioned */
header.wp-block-neilkelly-site-header .nk-mm-why-dark { position: absolute; left: var(--wp--preset--spacing--5); top: var(--wp--preset--spacing--5); width: var(--nk-megamenu-why-dark-width); height: var(--nk-megamenu-why-dark-height); background: var(--wp--preset--color--brand-black); border-radius: var(--wp--custom--radius--md); overflow: hidden; }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-why-dark-heading { font-size: var(--wp--preset--font-size--lg); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--brand-white); position: relative; z-index: 2; display: block; padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--5); text-transform: uppercase; }
header.wp-block-neilkelly-site-header .nk-megamenu .nk-mm-why-dark-desc { font-size: var(--wp--preset--font-size--sm-md); font-weight: var(--wp--custom--font-weight--regular); line-height: var(--wp--custom--line-height--md-tight); color: var(--wp--preset--color--brand-white); position: relative; z-index: 2; display: block; padding: var(--wp--preset--spacing--2-5) var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--5); }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-why-dark-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--brand-red); color: var(--wp--preset--color--brand-white); padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4); border-radius: var(--wp--custom--radius--default); font-size: var(--wp--preset--font-size--sm-md); font-weight: var(--wp--custom--font-weight--medium); line-height: var(--wp--custom--line-height--md-tight); text-decoration: none; margin: var(--wp--preset--spacing--5) 0 0 var(--wp--preset--spacing--5); position: relative; z-index: 2; box-sizing: border-box; }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-why-dark-btn:hover { background: var(--wp--preset--color--brand-red-hover); color: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header .nk-mm-why-dark-img { width: var(--nk-megamenu-why-img-width); height: var(--nk-megamenu-why-img-height); object-fit: cover; display: block; position: absolute; bottom: 0; left: var(--wp--custom--components--site-header--megamenu-why-img-offset); z-index: 0; }
header.wp-block-neilkelly-site-header .nk-mm-why-dark::after { content: ''; position: absolute; bottom: 0; left: var(--wp--custom--components--site-header--megamenu-why-img-offset); width: var(--nk-megamenu-why-img-width); height: var(--nk-megamenu-why-img-height); background: linear-gradient(to bottom, var(--wp--preset--color--brand-black) 0%, transparent 75%); z-index: 1; pointer-events: none; }
header.wp-block-neilkelly-site-header .nk-mm-why-side { position: absolute; left: var(--nk-megamenu-why-side-left); top: var(--wp--preset--spacing--8); width: var(--nk-megamenu-why-side-width); }
header.wp-block-neilkelly-site-header .nk-mm-why-side-heading { font-size: var(--wp--preset--font-size--md); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--brand-black); text-transform: uppercase; }
header.wp-block-neilkelly-site-header .nk-mm-why-side-desc { 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-black) 50%, transparent); line-height: 1.25; display: block; margin-top: var(--wp--preset--spacing--2); }
header.wp-block-neilkelly-site-header .nk-mm-why-links { position: absolute; left: var(--nk-megamenu-why-side-left); top: var(--nk-megamenu-why-links-top); width: var(--nk-megamenu-why-links-width); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-why-link { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--1); text-decoration: none; color: var(--wp--preset--color--brand-black); padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--1-5); margin: 0 calc(-1 * var(--wp--preset--spacing--1-5)); background: transparent; }
header.wp-block-neilkelly-site-header .nk-mm-why-link-row { display: flex; align-items: center; justify-content: space-between; width: var(--nk-megamenu-why-links-width); }
header.wp-block-neilkelly-site-header .nk-mm-why-link-title { font-size: var(--wp--preset--font-size--base); font-weight: var(--wp--custom--font-weight--medium); color: var(--wp--preset--color--brand-black); line-height: 1.0; }
header.wp-block-neilkelly-site-header .nk-mm-why-link-sub { 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-black) 50%, transparent); line-height: 1.25; }
header.wp-block-neilkelly-site-header .nk-mm-why-link .nk-mm-arrow { color: var(--wp--preset--color--brand-red); }
header.wp-block-neilkelly-site-header .nk-megamenu a.nk-mm-why-link:hover { background-color: var(--wp--preset--color--surface-subtle); color: var(--wp--preset--color--brand-red); }
header.wp-block-neilkelly-site-header .nk-mm-why-link:hover .nk-mm-why-link-title { color: var(--wp--preset--color--brand-red); }

/* WP override responsive */
@media (max-width: 1440px) {
	header.wp-block-neilkelly-site-header .nk-megamenu { padding: 0; padding-inline: min(var(--wp--custom--components--site-header--cta-to-edge), 5vw); }
}

/* Why NK sits further in than the other panels — view.js pins its left edge to the
   right edge of the Projects item and clamps it against the inner right edge — so on a
   narrow desktop it crowds that edge. Nudged back toward the leading side below 1200.

   A negative inline-start margin rather than `left`: the left is an inline style
   written by positionMegamenu() from a measurement, and any CSS left would simply lose
   to it. Margin shifts the box without touching that, and the panel keeps its width
   because view.js sets an explicit width too. */
@media (max-width: 1199px) {
	header.wp-block-neilkelly-site-header .nk-megamenu--why-nk { margin-inline-start: var(--wp--custom--components--site-header--megamenu-why-offset-sm); }
}

@media (max-width: 1023px) {
	header.wp-block-neilkelly-site-header .nk-megamenu { display: none; }
	header.wp-block-neilkelly-site-header .nk-megamenu.is-open { display: none; }
}