/* Mobile menu: solid panel + page blur scrim; scroll lock while open.
   Breakpoint matches landing-hero-nav.css, where the floating pill nav hands
   over to the hamburger at 1149px. */

@media (max-width: 1149px) {
  body.mobile-nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    touch-action: none;
  }

  html.mobile-nav-open {
    overflow: hidden;
  }

  /* Dim the page behind the sheet. Light touch on the blur - the sheet is glass
     now (site-nav-pill.css), so the page should still read through it. */
  body.mobile-nav-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    pointer-events: none;
  }

  body.mobile-nav-open .header,
  body.mobile-nav-open #siteHeader {
    z-index: 100000;
  }

  body.mobile-nav-open .mobile-nav.active {
    z-index: 99999;
  }

  .mobile-nav .mobile-nav-cta-pill-btn {
    width: auto;
    min-height: 48px;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.85rem 0.75rem;
    gap: 0.4rem;
  }

  .mobile-nav .mobile-nav-cta-pill-btn i {
    font-size: 0.72rem;
  }

  .mobile-nav .mobile-nav-cta-pill-divider {
    margin: 0.3rem 0;
  }

  body.mobile-nav-open #chatbot-container,
  body.mobile-nav-open .se-scroll-up,
  body.mobile-nav-open .uwy,
  body.mobile-nav-open .uwy-container,
  body.mobile-nav-open #userwayAccessibilityIcon,
  body.mobile-nav-open .acsb-trigger,
  body.mobile-nav-open .acsb-widget,
  body.mobile-nav-open [data-acsb-custom-trigger],
  body.mobile-nav-open [class*="userway"],
  body.mobile-nav-open [id*="userway"],
  body.mobile-nav-open [id*="UserWay"] {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Safari iOS browser: the bottom URL bar eats into the viewport, so cap the
     sheet against svh rather than vh or it clips its own CTAs. The sheet sizes
     to its content (site-nav-pill.css); this is only the ceiling. */
  .mobile-nav {
    box-sizing: border-box;
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  @supports not (height: 100svh) {
    .header .mobile-nav {
      max-height: calc(
        100dvh - var(--header-h, 72px) - env(safe-area-inset-top, 0px)
          - env(safe-area-inset-bottom, 0px) - 1.4rem
      );
    }
  }
}

@media (prefers-color-scheme: dark) {
  @media (max-width: 1149px) {
    body.mobile-nav-open::before {
      background: rgba(2, 6, 23, 0.6);
    }
  }
}