/*!
 * Desktop search sits immediately under the main nav and overlays the
 * hero so .erp-hero min-height (100vh - 4.5rem) does not grow.
 * Unique filename: nginx caches /css/ immutable.
 */

@media (min-width: 901px) {
  html[data-active-module="landing"] {
    --erp-desktop-search-h: 3rem;
  }

  html[data-active-module="landing"] body.erp-body #navbar.navbar,
  html[data-active-module="landing"] body.erp-body #navbar.erp-shell-navbar,
  html[data-active-module="landing"] body.erp-body nav.navbar.erp-shell-navbar {
    flex-direction: column !important;
    align-items: stretch !important;
    height: var(--erp-nav-main-h) !important;
    max-height: var(--erp-nav-main-h) !important;
    overflow: visible !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar .nav-container {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar {
    order: 2 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--erp-desktop-search-h) !important;
    min-height: var(--erp-desktop-search-h) !important;
    max-height: var(--erp-desktop-search-h) !important;
    z-index: 2 !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #utilAiSearchSlot,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .util-ai-search-slot {
    width: min(42rem, calc(100% - 14rem)) !important;
    min-width: 18rem !important;
    max-width: 42rem !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  html[data-active-module="landing"] body.erp-body #navbar #util-bar #us-trigger,
  html[data-active-module="landing"] body.erp-body #navbar #util-bar .us-trigger,
  html[data-active-module="landing"] body.erp-body #navbar #utilAiSearchSlot .us-trigger {
    width: 100% !important;
  }

  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center {
    padding-top: calc(2.4rem + var(--erp-desktop-search-h)) !important;
    min-height: calc(100vh - 4.5rem) !important;
  }
}