/**
 * Shared site-header behavior that Elementor cannot coordinate across the
 * Header and Popup Theme Builder documents.
 */

/* Temporary Phase 2 hold: keep native WordPress menu records intact while
 * suppressing story-directory entries. Remove this block to restore them. */
body.cet-shared-header [data-elementor-id="228"] [data-id="cet-menu-wordpress-work"] .menu-item-2059,
body.cet-shared-header [data-elementor-id="209"] [data-id="cet-footer-wordpress-menu"] .menu-item-2800 {
	display: none;
}

/* Keep the header's viewport width unchanged when a popup locks page scroll. */
html:has(body.cet-shared-header) {
	scrollbar-gutter: stable;
}

/* Prevent accidental selection and drag ghosts on navigation chrome only.
 * Keep menu copy selectable and preserve the existing keyboard focus styles. */
body.cet-shared-header :is(
	[data-interaction-id="cet-header-logo"],
	[data-interaction-id="cet-menu-logo"],
	[data-interaction-id="cet-header-menu-control"],
	[data-interaction-id="cet-menu-close-control"]
),
body.cet-shared-header :is(
	[data-interaction-id="cet-header-logo"],
	[data-interaction-id="cet-menu-logo"],
	[data-interaction-id="cet-header-menu-control"],
	[data-interaction-id="cet-menu-close-control"]
) * {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Atomic text links have an inner anchor, outside the widget's state
 * color control. Keep these two inverse navigation regions readable without
 * changing the Site Settings hover color used on light page backgrounds. */
body.cet-shared-header [data-interaction-id="cet-header-utility"] .e-paragraph-link-base:is(:hover, :focus-visible, :active),
body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] :is(.e-paragraph-link-base, .e-heading-link-base):is(:hover, :focus-visible, :active),
body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] .elementor-nav-menu--main.e--pointer-none .elementor-item:is(:hover, :focus-visible) {
	color: #01baef;
}

/* Underline text, including each wrapped line, rather than the menu item box. */
body.cet-shared-header [data-interaction-id="cet-header-utility"] .e-paragraph-link-base:is(:hover, :focus-visible, :active),
body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] .e-paragraph-link-base:is(:hover, :focus-visible, :active),
body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] .elementor-nav-menu--main.e--pointer-none .elementor-item:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Keep an expanded flyout above adjacent menu columns. SmartMenus gives
 * each column the same stacking level, which otherwise intercepts clicks. */
body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] .elementor-nav-menu--main > .elementor-nav-menu:has(.elementor-item[aria-expanded="true"]) {
	z-index: 4;
}

/* Services hierarchy stays visible inside its column at every breakpoint.
 * Override the widget's flyout geometry while retaining native menu content. */
body.cet-shared-header [data-id="cet-menu-wordpress-services"] .elementor-nav-menu--main .sub-arrow {
	display: none;
}

body.cet-shared-header [data-id="cet-menu-wordpress-services"] .elementor-nav-menu--main .sub-menu {
	display: block !important;
	position: static !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding-inline-start: 16px;
	padding-block-start: 8px;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Match main-link spacing before JavaScript adds the main-link class.
 * Restrict transitions so popup initialization cannot animate text geometry. */
body.cet-shared-header [data-id="cet-menu-wordpress-services"] .elementor-nav-menu--main .elementor-nav-menu .elementor-sub-item {
	text-transform: uppercase;
	white-space: normal;
	padding-inline: 0;
	text-decoration: none;
	background: transparent;
	line-height: 1.25;
	transition-property: color, background-color;
}

@media (max-width: 767px) {
	/* Preserve the native Services menu's mobile line-height. */
	body.cet-shared-header [data-id="cet-menu-wordpress-services"] .elementor-nav-menu--main .elementor-nav-menu .elementor-sub-item {
		line-height: 1.3;
	}
}

body.cet-shared-header [data-id="cet-menu-wordpress-services"] .elementor-sub-item:is(:hover, :focus-visible) {
	color: #01baef;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Hub headings already have a native divider beneath them. */
body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] .e-heading-link-base:is(:hover, :focus-visible, :active) {
	text-decoration: none;
}

body.cet-shared-header [data-interaction-id="cet-header-utility"] .e-paragraph-link-base:focus-visible,
body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] :is(.e-paragraph-link-base, .e-heading-link-base):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* WordPress Menu has no native wrapping control for horizontal item labels.
 * Keep the contact row editable without overflowing narrow popup widths. */
