/* ==========================================================================
   Site Header — Core (root vars, desktop header, hero overlay, sticky)
   Component CSS is split into:
     - style-announcement-bar.css
     - style-megamenu.css
     - style-mobile-nav.css
   All registered via block.json style array.
   ========================================================================== */

/* Component dimensions from Figma — not design tokens, but traceable */
.nk-site-header {
	--nk-announcement-height: var(--wp--custom--components--site-header--announcement-height);
	--nk-header-height: var(--wp--custom--layout--header--height);
	--nk-logo-width: var(--wp--custom--layout--header--logo-width);
	--nk-nav-gap: var(--wp--custom--components--site-header--nav-gap);
	--nk-nav-font-size: var(--wp--preset--font-size--base);
	--nk-nav-line-height: 1.0625; /* 17/16 from Figma */
	--nk-cta-padding-inline: var(--wp--preset--spacing--5);
	--nk-cta-font-size: var(--wp--preset--font-size--sm-md);
	--nk-chevron-width: 0.6875rem; /* 11px from Figma */
	--nk-chevron-height: 0.5rem; /* 8px from Figma */
	--nk-active-indicator-height: var(--wp--custom--layout--header--active-bar-height);
	--nk-hamburger-width: 1.5rem; /* 24px */
	--nk-hamburger-gap: 0.3125rem; /* 5px */
	--nk-hamburger-stroke: 0.125rem; /* 2px */
	--nk-mobile-drawer-width: var(--wp--custom--components--site-header--mobile-drawer-width);
	--nk-header-top-pad: 2.0625rem; /* 33px from Figma — space above nav content */
	--nk-megamenu-gap: var(--wp--preset--spacing--4); /* 16px from Figma — button bottom to megamenu top */
	--nk-megamenu-offset: calc(var(--nk-announcement-height) + var(--nk-header-top-pad) + var(--nk-header-height));
	--nk-underline-offset: 0.125rem; /* 2px */
	--nk-megamenu-translate: -0.5rem; /* -8px enter animation */
	--nk-mobile-logo-width: var(--wp--custom--components--site-header--mobile-logo-width);
	/* Component-specific fixed dimensions (not spacing tokens) */
	--nk-megamenu-panel-resources-width: var(--wp--custom--components--site-header--megamenu-panel-resources-width);
	--nk-megamenu-panel-why-nk-width: var(--wp--custom--components--site-header--megamenu-panel-why-nk-width);
	--nk-megamenu-panel-why-nk-height: var(--wp--custom--components--site-header--megamenu-panel-why-nk-height);
	--nk-megamenu-panel-resources-height: var(--wp--custom--components--site-header--megamenu-panel-resources-height);
	--nk-megamenu-panel-max-width: var(--wp--custom--components--site-header--megamenu-panel-max-width);
	--nk-megamenu-panel-projects-height: var(--wp--custom--components--site-header--megamenu-panel-projects-height);
	--nk-megamenu-panel-locations-height: var(--wp--custom--components--site-header--megamenu-panel-locations-height);
	--nk-megamenu-res-cta-width: var(--wp--custom--components--site-header--megamenu-res-cta-width);
	--nk-megamenu-res-col-width: var(--wp--custom--components--site-header--megamenu-res-col-width);
	--nk-megamenu-why-dark-width: var(--wp--custom--components--site-header--megamenu-why-dark-width);
	--nk-megamenu-why-side-width: var(--wp--custom--components--site-header--megamenu-why-side-width);
	--nk-megamenu-desc-col-width: var(--wp--custom--components--site-header--megamenu-desc-col-width);
	/* Repeated component dimensions */
	--nk-thumb-width: var(--wp--custom--components--site-header--thumb-width);
	--nk-thumb-height: var(--wp--custom--components--site-header--thumb-height);
	--nk-card-img-height: var(--wp--custom--components--site-header--card-img-height);
	--nk-card-img-sm-height: var(--wp--custom--components--site-header--card-img-sm-height);
	--nk-card-img-lg-height: var(--wp--custom--components--site-header--card-img-lg-height);
	--nk-city-img-height: var(--wp--custom--components--site-header--city-img-height);
	--nk-city-header-height: var(--wp--custom--components--site-header--city-header-height);
	/* The mobile drawer CTA cards ARE the mega-menu Resources CTA card at drawer width
	   (322px drawer - 16px gutters = 290px card, against 265px on desktop), so they read
	   the same height tokens rather than carrying a second, drifting pair.

	   Only the IMAGE BAND stays coupled, though: retune megamenu-res-img-height and both
	   surfaces move together. The FLOOR does not — the drawer override below wins at
	   every width the drawer can open at, so the 402px on the next line never renders
	   there. It stays as the value the drawer's own floor is set against. */
	--nk-cta-card-min-height: var(--wp--custom--components--site-header--megamenu-res-cta-height);
	--nk-cta-card-img-height: var(--wp--custom--components--site-header--megamenu-res-img-height);
	/* The drawer's real floor, 300px against the 402px above. Applied at <=1023px, which
	   is the drawer's whole range and not just phone: .nk-header__mobile-toggle is
	   display: none until that same breakpoint (below in this file), so the drawer cannot
	   be open above it. The -mobile suffix names the surface, not a 767px cutoff. */
	--nk-cta-card-min-height-mobile: var(--wp--custom--components--site-header--cta-card-min-height-mobile);
	--nk-megamenu-right-offset: var(--wp--custom--components--site-header--megamenu-right-offset);
	--nk-megamenu-why-side-left: var(--wp--custom--components--site-header--megamenu-why-side-left);
	--nk-megamenu-res-cta-height: var(--wp--custom--components--site-header--megamenu-res-cta-height);
	--nk-megamenu-res-img-height: var(--wp--custom--components--site-header--megamenu-res-img-height);
	--nk-megamenu-divider-height: var(--wp--custom--components--site-header--megamenu-divider-height);
	--nk-megamenu-why-dark-height: var(--wp--custom--components--site-header--megamenu-why-dark-height);
	--nk-megamenu-why-img-width: var(--wp--custom--components--site-header--megamenu-why-img-width);
	--nk-megamenu-why-img-height: var(--wp--custom--components--site-header--megamenu-why-img-height);
	--nk-megamenu-why-links-top: var(--wp--custom--components--site-header--megamenu-why-links-top);
	--nk-megamenu-why-links-width: var(--wp--custom--components--site-header--megamenu-why-links-width);
	--nk-megamenu-res-desc-width: var(--wp--custom--components--site-header--megamenu-res-desc-width);
	--nk-megamenu-res-desc-height: var(--wp--custom--components--site-header--megamenu-res-desc-height);
	--nk-svc-link-height: var(--wp--custom--components--site-header--svc-link-height);
	--nk-svc-card-height: var(--wp--custom--components--site-header--svc-card-height);
	--nk-pill-height: var(--wp--custom--components--site-header--pill-height);
	--nk-heading-row-height: var(--wp--custom--components--site-header--heading-row-height);
	--nk-mm-btn-height: var(--wp--custom--components--site-header--mm-btn-height);
	--nk-small-btn-height: var(--wp--custom--components--site-header--small-btn-height);
	/* Megamenu column positions */
	--nk-res-divider-1: var(--wp--custom--components--site-header--res-divider-1);
	--nk-res-divider-2: var(--wp--custom--components--site-header--res-divider-2);
	--nk-res-divider-3: var(--wp--custom--components--site-header--res-divider-3);
	--nk-res-col-1: var(--wp--custom--components--site-header--res-col-1);
	--nk-res-col-2: var(--wp--custom--components--site-header--res-col-2);
	--nk-res-col-3: var(--wp--custom--components--site-header--res-col-3);
	--nk-res-col-4: var(--wp--custom--components--site-header--res-col-4);
}

