/* ==========================================================================
   responsive.css: Media Queries & Mobile 3D Optimizations
   ========================================================================== */

/* Retina & High-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card, .navbar, .btn { border-width: 0.5px; }
}

/* 4K & Ultra-Wide Monitor Scaling */
@media (min-width: 2560px) {
  html { font-size: 18px; }
  .container { max-width: 1440px; }
}

@media (min-width: 3840px) {
  html { font-size: 22px; }
  .container { max-width: 1800px; }
}

/* Tablet view */
@media (max-width: 1024px) {
  .nav-links { gap: 1rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile & Small screens */
@media (max-width: 900px) {
  .mobile-toggle { display: block; }
  
  .nav-menu {
    position: fixed;
    top: var(--header-height); 
    left: 0; 
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: #FFFFFF;
    flex-direction: column; 
    align-items: flex-start;
    padding: 2rem; 
    gap: 1.5rem;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  }
  
  .nav-menu.open { transform: translateX(0); }
  .nav-links { flex-direction: column; align-items: flex-start; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  
  /* Disable heavy 3D transforms on mobile for performance */
  :root {
    --perspective: none;
  }
  .card {
    transform: none !important;
  }
}