/**
 * Mobile Menu main CSS
 *
 * (c) 2021 QZ Design; all rights reserved.
 */

/**
 * This class is for both the menu and the placeholder
 * (the latter which reserves space below the main content so that scrolling
 * works properly and there is not a bit missing underneath the menu that can't
 * be reached).
 *
 * The placeholder will also have a `qzmm-placeholder` class which can be used
 * for CSS if required.
 */
.qzmm-container {
  display: none;
  height: 49px;
}

/**
 * This class is for a container for the menu itself.
 * It handles positioning and Z-sorting.
 * The element will also have the `qzmm-container` class so that visibility and
 * height can be set.
 */
.qzmm-menu-container {
  position: fixed;
  z-index: 9000;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 1;
  text-align: center;
}

/* Core menu layout */
.qz-mobile-menu {
  border-top: 1px solid;
  padding: 0 1px;
  height: 100%;
}
.qzmm-menu-container,
.qz-mobile-menu,
.qz-mobile-menu > ul,
.qz-mobile-menu > ul > li,
.qz-mobile-menu > ul > li > ul {
  background-color: inherit;
}
.qz-mobile-menu ul {
  list-style: none;
}
.qz-mobile-menu > ul,
.qz-mobile-menu > ul > li > a {
  display: table;
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  table-layout: fixed;
  align-items: center;
}
.qz-mobile-menu > ul > li,
.qz-mobile-menu > ul > li > a .qzmm-link-content {
  display: table-cell;
  display: flex; /* for IE */
  flex: 1;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qz-mobile-menu > ul > li {
  padding: 0 2px;
  height: 100%;
}
/* Menu Icons support */
.qz-mobile-menu > ul > li > a .qzmm-link-content ._mi {
  display: block;
  font-size: 1.4em;
  margin: 0;
  height: 21px;
  line-height: 21px;
}
.qz-mobile-menu > ul > li > a .qzmm-link-content ._mi ~ span {
  display: block;
  font-size: 11px;
  margin: 1px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Primarily for when `<label>` is used for a popup toggle */
/* Remove unwanted styles that might be set by theme for generic `<label>` */
.qzmm-link-content {
  font-size: 1em;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-weight: inherit;
  cursor: pointer; /* `inherit` does not work in all cases in IE */
}
/* Ensure `<label>` extends to full height of `<a>` with `flex` */
.qz-mobile-menu > ul > li > a .qzmm-link-content {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: center;
}

/* For hidden checkbox to toggle popup menu */
.qzmm-visually-hidden {
	position: absolute;
	left: -9999px;
	clip: rect(1px, 1px, 1px, 1px);
}

/* Submenus */
.qz-mobile-menu ul ul {
  margin: 0;
  padding: 0;
}
.qz-mobile-menu > ul > li > ul {
  position: absolute;
  z-index: -1;
  right: -1px;
  bottom: 100%;
  left: -1px;
  margin-bottom: -1px;
  border-width: 0 1px 1px;
  border-style: solid;
  text-align: left;
  visibility: hidden;
  opacity: 0;
	transform: perspective(60px) scale(1.1) translateZ(20px)
    translateY(35%) rotateX(90deg) translateY(50%);
  transition: ease 0.4s;
  transition-property: visibility, opacity, transform;
}
.qz-mobile-menu > ul > li > input:checked ~ ul {
  visibility: visible;
  opacity: 1;
	transform: none;
}
.qz-mobile-menu li li {
  font-size: 1rem;
  border-top: 1px solid;
  padding: 0.5rem;
  line-height: 1.5;
}
.qz-mobile-menu li li a {
  display: block;
  padding: 0 0.5rem;
}
.qz-mobile-menu ul ul ul {
  margin: 0.5rem -0.5rem -0.5rem 0.5rem;
}

/* Display menu only when screen is narrow enough (and presumably portrait).
 * Many themes and other plugins have CSS break points at `min-width: 480px`.
 * However, negation of media expressions requires CSS Level 4, but the menu
 * should not appear on print media.
 * The `max-width` value is the largest that will not round to 480px in some
 * browsers, to give a consistent break point even the width is not a whole
 * number of logical pixels (e.g. due to zoom setting).
 * We await GAM implementing CSS Level 4 in a timeframe to be practicably usable
 * before their datacentres destroy us with their CO2 emissions.
 *
 * You can clearly easily override this in your theme.
 */
@media screen and (max-width: 479.99165344238px) {
  .qzmm-container {
    display: block;
  }
  .qzmm-hide-when-menu-visible {
    display: none;
  }
}