/* Person profiles run a tighter nav band than the standard 33px, to sit closer to the
   profile hero's design (Figma 1149:410). Scoped to the single-person body class; every
   other template keeps the full pad.
   Set on the VAR, so everything derived from it follows — .nk-header's padding-top AND
   --nk-megamenu-offset, which keeps the megamenus dropping from the header's real
   bottom edge rather than below it.
   The value is the shared components.person.hero-nav-pad token, which
   blocks/person-hero also reads to size its dark strip: one number, so the strip can't
   drift out of step with the header and leave a sliver under the nav. Retune it in
   theme.json, not here. */
.single-person .nk-site-header {
	--nk-header-top-pad: var(--wp--custom--components--person--hero-nav-pad);
}

/* ---------- Desktop Header ---------- */
.nk-header {
	position: relative;
	z-index: 100;
	height: var(--nk-header-height);
	background-color: var(--wp--preset--color--brand-white);
}

.nk-site-header .nk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

.nk-site-header .nk-header__logo { order: 0; }
.nk-site-header .nk-header__nav { order: 1; }
.nk-site-header .nk-header__actions { order: 2; }

/* Logo */
.nk-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.nk-header__logo-img {
	width: var(--nk-logo-width);
	max-width: var(--nk-logo-width);
	height: var(--nk-header-height);
	max-height: var(--nk-header-height);
	object-fit: contain;
	display: block;
}

