/*
 * nav.css — the primary navigation's presentation.
 *
 * The load-bearing idea: **nothing here is a measured constant.** The panel is
 * centred by percentage, sized by `min()` against the viewport, and laid out by
 * `auto-fit` tracks — so it survives a label being renamed, a top-level item
 * being added, the logo changing width, and any viewport, none of which the
 * previous rules survived. Those rules positioned the panel with
 * `left: -450px !important` (Platform) and `-702px` (Integrations): hand
 * measurements of where those two words happened to sit in a right-aligned nav.
 *
 * Companion files: `nav-menu.php` (the content) and `nav-render.php` (the
 * markup, and why it copies Neve's `<li> > .wrap > a + .caret-wrap` shape).
 *
 * This file is self-sufficient by requirement. Neve enqueues its `mega-menu.css`
 * from inside its nav walker, and `nav-render.php` short-circuits that walker on
 * the primary menu, so that stylesheet may not be loaded at all. Nothing below
 * may depend on it.
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens
 *
 * Values mirror `static-pages/shared.css`, which AGENTS.md names as the brand
 * authority. They are restated rather than imported because those tokens are
 * declared on `.static-page` and the header is outside that wrapper — an
 * `@import` would pull in the whole design layer to reuse six colours.
 * ------------------------------------------------------------------------ */

.bs-nav {
	--bsn-teal: #20796F;
	--bsn-teal-dark: #175E56;
	--bsn-ink: #0F172A;
	--bsn-ink-soft: #475569;
	--bsn-ink-muted: #64748B;
	--bsn-border: #EEF2F1;
	--bsn-surface: #ffffff;

	--bsn-panel-max: 1254px;   /* today's panel width, now an upper bound */
	--bsn-gutter: 24px;        /* breathing room kept at either edge */
	--bsn-promo: 300px;        /* promo card track */
	/* Column count is not a token: it comes from `--bsn-groups`, written onto
	   each panel by nav-render.php from the number of groups in nav-menu.php. */
}

/* ---------------------------------------------------------------------------
 * 2. Panel geometry (desktop)
 *
 * Three rules do the positioning work, and each replaces a constant:
 *
 *   position: static on the <li>  — makes the panel's containing block the
 *       initial containing block (the viewport) instead of the menu item, so
 *       "centre" means centre of the page rather than an offset from a word.
 *       This is the same technique Neve uses for its own mega menu.
 *
 *   left: 50% + translateX(-50%)  — centring, so renaming "How it Works" or
 *       swapping the logo cannot push the panel off-axis.
 *
 *   top: auto                     — keeps the panel's *vertical* static
 *       position (immediately below the item) while only the horizontal axis is
 *       re-anchored. A percentage `top` would resolve against the viewport here.
 *
 * `!important` on left/right is a defence against a specific script, not habit.
 * Neve's frontend.js runs a reflow pass over every `.sub-menu` on load and on
 * resize, and writes an inline `left`/`right` onto any it measures as
 * overflowing. Inline styles beat ordinary rules and lose to `!important`. This
 * is why the previous CSS also carried `!important` on `left`.
 * ------------------------------------------------------------------------ */

