/*
* Styles for the past due banner
*
* Generally speaking, these help position the banner correctly relative to the
* size and behavior of the nav bar on each of these sites, and work around
* various undesirable side effects introduced by the banner.
*/

/*
* General
*/
:root {
  --past-due-banner-height: 88px;
}

@media (min-width: 900px) {
  :root {
    --past-due-banner-height: 40px;
  }
}

.past-due-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2999;
}

/* Show the banner along with the admin bar */
.banner-follows-adminbar {
  transform: translateY(var(--carrot-admin-bar-height));
  transition: transform 200ms linear;
}

/* Hide the banner when the admin bar is hidden */
body:not(.adminbar-pinned, .adminbar-pinned-top) .banner-follows-adminbar {
  transform: translateY(-100%);
}

/*
* app.carrot.com
*/

/* Shift the body contents to compensate for the banner */
html:not(.wp-toolbar)
  body.has-turnip-banner:not(.help-site-type-nav, .marketplace-site-type-nav) {
  margin-top: calc(
    var(--carrot-admin-bar-height) + var(--past-due-banner-height)
  ) !important;
}

/*
* Single Site App
*/

/* Fix the position of the hamburger button in the single site app on mobile */
.has-turnip-banner.page-template-page-account-singlesite
  #carrot-dash-menu-button {
  top: calc(
    calc(var(--carrot-admin-bar-height) + var(--past-due-banner-height)) * -1
  ) !important;
}

/* Fix side nav (Dashboard, Stats, etc.) falling under banner on mobile */
.has-turnip-banner.auto-fold
  :where(#adminmenu, #adminmenuback, #adminmenuwrap) {
  z-index: 3000 !important;
}

/* Banner goes back over side nav on larger displays */
@media (min-width: 960px) {
  .has-turnip-banner.auto-fold
    :where(#adminmenu, #adminmenuback, #adminmenuwrap) {
    z-index: 100 !important;
  }
}

/*
* WP Admin
*/

/* Shift the body contents to compensate for the banner */
html.wp-toolbar #wpbody {
  padding-top: calc(
    var(--carrot-admin-bar-height) + var(--past-due-banner-height)
  );
}

/* Fix the position of the contents of the Gravity Forms form editor */
body.toplevel_page_gf_edit_forms.has-turnip-banner .gforms_edit_form {
  top: calc(46px + var(--past-due-banner-height));
}

.has-turnip-banner .gforms_edit_form .editor-sidebar {
  top: calc(110px + var(--past-due-banner-height));
}

@media (min-width: 600px) {
  body.toplevel_page_gf_edit_forms.adminbar-pinned .gforms_edit_form,
  body.toplevel_page_gf_edit_forms.adminbar-pinned-top .gforms_edit_form {
    top: calc(
      var(--carrot-admin-bar-height) + var(--past-due-banner-height)
    ) !important;
  }
}

/*
* Help site and other sites with a similar nav bar (e.g., content.carrot.com)
*/

/* Place the banner in a static position at the top of the screen; don't stay in view while scrolling */
body.help-site-type-nav .past-due-banner {
  position: static;
  margin: 0 -20px;
  width: calc(100% + 40px);
}

/* Shift the body contents to compensate for the banner */
@media (min-width: 1001px) {
  body.help-site-type-nav.has-turnip-banner.top-navbar {
    padding-top: calc(78px + var(--past-due-banner-height));
  }

  /* Keep the banner at the top of the view while scrolling */
  body.help-site-type-nav .past-due-banner {
    position: fixed;
    margin: 0;
    width: 100%;
  }

  /* Move the nav bar below the banner */
  body.help-site-type-nav.has-turnip-banner .navbar-fixed-top {
    top: var(--past-due-banner-height);
  }
}

/*
* Marketplace site
*/

body.marketplace-site-type-nav.has-turnip-banner {
  padding-top: calc(var(--banner-height) + var(--past-due-banner-height));
}

body.marketplace-site-type-nav.has-turnip-banner .banner {
  top: var(--past-due-banner-height);
}