.nk-header__logo-text {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--preset--color--ink-primary);
}

/* Boxed logo shows only in the sticky state (Figma node 577:1475).
   Specificity must beat the base `header.wp-block-… .nk-header__logo-img`
   rule (0,2,1) further down, which otherwise forces display:block. */
header.wp-block-neilkelly-site-header .nk-header__logo-img.nk-header__logo-img--sticky { display: none; }

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__logo-img:not(.nk-header__logo-img--sticky) {
	display: none;
}

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__logo-img--sticky {
	display: block;
	width: var(--nk-logo-width);
	max-width: var(--nk-logo-width);
	height: auto;
	max-height: var(--nk-header-height);
	object-fit: contain;
}

/* Project Finder shows the boxed (red) logo in the resting (non-sticky) header
   too, not only when stuck. Only the display swap is needed here — width/height
   fall through to the shared .nk-header__logo-img rules, so responsive sizing
   (incl. the mobile logo width) still applies. Specificity beats the base
   "hide boxed logo" rule above; this rule comes later in source order. */
header.wp-block-neilkelly-site-header[data-nk-boxed-logo] .nk-header__logo-img:not(.nk-header__logo-img--sticky) {
	display: none;
}

header.wp-block-neilkelly-site-header[data-nk-boxed-logo] .nk-header__logo-img--sticky {
	display: block;
}

/* Nav Items */
.nk-site-header .nk-header__nav {
	display: flex;
	align-items: center;
	gap: var(--nk-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nk-header__nav-item {
	position: relative;
}

.nk-header__nav-link {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--components--site-header--nav-link-arrow-gap);
	color: var(--wp--preset--color--ink-primary);
	font-size: var(--nk-nav-font-size);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--nk-nav-line-height);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	text-decoration: none;
	padding-block: var(--wp--preset--spacing--6);
	white-space: nowrap;
}

.nk-header__nav-link:hover {
	color: var(--wp--preset--color--ink-primary);
	opacity: 0.8;
}

.nk-header__chevron {
	width: var(--nk-chevron-width);
	height: var(--nk-chevron-height);
	transition: transform 200ms ease;
}

.nk-header__nav-link[aria-expanded="true"] .nk-header__chevron {
	transform: rotate(180deg);
}

/* Active indicator — red bar at bottom of header, hover only */
.nk-header__active-indicator {
	display: none;
}
.nk-header__nav-link {
	position: relative;
}
.nk-header__nav-link::after {
	content: "";
	position: absolute;
	bottom: calc(-1 * var(--wp--preset--spacing--2));
	left: 0;
	width: 100%;
	height: var(--nk-active-indicator-height);
	background-color: var(--wp--preset--color--brand-red);
	border-radius: var(--wp--custom--radius--xs) var(--wp--custom--radius--xs) 0 0;
	opacity: 0;
	transition: opacity 200ms ease;
}
.nk-header__nav-item:hover .nk-header__nav-link::after {
	opacity: 1;
}
.nk-header__nav-item.is-active .nk-header__nav-link::after,
.nk-header__nav-link[aria-expanded="true"]::after {
	opacity: 1;
}