@media (min-width: 961px) {

	/* The builder item must not be a containing block either. Neve sets this in
	   mega-menu.css, which may not load — so it is restated here. */
	.header--row .builder-item.has-nav {
		position: static;
	}

	.bs-nav .bs-nav__item--panel {
		position: static;
	}

	.bs-nav .bs-nav__panel {
		position: absolute;
		top: auto;
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);

		/* Clamp instead of overflow. The old panel was a flat `width: 1254px`
		   with a computed `max-width: none`, so below about 1300px it pushed the
		   document wider and produced a horizontal scrollbar. */
		width: min(var(--bsn-panel-max), calc(100vw - (var(--bsn-gutter) * 2)));

		box-sizing: border-box;
		margin: 0;
		padding: 36px 32px 32px;

		display: grid;
		/* One track per group, plus a fixed track for the promo. `--bsn-groups`
		   is written onto the element by `nav-render.php` from the number of
		   groups in `nav-menu.php`, so the column count is data rather than a
		   consequence of arithmetic between the panel width, the promo track and
		   the gaps. The breakpoints below only ever reduce it. */
		grid-template-columns: repeat(var(--bsn-groups, 3), minmax(0, 1fr)) var(--bsn-promo);
		gap: 28px 40px;
		align-items: start;

		background: var(--bsn-surface);
		border: 1px solid #E2E2E2;
		border-radius: 10px;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
		list-style: none;
		text-align: left;
		text-transform: none;
	}

	/* Integrations: four peers, no headings. Its one group spans a single track
	   and splits its own items into two columns (see `--compact` under §3), so
	   the panel is sized by content — replacing the old fixed
	   `min-height: 350px`, which showed as a large empty area beneath the four
	   links. */
	.bs-nav .bs-nav__panel--compact {
		width: min(940px, calc(100vw - (var(--bsn-gutter) * 2)));
	}

	/*
	 * Hover intent.
	 *
	 * The panel opens on `.nav-ul li:hover > .sub-menu` (Neve's rule), so it is
	 * only open while the pointer is inside the <li>. But the panel starts 20px
	 * below the item's bottom edge — `top: auto` resolves to the static
	 * position, which sits under the header row's padding — and that 20px band
	 * belongs to neither. Crossing it dropped `li:hover`, and with no transition
	 * on the panel the hide was instantaneous: the menu disappeared before the
	 * pointer could reach it.
	 *
	 * The fix is an asymmetric delay rather than a wider hit area. Opening stays
	 * instant; closing waits 220ms, which is far longer than the ~20ms a pointer
	 * needs to cross 20px, so the panel is still open and still hoverable when
	 * the pointer lands on it — at which point `li:hover` is true again and the
	 * base rule below never gets to run.
	 *
	 * Deliberately not an invisible bridge element. A transparent strip spanning
	 * the gap would have to be sized to that 20px, which is exactly the kind of
	 * measured constant the rest of this file exists to avoid — and being panel-
	 * width, it would sit over the bottom edge of the sibling menu items and
	 * intercept their clicks. A delay has no geometry to get wrong.
	 *
	 * `visibility` has to be in the transition list — without it the panel goes
	 * `visibility: hidden` the instant hover is lost, and a hidden element
	 * cannot be hovered, so the grace period would buy nothing. But it is given
	 * a **zero duration and a delay**, not a duration, and that distinction is
	 * load-bearing rather than stylistic.
	 *
	 * A `visibility 0.18s` transition has to advance frame by frame before the
	 * property settles. Anything that stops it advancing — a throttled or
	 * backgrounded tab, `prefers-reduced-motion`, an engine that treats
	 * visibility interpolation differently — leaves the panel stuck at `hidden`
	 * while the pointer sits on the item, which is the whole menu broken rather
	 * than a missing flourish. `visibility 0s linear <delay>` is a step change:
	 * there is no interpolation to get stuck in, and the open direction runs at
	 * `0s linear 0s`, so opening is immediate and unconditional. Only closing is
	 * deferred, which is the asymmetry the grace period actually needs.
	 *
	 * Opacity still fades, because a fade that fails to run costs nothing.
	 *
	 * Both states are declared here rather than leaning on Neve's
	 * `.nav-ul li:hover > .sub-menu`. Owning the open state is what makes the
	 * delay work at all: a transition is a property of the element, so timing it
	 * against a rule in the parent theme means the two halves of one behaviour
	 * live in two files and neither reads as complete. It also removes a silent
	 * dependency — Neve's rule is (0,3,1) and could be outranked by any future
	 * parent-theme or Customizer rule without this file changing.
	 *
	 * Scoped to the desktop media query on purpose. In the drawer the panel is
	 * shown and hidden with `display` (§5), and these opacity/visibility values
	 * would leave it permanently invisible.
	 */
	.bs-nav .bs-nav__panel {
		opacity: 0;
		visibility: hidden;
		/* Closing: hold for 220ms, fade for 180ms, then step to hidden at 400ms. */
		transition: opacity 0.18s ease 0.22s, visibility 0s linear 0.4s;
	}

	/*
	 * `:focus-within` gives keyboard parity — tabbing to the "Platform" button
	 * opens the panel, so the nine product links are reachable without a
	 * pointer. Neve's own accessibility rule keys off a `.wrap.active` class its
	 * walker adds, which this menu does not emit.
	 *
	 * `.dropdown-open` is Neve's caret handler talking: it is what the click and
	 * touch path toggles, and what the drawer uses.
	 */
	.bs-nav .bs-nav__item--panel:hover > .bs-nav__panel,
	.bs-nav .bs-nav__item--panel:focus-within > .bs-nav__panel,
	.bs-nav .bs-nav__panel.dropdown-open {
		opacity: 1;
		visibility: visible;
		/* Opening: no delay, and visibility steps at 0s so it cannot stall. */
		transition: opacity 0.18s ease 0s, visibility 0s linear 0s;
	}

	/* Step down in a fixed order, so what gets sacrificed is a decision rather
	   than whatever the arithmetic happens to drop first:
	 *
	 *   1. the promo, because it is the only cell carrying no navigation;
	 *   2. then a column, so the links keep a readable measure.
	 *
	 * Group columns wrap onto a second row rather than disappearing, so no link
	 * is ever lost at any width. */
	@media (max-width: 1279px) {
		.bs-nav .bs-nav__panel {
			grid-template-columns: repeat(var(--bsn-groups, 3), minmax(0, 1fr));
		}

		.bs-nav .bs-nav__promo {
			display: none;
		}
	}

	@media (max-width: 1023px) {
		.bs-nav .bs-nav__panel {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

/* ---------------------------------------------------------------------------
 * 3. Panel contents
 * ------------------------------------------------------------------------ */

.bs-nav .bs-nav__group {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;   /* lets a long label wrap instead of widening its track */
}

.bs-nav .bs-nav__group-title {
	display: block;
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bsn-ink-muted);
	border-bottom: 1px solid var(--bsn-border);
	padding-bottom: 8px;
}

.bs-nav .bs-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* A panel with no group headings puts its own items in two columns, so four
   integrations read as a block rather than a tall single file. Scoped to the
   desktop panel — the drawer overrides it back to one column in §5. */
@media (min-width: 961px) {

	.bs-nav .bs-nav__panel--compact .bs-nav__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 32px;
	}
}

