/*
 * Navbar Container CSS - Separate from Content Container
 *
 * This provides constrained width for navbar to keep elements visible
 * while allowing content to use full-width container-fluid layout
 */

/* Base navbar container - inherits Bootstrap container behavior */
.navbar-container-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

/* Responsive max-widths - same as original container-xxl */
@media (min-width: 576px) {
  .navbar-container-xxl {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .navbar-container-xxl {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .navbar-container-xxl {
    max-width: 960px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 1200px) {
  .navbar-container-xxl {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .navbar-container-xxl {
    max-width: 1440px;
  }
}

/* Navbar flex behavior - from original CSS */
.navbar > .navbar-container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

/* Detached navbar behavior - from original CSS */
.layout-navbar.navbar-detached.navbar-container-xxl {
  max-width: calc(1440px - 1.5rem * 2);
}

/* Search input wrapper responsive behavior */
@media (min-width: 1400px) {
  .layout-horizontal .layout-navbar .search-input-wrapper .twitter-typeahead.navbar-container-xxl {
    left: calc((100% - 1440px) * 0.5);
  }
  .layout-horizontal .layout-navbar .search-input-wrapper .twitter-typeahead.navbar-container-xxl + .search-toggler {
    right: calc((100% - 1440px + 5rem) * 0.5);
  }
}

@media (min-width: 1724px) {
  .layout-wrapper:not(.layout-horizontal) .layout-navbar .search-input-wrapper .twitter-typeahead.navbar-container-xxl {
    left: calc((100% - 1440px) * 0.5);
  }
  .layout-wrapper:not(.layout-horizontal) .layout-navbar .search-input-wrapper .twitter-typeahead.navbar-container-xxl + .search-toggler {
    right: calc((100% - 1440px + 5rem) * 0.5);
  }
}

@media (min-width: 1534px) {
  .layout-menu-collapsed .layout-wrapper:not(.layout-horizontal) .layout-navbar .search-input-wrapper .twitter-typeahead.navbar-container-xxl {
    left: calc((100% - 1440px) * 0.5);
  }
  .layout-menu-collapsed .layout-wrapper:not(.layout-horizontal) .layout-navbar .search-input-wrapper .twitter-typeahead.navbar-container-xxl + .search-toggler {
    right: calc((100% - 1440px + 5rem) * 0.5);
  }
}