/* Actions */
.nk-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	flex-shrink: 0;
}

.nk-header__phone {
	color: var(--wp--preset--color--ink-primary);
	display: flex;
	align-items: center;
}

.nk-header__phone:hover {
	opacity: 0.8;
}

.nk-header__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Height matches nk-cta-split__btn--primary (56px — the design-system CTA button
	   height). border-box so the 1px border is absorbed, not added on top. */
	box-sizing: border-box;
	height: var(--wp--custom--layout--header--cta-height);
	padding-inline: var(--nk-cta-padding-inline);
	background-color: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--brand-black);
	border: 1px solid var(--wp--preset--color--neutral-200);
	font-size: var(--wp--preset--font-size--base);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1.25;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--wp--custom--radius--default);
}

/* Prefixed to beat the higher-specificity inline rest rule below
   (header.wp-block-neilkelly-site-header .nk-header__cta) so the hover applies.
   NOTE: this inverts white → black rather than settling to neutral-100 as the
   CLAUDE.md CTA hover rule describes. Deliberate for the header CTA — the inversion is
   a far stronger affordance on the white bar, where a neutral-100 fill is only ~1.1:1
   against it. On transparent hero headers the black fill is given a white border
   instead of an edge-less black one (see the :not(.is-sticky) rule below). Don't
   "correct" this to neutral-100 without checking the white-bar hover first. */
header.wp-block-neilkelly-site-header .nk-header__cta:hover {
	background-color: var(--wp--preset--color--brand-black);
	color: var(--wp--preset--color--brand-white);
	border-color: var(--wp--preset--color--brand-black);
}

/* Mobile toggle — hidden on desktop */
.nk-header__mobile-toggle {
	display: none;
	background: none;
	border: none;
	padding: var(--wp--preset--spacing--2);
	cursor: pointer;
	color: var(--wp--preset--color--ink-primary);
}

.nk-header__hamburger {
	display: flex;
	flex-direction: column;
	gap: var(--nk-hamburger-gap);
	width: var(--nk-hamburger-width);
}

.nk-header__hamburger span {
	display: block;
	height: var(--nk-hamburger-stroke);
	background-color: currentColor;
	border-radius: var(--wp--custom--radius--full);
	transition: transform 200ms ease, opacity 200ms ease;
}

/* ---------- Hero overlay variant ---------- */
/* Add data-nk-hero to the header when it overlays a dark hero image */
.nk-site-header[data-nk-hero] .nk-header {
	background-color: transparent;
}

.nk-site-header[data-nk-hero] .nk-header__nav-link {
	color: var(--wp--preset--color--brand-white);
}

.nk-site-header[data-nk-hero] .nk-header__nav-link:hover {
	color: var(--wp--preset--color--brand-white);
}

.nk-site-header[data-nk-hero] .nk-header__logo-text {
	color: var(--wp--preset--color--brand-white);
}

.nk-site-header[data-nk-hero] .nk-header__phone {
	color: var(--wp--preset--color--brand-white);
}

.nk-site-header[data-nk-hero] .nk-header__cta {
	background-color: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--brand-black);
}

.nk-site-header[data-nk-hero] .nk-header__cta:hover {
	background-color: var(--wp--preset--color--brand-black);
	color: var(--wp--preset--color--brand-white);
	border-color: var(--wp--preset--color--brand-black);
}

