/* mobile.css
   Mobile-specific overrides, applied via media queries. 
   Ensures the header and nav are fixed on small screens only.
*/

@media (max-width: 768px) {
    /* Show hamburger icon on mobile */
    .menu-icon {
      display: block;
      position: fixed;
      top: 15px;
      left: 15px;
      background: #333;
      color: #fff;
      padding: 4px 8px;
      cursor: pointer;
      font-size: 26px;
      border-radius: 5px;
      z-index: 1100; /* Highest so it's clickable */
    }
  
    /* Make header fixed on mobile */
    #site-content header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #333;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      z-index: 950;
      box-sizing: border-box;
      border-bottom: none; 
    }
  
    /* Nav menu off-screen by default */
    #nav-menu {
      position: fixed;
      top: 0;
      left: -250px; /* Hidden to the left */
      width: 250px;
      height: 100%;
      background: #333;
      transition: left 0.3s ease-in-out;
      padding-top: 60px; /* Space for fixed header */
      z-index: 1001;     /* Above the overlay */
    }
  
    #nav-menu.show {
      left: 0;
    }
  
    #nav-menu ul {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
    }
  
    #nav-menu ul li {
      width: 100%;
      margin: 0;
    }
  
    #nav-menu ul li a {
      display: block;
      padding: 15px;
      color: #fff;
      border-bottom: 1px solid #444;
    }
  
    /* Dark overlay behind the nav */
    .overlay {
      display: none;
      position: fixed;
      top: 0; 
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1000; /* Behind the nav but above page content */
    }
  
    .overlay.show {
      display: block;
    }
  
    /* Prevent content from hiding behind the fixed header */
    #site-content main {
      padding-top: 80px;
    }
  }