/* Burger for the mobile menu (site-nav.css): below 768px, and only when JS runs,
   since without JS the nav is always visible. Four thin lines that turn into a
   thin X while the menu is open (aria-expanded, set by menu.js). */
.menu-toggle {
  display: none;
}

@media (width < 768px) {
  .js .menu-toggle {
    display: block;
    /* Above the open menu */
    position: relative;
    z-index: 2;
    /* Taller tap target than the icon */
    padding-block: var(--spacing-3);
  }
}

/* Outer lines: the borders. Inner lines: ::before and ::after. All 5px apart. */
.menu-toggle-icon {
  position: relative;
  display: block;
  width: 4.5rem;
  height: 16px;
  border-block: 1px solid currentColor;
  transition: border-color var(--transition);

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: currentColor;
    transition: transform var(--transition);
  }

  &::before {
    top: 4px;
  }

  &::after {
    top: 9px;
  }
}

/* The outer lines fade, the inner ones meet in the middle and cross: shortened
   to a third, the X is about 17px, centred where the burger was */
.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
  border-color: transparent;

  &::before {
    transform: translateY(2.5px) rotate(45deg) scaleX(0.33);
  }

  &::after {
    transform: translateY(-2.5px) rotate(-45deg) scaleX(0.33);
  }
}