#mobile-button-header {
  top: 0;
}

.c-page-header {
  @include clearfix();
  background-color: palette(gray, lightest);
  z-index: 1100;
  border-bottom: 1px solid palette(gray, lighter);
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transition: all .2s ease;


  .admin-menu & {
    top: $admin-menu-height * 4;

    @media screen and (min-width: $admin-menu-small-breakpoint){
      top: $admin-menu-height * 3;
    }

    @media screen and (min-width: $admin-menu-medium-breakpoint){
      top: $admin-menu-height * 2;
    }

    @media screen and (min-width: $admin-menu-large-breakpoint){
      top: $admin-menu-height;
    }
  }
}

.c-page-header__inner {
  max-width: $global-page-max-width;
  margin: 0 auto;
  width: 100%;
  min-height: $header-height--small-breakpoint;

  //Based on the old breakpoints used with v1 of the site. Should technically be the "small" breakpoint here: `@include breakpoint(small);`. TODO: fix after vertical landing page updates are live.
  @include breakpoint(768px){
    padding-left: $spacing-unit;
    padding-right: $spacing-unit;
    min-height: $header-height--large-breakpoint;
  }
}