/* ==================================================================
   JUSTPIXEL
   GLOBAL HEADER
   ================================================================== */

/* ==================================================================
   NAVBAR
   ================================================================== */

.navbar {
  border-bottom: 1px solid var(--jp-header-border);

  background: var(--jp-header-bg) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 1px 0 rgba(0, 18, 51, 0.02);
}

/* ==================================================================
   BRAND
   ================================================================== */

.navbar-brand {
  display: inline-flex;
  align-items: center;

  color: var(--jp-text);

  font-weight: var(--jp-weight-bold);

  text-decoration: none;
}

.navbar-brand:hover {
  color: var(--jp-primary);

  text-decoration: none;
}

.navbar-brand img {
  display: block;

  max-height: 42px;

  width: auto;
}

/* ==================================================================
   NAVIGATION LINKS
   ================================================================== */

.navbar .nav-link {
  position: relative;

  color: var(--jp-text-muted);

  font-weight: var(--jp-weight-medium);

  transition:
    color var(--jp-transition-fast),
    background-color var(--jp-transition-fast);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--jp-primary);
}

/* ==================================================================
   ACTIVE NAVIGATION
   ================================================================== */

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: var(--jp-primary);

  font-weight: var(--jp-weight-semibold);
}

/* ==================================================================
   MOBILE TOGGLER
   ================================================================== */

.navbar-toggler {
  border-color: var(--jp-border);

  border-radius: var(--jp-radius-sm);
}

.navbar-toggler:focus {
  box-shadow: var(--jp-focus-ring);
}

/* ==================================================================
   MOBILE NAVIGATION
   ================================================================== */

@media (max-width: 991px) {
  .navbar-collapse {
    padding-top: var(--jp-space-3);
    padding-bottom: var(--jp-space-2);
  }

  .navbar .nav-link {
    padding-top: var(--jp-space-2);
    padding-bottom: var(--jp-space-2);
  }
}