/**
 * Cup of Air — main navigation polish
 * Flat product journey links + grouped Solutions/Resources + contact CTA.
 */

:root {
	--coa-nav-navy: #013a58;
	--coa-nav-turquoise: #73c3c4;
	--coa-nav-ink: #f4f8fb;
	/* Match Helix menu bar height — never use height:100% on sticky (fixed → viewport). */
	--coa-nav-bar-h: 70px;
}

/* ——— Desktop megamenu: fixed bar height, center all items ——— */
#sp-header > .sticky__wrapper,
#sp-header .sticky__wrapper {
	height: var(--coa-nav-bar-h) !important;
	min-height: var(--coa-nav-bar-h);
	max-height: var(--coa-nav-bar-h);
	box-sizing: border-box;
}

#sp-header.sticky > .sticky__wrapper,
#sp-header.sticky .sticky__wrapper,
.sticky #sp-header .sticky__wrapper,
.sticky .sticky__wrapper {
	height: var(--coa-nav-bar-h) !important;
	min-height: var(--coa-nav-bar-h);
	max-height: var(--coa-nav-bar-h);
}

#sp-header > .sticky__wrapper > .container,
#sp-header > .sticky__wrapper > .container-fluid,
#sp-header > .container,
#sp-header > .container-fluid {
	height: var(--coa-nav-bar-h);
	display: flex;
	align-items: stretch;
}

#sp-header .sticky__wrapper > .container > .row,
#sp-header .sticky__wrapper > .container-fluid > .row,
#sp-header > .container > .row,
#sp-header > .container-fluid > .row {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: var(--coa-nav-bar-h);
	margin: 0;
}

#sp-header #sp-menu,
#sp-header #sp-menu .sp-column,
#sp-header #sp-menu .sp-megamenu-wrapper {
	display: flex;
	align-items: stretch;
	height: var(--coa-nav-bar-h);
	align-self: stretch;
}

#sp-header #sp-menu .sp-megamenu-parent {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-end;
	gap: 0 2px;
	height: var(--coa-nav-bar-h);
	margin: 0;
	width: 100%;
}

/*
 * Helix still emits empty <li> for menu_show=0 items (blog posts, hidden parents).
 * Hide those ghosts so they cannot leave orphan dropdowns in the bar.
 */
#sp-header #sp-menu .sp-megamenu-parent > li.sp-menu-item:not(:has(> a)),
#sp-header #sp-menu .sp-megamenu-parent > li.sp-menu-item:has(> a:empty) {
	display: none !important;
}

/*
 * Each LI fills the bar height; the link/CTA is flex-centered inside.
 * This replaces Helix's line-height:70px centering (which stretches filled buttons).
 */
#sp-header #sp-menu .sp-megamenu-parent > li {
	display: inline-flex !important;
	align-items: center;
	align-self: stretch;
	height: var(--coa-nav-bar-h);
	margin: 0;
	padding: 0;
}

#sp-header #sp-menu .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-wrapper > .sp-megamenu-parent > li > a,
.sp-megamenu-wrapper > .sp-megamenu-parent > li > a,
#sp-header.sticky .sp-megamenu-wrapper > .sp-megamenu-parent > li > a,
.sticky .sp-megamenu-wrapper > .sp-megamenu-parent > li > a {
	display: inline-flex !important;
	align-items: center;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	line-height: 1.2 !important;
	padding: 0 11px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/*
 * Keep Helix peIcon carets for real groups (Solutions / Resources).
 * Products is flat — strip caret + kill its empty model dropdown.
 */
#sp-header #sp-menu .sp-megamenu-parent > li.sp-has-child > a.coa-nav-flat:after,
#sp-header #sp-menu .sp-megamenu-parent > li.sp-has-child > a.coa-nav-flat:hover:after,
#sp-header #sp-menu .sp-megamenu-parent > li:has(> a.coa-nav-flat) > a:after,
#sp-header #sp-menu .sp-megamenu-parent > li:has(> a.coa-nav-flat) > a:hover:after {
	content: none !important;
	display: none !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 0 !important;
}

#sp-header #sp-menu .sp-megamenu-parent > li:has(> a.coa-nav-flat) > .sp-dropdown,
#sp-header #sp-menu .sp-megamenu-parent > li:has(> a.coa-nav-flat):hover > .sp-dropdown,
#sp-header #sp-menu .sp-megamenu-parent > li:has(> a.coa-nav-flat).coa-nav-open > .sp-dropdown {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Helix peIcon caret — slightly larger than default */
#sp-header #sp-menu .sp-megamenu-parent > li.sp-has-child > a:not(.coa-nav-flat):not(.coa-nav-cta):after {
	opacity: 0.85;
	font-size: 1.05em;
	padding-left: 5px;
	padding-right: 0;
	vertical-align: 0.02em;
}

/* Prevent dropdown clipping in sticky/header shells */
#sp-header,
#sp-header .sticky__wrapper,
#sp-header #sp-menu,
#sp-header .sp-megamenu-wrapper {
	overflow: visible;
}

#sp-header #sp-menu .sp-dropdown {
	min-width: 220px;
	padding-top: 0;
	z-index: 1200;
}

#sp-header #sp-menu .sp-dropdown .sp-dropdown-inner {
	padding: 8px 0;
	border-radius: 10px;
	background: rgba(1, 58, 88, 0.97);
	box-shadow: 0 10px 24px rgba(1, 40, 58, 0.22);
}

