//
// Navbar
// --------------------------------------------------
// Main nav wrapper

.section-nav {
  background: $primary no-repeat center center;
  background-size: cover;
  position: relative;

  padding-top: map-get($spacers, 4);
  padding-bottom: map-get($spacers, 4);

  @include media-breakpoint-up(lg) {
    padding-top: map-get($spacers, 5);
    padding-bottom: map-get($spacers, 5);
  }

  #p1 & {
    background: transparent !important;
    position: absolute;
    width: 100%;
  }
}


// Logo in der Navi
.navbar-brand {
  margin-left: $navbar-brand-margin-end;
  padding-top: 0;
  padding-bottom: 0;
}


.navbar-toggler {
  border: 0;
  color: $gray-700;
  --mb-bar-height: 2px;
  --mb-bar-spacing: 6px;
}


// main navbar
.navbar-main {

  background-color: $white;
  z-index: $zindex-fixed;
  box-shadow: $box-shadow-sm;
  border-radius: $border-radius;
  min-height: 60px;

  &.fixed-top {
    border-radius: 0;
    will-change: transform;
    transform: translateY(-100%);

    &.slideDown {
      transition: transform 200ms linear;
      transform: translateY(0%);
    }
  }

  .dropdown-menu {
    border-top-width: 3px;
  }

  .flyout-menu {
    .frame-42 {
      columns: 2;
      column-gap: 2rem;
    }

    .flyout-inner {
      .ce-header {
        .h3 {
          display: inline-block;
          margin-left: -2rem;
          padding: 0.5rem 0.75rem 0.5rem 2rem;

          background-color: white;
          color: $primary;
        }
      }

      .flyout-link {
        break-inside: avoid-column;

        .link-text p {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  .nav-pages {

    .nav-link {

      &:hover, &:focus {
        box-shadow: $box-shadow-inset-lg;
      }

      &.show {
        box-shadow: $box-shadow-inset-lg;
        background-color: darken($primary, 5%);
        color: #fff;
      }

      &.active {
        background-color: inherit;
        color: inherit;
        box-shadow: inherit;

        &:hover, &:focus {
          color: $nav-link-hover-color;
        }

        &.show {
          box-shadow: $box-shadow-inset-lg;
          background-color: darken($primary, 5%);
          color: #fff;
        }
      }
    }
  }
}
