/* =====================================================================
   LeadsNimble — Header Nav · "Floating Capsule"
   A detached, rounded, frosted-glass bar that floats over the page with a
   soft gradient ring. A clean center menu with a gliding highlight, an
   outlined Login pill and a vivid gradient Sign-Up button. Sticky and
   scroll-aware, with a full-screen mobile overlay.

   GSAP (loaded as an optional dependency) enhances the entrance, the
   gliding highlight and adds a subtle magnetic pull to the buttons.
   Everything degrades gracefully to these CSS transitions when GSAP is
   unavailable or the visitor prefers reduced motion.
   ===================================================================== */

.lnew-nav {
	/* Accent = project palette (blue -> cyan), matching the Hero + buttons.
	   Also set as the widget's Elementor default; kept here as a fallback. */
	--lnew-accent: #3f65b0;
	--lnew-accent-2: #42a2da;

	/* Action-button gradient — matched to the Hero widget's buttons
	   (--lhc1 / --lhc2) so the CTA + Login read as the same colour family.
	   Kept separate from --lnew-accent so the capsule ring, brand and
	   highlight keep their own accent untouched. */
	--lnew-btn-1: #3f65b0;
	--lnew-btn-2: #42a2da;

	--lnew-offset: 18px;

	/* Dark theme (default) */
	--lnew-bar: rgba(24, 23, 35, 0.45);
	--lnew-bar-solid: #181723;
	--lnew-cap-border: rgba(255, 255, 255, 0.18);
	--lnew-cap-ring: linear-gradient(130deg,
		color-mix(in srgb, var(--lnew-accent) 55%, transparent),
		color-mix(in srgb, var(--lnew-accent-2) 55%, transparent));
	--lnew-pod: rgba(255, 255, 255, 0.05);
	--lnew-pod-border: rgba(255, 255, 255, 0.09);
	--lnew-hairline: rgba(255, 255, 255, 0.08);
	--lnew-text: #f3f4f8;
	--lnew-text-muted: #b6b9c8;
	--lnew-hover: rgba(255, 255, 255, 0.06);
	--lnew-fill: rgba(255, 255, 255, 0.09);
	--lnew-overlay: #14131e;
	--lnew-cap-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.40);

	position: relative;
	z-index: 100;
	width: 100%;
	box-sizing: border-box;
	/* Float the capsule: a gap above and comfortable side gutters. */
	padding: var(--lnew-offset) clamp(14px, 3vw, 28px) 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.lnew-nav * { box-sizing: border-box; }

/* Light theme (toggled) */
.lnew-nav--light {
	/* Fully see-through at rest — only the backdrop blur, gradient ring and
	   shadow define the bar. It firms up (below) once the page scrolls. */
	--lnew-bar: rgba(255, 255, 255, 0);
	--lnew-bar-solid: #ffffff;
	--lnew-cap-border: rgba(17, 24, 39, 0.14);
	--lnew-pod: rgba(17, 24, 39, 0.035);
	--lnew-pod-border: rgba(17, 24, 39, 0.09);
	--lnew-hairline: rgba(17, 24, 39, 0.08);
	--lnew-text: #14161d;
	--lnew-text-muted: #4d5462;
	--lnew-hover: color-mix(in srgb, var(--lnew-accent) 9%, transparent);
	--lnew-fill: color-mix(in srgb, var(--lnew-accent) 12%, transparent);
	--lnew-overlay: #ffffff;
	--lnew-cap-shadow: 0 6px 20px -8px rgba(22, 34, 72, 0.14);
}

/* Float the bar OVER the page. Fixed = out of flow, so the first section
   (hero) rises to the very top and the transparent capsule floats on top of it
   — like the TextCRM reference. The hero clears the bar's height below. */
.lnew-nav--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* When injected as a Site Part, collapse the wrapper's reserved strip so the
   page's first section sits at the very top, behind the fixed bar. The fixed
   bar (and its mobile overlay) escape this clip — their containing block is the
   viewport, not this wrapper. Inline placements collapse on their own. */
.lnew-site-header:has( .lnew-nav--sticky ) {
	height: 0;
	overflow: hidden;
}

/* Keep the fixed bar below the WordPress admin bar for logged-in users. */
.admin-bar .lnew-nav--sticky { top: 32px; }
@media screen and ( max-width: 782px ) {
	.admin-bar .lnew-nav--sticky { top: 46px; }
}

/* The floating bar overlaps the page top, so the first section clears its
   height. Scoped into the header stylesheet, so this only applies on pages
   that actually load the bar; the collapse above cancels it out for a net-zero
   layout shift while the hero background now extends up behind the bar. */
.lnew-hero { padding-top: 90px; }

/* =====================================================================
   The floating capsule (max-width + border-radius come from Elementor)
   ===================================================================== */
