/* Home page additions that the compiled Tailwind CSS doesn't cover: mobile menu. */
.zl-mnav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 2.5rem; height: 2.5rem; margin-left: 0.5rem; padding: 0 0.65rem;
  border: 0; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.35); cursor: pointer;
}
.zl-mnav-toggle span { display: block; height: 2px; border-radius: 2px; background: #fff; }
.zl-mnav-toggle:focus-visible, .zl-mnav a:focus-visible { outline: 3px solid #fc7820; outline-offset: 2px; }
.zl-mnav {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; padding: 0.5rem 1.5rem 1rem;
  background: rgba(24, 24, 27, 0.96); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.zl-mnav a { padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-weight: 500; text-decoration: none; }
.zl-mnav a:last-child { border-bottom: 0; }
@media (max-width: 767px) {
  header [data-slot="button"] { margin-left: auto; }
}
@media (min-width: 768px) {
  .zl-mnav-toggle, .zl-mnav { display: none; }
}