/* === Sticky Header ===
   WP applies `is-position-sticky` to the inner group, but its containing block
   (the <header> element) is exactly as tall as itself, so the inner sticky has
   zero travel room. Fix: make the outer <header> sticky instead. Containing
   block becomes .wp-site-blocks (tall), and sticky behaves correctly.
   Selector specificity: .wp-site-blocks > header.wp-block-template-part = (0,2,2) —
   beats anything WP block-library sets at (0,1,1). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Belt-and-suspenders: neutralize WP's inner sticky so we don't get nested
   sticky weirdness. Outer <header> handles the sticking. */
.wp-site-blocks > header.wp-block-template-part > .ns-header-main.is-position-sticky {
	position: relative;
	top: auto;
}

/* WP admin bar offset (only in admin-logged-in views) */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* === Header transitions === */
:root :where(.ns-header-main) {
	transition: padding 0.3s ease, box-shadow 0.3s ease;
}

:root :where(.ns-header-slogan, .ns-header-phone) {
	transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
	overflow: hidden;
	max-height: 2rem;
	margin: 0;
}

/* Specificity: must beat .wp-block-image img { height: auto } (0,1,1) from
   block-library's inline styles. Drop :where() and chain two classes. */
.ns-header-main .ns-header-logo img {
	transition: height 0.3s ease;
	height: 42px;
	width: auto;
	max-width: none;
	display: block;
}

/* Right column: align phone + nav to the right edge */
:root :where(.ns-header-right) {
	align-items: flex-end;
}

/* Left column hugs the left edge */
:root :where(.ns-header-left) {
	align-items: flex-start;
}

/* Phone link inherits color */
:root :where(.ns-header-phone a:hover) {
	color: var(--wp--preset--color--accent);
}

/* === Shrunk state (utility row collapses, logo + nav remain) === */
:root :where(.is-shrunk .ns-header-slogan, .is-shrunk .ns-header-phone) {
	max-height: 0;
	opacity: 0;
	margin: 0;
}

:root :where(.is-shrunk .ns-header-main) {
	box-shadow: var(--wp--custom--shadow--header);
}

.is-shrunk .ns-header-main .ns-header-logo img {
	height: 42px;
}

/* === Nav CTA Button === */
:root :where(.ns-nav-cta .wp-block-navigation-item__content) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--dark);
	padding: 0.5rem 1.25rem;
	border-radius: var(--wp--custom--border--radius-small);
	font-weight: 600;
	transition: background-color 0.2s ease;
}

:root :where(.ns-nav-cta .wp-block-navigation-item__content:hover) {
	background-color: var(--wp--preset--color--accent-dark);
}

/* === Submenu Alignment ===
   WP's right-justified nav (.items-justified-right) right-aligns submenus to
   their trigger, which makes the dropdown appear "to the left of" the word
   instead of "directly below" it. Override: drop from the trigger's LEFT edge. */
.ns-header-main .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,
.ns-header-main .wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container {
	left: 0;
	right: auto;
}

/* === Submenu (Services dropdown) — match header dark bg ===
   WP core declares `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { background-color: #fff }`
   at equal specificity (3 classes). To win deterministically (regardless of stylesheet load order),
   use !important. Border + color also pinned to the dark scheme so the dropdown reads as a
   continuation of the header rather than a separate panel. */
.ns-header-main .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--dark) !important;
	border: 1px solid var(--wp--preset--color--dark) !important;
	color: #ffffff !important;
}

.ns-header-main .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #ffffff !important;
}

.ns-header-main .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.ns-header-main .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent) !important;
	background: transparent !important;
}

/* === Kill block-gap between top-level wrappers and between sections ===
   theme.json declares `styles.spacing.blockGap: 1.5rem` which WP applies
   between every sibling pair via `.is-layout-flow > * + * { margin-block-start: ... }`.
   Three visual problems result:
   (1) <header> and <main> are siblings in .wp-site-blocks → 1.5rem white strip.
   (2) <main> and <footer> are siblings in .wp-site-blocks → 1.5rem white strip
       between the last section and the footer (especially visible when last
       section is colored, e.g. partners-strip Alice Blue → footer Indigo).
   (3) Inside <main>, each top-level section is a sibling of the next → 1.5rem
       white strip between sections, especially with different bg colors.
   All three fixed below. `:where(.wp-site-blocks > *)` covers cases (1) + (2);
   `:where(.wp-site-blocks > main > *)` covers case (3). Both target only DIRECT
   children — nested content inside sections retains its block-gap. Spaciousness
   preserved: each section's own padding provides breathing room within. */
:root :where(.wp-site-blocks > *),
:root :where(.wp-site-blocks > main > *) {
	margin-top: 0;
}

/* === Active Nav Indicator === */
:root :where(.wp-block-navigation-item.current-menu-item:not(.ns-nav-cta) .wp-block-navigation-item__content) {
	position: relative;
}

:root :where(.wp-block-navigation-item.current-menu-item:not(.ns-nav-cta) .wp-block-navigation-item__content)::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 3px;
	background-color: var(--wp--preset--color--accent);
	border-radius: 1px;
}

/* === Mobile Responsive === */
@media (max-width: 782px) {
	:root :where(.ns-header-slogan) {
		display: none;
	}

	:root :where(.ns-header-phone) {
		font-size: 1rem !important;
	}

	/* Force hamburger toggle visible at <=782px (WP default kicks in at 600px). */
	:root :where(.ns-header-main .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container-open:not(.always-shown)) {
		display: flex;
		color: var(--wp--preset--color--white);
	}

	/* Hide inline nav container so only the hamburger shows when overlay is closed. */
	:root :where(.ns-header-main .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open):not(.has-modal-open)) {
		display: none;
	}
}

@media (max-width: 480px) {
	/* At iPhone-SE-class widths the logo (246px) + phone + hamburger don't fit
	   in 375px. Shrink the logo and drop the phone from the header — phone
	   stays in the footer's Get-in-Touch column where it's already prominent. */
	.ns-header-main .ns-header-logo img {
		height: 30px;
	}

	:root :where(.ns-header-phone) {
		display: none;
	}
}

/* === Mobile overflow safety (heroes + buttons + cover content) === */
@media (max-width: 600px) {
	/* Hero / cover headlines wrap cleanly on narrow viewports. */
	:root :where(.wp-block-cover h1, .wp-block-cover h2) {
		overflow-wrap: break-word;
		hyphens: auto;
		max-width: 100%;
	}

	/* CTA button rows wrap so secondary CTAs don't clip at 375px. */
	:root :where(.wp-block-buttons) {
		flex-wrap: wrap;
	}

	:root :where(.wp-block-button > .wp-block-button__link) {
		max-width: 100%;
	}

	/* Cover horizontal padding tightens at narrow viewports. */
	:root :where(.wp-block-cover.alignfull) {
		padding-left: var(--wp--preset--spacing--30, 1rem);
		padding-right: var(--wp--preset--spacing--30, 1rem);
	}
}

/* Defensive: prevent any block from forcing horizontal overflow.
   Use `overflow-x: clip` (not `hidden`) — `hidden` makes html/body a scroll
   container, which breaks `position: sticky` on the header. `clip` just
   clips painting without creating a scroll container. */
html, body {
	overflow-x: clip;
}