/**
 * @file
 * This is the base CSS rules for anything off-canvas.
 *
 * .is-ultimenu-canvas-off: #header or .region-primary-menu, etc.
 * .is-ultimenu-canvas-on: any sibling of #header.
 *
 * Tips: Use Modernizer.js to have graceful fallback for old browsers.
 *
 * The is-ultimenu-canvas--active is if enabled for both mobile and desktop.
 * Otherwise only exists on mobile only.
 */

/** Global off-canvas rules. */
.is-ultimenu-canvas-backdrop {
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  background-color: transparent;
}

.is-ultimenu-expanded .is-ultimenu-canvas-backdrop,
.is-ultimenu-canvas--hiding .is-ultimenu-canvas-backdrop {
  z-index: 9997;
  width: 100%;
  height: 100%;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.6);
}

/** If off-canvas is enabled for both mobile and desktop. */
.is-ultimenu-canvas--active {
  /** Necessary for `overflow: hidden` when expanded below. */
  position: relative;
}

/** Hide body overflow when off-canvas is being expanded. */
.is-ultimenu-canvas.is-ultimenu-expanded,
.is-ultimenu-canvas.is-ultimenu-canvas--hiding {
  overflow: hidden;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

/** The #header element, safe whether enabled for desktop, or mobile only. */
.is-ultimenu-canvas .is-ultimenu-canvas-off {
  z-index: 9998;
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  backface-visibility: hidden;
}

.is-ultimenu-canvas .is-ultimenu-canvas-off > .ultimenu--main {
  margin: 0;
  padding: 0;
}

/** The #header alike element, if activated for both desktop and mobile. */
.is-ultimenu-canvas--active .is-ultimenu-canvas-off {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100%;
  overflow: hidden;
  /** Desktop needs the exact pixel to avoid too wide off-canvas. */
  max-width: 320px;
  height: 100%;
  height: 100vh;
  min-height: 320px;
  max-height: none;
  padding: 0;
  transition: all 500ms ease;
  /** Adjust and remove !important accordingly. This is to override Bartik. */
  background: rgba(0, 0, 0, 0.9) !important;
}

.is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/** Any element below #header alike. */
.is-ultimenu-canvas--active .is-ultimenu-canvas-on {
  backface-visibility: hidden;
  position: relative;
}

/**
 * 944px with 16px base font.
 * .is-ultimenu-canvas--active is only available if off-canvas is enabled for
 * both desktop and mobile. Or a little later via JS if not. That's why we don't
 * rely on it for the smaller device to avoid FOUC.
 */
@media only screen and (max-width: 58.999em) {
  /** The #header alike element. This ensures it always kicks in. */
  .is-ultimenu-canvas .is-ultimenu-canvas-off {
    position: fixed;
    max-width: 80%;
  }

  /* Just to satisfy desktop responsive preview while viewing like mobile. */
  .is-ultimenu-canvas--active .is-ultimenu-canvas-off {
    min-height: 100%;
  }

  /** Only transform on body for small devices since desktop has fixed width. */
  .is-ultimenu-canvas.is-ultimenu-expanded,
  .is-ultimenu-canvas.is-ultimenu-canvas--hiding {
    transform: translate3d(0, 0, 0);
  }
}