.cet-menu-contact-links .elementor-nav-menu--main .elementor-item {
	white-space: normal;
}

/* Native Stretch centers text inside growing items. Distribute the Contact
 * links themselves so the first and last labels meet the menu edges. */
.cet-menu-contact-links.elementor-nav-menu__align-justify .elementor-nav-menu--layout-horizontal > .elementor-nav-menu {
	justify-content: space-between;
	column-gap: calc(var(--e-nav-menu-horizontal-menu-item-margin, 0px) * 2);
}

.cet-menu-contact-links.elementor-nav-menu__align-justify .elementor-nav-menu--layout-horizontal > .elementor-nav-menu > li {
	flex-grow: 0;
}

/* The legacy clearfix otherwise becomes an empty trailing flex item. */
.cet-menu-contact-links .elementor-nav-menu--layout-horizontal > .elementor-nav-menu::after {
	display: none;
}

/* Use the native Space Between value as a gap, without edge margins on
 * links that wrap onto a new row. Native horizontal padding still applies. */
.cet-menu-contact-links .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > .elementor-item {
	margin-inline: 0;
}

body.cet-shared-header .elementor-location-header {
	position: sticky;
	inset-block-start: var(--cet-visible-admin-bar-offset, 0px);
	z-index: 1000;
	block-size: 0;
}

body.cet-shared-header .elementor-element-cet-menu-surface {
	block-size: calc(100vh - var(--cet-visible-admin-bar-offset, 0px));
	min-block-size: calc(100vh - var(--cet-visible-admin-bar-offset, 0px));
}

@supports (height: 100dvh) {
	body.cet-shared-header .elementor-element-cet-menu-surface {
		block-size: calc(100dvh - var(--cet-visible-admin-bar-offset, 0px));
		min-block-size: calc(100dvh - var(--cet-visible-admin-bar-offset, 0px));
	}
}

body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] {
	--cet-menu-scrollbar-active-color: rgb(2 149 196 / 38%);
	scrollbar-color: transparent transparent;
	scrollbar-width: thin;
}

body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"]::-webkit-scrollbar {
	inline-size: 6px;
}

body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"]::-webkit-scrollbar-track {
	background: transparent;
}

body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"]::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background-color: transparent;
}

body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"].cet-menu-is-scrolling {
	scrollbar-color: var(--cet-menu-scrollbar-active-color) transparent;
}

body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"].cet-menu-is-scrolling::-webkit-scrollbar-thumb {
	background-color: var(--cet-menu-scrollbar-active-color);
}

body.cet-shared-header .elementor-element-cet-header-main,
body.cet-shared-header .elementor-element-cet-menu-surface,
body.cet-shared-header [data-interaction-id="cet-header-nav-frame"],
body.cet-shared-header [data-interaction-id="cet-menu-header-row"],
body.cet-shared-header [data-interaction-id="cet-header-logo"] .e-image-base,
body.cet-shared-header [data-interaction-id="cet-menu-logo"] .e-image-base {
	transition-duration: 180ms;
	transition-property: background-color, block-size, inline-size, min-block-size, padding;
	transition-timing-function: ease;
}

body.cet-shared-header [data-interaction-id="cet-header-menu-control"],
body.cet-shared-header [data-interaction-id="cet-menu-close-control"] {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	flex: 0 0 44px;
	cursor: pointer;
	line-height: 0;
	text-decoration: none;
}

body.cet-shared-header [data-interaction-id="cet-header-menu-control"] {
	color: #0c1622;
}

/* Photo heroes opt into inverse navigation through their native Attributes
 * control. Use the existing blue/white variant only for the standard brand
 * logo, leaving a client-selected replacement and the sticky logo untouched. */
body.cet-shared-header:not(.cet-header-is-stuck):has([data-cet-header-contrast="inverse"])
	[data-interaction-id="cet-header-logo"] .e-image-base[src$="/cet-logo-brand.svg"] {
	content: url("images/cet-logo-reversed.svg");
}

body.cet-shared-header:not(.cet-header-is-stuck):has([data-cet-header-contrast="inverse"])
	[data-interaction-id="cet-header-menu-control"] {
	color: #fff;
}

body.cet-shared-header [data-interaction-id="cet-menu-close-control"] {
	color: #0295c4;
}

