/* Nature OT — shared mobile navigation. Loaded after page styles. */

/* --- Hamburger Button (Premium Feel) --- */
.hamburger { 
  display:none; 
  width:48px; 
  height:48px; 
  align-items:center; 
  justify-content:center; 
  flex-direction:column; 
  gap:5px; 
  flex:0 0 48px; 
  padding:0; 
  border:0; 
  background:rgba(255,255,255,0.1); /* Subtle glass effect */
  backdrop-filter: blur(4px);
  border-radius:12px; /* Soft rounded corners */
  color:#fff; 
  cursor:pointer; 
  position:relative; 
  z-index:102; 
  transition: background 0.3s ease, transform 0.2s ease;
}

.hamburger:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.05);
}

.hamburger__line, .hamburger > span { 
  display:block; 
  width:22px; 
  height:2px; 
  background:currentColor; 
  border-radius: 2px;
  transform-origin:center; 
  transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease; 
}

/* Elegant "X" Transformation */
.hamburger.is-open .hamburger__line:nth-child(1), .hamburger.is-open > span:nth-child(1) { 
  transform:translateY(7px) rotate(45deg); 
}
.hamburger.is-open .hamburger__line:nth-child(2), .hamburger.is-open > span:nth-child(2) { 
  opacity:0; 
  transform: scaleX(0);
}
.hamburger.is-open .hamburger__line:nth-child(3), .hamburger.is-open > span:nth-child(3) { 
  transform:translateY(-7px) rotate(-45deg); 
}

.mobile-nav, .nav-menu { display:none; }

@media (max-width:800px) {
  .site-header { 
    position:fixed!important; 
    inset:0 0 auto!important; 
    z-index:100!important; 
    isolation:isolate; 
    background: rgba(9, 11, 9, 0.95); /* Darker, more solid header on mobile */
    backdrop-filter: blur(10px);
  }
  
  .site-header .nav-links { display:none!important; }
  .hamburger { display:flex!important; }
  
  /* Slide-in Menu Panel */
  .mobile-nav, .nav-menu { 
    position:fixed!important; 
    top: 78px; /* Start below header */
    left:0; 
    right:0; 
    bottom:0;
    z-index:101!important; 
    display:flex!important; 
    flex-direction:column; 
    align-items:stretch; 
    gap:0; 
    min-height:calc(100dvh - 78px); 
    overflow-y:auto; 
    padding: 32px 24px!important; 
    background: #050505!important; /* Deep black for contrast */
    color:#fff!important; 
    visibility:hidden; 
    pointer-events:none; 
    opacity:0; 
    transform:translateY(-20px); 
    transition:visibility 0s linear 250ms, opacity 250ms ease, transform 250ms ease; 
  }
  
  /* Decorative top line */
  .mobile-nav::before, .nav-menu::before { 
    content:''; 
    position:absolute; 
    top:0; 
    left:24px; 
    right:24px; 
    height:1px; 
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); 
  }
  
  .mobile-nav.is-open, .nav-menu.is-open { 
    visibility:visible; 
    pointer-events:auto; 
    opacity:1; 
    transform:translateY(0); 
    transition-delay:0s; 
  }
  
  /* Refined Menu Links */
  .mobile-nav a, .nav-menu a { 
    position:relative; 
    z-index:1; 
    display:block; 
    width:100%; 
    padding:20px 0!important; 
    border:0!important; 
    border-bottom:1px solid rgba(255,255,255,0.08)!important; 
    border-radius:0!important; 
    background:transparent!important; 
    color:#e0e0e0!important; 
    font-family:'Space Grotesk', 'DM Sans', sans-serif!important; /* More modern font for menu */
    font-size:1.15rem!important; 
    font-weight:500!important; 
    line-height:1.3!important; 
    letter-spacing:.02em; 
    text-align:left!important; 
    text-decoration:none!important; 
    opacity:1!important; 
    transition: color 0.2s ease, padding-left 0.2s ease;
  }
  
  .mobile-nav a:hover, .nav-menu a:hover {
    color: #fff !important;
    padding-left: 8px !important; /* Subtle slide on hover */
  }
  
  .mobile-nav a[aria-current='page'], .nav-menu a[aria-current='page'] { 
    color:#2D7A46!important; /* Brand green for active state */
    font-weight: 700 !important;
  }
  
  /* CTA Button in Menu */
  .mobile-nav a:last-child, .nav-menu a:last-child { 
    width:100%; 
    margin-top:32px; 
    padding:16px 20px!important; 
    border:1px solid #2D7A46!important; 
    background: #2D7A46 !important;
    color: #fff !important;
    border-radius:12px!important; 
    text-align:center!important; 
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(45, 122, 70, 0.3);
  }
  
  body.menu-open { overflow:hidden!important; }
}

@media (prefers-reduced-motion:reduce) { 
  .hamburger__line, .hamburger > span, .mobile-nav, .nav-menu { transition:none!important; } 
}