/* ============================================================
   Optivro ISPU — Interconnect Sub-Nav
   Verbatim from the source `.tk-nav` kit, scoped under `.oiw-nav`.
   Sits under the ISPU site header; sticky, dropdown, mobile hamburger.
   ============================================================ */
.oiw-nav {
	position: sticky;
	top: 0;
	/* Low z-index so the ISPU SITE header and its "Toolkits" mega-menu render ABOVE
	   this toolkit sub-nav (was 1000, which covered the site's dropdown on hover).
	   Still above page content, so our own "For Audiences" dropdown works. If the
	   site menu still overlaps on staging, lower further to match the theme. */
	z-index: 10;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 2px 12px rgba(0, 29, 58, .05);
}
.oiw-nav .tk-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
}
.oiw-nav .tk-nav-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--navy);
	text-decoration: none;
	font-family: "OrpheusPro Regular", 'orpheus pro', orpheus, Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .2px;
}
.oiw-nav .tk-nav-brand:hover {
	color: var(--navy);
}
.oiw-nav .tk-nav-brand-mark {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: var(--gold);
	transform: rotate(45deg);
	border-radius: 3px;
}
.oiw-nav .tk-nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
}
.oiw-nav .tk-nav-links > a,
.oiw-nav .tk-nav-group-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--navy);
	opacity: .72;
	text-decoration: none;
	font-family: Lato, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	padding: 8px 14px;
	border-radius: 7px;
	background: none;
	border: none;
	cursor: pointer;
	transition: background .2s, opacity .2s, color .2s;
	white-space: nowrap;
}
.oiw-nav .tk-nav-links > a:hover,
.oiw-nav .tk-nav-group-btn:hover {
	opacity: 1;
	background: var(--cream2);
}
.oiw-nav .tk-nav-links > a.current {
	opacity: 1;
	color: #fff;
	background: var(--navy);
}
.oiw-nav .tk-nav-group {
	position: relative;
}
.oiw-nav .tk-nav-drop {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 275px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 16px 44px rgba(0, 29, 58, .18);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.oiw-nav .tk-nav-group:hover .tk-nav-drop,
.oiw-nav .tk-nav-group:focus-within .tk-nav-drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.oiw-nav .tk-nav-drop a {
	display: block;
	color: var(--navy);
	opacity: .82;
	text-decoration: none;
	font-family: Lato, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 15px;
	border-radius: 8px;
	transition: background .18s, opacity .18s;
}
.oiw-nav .tk-nav-drop a:hover {
	background: var(--cream2);
	opacity: 1;
}
.oiw-nav .tk-nav-drop a.current {
	background: var(--gold);
	color: var(--navy);
	opacity: 1;
}
.oiw-nav .tk-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.oiw-nav .tk-nav-toggle span {
	width: 22px;
	height: 2px;
	background: var(--navy);
	border-radius: 2px;
	transition: .2s;
}
@media (max-width: 940px) {
	.oiw-nav .tk-nav-toggle {
		display: flex;
	}
	.oiw-nav .tk-nav-links {
		position: absolute;
		top: 56px;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		background: #fff;
		padding: 12px 16px 18px;
		border-bottom: 1px solid var(--border);
		box-shadow: 0 12px 24px rgba(0, 29, 58, .1);
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s;
	}
	.oiw-nav.open .tk-nav-links {
		max-height: 680px;
	}
	.oiw-nav .tk-nav-links > a,
	.oiw-nav .tk-nav-group-btn {
		width: 100%;
		justify-content: flex-start;
		font-size: 14px;
		padding: 12px 14px;
		opacity: .85;
	}
	.oiw-nav .tk-nav-group {
		width: 100%;
	}
	.oiw-nav .tk-nav-drop {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		/* Verbatim source: the expanded mobile sub-menu uses a cream2 band
		   (confirmed preferred on staging). */
		background: var(--cream2);
		min-width: 0;
		margin: 2px 0 4px;
		padding: 4px;
	}
}

/* Editor safety (§15): the sticky nav is scoped to the frontend. Inside the
   Elementor editing canvas it falls back to in-flow so it never pins over the
   editing panel. Frontend (no elementor-editor-active) keeps sticky. */
body.elementor-editor-active .oiw-nav {
	position: relative;
	top: auto;
}