/* PERSON PROFILES ONLY, transparent header, NOT sticky: the hover fill above goes
   black, and on these pages it sits over the profile hero's dark strip — so a black
   border would leave the button with no visible edge (black on #111111 is 1:1). Take
   the border white instead to keep its shape readable — 18.88:1 against the strip.
   Only the colour changes (the rest state already carries a 1px border), so the button
   does not resize.
   Deliberately NOT applied to the other hero templates: they keep the black border.
   Excluded when sticky, where the bar is white and the sticky rules' black border is
   the one that reads. [data-nk-hero] is kept alongside .single-person so the rule
   lapses by itself if profiles ever stop using the transparent header. */
.single-person header.wp-block-neilkelly-site-header[data-nk-hero]:not(.is-sticky) .nk-header__cta:hover,
.single-person header.wp-block-neilkelly-site-header[data-nk-hero]:not(.is-sticky) .nk-header__cta:focus-visible {
	border-color: var(--wp--preset--color--brand-white);
}

.nk-site-header[data-nk-hero] .nk-header__mobile-toggle {
	color: var(--wp--preset--color--brand-white);
}

/* ---------- Sticky behavior ---------- */
.nk-site-header.is-sticky .nk-announcement-bar {
	display: none;
}

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-block: var(--wp--preset--spacing--6);
	background-color: var(--wp--preset--color--brand-white);
	box-shadow: var(--wp--custom--shadow--elev-2);
	z-index: 100;
}

/* Logged-in admin bar: on desktop it is position:fixed and stays at the top, so
   the sticky (fixed) header must drop below it (32px = WP desktop admin-bar
   height). On mobile (<=782px) WP's admin bar is position:absolute and scrolls
   away, so the sticky header sits flush at 0. .admin-bar keeps specificity above
   the base sticky rule. */
.admin-bar header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header {
		top: 0;
	}
}

/* High-specificity prefix (matches the sticky background rule above) so these
   beat the [data-nk-hero] overlay rules, which persist while the header is
   sticky on hero pages. */
header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__nav-link {
	color: var(--wp--preset--color--brand-black);
}

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__nav-link svg { stroke: var(--wp--preset--color--brand-black); }

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__logo-text {
	color: var(--wp--preset--color--brand-black);
}

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__phone {
	color: var(--wp--preset--color--brand-black);
}

/* Path carries fill="currentColor", so override the path fill directly to
   recolor only the icon (the number text keeps the link's color). */
header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__phone svg path { fill: var(--wp--preset--color--brand-red); }

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__cta {
	background-color: var(--wp--preset--color--brand-black);
	color: var(--wp--preset--color--brand-white);
	/* 1px border in both states (invisible against the fill) so the hover
	   border doesn't change the button's size. */
	border: 1px solid var(--wp--preset--color--brand-black);
}

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__cta:hover {
	background-color: var(--wp--preset--color--brand-white);
	color: var(--wp--preset--color--brand-black);
	border: 1px solid var(--wp--preset--color--brand-black);
}

header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header__mobile-toggle {
	color: var(--wp--preset--color--brand-black);
}

/* Spacer to prevent content jump when sticky */
.nk-site-header__spacer {
	display: none;
}
.nk-site-header.is-sticky + .nk-site-header__spacer {
	display: block;
	height: var(--nk-megamenu-offset);
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.nk-site-header .nk-header__inner {
		display: flex;
		justify-content: space-between;
	}

	.nk-site-header .nk-header__nav,
	.nk-site-header .nk-header__phone {
		display: none;
	}

	.nk-site-header .nk-header__cta,
	.nk-site-header .nk-header__actions {
		display: none;
	}

	.nk-site-header .nk-header__mobile-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
	}
}

@media (max-width: 767px) {
	.nk-header__inner {
		padding-inline: var(--wp--preset--spacing--4);
	}

	.nk-header__logo-img {
		width: var(--nk-mobile-logo-width);
		height: auto;
	}
}

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

/* --- Reset --- */
header.wp-block-neilkelly-site-header.nk-site-header { display: block; position: relative; width: 100%; max-width: 100%; padding: 0; margin: 0; margin-left: 0; margin-right: 0; font-family: 'Inter', sans-serif; }
header.wp-block-neilkelly-site-header.nk-site-header * { box-sizing: border-box; }
header.wp-block-neilkelly-site-header ul,
header.wp-block-neilkelly-site-header ol { list-style: none; margin: 0; padding: 0; }
header.wp-block-neilkelly-site-header a { text-decoration: none; color: inherit; }

