.ListMenu {
    width: 220px;
}

/* Remove default list styling */
.ListMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each menu item */
.ListMenu li {
    margin-bottom: 8px;
}

/* Button style */
.ListMenu a {
    display: block;
    text-decoration: none;
    background-color: #2c3e50;
    color: white;
    padding: 12px;
    border-radius: 6px;
    transition: 0.3s;
}

/* Hover effect */
.ListMenu a:hover {
    background-color: #3498db;
}

/* Sidebar menu */
.menu {
  position: fixed;
  top: 0;
  left: -295px;
  width: 295px;
  height: 100%;
  background: #f0f2f6;
  color: black;
  padding: 20px;
  box-sizing: border-box;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Open state */
.menu.open {
  left: 0;
}

.logo {
  width: 257px;
  padding-top: 60px;
  padding-left:0px;
  padding-bottom:   20px;
}

/* Toggle button (base) */
#toggleBtn {
  position: fixed;
  top: 15px;
  left: 10px; /* default (closed position) */
  width: 28px;   /* 👈 control size here */
  height: 28px;  /* 👈 control size here */
  cursor: pointer;
  transition: left 0.3s ease;
}

/* When menu is OPEN → move button INSIDE */
#toggleBtn.open {
  left: 283px; /* pushes it to menu edge */
  transform: translateX(-110%); 
  /* 👆 pulls it back inside slightly */
}

/* Wrapper acts as hover zone */
.menu-wrapper {
  position: relative;
}

/* Default visible */
#toggleBtn {
  opacity: 1;
  transition: 
    left 0.3s ease, 
    transform 0.3s ease, 
    opacity 0.2s ease;
}

/* When open → hide button */
.menu.open ~ #toggleBtn {
  opacity: 0;
  pointer-events: none;
}

/* When hovering wrapper (menu OR button) → show button */
.menu-wrapper:hover #toggleBtn {
  opacity: 1;
  pointer-events: auto;
}