/* Earth2 Recon header behaviour for the API Portal.
 *
 * Same effect as earth2recon.com.au, done with the portal's own theme:
 * HSHeader (theme.min.css / hs-header.min.js) adds .navbar-scrolled to
 * #header once the page scrolls. At the top the bar is dark translucent with
 * the white wide logo; scrolled it is the theme's white sticky bar with the
 * dark wide logo. Clicking the brand still opens the seal. No extra JavaScript.
 */

/* --- logos: white at top, dark once scrolled --------------------------- */
#header .navbar-brand-logo {
  width: auto;
  height: 47px;
  max-width: none;
  min-width: 0;
}
#header .e2r-logo-scrolled { display: none; }
#header.navbar-scrolled .e2r-logo-default { display: none; }
#header.navbar-scrolled .e2r-logo-scrolled { display: inline-block; }

/* --- bar: dark translucent at top, theme white when scrolled ------------- */
#header {
  transition: background-color .3s ease, box-shadow .3s ease;
}
#header:not(.navbar-scrolled) {
  background-color: rgba(0, 0, 0, .7);
}
#header:not(.navbar-scrolled) .navbar-toggler {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
/* White links belong to the expanded bar only. Below the lg breakpoint the
   theme opens the menu as a white panel under the bar, so white links there
   were invisible (the mobile menu looked empty). Let the theme's dark link
   colour apply on the panel; the bar itself stays dark with the white logo. */
@media (min-width: 992px) {
  #header:not(.navbar-scrolled) .navbar-nav .nav-link {
    color: #fff;
  }
  #header:not(.navbar-scrolled) .navbar-nav .nav-link:hover,
  #header:not(.navbar-scrolled) .navbar-nav .nav-link.active {
    color: rgba(255, 255, 255, .75);
  }
}
@media (max-width: 991.98px) {
  #header .navbar-collapse {
    background-color: #fff;
    border-radius: .5rem;
    margin-top: .5rem;
    padding: .5rem .25rem;
    box-shadow: 0 .6rem 1.5rem rgba(0, 0, 0, .15);
  }
  #header .navbar-nav .nav-link {
    color: #1e2022;
  }
  #header .navbar-nav .nav-link.active {
    color: #377dff;
  }
}

/* The bar is fixed, so give the page room under it - except where the page
   starts with a full-bleed hero that should sit under the bar (index). */
#content { padding-top: 4.5rem; }
#content.e2r-under-header { padding-top: 0; }

/* --- logo lightbox (click the brand, shows the seal) ----------------------- */
.e2r-lightbox {
  position: fixed; inset: 0; z-index: 99993;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 30, 30, .9);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  cursor: zoom-out;
}
.e2r-lightbox.is-open { opacity: 1; visibility: visible; }
.e2r-lightbox__img {
  max-width: min(90vw, 780px); max-height: 90vh;
  transform: scale(.85);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.e2r-lightbox.is-open .e2r-lightbox__img { transform: scale(1); }
.e2r-lightbox__close {
  position: absolute; top: 12px; right: 16px;
  width: 44px; height: 44px; border: 0; background: transparent;
  color: #ccc; font-size: 32px; line-height: 44px; cursor: pointer;
}
.e2r-lightbox__close:hover { color: #fff; }
body.e2r-lightbox-open { overflow: hidden; }
#header .navbar-brand { cursor: zoom-in; }