/* ==========================================================================
   ConvergedHub — site header
   Floating pill nav with three hover mega-menus and a mobile drawer.
   ========================================================================== */

/*
 * ── THE WRAPPER WAS THE REASON STICKY DID NOTHING ─────────────────────────
 *
 * `position: sticky` is clamped to its containing block, and WordPress wraps
 * every template part in a div of its own. That div is exactly as tall as the
 * header — 90px — so the header stuck for 90px of scroll and then left with
 * its wrapper. The rule was correct and the box around it was wrong, which is
 * why it read as "sticky is not applied" rather than as a layout bug.
 *
 * `display: contents` removes the wrapper's box without removing the wrapper,
 * so the header's containing block becomes `.ch-page` — the full height of the
 * document — which is where the design put it: the sticky element sits
 * directly in the page card, beside <main>, not inside a sleeve of its own.
 *
 * Scoped with `:has()` so the footer's wrapper, which needs its box, is
 * untouched. Where `:has()` is unsupported the header simply does not stick,
 * which is the behaviour as it was rather than anything newly broken.
 */
.wp-block-template-part:has(> .ch-hdr) {
	display: contents;
}

.ch-hdr {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 28px 24px 0;
	font-family: var(--font-sans);
	color: var(--text);
}

/* Templates whose hero starts at the very top of the page card let the header
   float over the content instead of pushing it down. The box must be truly
   0px tall (as the design's is), so its top spacing moves from padding — which
   height: 0 cannot remove — into a spacer that overflows the empty box. */
.ch-hdr--overlay {
	height: 0;
	padding-top: 0;
}

.ch-hdr--overlay::before {
	content: "";
	display: block;
	height: 28px;
}

.ch-nav {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	padding: 10px 10px 10px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--card) 88%, transparent);
	backdrop-filter: saturate(1.6) blur(16px);
	-webkit-backdrop-filter: saturate(1.6) blur(16px);
	box-shadow: 0 6px 24px rgba(12, 18, 40, 0.08);
	transition: background 150ms ease, box-shadow 150ms ease;
}

.ch-hdr.is-scrolled .ch-nav {
	background: color-mix(in srgb, var(--card) 72%, transparent);
	box-shadow: 0 10px 34px rgba(12, 18, 40, 0.14);
}

.ch-nav__logo {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
}

.ch-nav__logo img {
	height: 38px;
	width: auto;
	display: block;
}

.ch-nav__center {
	align-items: center;
	gap: 4px;
	margin: 0 auto;
}

.ch-nav__actions {
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.ch-desktop {
	display: flex;
}

.ch-mtoggle {
	display: none;
}

/* --------------------------------------------------------------------------
   Triggers
   -------------------------------------------------------------------------- */

.ch-nav__trigger,
.ch-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
	background: transparent;
	border: 0;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 400;
	color: var(--text-2);
	transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.ch-nav__trigger:hover,
.ch-nav__link:hover,
.ch-menu.is-open > .ch-nav__trigger {
	background: var(--nav-hover);
	color: var(--text);
}

.ch-nav__trigger[aria-current="page"],
.ch-nav__link[aria-current="page"],
.ch-nav__trigger.is-active,
.ch-nav__link.is-active,
.ch-menu.is-open > .ch-nav__trigger {
	font-weight: 600;
	color: var(--text);
}

.ch-nav__trigger svg {
	transition: transform 150ms ease;
}

.ch-menu.is-open > .ch-nav__trigger svg {
	transform: rotate(180deg);
}

.ch-btn-ghost {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid var(--border-strong);
	background: transparent;
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	font-family: inherit;
	transition: background 150ms ease, border-color 150ms ease;
}

.ch-btn-ghost:hover {
	background: var(--accent-soft);
	border-color: var(--accent-border);
	color: var(--accent);
}

.ch-btn-ink {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	border-radius: 999px;
	text-decoration: none;
	background: var(--ink);
	color: var(--ink-text);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	transition: transform 150ms ease, filter 150ms ease;
}

.ch-btn-ink:hover {
	filter: brightness(1.25);
	transform: translateY(-1px);
	color: var(--ink-text);
}

/* --------------------------------------------------------------------------
   Mega-menu panels
   -------------------------------------------------------------------------- */

.ch-menu {
	position: relative;
}

/* Invisible hover bridge so the pointer can travel from trigger to panel. */
.ch-menu__bridge {
	position: absolute;
	top: 100%;
	left: -40px;
	right: -40px;
	height: 30px;
	pointer-events: none;
	z-index: 119;
}

.ch-menu.is-open .ch-menu__bridge {
	pointer-events: auto;
}

.ch-panel {
	--ch-shift: 0px;
	position: absolute;
	top: calc(100% + 22px);
	left: 50%;
	transform: translateX(calc(-50% + var(--ch-shift))) translateY(6px);
	width: var(--ch-panel-w, 900px);
	max-width: calc(100vw - 32px);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(12, 18, 40, 0.16), 0 2px 8px rgba(12, 18, 40, 0.06);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 120;
}

.ch-menu.is-open .ch-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(calc(-50% + var(--ch-shift))) translateY(0);
}

