/* ==========================================================================
   Influex Nav — portable, SELF-CONTAINED component styles
   Powers the [influex_nav] shortcode. Everything the nav needs is in this one
   file: the design tokens it uses (inlined :root values), the base layout
   pulled from the design system's site.css, and the landing-page overrides.
   There is intentionally NO @import — so the nav renders identically wherever
   the shortcode is used, with no dependency on the design-system stylesheets
   loading or on relative-path/CSS-optimizer behaviour.

   Rule values match influex-landing.css / the design system exactly, so on the
   landing template (which loads the full design system) there is no conflict.
   ========================================================================== */

/* Design tokens the nav uses — inlined (resolved values from the design
   system's colors_and_type.css) so this component is fully self-contained and
   does NOT depend on an @import chain. Relying on @import here was the cause of
   the nav rendering unstyled on non-landing pages: when a CSS cache/optimizer
   or path context broke the import, the tokens + base layout below never
   loaded. These match the design-system values exactly, so on pages that DO
   load the design system there's no conflict. */
:root {
  --color-ivory: #FEF7DF;
  --color-ivory-muted: rgba(254, 247, 223, 0.70);
  --fg-1: var(--color-ivory);
  --fg-2: var(--color-ivory-muted);
  --color-champagne: #ECC777;
  --color-obsidian: #000000;
  --font-micro: 'Inter', 'Montserrat', system-ui, sans-serif;
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------
   Nav — fully transparent over hero. A separate fixed scrim element
   (.ix-nav-scrim) supplies the dark gradient so it can spill below the
   nav without fighting the nav's sticky stacking context.

   Layout props (display/justify/padding/z-index) are inlined from the
   design system's site.css base so the nav lays out correctly without it.
------------------------------------------------------------------ */
.ix-nav {
  /* Base layout (from site.css). */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 64px;
  z-index: 50;
  /* Fixed (not sticky) so the hero + collage extend all the way up behind
     the nav. Without this the body's black background sits above the hero
     and reads as a solid dark bar — even with a transparent nav. */
  position: fixed !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent;
  transition: background 320ms ease, backdrop-filter 320ms ease, border-color 320ms ease;
}

/* Desktop link row (from site.css base). */
.ix-nav-links {
  display: flex;
  gap: 28px;
}
.ix-nav-link {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
  opacity: 0.85;
  transition: color 180ms var(--ease-quint), opacity 180ms var(--ease-quint);
}
.ix-nav-link:hover {
  opacity: 1;
  color: var(--color-champagne);
}
.ix-nav.is-scrolled {
  background: rgba(0,0,0,0.9) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border-bottom-color: rgba(255,255,255,0.06);
}
.ix-nav-scrim {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 220px;
  pointer-events: none;
  z-index: 49;                     /* just below the nav (z-index 50) */
  /* Top-to-transparent fade. Strong enough at the top to clearly read as a
     darkening behind the logo/links, softly dissolving into the collage. */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.72) 20%,
    rgba(0,0,0,0.50) 45%,
    rgba(0,0,0,0.25) 70%,
    rgba(0,0,0,0.08) 88%,
    rgba(0,0,0,0) 100%);
  opacity: 1;
  transition: opacity 320ms ease;
}
.ix-nav-scrim.is-hidden { opacity: 0; }

/* ------------------------------------------------------------------
   CTA pill — neutralize every background / border / radius that the
   design system applies; the visible shape is 100% the inline SVG.
------------------------------------------------------------------ */
.ix-cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #FEF7DF;
  text-decoration: none;
  padding: 18px clamp(36px, 4vw, 56px);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer;
  transition: color 220ms var(--ease-quint),
              transform 220ms var(--ease-quint);
}
.ix-cta-pill:hover {
  background: transparent !important; /* kill site.css gold rectangle wash */
  color: var(--color-obsidian, #000);
  transform: translateY(-1px);
}
.ix-cta-pill:active { transform: translateY(0) scale(0.985); }

/* Inline SVG polygon stroke — full-bleed inside the button. The label span
   sits on top at the default stacking order. */
.ix-cta-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;    /* stroke can sit flush with viewport edges */
  z-index: 0;
}
.ix-cta-stroke polygon {
  fill: transparent;
  transition: fill 220ms var(--ease-quint);
}
.ix-cta-pill:hover .ix-cta-stroke polygon {
  fill: url(#ix-grad-auth);
}
.ix-cta-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* Tighter nav CTA */
.ix-cta-pill {
  font-size: 11px;
  padding: 14px 32px;
  letter-spacing: 0.4em;
}

/* ------------------------------------------------------------------
   Brand logo (nav + footer use the real PNG)
------------------------------------------------------------------ */
.ix-brand { display: inline-flex; align-items: center; }
.ix-brand-logo {
  height: 38px !important; 
  width: auto !important;           /* ~20% bigger than the base 32px */
  display: block !important;
  image-rendering: -webkit-optimize-contrast;
}

/* ------------------------------------------------------------------
   Mobile nav — under 1200px the desktop link row + desktop CTA pill
   are hidden and a hamburger swaps in, opening a panel that contains
   the same links + Book Your Call.
------------------------------------------------------------------ */
.ix-nav-toggle {
  display: none;
  position: relative;
  width: 36px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}
.ix-nav-toggle-line {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: rgba(254, 247, 223, 0.92);
  border-radius: 1px;
  transition: transform 280ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1)),
              opacity 200ms ease;
}
.ix-nav-toggle-line:nth-child(1) { top: 8px; }
.ix-nav-toggle-line:nth-child(2) { top: 15px; }
.ix-nav-toggle-line:nth-child(3) { top: 22px; }
.ix-nav-toggle[aria-expanded="true"] .ix-nav-toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ix-nav-toggle[aria-expanded="true"] .ix-nav-toggle-line:nth-child(2) {
  opacity: 0;
}
.ix-nav-toggle[aria-expanded="true"] .ix-nav-toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.ix-nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 90px clamp(20px, 6vw, 48px) clamp(24px, 5vh, 48px);
  background: rgba(0, 0, 0, 0.96);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(236, 199, 119, 0.18);
  transform: translateY(-100%);
  transition: transform 380ms var(--ease-quint, cubic-bezier(0.22, 1, 0.36, 1));
}
.ix-nav-mobile[hidden] { display: none !important; }
.ix-nav-mobile.is-open { transform: translateY(0); }
.ix-nav-mobile-link {
  font-family: var(--font-micro);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(254, 247, 223, 0.9);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 180ms ease;
}
.ix-nav-mobile-link:hover { color: var(--color-champagne, #ECC777); }
.ix-nav-mobile-cta {
  margin-top: 18px;
  align-self: center;
}

@media (max-width: 1199px) {
  .ix-nav-links { display: none; }
  .ix-nav-cta-desktop { display: none; }
  .ix-nav-toggle { display: inline-block; }
}

/* Extra-narrow phones — pull the brand logo in even further. */
@media (max-width: 480px) {
  .ix-nav { padding: 12px 14px; }
  .ix-brand-logo { height: 22px; }
  .ix-nav-toggle { width: 32px; height: 28px; }
  .ix-nav-toggle-line:nth-child(1) { top: 6px; }
  .ix-nav-toggle-line:nth-child(2) { top: 13px; }
  .ix-nav-toggle-line:nth-child(3) { top: 20px; }
}