/* ============================================================
   Hover mega menu for the top (blue) tab bar
   A three-line icon is always visible; on hover the lines
   rotate into vertical bars and a large panel pops out
   ============================================================ */

.product-nav-menu {
  position: relative;
  /* widen the hover zone horizontally without moving the visual position */
  padding-inline: 22px;
  margin-inline: -22px;
}

/* Bridge the gap between the button and the panel: the hover state is
   kept while the mouse moves from the button to the panel */
.product-nav-menu::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -70px;
  right: -70px;
  height: .8rem;
}

/* The trailing entry: sits flush against the right side of the secondary nav bar */
.product-nav-menu--trailer {
  margin-left: auto;
}

.product-nav-menu__burger {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 16px;
  vertical-align: middle;
}

.product-nav-menu__burger > span {
  position: absolute;
  left: 1px;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
}

/* Three horizontal lines stacked top / middle / bottom */
.product-nav-menu__burger > span:nth-child(1) { top: 0; }
.product-nav-menu__burger > span:nth-child(2) { top: 7px; }
.product-nav-menu__burger > span:nth-child(3) { top: 14px; }

/* On hover the three lines rotate 90° into vertical bars that fan
   out horizontally so they do not overlap into a single line */
.product-nav-menu:hover .product-nav-menu__burger > span:nth-child(1),
.product-nav-menu:focus-within .product-nav-menu__burger > span:nth-child(1) {
  transform: translate(-6px, 7px) rotate(90deg);
}
.product-nav-menu:hover .product-nav-menu__burger > span:nth-child(2),
.product-nav-menu:focus-within .product-nav-menu__burger > span:nth-child(2) {
  transform: translate(0, 0) rotate(90deg);
}
.product-nav-menu:hover .product-nav-menu__burger > span:nth-child(3),
.product-nav-menu:focus-within .product-nav-menu__burger > span:nth-child(3) {
  transform: translate(6px, -7px) rotate(90deg);
}

/* The panel is hidden by default */
.product-nav-menu__panel {
  display: none;
  border-radius: .2rem;
  box-shadow: var(--md-shadow-z3);
  column-gap: 1.75rem;
  margin: 0;
  padding: 1.1rem 1.4rem 1.4rem;
  position: absolute;
  top: calc(100% + .2rem);
  width: min(72rem, calc(100vw - 2rem));
  z-index: 40;
}

.product-nav-menu:hover .product-nav-menu__panel,
.product-nav-menu:focus-within .product-nav-menu__panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(9rem, 1fr));
}

/* The trailing entry: right-align the panel so it does not overflow
   the right edge of the viewport */
.product-nav-menu--trailer .product-nav-menu__panel {
  left: auto;
  right: 0;
}

.product-nav-menu__heading {
  font-size: .78rem;
  font-weight: 700;
  margin: 0 0 .35rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid;
}

.product-nav-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-nav-menu__links li {
  margin: 0;
}

.product-nav-menu__links a {
  display: block;
  font-size: .72rem;
  line-height: 1.35;
  padding: .28rem 0;
  white-space: nowrap;
}

.product-nav-menu__links a:focus,
.product-nav-menu__links a:hover {
  color: var(--md-accent-fg-color) !important;
}

/* Light color scheme */
[data-md-color-scheme="default"] .product-nav-menu__panel {
  background: #fff;
  color: #1f2937;
}

[data-md-color-scheme="default"] .product-nav-menu__panel a {
  color: #374151 !important;
}

[data-md-color-scheme="default"] .product-nav-menu__heading {
  border-color: #e5e7eb;
  color: #111827;
}

[data-md-color-scheme="default"] .product-nav-menu__links a:focus,
[data-md-color-scheme="default"] .product-nav-menu__links a:hover {
  background: #eef2ff;
}

/* Dark color scheme */
[data-md-color-scheme="slate"] .product-nav-menu__panel {
  background: #1e2129;
  color: #fff;
}

[data-md-color-scheme="slate"] .product-nav-menu__panel a {
  color: #d1d5db !important;
}

[data-md-color-scheme="slate"] .product-nav-menu__heading {
  border-color: #3a4150;
  color: #f9fafb;
}

[data-md-color-scheme="slate"] .product-nav-menu__links a:focus,
[data-md-color-scheme="slate"] .product-nav-menu__links a:hover {
  background: #363b47;
}

/* The panel needs this area to allow overflow outside the blue tab bar */
@media screen and (min-width: 76.25em) {
  .md-tabs,
  .md-tabs__list {
    overflow: visible;
  }

  .md-tabs__list {
    contain: none;
  }
}