.ch-panel--platform {
	--ch-panel-w: 900px;
	background: linear-gradient(158deg, #f3f6ff 0%, #f7f4fe 34%, var(--card) 72%);
	box-shadow: 0 26px 64px rgba(24, 40, 80, 0.16), 0 2px 8px rgba(24, 40, 80, 0.06);
}

.ch-panel--solutions {
	--ch-panel-w: 900px;
}

.ch-panel--resources {
	--ch-panel-w: 660px;
}

.ch-panel__glow-a,
.ch-panel__glow-b {
	position: absolute;
	width: 420px;
	height: 420px;
	pointer-events: none;
}

.ch-panel__glow-a {
	top: -160px;
	left: -120px;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-bright) 16%, transparent), transparent 70%);
}

.ch-panel__glow-b {
	bottom: -200px;
	right: -120px;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--violet-bright) 12%, transparent), transparent 70%);
}

/* Panel masthead bar */
.ch-panel__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 24px;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--accent) 12%, var(--card)) 0%,
		color-mix(in srgb, var(--violet-soft) 10%, var(--card)) 52%,
		var(--card) 100%
	);
	transition: background 160ms ease;
}

.ch-panel__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--accent);
}

.ch-panel__title {
	display: block;
	margin-top: 6px;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.5px;
	color: var(--text);
}

.ch-panel__desc {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-2);
	max-width: 44em;
}

.ch-panel__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	text-decoration: none;
	background: linear-gradient(96deg, #6d5cff, #9b5cff);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: filter 150ms ease, transform 150ms ease;
}

.ch-panel__cta:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff;
}

/* Product / resource cards inside the panels */
.ch-panel__grid {
	position: relative;
	display: grid;
	gap: 12px;
	padding: 18px;
}

.ch-panel__grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.ch-panel__grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.ch-panel__grid--2 {
	grid-template-columns: 1fr 1fr;
}

/* Resources with a single card (Customers and Webinars are held back until
   they have real content): one full-width card in a narrower panel. */
.ch-panel__grid--1 {
	grid-template-columns: 1fr;
}

.ch-panel--resources:has(.ch-panel__grid--1) {
	--ch-panel-w: 460px;
}

.ch-prodcol {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 18px 16px;
	text-decoration: none;
	border-radius: 14px;
	transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.ch-prodcol:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(24, 40, 80, 0.16);
}

.ch-prodcol__wash,
.ch-prodcol__orb {
	position: absolute;
	pointer-events: none;
}

.ch-prodcol__wash {
	inset: 0;
	background: linear-gradient(
		155deg,
		color-mix(in srgb, var(--ch-c1) 13%, transparent) 0%,
		color-mix(in srgb, var(--ch-c2) 8%, transparent) 52%,
		transparent 90%
	);
}

.ch-prodcol__orb {
	bottom: -54px;
	right: -40px;
	width: 150px;
	height: 150px;
	border-radius: 999px;
	background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ch-c2) 13%, transparent), transparent 70%);
}

.ch-prodcol__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ch-prodcol__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: linear-gradient(140deg, var(--ch-c1), var(--ch-c2));
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--ch-c1) 28%, transparent);
	flex-shrink: 0;
}

.ch-prodcol__label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--text);
}

.ch-prodcol__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ch-prodcol__desc {
	position: relative;
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-3);
}

/* Solutions panel — two bordered columns of link rows */
.ch-menucard {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: var(--card);
	padding: 14px;
}

.ch-menucard__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--ch-c1) 12%, transparent) 0%,
		color-mix(in srgb, var(--ch-c2) 7%, transparent) 100%
	);
}

.ch-menucard__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 8px 12px;
}

