/* ============================================================
   NAVIGATION & MOBILE MENU STYLES
   ============================================================ */

/* --- Hamburger Trigger Button --- */
.menu-toggle {
  display: none; 
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}

/* --- Hamburger Icon Lines --- */
.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--accent);
  position: relative;
  transition: background 0.3s;
}

.hamburger::before, 
.hamburger::after {
  content: '';
  width: 25px;
  height: 3px;
  background: var(--accent);
  position: absolute;
  left: 0;
  transition: transform 0.3s;
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* --- Mobile Drawer (70% Width Side Menu) --- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%; 
  width: 70%;
  max-width: 300px;
  height: 100vh;
  
  /* Frosted Glass Effect */
  background: rgba(219, 233, 238, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  padding-top: 100px; /* Space for the 'X' button area */
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  align-items: center; /* Centered links for cleaner look */
}

.mobile-menu a {
  font-size: 1.2rem;
  margin: 1.2rem 0;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

/* ============================================================
   INTERACTIVE STATES & ANIMATIONS
   ============================================================ */

/* Drawer Active State */
.mobile-menu.active {
  right: 0;
}

/* Hamburger to 'X' Animation */
.menu-toggle.active .hamburger { 
  background: transparent; 
}

.menu-toggle.active .hamburger::before { 
  transform: rotate(45deg) translate(5px, 6px); 
}

.menu-toggle.active .hamburger::after { 
  transform: rotate(-45deg) translate(5px, -6px); 
}

/* ============================================================
   RESPONSIVE SECTION
   ============================================================ */

@media (max-width: 930px) {
  .desktop-nav { 
    display: none; 
  }
  
  .menu-toggle { 
    display: block; 
  }
}