/* RESPONSIVE — All media queries */
@media (max-width: 1100px) {
  .navbar { 
    padding: 1rem 1.5rem; 
    /* Ensure navbar has a solid background when menu is likely to be open */
    background: hsla(0, 0%, 4%, 0.95);
  }
  .nav-logo { position: relative; z-index: 100; }
  .nav-links {
    display: none; 
    position: fixed; /* Changed from absolute to fixed for better stability */
    top: 70px; /* Start below the navbar header area (approx height) */
    left: 0; 
    width: 100vw; 
    height: calc(100vh - 70px);
    background: hsla(0, 0%, 4%, 0.98);
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start;
    padding-top: 2rem; /* Reduced padding since container is now offset */
    padding-bottom: 2rem;
    gap: 1.25rem; 
    z-index: 99;
    overflow-y: auto;
    border-top: 1px solid hsla(270, 40%, 50%, 0.1);
  }
  .nav-links.open { display: flex; }
  .nav-link { font-size: 1.1rem; gap: 0.75rem; letter-spacing: 0.05em; }
  .nav-icon-box { width: 50px; height: 50px; background: hsla(270, 30%, 20%, 0.5); }
  .nav-icon { width: 26px; height: 26px; }
  .hamburger { display: flex; z-index: 100; }
  .sound-toggle { margin-left: auto; margin-right: 0.75rem; }

  /* Hide fixed side social links on mobile to prevent overlap/centering issues */
  .social-links { display: none; }
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { margin-top: 3rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .hero {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6rem 1.5rem 4rem;
  }
  .hero-avatar { width: 130px; height: 130px; margin: 0 auto 1rem; }
  .hero-title { font-size: 2.2rem; }
  .hero-card { text-align: center; padding: 2.5rem 1.5rem; }
  .hero-cta { flex-direction: column; }

  .section { padding: 5rem 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 1.75rem 1.25rem; }
  .footer-inner { flex-direction: column; text-align: center; }
  .projects-grid { grid-template-columns: 1fr; }

  .gh-stats-row { grid-template-columns: 1fr; }
  .contrib-chart-box { padding: 0.6rem; }
  .gh-profile-card { flex-direction: column; text-align: center; }
  .gh-meta-row { justify-content: center; }
  .contrib-header { flex-direction: column; gap: 0.5rem; text-align: center; }
}

@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr; }
}