.ch-menucard__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: linear-gradient(140deg, var(--ch-c1), var(--ch-c2));
	color: #fff;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--ch-c1) 28%, transparent);
}

.ch-menucard__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--text);
}

.ch-menucard__rows {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 8px;
}

.ch-menurow {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0 10px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
	line-height: 1.3;
	transition: background 150ms ease, transform 150ms ease, color 150ms ease;
}

.ch-menurow:hover {
	background: var(--card);
	color: var(--text);
}

.ch-menudot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	flex-shrink: 0;
	background: var(--accent);
	opacity: 0.55;
}

/* Panel footers */
.ch-panel__foot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 24px;
	border-top: 1px solid var(--border);
	background: var(--surface);
}

.ch-panel__footlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
	transition: color 150ms ease;
}

.ch-panel__footlink:hover {
	color: var(--accent-strong);
}

.ch-panel__footlink svg {
	flex-shrink: 0;
}

/* Resources panel — newsletter sign-up strip */
.ch-panel__subfoot {
	position: relative;
	padding: 14px 20px 16px;
	border-top: 1px solid var(--border);
	background: var(--accent-soft);
}

.ch-subhint {
	display: block;
	font-size: 13px;
	color: var(--text-2);
	margin-bottom: 10px;
}

.ch-subform {
	position: relative;
	display: flex;
	align-items: center;
}

.ch-subform input:not(#_) {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 128px 0 14px;
	border-radius: 12px;
	border: 1px solid var(--border-strong);
	background: var(--card);
	color: var(--text);
	font-size: 13.5px;
	font-family: inherit;
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ch-subform input:focus:not(#_) {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}

.ch-subform button:not(#_) {
	position: absolute;
	top: 5px;
	right: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 32px;
	padding: 0 13px;
	flex-shrink: 0;
	border-radius: 9px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	background: linear-gradient(100deg, var(--accent-bright) 0%, #2464e8 55%, #1b4fc4 100%);
	border: 1px solid transparent;
	color: #fff;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ch-subform button:hover:not(#_) {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.ch-subdone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text);
}

.ch-subdone svg {
	flex-shrink: 0;
}

/* The confirmation waits for a successful subscribe; `display: flex` above
   would otherwise override its hidden attribute. */
.ch-subdone[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */

.ch-drawer {
	display: none;
	max-height: 80vh;
	overflow-y: auto;
	background: var(--card);
	max-width: 1120px;
	margin: 8px auto 0;
	border: 1px solid var(--border);
	border-radius: 20px;
	box-shadow: var(--shadow-dialog);
}

.ch-drawer.is-open {
	display: block;
}

.ch-drawer__inner {
	padding: 12px 20px 28px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ch-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 13px 12px;
	border: none;
	border-bottom: 1px solid var(--border);
	background: transparent;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	border-radius: 10px;
	text-align: left;
}

.ch-drawer__row svg {
	transition: transform 150ms ease;
}

.ch-drawer__row[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.ch-drawer__linkrow {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 13px 12px;
	border-bottom: 1px solid var(--border);
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.ch-drawer__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 260ms ease;
	padding-left: 6px;
}

.ch-drawer__panel.is-open {
	max-height: 1600px;
}

.ch-drawer__list {
	display: flex;
	flex-direction: column;
	padding: 2px 0 10px;
}

.ch-drawer__eyebrow {
	padding: 10px 12px 4px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.48px;
	text-transform: uppercase;
	color: var(--text-3);
}

.ch-drawer__leaf {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--text-2);
	text-decoration: none;
}

.ch-drawer__ctas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

.ch-drawer__cta-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 13px 18px;
	border-radius: 999px;
	text-decoration: none;
	background: var(--ink);
	color: var(--ink-text);
	font-size: 15px;
	font-weight: 600;
}

.ch-drawer__cta-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 18px;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid var(--border-strong);
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.ch-desktop {
		display: none !important;
	}

	.ch-mtoggle {
		display: inline-flex;
		margin-left: auto;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		border: none;
		background: transparent;
		color: var(--text);
		cursor: pointer;
	}

	.ch-hdr.is-scrolled {
		padding-top: 12px;
	}

	.ch-hdr--overlay.is-scrolled {
		padding-top: 0;
	}

	.ch-hdr--overlay.is-scrolled::before {
		height: 12px;
	}
}

@media (max-width: 900px) {
	.ch-panel__grid--4 {
		grid-template-columns: 1fr 1fr;
	}
}