.bs-nav .bs-nav__entry {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.bs-nav .bs-nav__entry > a {
	display: grid;
	/* The icon box is a fixed track and the text takes the rest. This is what
	   removes the per-item CSS the old system needed: previously each icon was
	   an absolutely-positioned `::before` at a hand-set `left`, so an icon whose
	   artwork had different proportions needed its own width/offset pair
	   (`submenu-internal-reporting` used 25px/-35px, `submenu-secure-ai`
	   22px/-31px). A grid track plus `object-fit: contain` normalises every
	   icon, whatever its intrinsic size. */
	grid-template-columns: 32px 1fr;
	gap: 14px;
	align-items: start;
	padding: 0;
	text-decoration: none;
	text-transform: none;
	color: inherit;
	opacity: 1;
}

.bs-nav .bs-nav__icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--bsn-teal);
	flex: none;
}

.bs-nav .bs-nav__icon img,
.bs-nav .bs-nav__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
}

.bs-nav .bs-nav__body {
	min-width: 0;
}

.bs-nav .bs-nav__label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bsn-ink);
}

.bs-nav .bs-nav__desc {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--bsn-ink-soft);
	text-transform: none;
}

.bs-nav .bs-nav__entry > a:hover .bs-nav__label,
.bs-nav .bs-nav__entry > a:focus-visible .bs-nav__label {
	color: var(--bsn-teal);
	text-decoration: underline;
}

.bs-nav .bs-nav__entry.is-current .bs-nav__label {
	color: var(--bsn-teal-dark);
}

.bs-nav .bs-nav__entry > a:focus-visible {
	outline: 2px solid var(--bsn-teal);
	outline-offset: 4px;
	border-radius: 6px;
}

.bs-nav .bs-nav__more {
	display: inline-block;
	margin-top: 18px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bsn-teal);
	text-decoration: none;
	text-transform: none;
}

.bs-nav .bs-nav__more:hover,
.bs-nav .bs-nav__more:focus-visible {
	text-decoration: underline;
}

/* The promo is an ordinary grid cell. It has no `top`/`left` to get wrong when
   the item count changes, which was the failure mode of the `::after` it
   replaces. */
.bs-nav .bs-nav__promo {
	list-style: none;
	margin: 0;
	padding: 0;
	align-self: center;
	justify-self: end;
}

.bs-nav .bs-nav__promo img {
	display: block;
	width: 100%;
	max-width: var(--bsn-promo);
	height: auto;
	border-radius: 12px;
}

