/* ==========================================================================
   mitech Consultants Inc.  .  nav.css
   Mobile navigation, loaded on every page after the page stylesheet so the
   menu behaves the same everywhere.

   Below 1024 the mega-menu is moved by common.js into the "What We Do" item,
   so it opens as an accordion inside the menu panel and pushes the other
   links down instead of floating over them. The panel scrolls on its own
   while the page behind it is locked.
   ========================================================================== */

@media (max-width: 63.99em) {

  /* page behind an open menu does not scroll. Only the root is locked:
     overflow on body as well turns body into its own scroll box, and the
     sticky header then pins to the top of the page instead of the screen,
     so a menu opened after scrolling appeared far above the viewport. */
  html.mi-no-scroll {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* the bar stays solid while the menu is open, whatever the scroll state */
  html.mi-no-scroll .mi-header {
    background-color: var(--mi-ink);
  }

  .mi-nav[data-open='true'] .mi-nav__list {
    /* 100vh on phones includes the browser toolbar, which hid the last
       links; dvh is the visible height. vh stays as the fallback. */
    max-height: calc(100vh - var(--mi-header) - var(--mi-s-24));
    max-height: calc(100dvh - var(--mi-header) - var(--mi-s-24));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mi-nav__item {
    flex-wrap: wrap;
  }
  .mi-nav__item > .mi-nav__link {
    flex: 1 1 auto;
  }
  .mi-nav__toggle {
    min-width: 2.75rem;
    justify-content: center;
  }

  /* the mega-menu as an accordion inside its item */
  .mi-nav__item > .mi-mega {
    flex: 0 0 100%;
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: var(--mi-s-4) 0 var(--mi-s-12);
    background: none;
    border: 0;
    border-block-start: var(--mi-border) solid rgba(143, 202, 238, 0.16);
    border-radius: 0;
    box-shadow: none;
  }
  .mi-nav__item > .mi-mega .mi-mega__grid {
    gap: 0;
    padding: 0;
    max-width: none;
  }
  .mi-nav__item > .mi-mega .mi-mega__item {
    padding: var(--mi-s-12) var(--mi-s-8);
  }
  .mi-nav__item > .mi-mega .mi-mega__kind {
    font-size: 0.75rem;
  }
  .mi-nav__item > .mi-mega .mi-mega__name {
    margin-block-start: var(--mi-s-4);
  }
  /* the descriptions make a six-item list too long to scan on a phone */
  .mi-nav__item > .mi-mega .mi-mega__note {
    display: none;
  }
  .mi-nav__item > .mi-mega .mi-mega__feature {
    margin-block-start: var(--mi-s-8);
    padding: var(--mi-s-16);
  }
}

/* Footer bottom bar: the legal menu sits in a row beside the copyright. */
.mi-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-s-8) var(--mi-s-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Logos are <picture> elements; keep the wrapper from adding an inline gap. */
.mi-brand picture,
.mi-foot__brand picture {
  display: block;
}