/* --- Header Bar --- */
header.wp-block-neilkelly-site-header .nk-header { position: relative; z-index: 100; height: auto; width: 100%; background: var(--wp--preset--color--brand-white); padding-top: var(--nk-header-top-pad); margin: 0; }
header.wp-block-neilkelly-site-header .nk-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--wp--custom--layout--header--height); width: 100%; max-width: var(--wp--custom--layout--max-width); margin: 0 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-header__left { display: flex; align-items: center; gap: var(--wp--custom--components--site-header--logo-to-nav); }
header.wp-block-neilkelly-site-header .nk-header__logo { display: flex; align-items: center; height: var(--wp--custom--layout--header--height); flex-shrink: 0; }
header.wp-block-neilkelly-site-header .nk-header__logo-img { width: var(--wp--custom--layout--header--logo-width); height: auto; object-fit: contain; display: block; }
header.wp-block-neilkelly-site-header .nk-header__logo-text { font-size: var(--wp--preset--font-size--lg); font-weight: var(--wp--custom--font-weight--bold); color: var(--wp--preset--color--brand-black); white-space: nowrap; }
header.wp-block-neilkelly-site-header .nk-header__nav { display: flex; align-items: center; gap: var(--nk-nav-gap); list-style: none; margin: 0; padding: 0; }
header.wp-block-neilkelly-site-header .nk-header__nav-item { position: relative; display: flex; align-items: center; }
header.wp-block-neilkelly-site-header .nk-header__nav-link { position: relative; display: flex; align-items: center; gap: var(--wp--custom--components--site-header--nav-link-arrow-gap); color: var(--wp--preset--color--brand-black); font-size: var(--wp--preset--font-size--base); font-weight: var(--wp--custom--font-weight--medium); letter-spacing: var(--wp--custom--letter-spacing--tight); line-height: 1.0625; white-space: nowrap; font-family: 'Inter', sans-serif; padding: 0; text-decoration: none; }
header.wp-block-neilkelly-site-header .nk-header__nav-link::after { content: ""; position: absolute; bottom: calc(-1 * var(--wp--preset--spacing--2)); left: 0; width: 100%; height: var(--wp--custom--layout--header--active-bar-height); background: var(--wp--preset--color--brand-red); border-radius: 0; opacity: 0; transition: opacity 200ms ease; }
header.wp-block-neilkelly-site-header .nk-header__nav-item:hover .nk-header__nav-link::after,
header.wp-block-neilkelly-site-header .nk-header__nav-item.is-active .nk-header__nav-link::after,
header.wp-block-neilkelly-site-header .nk-header__nav-link[aria-expanded="true"]::after { opacity: 1; }
header.wp-block-neilkelly-site-header .nk-header__actions { display: flex; align-items: center; gap: var(--wp--custom--components--site-header--phone-to-cta); flex-shrink: 0; }
header.wp-block-neilkelly-site-header .nk-header__phone { color: var(--wp--preset--color--brand-black); display: flex; align-items: center; }
header.wp-block-neilkelly-site-header .nk-header__cta { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--wp--custom--layout--header--cta-width); height: var(--wp--custom--layout--header--cta-height); padding: 0 var(--wp--preset--spacing--5); background: var(--wp--preset--color--brand-white); color: var(--wp--preset--color--brand-black); border: 1px solid var(--wp--preset--color--neutral-200); font-family: 'Inter', sans-serif; font-size: var(--wp--preset--font-size--base); font-weight: var(--wp--custom--font-weight--regular); letter-spacing: var(--wp--custom--letter-spacing--tight); line-height: 1.25; white-space: nowrap; border-radius: var(--wp--custom--radius--default); }
header.wp-block-neilkelly-site-header .nk-header__mobile-toggle { display: none; }
header.wp-block-neilkelly-site-header .nk-header__hamburger { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--1-5); width: var(--wp--preset--spacing--6); }
header.wp-block-neilkelly-site-header .nk-header__hamburger span { display: block; height: 2px; background: currentColor; border-radius: 2px; }

