/* ── Hover background ──────────────────────────────────────────────────────
   A real element behind everything in the nav. JS owns the motion via
   opacity 0→1; no CSS transition. */

.nav_hover-bg {
  position: absolute;
  inset: 0;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Make sure nav content sits above the hover bg */
.c-nav > *:not(.nav_hover-bg) {
  position: relative;
  z-index: 1;
}

/* ── Nav border ───────────────────────────────────────────────────────────
   Default: transparent border (reserves the space, no visual line).
   .is-bg-full: border becomes visible. JS adds this class only when
   the bg-in tween completes, removes it the instant bg-out starts,
   so the border is only visible during the steady "fully in" state,
   never during transitions.
*/

.c-nav {
  border-bottom: 1px solid transparent;
}

.c-nav.is-bg-full {
  border-bottom-color: var(--_colours-semantics---stroke--light);
}

.c-nav.is-bg-full .nav_dropdown-panels {
  border-bottom: 1px solid var(--_colours-semantics---stroke--light);
}

/* ── Panel link micro-interactions ───────────────────────────────────────── */

.nav_panel-link:hover .nav_panel-link-title {
  padding-left: 26px;
}

.nav_panel-link:hover .nav_panel-link-icon {
  transform: translate(0%, 0%);
}

.c-button[data-wf--button--variant="default---for-navbar"],
.c-cta[data-wf--cta--custom-variant="default-navbar"] {
  transition: all 200ms ease-in-out;
}

/* Active trigger button (desktop only) */
@media (min-width: 991px) {
   .c-button[data-wf--button--variant="default---for-navbar"].is-active {
     transition: border 80ms, background-color 80ms;
   }

  /* Suppress any link hover/active bg until the white nav is fully in. */
  .c-nav:not(.is-bg-full) .nav_list-item [data-button]:hover,
  .c-nav:not(.is-bg-full) .nav_list-item [data-button].is-active,
  .c-nav:not(.is-bg-full) .nav_list-item .c-cta:hover {
    background-color: transparent;
  }

  .c-nav.is-bg-full .nav_list-item [data-button].is-active {
    background-color: var(--_colours-semantics---surface-light--secondary);
  }

  .nav_list-item [data-button] > .button_icon {
    transition: transform 200ms ease-in-out;
  }

  .c-nav.is-bg-full .nav_list-item [data-button].is-active > .button_icon {
    transform: rotate(180deg);
  }

  .nav_list-item [data-button].is-active > .button_text {
    color: var(--_colours-semantics---content-light--primary);
  }
}

/* ── Mobile menu ────────────────────────────────────────────────────────── */

@media (max-width: 990px) {
  .nav_panels-container {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Hamburger Open state (X) */
  .nav_hamburger-btn.is-open .nav_hamburger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .nav_hamburger-btn.is-open .nav_hamburger-line:nth-child(2) {
    opacity: 0;
    width: 0;
  }

  .nav_hamburger-btn.is-open .nav_hamburger-line:nth-child(3) {
    transform: translateY(-6.2px) rotate(-45deg);
  }

  .nav_middle-wrap {
    transition:
      opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
      visibility 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .nav_middle-wrap.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  .nav_panel {
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .nav_panel.uc-products,
  .nav_panel.uc-solutions,
  .nav_panel.uc-developers,
  .nav_panel.uc-resources {
    transform: translateX(100px) !important;
    transition:
      opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .nav_panel.uc-products.is-active,
  .nav_panel.uc-solutions.is-active,
  .nav_panel.uc-developers.is-active,
  .nav_panel.uc-resources.is-active {
    transform: translateX(0px) !important;
  }

  .nav_panel.is-active {
    pointer-events: all !important;
    opacity: 1 !important;
    transform: translateX(0px);
  }
}

/* ── Dark theme: default state (no bg in) ────────────────────────────── */

.c-nav[data-theme='dark'] .nav_logo-link img,
.c-nav[data-theme='dark'] [data-button] .button_icon {
  filter: brightness(0) invert(1);
  transition: filter 200ms ease-in-out, transform 200ms ease-in-out;
}

.c-nav[data-theme='dark'] [data-button].is-active .button_icon,
.c-nav[data-theme='dark'] [data-button]:hover .button_icon {
  filter: brightness(1) invert(0);
}

.c-nav[data-theme='dark'] [data-button] {
  color: var(--_colours-semantics---content-dark--primary);
  transition: all 200ms ease-in-out;
}

.c-nav[data-theme='dark'] .nav_list-item .c-cta {
  color: var(--_colours-semantics---content-dark--primary);
  transition: all 200ms ease-in-out;
}

.c-nav[data-theme='dark'] .nav_list-item .c-cta:hover {
  color: var(--_colours-semantics---content-light--primary);
}

.c-nav[data-theme='dark'] .nav_list-item a:not([data-button]) {
  color: var(--_colours-primitives---neutral--white);
  transition: all 200ms ease-in-out;
}

.c-nav[data-theme='dark'] .nav_hamburger-line {
  background-color: var(--_colours-primitives---neutral--white);
  transition: background-color 200ms ease-in-out;
}

/* ── Dark theme: with bg in (gated by JS via .is-bg-on) ───────────────
   JS adds .is-bg-on when the bg starts coming in, removes it when bg
   starts going out, so color flips stay in sync with the bg. */

@media (min-width: 991px) {
  .c-nav[data-theme='dark'].is-bg-on .nav_logo-link img,
  .c-nav[data-theme='dark'].is-bg-on [data-button] .button_icon {
    filter: brightness(0) invert(0);
  }

  .c-nav[data-theme='dark'].is-bg-on [data-button],
  .c-nav[data-theme='dark'].is-bg-on .nav_list-item .c-cta,
  .c-nav[data-theme='dark'].is-bg-on .nav_list-item .c-cta:hover,
  .c-nav[data-theme='dark'].is-bg-on .nav_list-item a:not([data-button]) {
    color: var(--_colours-semantics---content-light--primary);
  }
}

/* ── Mobile dark theme drawer-open behaviors ─────────────── */

@media (max-width: 990px) {
  .c-nav[data-theme='dark'] .nav_list-item .c-cta:hover,
  .c-nav[data-theme='dark'] [data-button]:hover {
    color: var(--_colours-semantics---brand--main);
  }

  .c-nav[data-theme='dark'] [data-button].is-active .button_icon,
  .c-nav[data-theme='dark'] [data-button]:hover .button_icon {
    filter: brightness(0) invert(1);
  }

  .c-nav[data-theme='dark'] .nav_back-btn.text-body-sm {
    color: var(--_colours-semantics---content-dark--primary);
  }

  .c-nav[data-theme='dark'] .nav_back-btn-icon {
    filter: brightness(0) invert(1);
  }

  .c-nav[data-theme='dark'] .nav_middle-wrap.is-open {
    background-color: var(--_colours-semantics---content-light--primary);
  }
}

/* ── iOS viewport: prefer small vh so layout doesn't grow when the URL
   bar collapses mid-scroll. Paired with the ScrollTrigger ignoreMobileResize
   config in footer.js. */

.hero-scene {
  min-height: 100svh !important;
}

.section {
  height: 100svh !important;
}

.code-embed {
  height: 100svh !important;
}

/* ── Mobile hero snap: footer.js adds .is-mobile-end on the masked video when
   the user scrolls past the snap threshold. CSS handles the transition from
   the in-flow peek state to a fixed full-screen state. */

@media (max-width: 990px) {
  [data-hero="masked"] {
    transition:
      top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-hero="masked"].is-mobile-end {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    border-radius: 0 !important;
    z-index: 5;
  }
}