/* ---------------------------------------------------------------------------
 * 4. Top-level items
 * ------------------------------------------------------------------------ */

/* The "Platform" control has no destination, so `nav-render.php` emits a
   <button>. Strip the UA button skin so it is indistinguishable from the
   sibling links. */
.bs-nav .bs-nav__toggle {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.bs-nav .bs-nav__toggle:focus-visible {
	outline: 2px solid var(--bsn-teal);
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
 * 5. Mobile drawer
 *
 * Neve renders this same menu a second time inside the off-canvas drawer and
 * marks that copy with `menu-mobile`. Everything above is scoped to
 * `min-width: 961px`, so the drawer starts from unstyled markup rather than
 * inheriting desktop geometry.
 *
 * This is a repair, not just a new feature. The previous rules carried no media
 * query at all, so the drawer copy of the Platform panel computed as
 * `width: 1254px`, `padding-right: 340px`, a two-column grid, with every icon
 * absolutely positioned at `left: -42px` — outside the panel — inside a drawer
 * roughly 300px wide.
 * ------------------------------------------------------------------------ */

.bs-nav.menu-mobile .bs-nav__panel,
.header-menu-sidebar-inner .bs-nav .bs-nav__panel {
	position: static;
	width: 100%;
	max-width: 100%;
	transform: none;
	display: block;
	/* Open/closed is `display` here, not opacity — so these are pinned on, and
	   the hover grace period from §2 has nothing to act on. */
	opacity: 1;
	visibility: visible;
	transition: none;
	box-sizing: border-box;
	/* Left padding matches Neve's 4px `.wrap` padding, so sub items line up
	   with the top-level label text instead of sitting 4px left of it. */
	padding: 4px 0 12px 4px;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	list-style: none;
}

/* Sub items sit flush with the top-level labels. Neve indents an open drawer
   submenu with `.header-menu-sidebar .nav-ul .sub-menu.dropdown-open
   { margin-left: 10px }`, which outranks the `margin: 0` above, so this
   selector carries one more class to win. */
.header-menu-sidebar .nav-ul.bs-nav .bs-nav__panel.dropdown-open {
	margin-left: 0;
}

/* Neve's `style-border-bottom` hover draws a 2px bar under each item's
   `.wrap`. In the drawer that bar lands directly on the first group title of
   an open submenu, so it is switched off here; desktop keeps it. */
.bs-nav.menu-mobile li > .wrap::after,
.header-menu-sidebar-inner .bs-nav li > .wrap::after {
	content: none;
}

/* Neve gives every drawer link `padding: 15px 0`, but "Platform" is the
   <button> from §4, whose reset zeroes that padding. Without this rule its
   row is 26px tall beside 56px siblings, so Home, Platform and How it Works
   bunch together above evenly spaced items. `flex-grow` makes the whole row
   the tap target, as it is for the links. */
.bs-nav.menu-mobile .bs-nav__toggle,
.header-menu-sidebar-inner .bs-nav .bs-nav__toggle {
	display: flex;
	flex-grow: 1;
	padding: 15px 0;
	text-align: left;
}

.bs-nav.menu-mobile .bs-nav__group,
.header-menu-sidebar-inner .bs-nav .bs-nav__group {
	margin-bottom: 16px;
}

.bs-nav.menu-mobile .bs-nav__list,
.header-menu-sidebar-inner .bs-nav .bs-nav__list {
	gap: 14px;
}

.bs-nav.menu-mobile .bs-nav__entry > a,
.header-menu-sidebar-inner .bs-nav .bs-nav__entry > a {
	grid-template-columns: 24px 1fr;
	gap: 12px;
	align-items: center;
}

.bs-nav.menu-mobile .bs-nav__icon,
.header-menu-sidebar-inner .bs-nav .bs-nav__icon {
	width: 24px;
	height: 24px;
	align-items: center;
}

/* Descriptions and the promo are dropped in the drawer. The descriptions run to
   two or three lines each, which turns nine items into a page of prose that has
   to be scrolled past to reach "Pricing"; the promo carries no navigation and
   the site-wide CTA already appears on every page below the fold. Both are
   hidden rather than removed from the markup so there is a single markup
   source for both layouts. */
.bs-nav.menu-mobile .bs-nav__desc,
.header-menu-sidebar-inner .bs-nav .bs-nav__desc,
.bs-nav.menu-mobile .bs-nav__promo,
.header-menu-sidebar-inner .bs-nav .bs-nav__promo {
	display: none;
}

.bs-nav.menu-mobile .bs-nav__group-title,
.header-menu-sidebar-inner .bs-nav .bs-nav__group-title {
	margin-bottom: 10px;
}

/* Neve's drawer shows a submenu by toggling `dropdown-open` from its caret
   handler. Collapsed by default so nine product links are not stacked above
   "How it Works" on first open. */
@media (max-width: 960px) {

	.bs-nav .bs-nav__panel {
		display: none;
	}

	.bs-nav .bs-nav__panel.dropdown-open {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
 * 6. Hamburger and close button
 *
 * Neve draws both from one markup: three `.icon-bar` spans inside
 * `.navbar-toggle`. The header copy opens the drawer; the copy inside
 * `.close-sidebar-panel` is the same button with the bars rotated into an X
 * under `.is-menu-sidebar`. Neve's defaults are 15×2px bars 3px apart inside a
 * 1px border, which reads as a small boxed glyph.
 *
 * Here the border is removed (Neve sets it through `--borderwidth`, written
 * inline by the Customizer, so the variable and the property are both zeroed),
 * the bars grow to 24×2px 6px apart with rounded ends, and the button becomes a
 * 44×44px target. With no border, hover and keyboard focus are shown by a soft
 * teal fill and a teal ring instead.
 *
 * The X offsets are derived, not chosen: each outer bar moves to the middle
 * bar's centre, which is bar height + gap = 8px away. Changing either size
 * without updating `--bsn-burger-shift` leaves the X's arms uncrossed.
 * ------------------------------------------------------------------------ */

.navbar-toggle-wrapper .navbar-toggle {
	--borderwidth: 0;
	--primarybtnborderwidth: 0;
	--bsn-burger-shift: 8px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	width: 44px;
	height: 44px;
	padding: 0;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.navbar-toggle-wrapper .navbar-toggle:hover {
	background: rgba(32, 121, 111, 0.08);
}

.navbar-toggle-wrapper .navbar-toggle:focus {
	outline: none;
}

.navbar-toggle-wrapper .navbar-toggle:focus-visible {
	outline: 2px solid #20796F;
	outline-offset: 2px;
}

.navbar-toggle-wrapper .navbar-toggle .icon-bar {
	width: 24px;
	height: 2px;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}

.navbar-toggle-wrapper .navbar-toggle .icon-bar:nth-child(2) {
	margin: 6px 0;
}

.is-menu-sidebar .navbar-toggle-wrapper .navbar-toggle .icon-bar:nth-child(1) {
	top: var(--bsn-burger-shift);
}

.is-menu-sidebar .navbar-toggle-wrapper .navbar-toggle .icon-bar:nth-child(3) {
	bottom: var(--bsn-burger-shift);
}

/* ---------------------------------------------------------------------------
 * Header button ("Get Started")
 *
 * The label never needs to wrap. Between 960 and 1279px the header row is short
 * of room and the button was the item that gave way: its label broke onto three
 * lines and made the row 91px tall. With `nowrap` the button keeps its one-line
 * width and the nav takes what is left.
 *
 * Below 960px Neve's customizer sizes the button for a phone (12px text, 5px
 * vertical padding), 29px tall at 390px, under the 40px a finger needs.
 * `min-height` raises the tap target without enlarging the label, and the mobile
 * header row (59px) already has the height, so the header does not grow.
 * ------------------------------------------------------------------------ */
.header .builder-item--button_base .component-wrap > .button {
	white-space: nowrap;
}

@media (max-width: 959px) {
	.header .builder-item--button_base .component-wrap > .button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		box-sizing: border-box;
	}
}

/*
 * From 960 to 1023px Neve keeps the header in a 768px container, narrower than
 * the page content under it, and the desktop nav needs about 910px, so Pricing
 * and Login wrapped under Home. In this range only, the header container takes
 * the full width (15px padding each side, close to the page's own 32px gutters)
 * and the gap between nav items drops from 20px to 16px. From 1024px up the
 * row already fits and nothing changes.
 */
@media (min-width: 960px) and (max-width: 1023px) {
	.header .header--row .container {
		max-width: none;
	}

	.header .nav-menu-primary .bs-nav.menu-desktop > li.menu-item {
		margin-left: 8px;
		margin-right: 8px;
	}
}