//==============================================
// Layout/ nav
//==============================================

// Navbar container
.home .navbar-container {
  width: 100%;
  top: 0;
  z-index: 30;
}

// Navbar apperance
.navbar {
  background: var(--navbar-bg);
  box-shadow: var(--navbar-box-shadow);
  .col {
    padding: 0;
  }
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
  .navbar-nav {
    display: -webkit-box !important;
    // This is a hack!
    // Inherited Bootstrap 'display:flex' rule makes
    // menu items with more than one word display in
    // multiples lines.
  }
}

// Branding

.header-titles {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.site-title {
  font-weight: 700;
  color: var(--navbar-branding) !important;
  font-family: var(--font-heading);
}

.site-title:hover {
  text-decoration: underline;
}

.site-description {
  display: none;
}

@media (min-width: 768px) {
  .site-description {
    display: block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-left: 1rem;
  }
}

.custom-logo-link img {
  height: var(--custom-logo-height);
  overflow: hidden;
  object-fit: contain;
  width: auto;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand a {
  color: var(--navbar-branding) !important;
}

.navbar-dark .navbar-brand:hover {
  opacity: 0.5;
}

// Toggler
// Important: Do not touch .navbar-toggler border/padding/outline because
// it must be visible on Keyboard navigation

.navbar-toggler-icon {
  background-image: none !important;
  i {
    color: var(--toggler-icon-color);
    font-size: var(--toggler-icon-font-size);
    margin-top: var(--toggler-icon-mt);
  }
}

// Button Toogler - menu collapsed
button.navbar-toggler.collapsed > .navbar-toggler-icon > i:first-child {
  display: inline;
}
button.navbar-toggler.collapsed > .navbar-toggler-icon > i:last-child {
  display: none;
}

// Toggler shown - menu shown
button.navbar-toggler:not(.collapsed) > .navbar-toggler-icon > i:first-child {
  display: none;
}

button.navbar-toggler:not(.collapsed) > .navbar-toggler-icon > i:last-child {
  display: inline;
}

button.navbar-toggler > .navbar-toggler-icon > i {
  position: relative;
  top: 5px;
}

// All menu items
.navbar-dark .navbar-nav .nav-link {
  color: var(--navbar-link-color);
  text-transform: inherit;
  letter-spacing: 1px;
  font-weight: 500;
}

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

// Active menu items inherits :hover & :focus
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark
  .navbar-nav
  .nav-link.active
  .navbar-dark
  .navbar-nav
  .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
  color: var(--navbar-link-active) !important;
}

// Active menu on small devices
.navbar-dark .navbar-collapse.show .navbar-nav .active > .nav-link,
.navbar-dark
  .navbar-collapse.show
  .navbar-nav
  .nav-link.active
  .navbar-dark
  .navbar-collapse.show
  .navbar-nav
  .nav-link.show,
.navbar-dark .navbar-collapse.show .navbar-nav .show > .nav-link {
  color: var(--navbar-link-active) !important;
}

// Dropdown navigation full height
.navbar-collapse {
  transition: none; //height 0.01s; // Resets Bootstrap's animation
}

.navbar-collapse.show {
  margin: 1rem 0;
  height: calc(100vh - 80px); // Makes .navbar-extras don't disappear!
  display: table;
  transition: 0;
}

// Dropdown elements centering
.navbar-collapse.show .navbar-nav {
  height: 100%;
  width: 100vw; // Firefox fix
  display: table-cell;
  vertical-align: middle;
}

.navbar-collapse.show .nav-item {
  text-align: center;
}

.navbar-collapse.show + .navbar-extras {
  width: 100%;
  justify-content: center !important;
  margin-bottom: 1rem;
}

// Dropdown menu item
a.dropdown-item {
  color: var(--navbar-dropdown-item-color);
}

// Dropdown active menu item
.dropdown-item.active,
.dropdown-item:active {
  color: var(--white);
  background-color: var(--navbar-dropdown-item-active-bg);
}

// Navbar panels & icons
.navpanel_opener {
  margin: 0 3px;
  height: 20px !important;
}

.navpanel-dialog .modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

.navbar-main.nav-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// Navbar on home when background is transparent
.home {
  .nav-container-absolute {
    .navbar-dark .navbar-nav .nav-link {
      color: var(--black);
    }
    .navbar-dark .navbar-nav .nav-link:focus,
    .navbar-dark .navbar-nav .nav-link:hover {
      color: var(--navbar-link-color-hover);
    }
  }
}

// Controls behaviour when is set to overlap on home
@media (min-width: 991.98px) {
  .home {
    .nav-container-absolute {
      .navbar-dark .navbar-nav .nav-link {
        color: var(--white);
      }
    }
  }
  .home .nav-container-absolute {
    // It affects to the wrapper-navbar and makes the
    // navbar in desktop to be integrated with the header
    // showing the brand logo in front of the header background
    position: absolute;
  }
  .navbar {
    box-shadow: none;
  }
  .home .nav-container-absolute .navbar {
    background: none;
  }
}
@media (max-width: 991.98px) {
  .navbar-container {
    width: 100%;
    top: 0;
    z-index: 30;
  }

  .navbar-main.nav-right {
    width: 100%;
  }
}
