/* UWebbz Technology - Header (global chrome). See brand guidelines ch. 09. */

/* Header ------------------------------------------------------------------ */
/* The template-part wrapper is the sticky element: the inner group is the same
   height as its parent, so sticky on the group itself can never engage. The
   negative offset lets the utility strip scroll away while the main bar stays. */
header.wp-block-template-part {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - 36px);
	z-index: 999;
}

header.wp-block-template-part + * {
	margin-block-start: 0 !important;
}

.uw-site-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: box-shadow 0.25s ease;
}

/* Background lives on a pseudo-element: backdrop-filter on an ancestor of the
   nav would make it the containing block for the fixed mobile overlay menu. */
.uw-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}

.uw-site-header.is-scrolled {
	box-shadow: 0 10px 30px -18px rgba(16, 26, 43, 0.35);
}

.uw-site-header > *,
.uw-header-grid > * {
	margin-block: 0 !important;
}

/* Utility strip */
.uw-utility-bar {
	height: 36px;
	display: flex;
	align-items: center;
	padding-inline: 1.5rem;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 0.78rem;
	color: var(--wp--preset--color--gray);
}

.uw-utility-bar > .uw-utility-inner {
	width: 100%;
	gap: 1.5rem;
}

.uw-utility-bar p {
	margin: 0;
	font-size: inherit;
	white-space: nowrap;
}

.uw-utility-bar a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.15s ease;
}

.uw-utility-bar a:hover {
	color: var(--wp--preset--color--primary);
}

.uw-utility-note {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.uw-utility-sep {
	color: var(--wp--preset--color--border);
}

.uw-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
	animation: uw-live 2.6s ease-out infinite;
	flex-shrink: 0;
}

@keyframes uw-live {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
	70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.uw-utility-right {
	gap: 1.25rem;
}

.uw-utility-links {
	display: flex;
	gap: 0.6rem;
	align-items: center;
}

.uw-utility-links span {
	color: var(--wp--preset--color--border);
}

/* Main row */
.uw-header-row {
	padding: 0.7rem 1.5rem;
}

.uw-header-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
}

.uw-brand {
	gap: 0.85rem;
}

.uw-site-header .custom-logo-link {
	display: inline-block;
	transition: opacity 0.15s ease;
}

.uw-site-header .custom-logo-link:hover {
	opacity: 0.75;
}

.uw-site-header .custom-logo-link img,
.uw-site-header .wp-block-site-logo img {
	max-height: 34px;
	width: auto;
}

.uw-brand-tagline {
	margin: 0;
	padding-left: 0.85rem;
	border-left: 1px solid var(--wp--preset--color--border);
	font-size: 0.68rem;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray);
}

/* Nav pill + sliding indicator */
.uw-nav-pill {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.2rem;
}

.uw-nav-pill .wp-block-navigation {
	position: relative;
	z-index: 1;
	--wp--custom--nav-link-color: var(--wp--preset--color--contrast);
}

.uw-nav-pill .wp-block-navigation__container {
	gap: 0.1rem !important;
}

.uw-nav-pill .wp-block-navigation__container > .wp-block-navigation-item {
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.uw-nav-pill .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	padding: 0.42rem 0.85rem;
	transition: color 0.2s ease;
}

.uw-nav-pill .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
	padding-right: 0.2rem;
}

.uw-nav-pill .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	margin: 0 0.7rem 0 0.15rem;
	transition: transform 0.2s ease, color 0.2s ease;
}

.uw-nav-pill .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-icon,
.uw-nav-pill .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* No-JS fallback: instant pill on hover / current page. */
.uw-nav-pill:not(.uw-has-indicator) .wp-block-navigation__container > .wp-block-navigation-item:hover {
	background: var(--wp--preset--color--base);
}

.uw-nav-pill:not(.uw-has-indicator) .wp-block-navigation__container > .wp-block-navigation-item.is-current {
	background: var(--wp--preset--color--contrast);
}

.uw-nav-pill .wp-block-navigation__container > .wp-block-navigation-item.is-indicated > .wp-block-navigation-item__content,
.uw-nav-pill .wp-block-navigation__container > .wp-block-navigation-item.is-indicated > .wp-block-navigation__submenu-icon,
.uw-nav-pill:not(.uw-has-indicator) .wp-block-navigation__container > .wp-block-navigation-item.is-current > * {
	color: var(--wp--preset--color--base) !important;
}

.uw-nav-indicator {
	position: absolute;
	top: 0.2rem;
	left: 0;
	height: calc(100% - 0.4rem);
	width: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	box-shadow: 0 2px 8px -2px rgba(16, 26, 43, 0.35);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	transition: transform 0.34s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.34s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.2s ease;
}