.lnew-nav__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 11px 14px 11px 24px;
	/* Transparent glassmorphism: a barely-there frosted fill + backdrop blur.
	   The gradient border is drawn by the ::before ring (below) so the
	   interior stays clear — no border-gradient bleed. */
	background: var(--lnew-bar);
	border: 0;
	/* Full pill. !important overrides the Elementor "Bar radius" control, which
	   compiles a fixed px radius at higher specificity. */
	border-radius: 100vmax !important;
	box-shadow: var(--lnew-cap-shadow);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	transition: padding .32s ease, background .3s ease, box-shadow .3s ease;
}

/* Even gradient border, drawn as a masked ring so the interior stays
   transparent (glass). With no real border to offset it, the ring shares
   the capsule's radius exactly on every corner. */
.lnew-nav__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: var(--lnew-cap-ring);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

/* Scrolled: firm up the backdrop + shadow. Height stays constant (no padding
   change) so the capsule doesn't shrink on scroll. */
.lnew-nav.is-scrolled .lnew-nav__inner {
	--lnew-bar: color-mix(in srgb, var(--lnew-bar-solid) 62%, transparent);
	box-shadow: 0 8px 24px -8px rgba(22, 34, 72, 0.18);
}

/* Brand -------------------------------------------------------------- */
.lnew-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	flex-shrink: 0;
}

.lnew-nav__logo { display: inline-flex; align-items: center; }

.lnew-nav__logo img,
.lnew-nav__logo svg { display: block; height: 36px; width: auto; }

.lnew-nav__logo .lnew-nav__mark {
	border-radius: 10px;
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--lnew-accent) 65%, transparent);
}

.lnew-nav__brand-name {
	font-weight: 800;
	font-size: 1.32rem;
	letter-spacing: -0.01em;
	background: linear-gradient(90deg, var(--lnew-accent), var(--lnew-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Center menu -------------------------------------------------------- */
.lnew-nav__center {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
}

.lnew-nav__menu {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: transparent;
	border: 0;
}

.lnew-nav__item { position: relative; }

.lnew-nav__menu a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 100vmax;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--lnew-text-muted);
	text-decoration: none;
	transition: color .22s ease;
}

.lnew-nav__menu a:hover { color: var(--lnew-text); }
.lnew-nav__item.is-active a { color: var(--lnew-text); font-weight: 600; }

/* Sliding highlight that glides behind the hovered / active item. */
.lnew-nav__pill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 100vmax;
	background: var(--lnew-fill);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lnew-accent) 22%, transparent);
	opacity: 0;
	pointer-events: none;
	transition: left .34s cubic-bezier(.34, 1.4, .64, 1),
	            width .34s cubic-bezier(.34, 1.4, .64, 1),
	            opacity .25s ease;
	will-change: left, width;
	z-index: 0;
}

.lnew-nav__menu.is-pill-ready .lnew-nav__pill { opacity: 1; }

/* When GSAP drives the highlight, let it own left/width (keep opacity). */
.lnew-nav.lnew-has-gsap .lnew-nav__pill { transition: opacity .25s ease; }

/* NEW / HOT badge */
.lnew-nav__badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 7px;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--lnew-accent), var(--lnew-accent-2));
	box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--lnew-accent) 70%, transparent);
}

/* Actions ------------------------------------------------------------ */
.lnew-nav__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* Circular theme toggle */
.lnew-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border: 1px solid var(--lnew-pod-border);
	border-radius: 50%;
	background: var(--lnew-pod);
	color: var(--lnew-text-muted);
	cursor: pointer;
	transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

.lnew-nav__toggle:hover {
	color: var(--lnew-text);
	background: var(--lnew-hover);
	border-color: color-mix(in srgb, var(--lnew-accent) 40%, transparent);
	transform: translateY(-1px);
}

.lnew-nav__icon-sun { display: none; }
.lnew-nav--light .lnew-nav__icon-sun { display: block; }
.lnew-nav--light .lnew-nav__icon-moon { display: none; }

/* Login — outlined pill (reference style) */
.lnew-nav__login {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 20px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--lnew-btn-1);
	text-decoration: none;
	border: 1.5px solid color-mix(in srgb, var(--lnew-btn-1) 42%, transparent);
	border-radius: 999px;
	background: transparent;
	white-space: nowrap;
	transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.lnew-nav--light .lnew-nav__login { color: var(--lnew-btn-1); }
.lnew-nav--dark .lnew-nav__login { color: color-mix(in srgb, var(--lnew-btn-2) 62%, #fff); }

.lnew-nav__login:hover {
	background: color-mix(in srgb, var(--lnew-btn-1) 10%, transparent);
	border-color: color-mix(in srgb, var(--lnew-btn-1) 68%, transparent);
	box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--lnew-btn-1) 55%, transparent);
}

.lnew-nav__user-icon { flex-shrink: 0; }

/* Sign Up — vivid gradient CTA with glow + sheen */
.lnew-nav__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 26px;
	border-radius: 999px;
	/* Font size matched to the nav menu links (.lnew-nav__menu a) so the CTA
	   reads consistently with the rest of the bar; weight 600 for emphasis. */
	font-size: 0.95rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	/* Same gradient fill as the Hero primary button. No background-size zoom,
	   so the resting colours render identically (full 0%→100% gradient). */
	background: linear-gradient(100deg, var(--lnew-btn-1) 0%, var(--lnew-btn-2) 100%);
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--lnew-btn-1) 68%, transparent),
	            inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: transform .25s ease, box-shadow .25s ease;
}

