/**
 * Mobile / tablet main menu (TB Mega Menu hamburger).
 * Loaded after custom.css. Breakpoint matches TB Mega Menu (≤979px).
 */

@media (max-width: 979px) {
  /* Keep branding from stealing taps in the top-left hamburger zone. */
  #header .block-system-branding-block {
    pointer-events: none;
  }
  #header .block-system-branding-block a,
  #header .block-system-branding-block img {
    pointer-events: auto;
  }

  #header #block-mainnavigation,
  #header #block-tb-megamenu-main-menu {
    z-index: 10060;
    pointer-events: auto;
  }

  .tb-megamenu > .tb-megamenu-button,
  .tb-megamenu > .btn-navbar {
    display: block !important;
    position: relative;
    z-index: 10061;
    pointer-events: auto !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
    min-width: 48px;
    min-height: 48px;
    padding: 10px !important;
    margin: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 28px;
    line-height: 1;
  }

  .tb-megamenu > .tb-megamenu-button .fa,
  .tb-megamenu > .btn-navbar .fa,
  .tb-megamenu > .tb-megamenu-button .fa-bar,
  .tb-megamenu > .btn-navbar .fa-bar {
    color: #fff !important;
    pointer-events: none;
  }

  .tb-megamenu > .nav-collapse {
    z-index: 10062;
  }

  .tb-megamenu.mobile-nav-open > .tb-megamenu-button,
  .tb-megamenu.mobile-nav-open > .btn-navbar {
    z-index: 10071 !important;
  }

  /* Expand from under the top-left hamburger (not a mid-screen overlay). */
  .tb-megamenu.mobile-nav-open > .nav-collapse,
  html.zircon-mobile-nav-open .tb-megamenu.mobile-nav-open > .nav-collapse {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: absolute !important;
    top: 48px !important;
    left: -24px !important;
    right: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 8px 0 16px !important;
    background: #00337f !important;
    z-index: 10070 !important;
  }

  .tb-megamenu.mobile-nav-open > .nav-collapse .nav,
  .tb-megamenu.mobile-nav-open > .nav-collapse .tb-megamenu-nav {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .tb-megamenu.mobile-nav-open > .nav-collapse .nav > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
  }

  .tb-megamenu.mobile-nav-open > .nav-collapse .nav > li > a,
  .tb-megamenu.mobile-nav-open > .nav-collapse .nav > li > span.tb-megamenu-no-link {
    display: block !important;
    color: #fff !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  html.zircon-mobile-nav-open #header {
    overflow: visible !important;
    height: auto !important;
    min-height: 360px;
    z-index: 10050 !important;
  }
}

/* Phones: pin hamburger to top-left of the blue header (over the logo). */
@media (max-width: 767px) {
  #header #block-mainnavigation {
    position: absolute !important;
    left: 24px !important;
    top: 24px !important;
    width: auto !important;
    float: none !important;
    z-index: 10060 !important;
  }

  #header .tb-megamenu {
    float: left;
    position: static;
  }
}