/* Services dropdown card (desktop only) */
@media (min-width: 1024px) {
	.uw-nav-pill .wp-block-navigation .wp-block-navigation__submenu-container {
		top: calc(100% + 0.7rem);
		left: 50%;
		min-width: 300px !important;
		padding: 0.5rem !important;
		border: 1px solid var(--wp--preset--color--border) !important;
		border-radius: 16px;
		background: var(--wp--preset--color--base) !important;
		box-shadow: 0 24px 48px -20px rgba(16, 26, 43, 0.3);
		transform: translate(-50%, 6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}

	/* Invisible bridge so the pointer can cross the gap into the card. */
	.uw-nav-pill .wp-block-navigation .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -0.8rem;
		height: 0.8rem;
	}

	.uw-nav-pill .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.uw-nav-pill .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
		transform: translate(-50%, 0);
	}

	.uw-nav-pill .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		padding: 0.65rem 0.8rem !important;
		border-radius: 10px;
		font-size: 0.86rem;
		font-weight: 600;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		transition: background-color 0.15s ease;
	}

	.uw-nav-pill .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary);
	}

	.uw-nav-pill .wp-block-navigation .wp-block-navigation-item__description {
		display: block;
		font-size: 0.76rem;
		font-weight: 400;
		color: var(--wp--preset--color--gray);
	}

	.uw-nav-pill .uw-submenu-all {
		margin-top: 0.35rem;
		padding-top: 0.35rem;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.uw-nav-pill .uw-submenu-all .wp-block-navigation-item__content {
		flex-direction: row;
		align-items: center;
		gap: 0.35rem;
		color: var(--wp--preset--color--primary);
	}

	.uw-nav-pill .uw-submenu-all .wp-block-navigation-item__content::after {
		content: " \2192";
	}
}

/* CTA */
.uw-header-cta {
	justify-self: end;
}

.uw-header-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.58rem 1.15rem !important;
	font-size: 0.85rem !important;
	border-radius: 10px !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.uw-header-cta .wp-block-button__link::after {
	content: "\2192";
	transition: transform 0.18s ease;
}

.uw-header-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -10px rgba(9, 72, 178, 0.7);
}

.uw-header-cta .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* Tablet & below: hamburger, nav moves to the right of the CTA. */
@media (max-width: 1023px) {
	.uw-header-grid {
		grid-template-columns: 1fr auto auto;
	}

	.uw-nav-pill {
		order: 3;
		background: none;
		border: none;
		padding: 0;
	}

	.uw-nav-indicator {
		display: none;
	}

	.uw-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.uw-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

}

/* Overlay menu (tablet & mobile) */
.uw-site-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	padding: 1.25rem 1.75rem 2rem;
	text-align: left;
}

.uw-site-header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.25rem !important;
	align-items: flex-start !important;
}

.uw-site-header .is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: stretch !important;
	gap: 0 !important;
}

.uw-site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	align-items: flex-start !important;
	padding: 0.15rem 0;
	border-radius: 0;
	background: none !important;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.uw-site-header .is-menu-open .wp-block-navigation__submenu-container,
.uw-site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: flex-start !important;
	text-align: left;
	width: 100%;
}

.uw-site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.45rem !important;
	font-weight: 700 !important;
	padding: 0.6rem 0 !important;
	color: var(--wp--preset--color--contrast) !important;
}

.uw-site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.is-current > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
}

.uw-site-header .is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0.85rem 0.9rem !important;
	margin-left: 0.15rem;
	border-left: 2px solid var(--wp--preset--color--border) !important;
	gap: 0 !important;
}

.uw-site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.98rem !important;
	font-weight: 500 !important;
	padding: 0.32rem 0 !important;
	color: var(--wp--preset--color--gray) !important;
}

.uw-site-header .is-menu-open .wp-block-navigation-item__description {
	display: none;
}

@media (max-width: 1180px) {
	.uw-brand-tagline {
		display: none;
	}
}

@media (max-width: 781px) {
	.uw-utility-bar {
		display: none;
	}

	header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

@media (max-width: 600px) {
	header.wp-block-template-part {
		top: 0;
	}

	.uw-header-row {
		padding: 0.6rem 1rem;
	}

	.uw-header-cta .wp-block-button__link {
		padding: 0.5rem 0.9rem !important;
		font-size: 0.8rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.uw-live-dot {
		animation: none;
	}

	.uw-site-header,
	.uw-nav-indicator,
	.uw-header-cta .wp-block-button__link,
	.uw-header-cta .wp-block-button__link::after,
	.uw-nav-pill .wp-block-navigation__submenu-container,
	.uw-nav-pill .wp-block-navigation__submenu-icon {
		transition: none !important;
	}

	.uw-header-cta .wp-block-button__link:hover,
	.uw-header-cta .wp-block-button__link:hover::after {
		transform: none;
	}
}