.lnew-nav__cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transform: skewX(-20deg);
	transition: left .65s ease;
}

.lnew-nav__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--lnew-btn-1) 80%, transparent),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lnew-nav__cta:hover::before { left: 130%; }
.lnew-nav__cta:active { transform: translateY(0); }
.lnew-nav__cta span { position: relative; z-index: 1; }
.lnew-nav__cta-arrow { position: relative; z-index: 1; transition: transform .25s ease; }
.lnew-nav__cta:hover .lnew-nav__cta-arrow { transform: translateX(3px); }

/* Hamburger ---------------------------------------------------------- */
.lnew-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0 11px;
	border: 1px solid var(--lnew-pod-border);
	border-radius: 12px;
	background: var(--lnew-pod);
	cursor: pointer;
}

.lnew-nav__burger span {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background: var(--lnew-text);
	transition: transform .3s ease, opacity .2s ease;
}

.lnew-nav.is-open .lnew-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lnew-nav.is-open .lnew-nav__burger span:nth-child(2) { opacity: 0; }
.lnew-nav.is-open .lnew-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   Mobile — JS adds `.lnew-nav--mobile` below the configured breakpoint.
   ===================================================================== */
.lnew-nav--mobile .lnew-nav__burger { display: flex; }

/* A backdrop-filter on an ancestor traps fixed children; drop it (and any
   translucency) on the capsule so the overlay can cover the whole viewport. */
.lnew-nav--mobile .lnew-nav__inner {
	--lnew-bar: var(--lnew-bar-solid);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	gap: 10px;
	padding-left: 16px;
	padding-right: 16px;
}

.lnew-nav--mobile .lnew-nav__brand,
.lnew-nav--mobile .lnew-nav__actions { position: relative; z-index: 100; }

/* On mobile keep only the theme toggle + hamburger in the header; the
   Login / CTA move into the overlay. */
.lnew-nav--mobile .lnew-nav__actions .lnew-nav__login,
.lnew-nav--mobile .lnew-nav__actions .lnew-nav__cta { display: none; }

/* In-overlay actions (hidden on desktop) */
.lnew-nav__mobile-actions { display: none; }

.lnew-nav--mobile .lnew-nav__mobile-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	max-width: 320px;
	margin: 8px auto 0;
}

.lnew-nav--mobile .lnew-nav__mobile-actions .lnew-nav__login,
.lnew-nav--mobile .lnew-nav__mobile-actions .lnew-nav__cta {
	display: inline-flex;
	justify-content: center;
	width: 100%;
	padding: 15px 24px;
	font-size: 1.05rem;
	border-radius: 14px;
}

.lnew-nav--mobile .lnew-nav__mobile-actions .lnew-nav__login {
	border: 1.5px solid color-mix(in srgb, var(--lnew-btn-1) 45%, transparent);
	background: transparent;
}

/* Center menu → full-screen overlay */
.lnew-nav--mobile .lnew-nav__center {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: safe center;
	gap: 22px;
	padding: 96px 24px 40px;
	overflow-y: auto;
	background: var(--lnew-overlay);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .3s ease, transform .35s ease, visibility .3s;
}

.lnew-nav--mobile.is-open .lnew-nav__center { opacity: 1; visibility: visible; transform: translateY(0); }

.lnew-nav--mobile .lnew-nav__menu {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
}

.lnew-nav--mobile .lnew-nav__menu a { font-size: 1.5rem; font-weight: 600; padding: 11px 22px; }
.lnew-nav--mobile .lnew-nav__pill { display: none; }

.lnew-nav--mobile.is-open .lnew-nav__item { animation: lnew-stagger .45s both; }
.lnew-nav--mobile.is-open .lnew-nav__item:nth-child(1) { animation-delay: .05s; }
.lnew-nav--mobile.is-open .lnew-nav__item:nth-child(2) { animation-delay: .10s; }
.lnew-nav--mobile.is-open .lnew-nav__item:nth-child(3) { animation-delay: .15s; }
.lnew-nav--mobile.is-open .lnew-nav__item:nth-child(4) { animation-delay: .20s; }
.lnew-nav--mobile.is-open .lnew-nav__item:nth-child(5) { animation-delay: .25s; }
.lnew-nav--mobile.is-open .lnew-nav__item:nth-child(6) { animation-delay: .30s; }

@keyframes lnew-stagger {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

body.lnew-nav-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.lnew-nav__inner, .lnew-nav__pill, .lnew-nav__cta,
	.lnew-nav__cta::before, .lnew-nav__cta-arrow, .lnew-nav__login,
	.lnew-nav__toggle, .lnew-nav__item { transition: none !important; animation: none !important; }
}