#sp-header #sp-menu .sp-dropdown .sp-dropdown-inner li.sp-menu-item > a {
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--coa-nav-ink);
	white-space: normal;
}

#sp-header #sp-menu .sp-dropdown .sp-dropdown-inner li.sp-menu-item > a:hover,
#sp-header #sp-menu .sp-dropdown .sp-dropdown-inner li.sp-menu-item > a:focus,
#sp-header #sp-menu .sp-dropdown .sp-dropdown-inner li.sp-menu-item.active > a,
#sp-header #sp-menu .sp-dropdown .sp-dropdown-inner li.sp-menu-item.current-item > a {
	color: #fff;
	background: rgba(115, 195, 196, 0.18);
}

#sp-header #sp-menu .sp-megamenu-parent > li.active > a,
#sp-header #sp-menu .sp-megamenu-parent > li.current-item > a,
#sp-header #sp-menu .sp-megamenu-parent > li.sp-has-child.active > a {
	color: var(--coa-nav-turquoise);
}

/* Open state for keyboard / click (class toggled by coa-nav.js) */
#sp-header #sp-menu .sp-megamenu-parent > li.coa-nav-open > .sp-dropdown {
	display: block;
	visibility: visible;
	pointer-events: auto;
}

/*
 * Contact CTA — filled turquoise, navy text.
 * Same vertical centering as sibling links; only the pill padding differs.
 */
#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta,
#sp-header .sp-megamenu-wrapper > .sp-megamenu-parent > li > a.coa-nav-cta,
.sp-megamenu-wrapper > .sp-megamenu-parent > li > a.coa-nav-cta {
	justify-content: center;
	margin-left: 8px;
	padding: 6px 14px !important;
	border-radius: 10px;
	border: 1.5px solid var(--coa-nav-turquoise);
	background: var(--coa-nav-turquoise);
	color: var(--coa-nav-navy) !important;
	font-weight: 700;
	font-size: 15px;
	box-shadow: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:after,
#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:hover:after {
	content: none !important;
	display: none !important;
}

#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:hover,
#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:focus {
	background: #8fd0d1;
	border-color: #8fd0d1;
	color: var(--coa-nav-navy) !important;
	box-shadow: none;
}

#sp-header #sp-menu .sp-megamenu-parent > li.active > a.coa-nav-cta,
#sp-header #sp-menu .sp-megamenu-parent > li.current-item > a.coa-nav-cta {
	background: var(--coa-nav-turquoise);
	border-color: var(--coa-nav-turquoise);
	color: var(--coa-nav-navy) !important;
}

#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

#sp-header.sticky #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta,
#sp-header.sticky #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:hover,
#sp-header.sticky #sp-menu .sp-megamenu-parent > li.active > a.coa-nav-cta,
#sp-header.sticky #sp-menu .sp-megamenu-parent > li.current-item > a.coa-nav-cta {
	background: var(--coa-nav-turquoise);
	border-color: var(--coa-nav-turquoise);
	color: var(--coa-nav-navy) !important;
}

#sp-header.sticky #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta:hover {
	background: #8fd0d1;
	border-color: #8fd0d1;
}

/* ——— Off-canvas / mobile ——— */
.offcanvas-menu .coa-nav-cta,
.offcanvas-menu a.coa-nav-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 14px 16px 8px;
	padding: 8px 14px !important;
	border-radius: 10px;
	border: 1.5px solid var(--coa-nav-turquoise);
	background: var(--coa-nav-turquoise);
	color: var(--coa-nav-navy) !important;
	font-weight: 700;
}

.offcanvas-menu a.coa-nav-cta:hover,
.offcanvas-menu a.coa-nav-cta:focus {
	background: #8fd0d1;
	border-color: #8fd0d1;
	color: var(--coa-nav-navy) !important;
}

.offcanvas-menu {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.offcanvas-menu .menu .nav-child,
.offcanvas-menu ul.nav-child {
	display: none;
	padding-left: 12px;
	margin: 0 0 6px;
}

.offcanvas-menu .menu li.coa-nav-open > .nav-child,
.offcanvas-menu .menu li.coa-nav-open > ul {
	display: block;
}

/* Flat product parents: no disclosure in offcanvas */
.offcanvas-menu .menu li:has(> a.coa-nav-flat) > ul {
	display: none !important;
}

.offcanvas-menu .menu li:has(> a.coa-nav-flat) > a .coa-nav-disc {
	display: none !important;
}

.offcanvas-menu .menu li.parent > a .coa-nav-disc,
.offcanvas-menu .menu li.sp-has-child > a .coa-nav-disc,
.offcanvas-menu .menu li.deeper > a .coa-nav-disc {
	float: right;
	margin-top: 4px;
	width: 1.25em;
	text-align: center;
	opacity: 0.8;
	font-weight: 400;
}

body.offcanvas-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta {
		transition: none;
	}
}

@media (max-width: 1199px) and (min-width: 992px) {
	#sp-header #sp-menu .sp-megamenu-parent > li > a {
		padding: 0 8px;
		font-size: 13px;
	}

	#sp-header #sp-menu .sp-megamenu-parent > li > a.coa-nav-cta {
		padding: 3px 10px;
		margin-left: 6px;
		font-size: 13px;
	}
}