body.cet-shared-header [data-interaction-id="cet-header-menu-control"]:hover,
body.cet-shared-header [data-interaction-id="cet-menu-close-control"]:hover {
	color: #01baef;
}

body.cet-shared-header [data-interaction-id="cet-header-menu-control"]:focus-visible,
body.cet-shared-header [data-interaction-id="cet-menu-close-control"]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

body.cet-shared-header [data-interaction-id="cet-header-menu-control"] svg,
body.cet-shared-header [data-interaction-id="cet-menu-close-control"] svg {
	inline-size: 32px;
	block-size: 32px;
}

body.cet-header-is-stuck .elementor-element-cet-header-main {
	padding-block: 8px;
	background-color: rgb(245 245 245 / 96%);
}

body.cet-header-is-stuck [data-interaction-id="cet-header-nav-frame"],
body.cet-header-is-stuck [data-interaction-id="cet-menu-header-row"] {
	align-items: center;
	min-block-size: 48px;
}

body.cet-header-is-stuck [data-interaction-id="cet-header-logo"] .e-image-base,
body.cet-header-is-stuck [data-interaction-id="cet-menu-logo"] .e-image-base {
	inline-size: 192px;
	block-size: 36px;
}

body.cet-header-is-stuck .elementor-element-cet-menu-surface {
	padding-block-start: 40px;
}

@media (max-width: 1200px) {
	body.cet-header-is-stuck .elementor-element-cet-header-main {
		padding-block: 6px;
	}

	body.cet-header-is-stuck [data-interaction-id="cet-header-nav-frame"],
	body.cet-header-is-stuck [data-interaction-id="cet-menu-header-row"] {
		min-block-size: 44px;
	}

	body.cet-header-is-stuck [data-interaction-id="cet-header-logo"] .e-image-base,
	body.cet-header-is-stuck [data-interaction-id="cet-menu-logo"] .e-image-base {
		inline-size: 192px;
		block-size: 36px;
	}

	body.cet-header-is-stuck .elementor-element-cet-menu-surface {
		padding-block-start: 38px;
	}
}

@media (max-width: 767px) {
	/* SmartMenus flyout offsets can place a submenu outside a narrow popup.
	 * Keep expanded items in the same scrollable column on mobile. */
	body.cet-shared-header [data-interaction-id="cet-menu-scroll-region"] .elementor-nav-menu--main .sub-menu {
		position: static !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: none !important;
	}

	body.cet-header-is-stuck [data-interaction-id="cet-header-logo"] .e-image-base,
	body.cet-header-is-stuck [data-interaction-id="cet-menu-logo"] .e-image-base {
		inline-size: 168px;
		block-size: 32px;
	}

	body.cet-header-is-stuck .elementor-element-cet-menu-surface {
		padding-block-start: 6px;
	}
}

@media (max-width: 359px) {
	body.cet-shared-header [data-interaction-id="cet-header-nav-frame"],
	body.cet-shared-header [data-interaction-id="cet-menu-header-row"] {
		gap: 16px;
	}
}

/* Animate only the site-header artwork. The menu logo enters with its popup,
 * without an additional reveal or movement. */
body.cet-shared-header:not(.elementor-editor-active) [data-interaction-id="cet-header-logo"] .e-image-base {
	animation: cet-logo-entrance 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cet-logo-entrance {
	from {
		opacity: 0;
		translate: 0 -18px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.cet-shared-header:not(.elementor-editor-active) [data-interaction-id="cet-header-logo"] .e-image-base {
		animation: none;
	}

	/* Elementor keeps its own cleanup timer; do not animate reduced-motion views. */
	#elementor-popup-modal-228 .dialog-widget-content {
		animation-duration: 1ms !important;
	}
	#elementor-popup-modal-228:has(.dialog-widget-content.reverse) {
		visibility: hidden;
		pointer-events: none;
	}

	body.cet-shared-header .elementor-element-cet-header-main,
	body.cet-shared-header .elementor-element-cet-menu-surface,
	body.cet-shared-header [data-interaction-id="cet-header-nav-frame"],
	body.cet-shared-header [data-interaction-id="cet-menu-header-row"],
	body.cet-shared-header [data-interaction-id="cet-header-logo"] .e-image-base,
	body.cet-shared-header [data-interaction-id="cet-menu-logo"] .e-image-base {
		transition-duration: 0ms;
	}
}