/* Keep both macOS menu-bar icon tiles optically and geometrically identical. */
.hero-demo .menu-bar-cluster {
  --menu-bar-icon-width: 38px;
  --menu-bar-icon-height: 24px;
  --menu-bar-icon-radius: 7px;
  --menu-bar-icon-background: #595a5f;
}

.hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg,
.hero-demo .menu-bars {
  box-sizing: border-box;
  flex: 0 0 var(--menu-bar-icon-width);
  width: var(--menu-bar-icon-width);
  height: var(--menu-bar-icon-height);
  border: 0;
  border-radius: var(--menu-bar-icon-radius);
  background: var(--menu-bar-icon-background);
  box-shadow: none;
}

.hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg {
  display: block;
  padding: 4px 7px;
  color: #fff;
}

.hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg path:first-child {
  fill: #fff;
}

.hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg path:not(:first-child) {
  stroke: #fff;
}

.hero-demo .menu-bars {
  gap: 2px;
  padding: 0;
}

.hero-demo .menu-bars i {
  width: 2.6px;
  background: #fff;
  /* The tallest, fully opaque bar gives the group more visual weight on the
     right. Shift the complete glyph left so its optical center matches the
     geometric center of the tile. */
  transform: translate(-2px, -1px);
}

.hero-demo .menu-bars i:nth-child(1) { height: 5px; opacity: 0.52; }
.hero-demo .menu-bars i:nth-child(2) { height: 8px; opacity: 0.76; }
.hero-demo .menu-bars i:nth-child(3) { height: 12px; opacity: 1; }

.hero-demo .menu-bar-divider {
  height: 22px;
}

@media (max-width: 780px) {
  .hero-demo .menu-bar-cluster {
    --menu-bar-icon-width: 34px;
    --menu-bar-icon-height: 30px;
    --menu-bar-icon-radius: 9px;
    --menu-bar-icon-background: linear-gradient(180deg, #676970 0%, #55575d 100%);
  }

  .hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg,
  .hero-demo .menu-bars {
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
      0 2px 4px rgba(29, 29, 31, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .hero-demo .menu-bar-item:not(.menu-bar-volumekeys) > svg {
    padding: 5px 4px;
  }

  .hero-demo .menu-bars {
    gap: 2.4px;
  }

  .hero-demo .menu-bars i {
    width: 3px;
    transform: translateX(-2px);
  }

  .hero-demo .menu-bars i:nth-child(1) { height: 7px; }
  .hero-demo .menu-bars i:nth-child(2) { height: 12px; }
  .hero-demo .menu-bars i:nth-child(3) { height: 17px; }
}