/* styles/mobile-menu.css */
@media (min-width: 769px) {
  .navbar #theme-toggle,
  .navbar .theme-toggle--navbar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: 15px !important; /* Adds a nice gap between Register and the Moon */
    z-index: 100 !important;
  }
}
/* --- FORCE MOBILE MENU TO BE AN OVERLAY --- */
@media (max-width: 768px) {
  /* 1. Hide the desktop links normally */
  .nav-links, .nav-actions {
    display: none;
  }

  /* 2. THE DRAWER: Fixed Position = No Squishing */
  .nav-links {
    display: flex !important;
    flex-direction: column;
    position: fixed !important; /* CRITICAL: This makes it float */
    top: 0;
    right: -100% !important;    /* Hidden to the right */
    height: 100vh;
    width: 280px;
    padding-top: 80px;
    background: rgba(17, 17, 17, 0.98);
    backdrop-filter: blur(10px);
    z-index: 99999 !important;  /* On top of EVERYTHING */
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    transition: right 0.3s ease-in-out;
  }

  /* 3. OPEN STATE */
  .nav-links.open {
    right: 0 !important; /* Slide in */
  }

  /* 4. BUTTONS (Login/Register) */
  .nav-actions {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    bottom: 2rem;
    right: -100% !important;
    width: 280px;
    align-items: center;
    gap: 1rem;
    z-index: 100000 !important;
    transition: right 0.3s ease-in-out;
  }

  .nav-actions.open {
    right: 0 !important;
  }

  /* 5. HAMBURGER BUTTON */
  .menu-toggle {
    display: flex !important;
    z-index: 100001 !important; /* Must be clickable */
    position: relative;
  }

  /* 6. "X" ANIMATION */
  .menu-toggle.open .hamburger:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
  .menu-toggle.open .hamburger:nth-child(2) { opacity: 0; }
  .menu-toggle.open .hamburger:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}
/* --- FIX MOON ICON OVERLAP ON MOBILE --- */
@media (max-width: 768px) {
  /* Targets the exact ID and Class generated by theme.js */
  #theme-toggle,
  .theme-toggle--navbar {
    position: fixed !important;
    bottom: 30px !important;    /* Push to the bottom */
    left: 30px !important;      /* Push to the left */
    top: auto !important;       /* Strip JS inline styles */
    right: auto !important;     /* Strip JS inline styles */
    margin: 0 !important;       /* Strip JS inline margins */
    z-index: 999999 !important; /* Keep it above EVERYTHING */
  }
}