/*
 * FDT Theme — site header layout (logo, and upcoming header search box).
 */

/*
 * #navbar-main is position:fixed (see navbar-hamburger.css), so it no
 * longer pushes page content down on its own. --fdt-header-height is set
 * by js/navbar-scroll.js to the header's unscrolled (larger) rendered
 * height — deliberately NOT re-measured on every scroll, since changing
 * #page-wrapper's own padding live shifts all page content by that many
 * pixels while window.scrollY stays put, which reads as the page
 * jumping/auto-scrolling. No transition here for the same reason: this
 * value only changes on load/resize, never mid-scroll, so there's
 * nothing that needs animating. 126px is a fallback matching the
 * unscrolled height, in case this CSS paints before the JS has run.
 */
#page-wrapper {
  padding-top: var(--fdt-header-height, 126px);
}

/*
 * #navbar-main's default (Bootstrap) layout is a flex row with
 * justify-content: space-between. With 3 unequal-width items (logo,
 * search box, hamburger), space-between gives equal GAPS, not a
 * centered middle item. Grid with an auto-sized center column and two
 * equal 1fr side columns keeps the search box centered regardless.
 */
#navbar-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 15px;
  padding-right: 15px;
  transition: padding 0.3s ease-in-out;
}

/* Shrink the header padding once the page has scrolled, same trigger as
   the logo (see js/navbar-scroll.js). */
#navbar-main.navbar-main--scrolled {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  width: 250px;
  flex-shrink: 0;
}

#block-fdt-theme-search-box {
  grid-column: 2;
  justify-self: center;
}

#navbar-main .hamburger-toggler {
  grid-column: 3;
  justify-self: end;
}

.navbar-brand img {
  max-width: 250px;
  height: auto;
  transition: max-width 0.3s ease-in-out;
}

/* Shrink the logo once the page has scrolled (see js/navbar-scroll.js). */
#navbar-main.navbar-main--scrolled .navbar-brand img {
  max-width: 150px;
}

#block-fdt-theme-search-box input,
#block-fdt-theme-search-box button {
  border-radius: 0;
}

/*
 * search_api_autocomplete's suggestion dropdown sets its own z-index
 * inline via jQuery UI, but that value is computed relative to whatever
 * positioned ancestor the widget finds (varies — sometimes lower than
 * #navbar-main's own descendants like .hamburger-toggler at 1200 or
 * .collab-header-logo at 1150), so it can end up painted underneath
 * part of the fixed header. !important is needed here since it's the
 * only way to reliably beat an inline style set by third-party JS.
 */
.search-api-autocomplete-search {
  z-index: 10000 !important;
}

/* ---- Responsive ---- */
@media (max-width: 1400px) {}

@media (max-width: 1200px) {}

@media (max-width: 992px) {}

@media (max-width: 768px) {}

@media (max-width: 576px) {}