// Header

.masthead {
  position: relative;
  width: 100%;

  &,
  &.sticky {
    z-index: $zindex-fixed + 1 !important; // stylelint-disable-line declaration-no-important
  }

  &.sticky:not(.is-sticky),
  &[data-scroll="sticky"]:not(.sticky) {
    box-shadow: none;
  }

  &[data-scroll="sticky"]:not(.sticky) {
    visibility: hidden;
  }

  .show ~ .navbar,
  .showing ~ .navbar {
    .navbar-brand,
    .navbar-nav--toggler,
    .if-offcanvas-show--show {
      z-index: $zindex-offcanvas + 2;
    }
  }

  &[data-scroll="sticky"]:not(.is-sticky, :hover) {

    .masthead-bg {
      --#{$prefix}bg-opacity: 0;
    }
  }
}

.masthead-navbartop {
  display: flex;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
  font-size: $small-font-size;

  .nav-link {
    --#{$prefix}nav-link-font-size: #{$small-font-size};
  }
}

.masthead-navbar {
  --lx-navbar-height: var(--lx-masthead-navbar-height);

  display: flex;
  align-items: stretch;
  height: var(--lx-navbar-height);
  padding-top: 0;
  padding-bottom: 0;

  .collapse.show ~ &,
  .collapse.showing ~ & {

    .navbar-bg {
      --#{$prefix}bg-opacity: 1;
    }
  }

  @include media-breakpoint-down(lg) {

    .show ~ &,
    .showing ~ & {

      .navbar-bg {
        --#{$prefix}bg-opacity: 1;
      }
    }
  }

}

.masthead-navbar-nav {
  --#{$prefix}nav-link-font-weight: #{$masthead-navbar-nav-link-font-weight};

  height: 100%;
}

.masthead-searchbar {
  box-shadow: $masthead-box-shadow;
}

.masthead:has(.masthead-sections):not(:has(.offcanvas.show), :has(.offcanvas.showing)) {
  .navbar:hover {
    z-index: $zindex-dropdown + 5;
    ~ .masthead-sections {
      z-index: $zindex-dropdown - 5;
    }
  }
}

@include media-breakpoint-up(var(--lx-main-breakpoint)) {

  .masthead-navbar {
    --lx-navbar-height: var(--lx-masthead-navbar-height-lg);

    // transition: $transition-base;

    .sticky--outofviewport & {
      height: var(--lx-masthead-navbar-height);
    }
  }

  .masthead.is-sticky + .sticky-placeholder {
    min-height: var(--lx-masthead-navbar-height-lg) !important; // stylelint-disable-line declaration-no-important
  }
}

.masthead-offcanvas {

  .offcanvas-body:first-child {
    padding-top: calc(var(--#{$prefix}offcanvas-padding-y) + var(--lx-masthead-height));
    padding-bottom: calc(var(--#{$prefix}offcanvas-padding-y) * .5);
  }
}