/* --- Responsive: <=1440px --- */
@media (max-width: 1440px) {
	header.wp-block-neilkelly-site-header .nk-header__inner { padding: 0; padding-inline: min(var(--wp--custom--components--site-header--cta-to-edge), 5vw); }
	header.wp-block-neilkelly-site-header .nk-header__left { flex: 1; min-width: 0; gap: 0; }
	header.wp-block-neilkelly-site-header .nk-header__nav { flex: 1; justify-content: space-evenly; gap: 0; }
}

/* --- Responsive: tablet <=1023px --- */
@media (max-width: 1023px) {
	header.wp-block-neilkelly-site-header .nk-header__inner { display: flex; justify-content: space-between; padding: 0 var(--wp--preset--spacing--6); padding-inline: var(--wp--preset--spacing--6); }
	header.wp-block-neilkelly-site-header .nk-header__nav { display: none; }
	header.wp-block-neilkelly-site-header .nk-header__phone { display: none; }
	header.wp-block-neilkelly-site-header .nk-header__cta { display: none; }
	header.wp-block-neilkelly-site-header .nk-header__actions { display: none; }
	header.wp-block-neilkelly-site-header .nk-header__mobile-toggle { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: var(--wp--preset--spacing--2); cursor: pointer; margin-left: auto; }
	header.wp-block-neilkelly-site-header .nk-header__hamburger { width: var(--wp--custom--components--site-header--hamburger-tablet-width); gap: var(--wp--preset--spacing--1-5); }
	header.wp-block-neilkelly-site-header .nk-header__hamburger span { height: var(--wp--custom--components--site-header--hamburger-tablet-stroke); }
}

/* --- Responsive: mobile <=767px --- */
@media (max-width: 767px) {
	header.wp-block-neilkelly-site-header .nk-header { padding: 0 var(--wp--preset--spacing--4); padding-top: 0; }
	header.wp-block-neilkelly-site-header.nk-site-header.is-sticky .nk-header { padding-block: 0; }
	header.wp-block-neilkelly-site-header .nk-header__inner { padding-inline: var(--wp--preset--spacing--1-5); }
	header.wp-block-neilkelly-site-header .nk-header__logo-img { width: var(--nk-mobile-logo-width); height: auto; }
}

/* --- Hero overlay --- */
header.wp-block-neilkelly-site-header[data-nk-hero] { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 100; background: transparent; }
/* Logged-in users get WordPress's admin bar, which adds html{margin-top} and
   pushes the (in-flow) hero down while this absolute header stays anchored to the
   viewport — misaligning the header over the hero. Offset it by the admin bar's
   height so guest and logged-in views match. 32px / 46px are WP's fixed admin-bar
   heights (desktop / <=782px), not theme design tokens. */
.admin-bar header.wp-block-neilkelly-site-header[data-nk-hero] { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar header.wp-block-neilkelly-site-header[data-nk-hero] { top: 46px; }
}
header.wp-block-neilkelly-site-header[data-nk-hero] .nk-header { background: transparent; }
header.wp-block-neilkelly-site-header[data-nk-hero] .nk-header__nav-link { color: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header[data-nk-hero] .nk-header__nav-link svg { stroke: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header[data-nk-hero] .nk-header__logo-text { color: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header[data-nk-hero] .nk-header__phone { color: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header[data-nk-hero] .nk-header__phone svg { fill: var(--wp--preset--color--brand-white); }
header.wp-block-neilkelly-site-header[data-nk-hero] .nk-header__cta { background: var(--wp--preset--color--brand-white); color: var(--wp--preset--color--brand-black); }
header.wp-block-neilkelly-site-header[data-nk-hero] .nk-header__mobile-toggle { color: var(--wp--preset--color--brand-white); }