/* =========================================
   Responsive Mobile Styles
   ========================================= */
.menu-toggle {
  display: none; /* Hidden on desktop */
  cursor: pointer;
  font-size: 1.5rem;
  background: none;
  border: none;
  padding: 10px;
  color: inherit;
  z-index: 1000;
  position: relative;
}
@media (max-width: 768px) {
  body {
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: auto auto 1fr auto; /* Header, Menu (if open), Content, Footer */
  }
  .header {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .menu-toggle {
    display: block; /* Show on mobile */
  }
  .vertical_menu {
    grid-column: 1;
    grid-row: 2;
    border-right: none;
    border-bottom: 1px solid #ccc;
    display: none; /* Hidden by default */
  }
  .vertical_menu.open {
    display: block; /* Show when toggled */
  }
  .content {
    grid-column: 1;
    grid-row: 3;
  }
  .footer {
    grid-column: 1;
    grid-row: 4;
  }
}