/* Menu bar = main navigation + search in one row (partials/main_nav.html,
   partials/search_bar.html). The whole bar stays at the top of the screen
   while scrolling, on every screen size. Phone-specific tweaks live in
   mobile-nav.css and mobile-header.css. */

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 950;
  /* nav's own gradient is slightly see-through; this keeps the page
     from showing through while the bar sits on top of it */
  background-color: #6b533b;
}

/* Search button at the right end of the bar, lined up with the right edge
   of the 1200px content column (or 16px from the screen edge) */
.nav-search {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(16px, calc((100vw - 1200px) / 2));
  display: flex;
  align-items: center;
  z-index: 1000;
}

.nav-search .inline-search {
  position: relative;
}

/* Desktop / tablet: the search field slides out to the left of the button.
   Never wider than the space between the menu links and the button, so it
   doesn't cover "Om mig" on narrower screens. */
@media screen and (min-width: 769px) {
  .nav-search .inline-search.active .search-wrapper {
    width: clamp(160px, calc(50vw - max(16px, (100vw - 1200px) / 2) - 230px), 320px);
  }
}

/* Recipe menu on computers: never taller than the room left below the bar
   (--dropdown-max-h, set by ui-interactions.js); longer menus scroll inside.
   Needed because the bar stays put while the page scrolls. */
@media screen and (min-width: 769px) and (hover: hover) {
  .dropdown:hover .dropdown-content {
    box-sizing: border-box;
    max-height: var(--dropdown-max-h, calc(100vh - 80px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Phones: button 8px from the edge; the nav leaves room for it */
@media screen and (max-width: 768px) {
  .nav-search {
    right: 8px;
  }

  nav {
    padding-right: 56px !important;
  }
}