/* Navigation Menu and Hamburger */
.menu {
  position: fixed;
  top: 0;
  left: -300px;
  width: 250px;
  height: 100vh;
  background-color: #1a2a4a;
  padding: 80px 20px 20px 20px;
  transition: left 0.3s ease;
  z-index: 500;
  box-shadow: 2px 0 10px rgba(0,0,0,0.3);
}

.menu.open { left: 0; }

.menu ul { list-style:none; padding:0; margin:0; }
.menu li { margin-bottom:20px; }
.menu a {
  color:#ffffff; text-decoration:none; font-size:18px; display:block;
  padding:10px; border-radius:5px; transition: background-color .2s;
}
.menu a:hover { background-color: rgba(255,255,255,0.1); }

/* overlay helper (if used) */
.menu-overlay {
  position: fixed; inset:0; background: rgba(0,0,0,0.5);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
  z-index: 480;
}
.menu-overlay.active { opacity:1; visibility:visible; }

/* Hamburger button (keeps same ID used by JS) */
#hamburger {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 600;
  width: 32px;
  height: 24px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}
#hamburger span{ display:block; width:100%; height:3px; background:#fff; border-radius:2px; transition: all .3s; transform-origin:center;}
#hamburger:hover{ transform: scale(1.05); }
#hamburger.active span:nth-child(1){ transform: translateY(10.5px) rotate(45deg); }
#hamburger.active span:nth-child(2){ opacity:0; transform: scaleX(0); }
#hamburger.active span:nth-child(3){ transform: translateY(-10.5px) rotate(-45deg); }
#hamburger:focus { outline:2px solid rgba(255,255,255,0.5); outline-offset:4px; }
#hamburger:focus:not(:focus-visible) { outline:none; }

/* ensure menu overlays page when open */
.menu { z-index: 500; }